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.
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)
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 a crappy entry to come back into the blogging world with. But deal with it. I’ve been working hard lately on coming up with ideas for new types of geocaches. Clever hides, good places, fun challenges, and mostly new technology that could be brought into geocaching. My best idea, or the or I’m most…