PolyMaps and GeoCommons Data

Last updated on June 7, 2013 in Development

PolyMaps and GeoJSON

Final Demo: US Ski Resorts on PolyMaps

PolyMaps is a free JavaScript library for making dynamic maps using tiled vector data in spherical mercator projection. In other words you get a full-fledged slippy maps (image tiles, pan, zoom, etc) library that works with SVG. This is very similar to my geo example with D3, but D3 is more of a visualization library with geographical capabilities while PolyMaps is more focused on just mapping. PolyMaps has nice documentation and examples, and it was a breeze to create a simple map.

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.