PolyMaps and GeoCommons Data
Final Demo: US Ski Resorts on PolyMaps
Now, lets add some data. I have mentioned GeoCommons before, but I wanted to show how easy it is to find and visualize some interesting data sets from GeoCommons. You could just upload some data to GeoCommons and let them create a map for you but we are going to browse the website for uploaded geo data and make our own map. PolyMaps uses GeoJSON and GeoCommons allows you to transform their data sets into various formats so lets get started.
After browsing GeoCommons for a minute, I decided to use the US Ski Areas data set for our example because I love snowboarding and might want to revisit this visualization in the winter. You can see links to kml, shapefile, csv, atom, spatialite, and json representation of that data on GeoCommons page but I did not see GeoJSON anywhere. I would actually expect the json link to be formatted in GeoJSON but that was not the case, and the json file did not have geo data. I browsed around and found this GeoIQ post that explains how to pull GeoJSON features out of any GeoCommons data set and quickly arrived at the GeoJSON representation of US Ski Resorts. In summery, you only need to append features.json?geojson=1 to the main GeoCommons url and the data will be formatted in GeoJSON.
I should mention, however, that PolyMaps does support KML and they even have an PolyMaps KML example. If you glance at the code, it basically does some XML parsing, so GeoJSON is ideal, but you could just use the KML data set. The PolyMaps download also has other interesting map demos that are not shown online, like using jQuery Tipsy Plugin to create a PolyMaps Map that has markers with tooltips.
So, I downloaded the GeoJSON file and loaded it up in a PolyMaps map, here is the PolyMaps GeoCommons Demo. It’s amazing how simple it is to add this data to PolyMaps, 2 lines of code and everything works perfectly. Now, final touches. I switched to simple gray tiles from CloudMate but I think it makes sense to show some terrain for Ski resorts so I changed the tiles to a different tile set based on NASA Earth Observatory imagery. I also wanted to make the map markers more dynamic so that you can hover or click on a ski resort and get some information about it. I added tipsy and a callback load event on the tiles to pass the extra attributes from GeoJSON into the features. The code is very similar to the tipsy example but I also made tipsy work more like tooltips with hover (mouseover) instead of click (mousedown) events.
Here is the final demo, US Ski Resorts on a PolyMaps Map.
PolyMaps JSfiddle Example
PolyMaps ZIPScribble Map
GeoLocation – Browse geolocated Creative Commons photos taken from Panoramio, Flickr and Wikimedia Commons websites
Google Geo Chart (uses SVG or VML)
WikiPedia Blank SVG Maps
Noncontiguous cartogram rendered in Polymaps
Measuring Distance with D3 and PolyMaps