Setting up the Hiking Website

Even though my waterfalls site turned out to be a great way to chronicle adventures through wilderness, it has several areas that are lacking. The biggest area is the Google Maps functionality, which is shaky at best. It can only show the end points and major points along the route, but I didn't have enough data to actually upload the suggested route (waypoint by waypoint) for each journey. Also, I didn't have any way of displaying or archiving my other adventures with the waterfalls site, so I decided to make an individual web project: the hiking site.

The layout for this site was fairly simple: a full screen map with removable sidebar containing the hike and view options. Utilizing the jQuery framework would allow me to add the Google Maps pieces easily and use cool animation on different elements. The largest step was the data transfer. I only wanted to return xml, preferably formatted as KML, and use Javascript to parse the data and display it correctly.

Breaking it down to the user's view... A user will visit the main page and see a large map and a small sidebar. On the map will be icons, either for images or hikes, and the sidebar will contain links to different hikes and viewing options (view all points of interest v some points). Everything will be handled by Javascript: when a user clicks a hike, it will load the route and zoom into the map. If a user makes a change to the view, it will reload the icons immediately. No page refreshes will be needed to view new content.

For a non-web programmer, this site will include a vast amount of hikes, images, and points of interest collected by me over the last year. Users interested in a good adventure through the Upper Peninsula will be able to view different hikes, find one that's good for them, and view images and waypoints along the route. Other users, simply curious about the adventures and shenanigans available in the Upper Peninsula can scroll around the map and see different images and cool points.

Future plans for this site, which may or may not be completed soon, include a hike creator, topographic profile, and download option. Users could create a route by point/click on the map, viewing the elevation changes and route length, then download it in a format of their choosing. A topographic profile would also be an interesting feature to show with each hike, though that information is not directly available from Google Maps. The download option would have to parse the data from Javascript, either with or without a server call, and offer it as a KML, XML, GPX, or any other popular geo-format.

Overall, this site was a great learning lesson for jQuery and Google Maps API. My previous attempts with Google Maps were clumsy at best, often involving parsing the Javascript with PHP first, but I feel that this project has a clever implementation and methodology. Once it's up and ready, I also plan on creating a rough request system of my own to allow external sites to hook up and read from my hiking information databases, but that's also down the road.