pmuellr is Patrick Mueller, Senior Node Engineer at NodeSource.

other pmuellr thangs: home page, twitter, flickr, github

Tuesday, January 02, 2007

nc state parks mashup

Raven Rock State Park

I just completed my first 'mashup', of sorts. After I wrote my blog post on Raven Rock NC State Park, I realized the NC State Park system was fertile ground for a map-based mashup.

So I wrote one.

What I did:

  • Collected a bunch of information about the parks. Obviously the most painful part of this project. The format of the file is a bit odd, but that's because the URLs of the parks and names were easy to lift out of the html on the 'park chooser' page. The longitudes, latitudes took the longest to gather; I had a little Google Maps 'app' I had written that would dump the coordinates of map locations based on mouse clicks, just pasted that into the data file.

  • Started working on a small HTML + JS app using the Google Maps API. My thinking was that I'd have a program I'd run on the server to read the input text file, and generate JSON data, that the HTML + JS app I was going to write would then read, to populate the map. I had some problem with that:

    • Making the map 'widget' automagically resizeable was not immediately obvious, and I didn't really have a way to test whether the method I ended up using would work anywhere but Firefox 1.5. (Note I found this page from the Google Maps discussion group).

    • Getting additional content on the page, with the resizing map widget, seemed like it was going to be a royal pain. Apparently I'm lost without Motif form attachments. I'm pretty handy with CSS, but never really mastered the layout bits.

    • Curiously, the map data from maps displayed with the Google Maps API, and with the Google Maps page, are from different companies. TeleAtlas and NAVTEQ, respectively. According to the legend at the bottom of the maps. I could have sworn the maps were a little different, somehow, but then when I found Lake Norman State Park on the NAVTEQ map, and saw it was called Duke Power State Park on the TeleAtlas map, it was ... pretty obvious they were different. Other differences seemed to be that the TeleAtlas map seemed to show more rivers, and fewer streets.

    • Google Mapplications are missing some features found on traditional Google Maps, like, oh, all the trimmings around the map (email, print, directions, search nearby, etc). At one point during prototying, I included a link to Google Maps in the Mapplication popup windows for each park. Which is obviously kinda dumb.

    • I discovered KML, and after that, the HTML + JS was too much work.

  • I had already written a small Ruby program to generate the JSON based on on the park data file; I just swizzled it a bit to generate KML instead.

  • Added some code to get weather data and add it to the 'description' of the park, from Yahoo! Weather.

  • Put it up on on the ncParksMap project page at my web site.

  • Set up a cron job to rebuild the .kml file every so often.


Note that KML was originally designed for Google Earth, so you can open the .kml file in there,, and specify how often to refresh the file and what-not.

Note that Google Maps has been sometimes complaining that it can't find the .kml file. Not sure what's going on. Try refreshing the page if you see this.

Next mapplication: show surf reports at the beach, on a map.

No comments: