No, Simulated LPC Experience, is not the name of a band, rather it’s the name of a new geocache here in Charlotte.

The ever creative RVStauff had an idea for creating a “puzzle” in VB that a cacher would have to download and solve before being able to find the actual physical cache.  But after some discussion on the Greater Charlotte Geocaching Club’s forums (GCGC) it was decided that many people would probably not be willing to download and run an executable on their machine so I got with RVStauff to create his idea web based.

After seeing his original idea run as an actual program I immediately had a few ideas in my head of things to try.  The first hurdle was that he had a static screenshot of a map and a picture of a GPS that would update a distance label depending on where you clicked.  My mind immediately told me to implement this using the Google Maps API.  Using the google map API I could start the user experience off by zooming out over the entire United states.

RVStauffs vision

My Spin

The challenge with what I had in mind was that I wanted an arrow that pointed in the correct direction to more fully simulate the “caching experience.”  To get the effect I was looking for I had to implement a few great JQuery plugins.  After all, why reinvent the wheel?

The most helpful plugin I used was JQuery Rotate.  All it really does is take an image, or div, or any other type of element and rotate it.  It was simple to use, and understand.  Once I had this plugin installed all I had to do was get my arrow positioned correctly and let the rotating fun begin.  Well, that is of course after I figured out the angle in which I needed to rotate it based on the click in the google map.

What came in handy when figuring out the angle was Google’s own geometry classes.  by making a simple call to the computeHeading method I would quickly and easily have the data I needed in order to make the spin complete.

<br /> clickLoc = new google.maps.LatLng(35.1407667, -80.6243333);<br /> dest = new google.maps.LatLng(34.114667, -83.6255633);<br /> var heading = google.maps.geometry.spherical.computeHeading (clickLoc , dest ) ;<br /> //Depending on how you draw and originally place your arrow you may need to adjust the math on the rotation.<br /> $('#directionArrow').rotate(heading - 180);<br />

Now that the arrow was done, which I thought was going to be the hard part, I moved onto the distance. Once again Google saved the day with their google.maps.geometry.spherical.computeDistanceBetween method.  None of this proved to be as challeneging as i thought, but I still learned a lot.

The second phase of this cache had users clicking what amounted to an HTML image map with 5 options, each of which have a different outcome.  No real challenge here other than to semi obscure the final coords behind a php page that you users can’t freely get to without posting  expected parameters.  (I find this part boring so I’m not going to discuss it)

Lastly, RVStuaff wanted to try to find a way to simulate a log sheet.  So I hacked up a quick and dirty way for this to happen.  It all starts with the page initially loading.  That load will prompt the user to enter their caching name which will be stored in a javascript variable.  Once the user “find the cache” that name, the total number of clicks, and the date/time of the find is written to a file on the server.  YES, a file, not to a database.  Why?  Because I was lazy and didn’t feel like implemented a whole UI to edit the “junk” names that come in, and I didn’t want to give anyone access to the backend database.  All of this is once again done using php to append new records to the file.  There is even an ugly interface for RVStauff to edit any erroneous, extra, or useless logs that may come in.

Well there it is.  A Simulated LPC Experience.  It may not be the prettiest UI in the world, but it is all there and it works.

What do you think of it?