Online Shapefile to GeoJSON Converter

Online Shapefile to GeoJSON converter

I have recently been thinking about some standard format for representing geographical data that can be used to create maps with JavaScript. Looking at Kartograph, RaphaelJS, and D3 I came to the conclusion that GeoJSON should really be the standard. I hate how jVectorMap and JQVMap, two similar jQuery mapping plugins, are using separate custom JavaScript object formats. They should use GeoJSON (or TopoJSON).

The other problem with using custom objects is the issue of conversion. I have previously converted some maps from jVectorMap to JQVMap, but what if you wanted to convert actual ShapeFiles into that JavaScript object format? jVectorMap comes with a python converter but it’s not a trivial task. There are many dependencies, like GDAL, and I experienced issues with the conversion itself. Even Kartograph’s python converter has these dependency issues, extra installations, and lack of support for Windows and Mac.

Most geographical data seems to be stored in shapefiles, a popular geospatial vector data format. It would be nice to have an online converter that would run in the browser, using HTML5 and simply let you drop shapefile and get GeoJSON. Then I could use d3 to do cool things with maps like this example of rendering a globe with different projections.

A little research landed me on Marc Harter’s Shapefile to GeoJSON converter which was inspired by Inspired by Tom Carden’s Shapefile JavaScript viewer. The only piece missing is actually allowing the end user to convert the files online by dropping one format and getting GeoJSON back. So, using some HTML5, I was inspired today to build an online Shapefile to GeoJSON converter.

While we are on this subject, I wanted to mention some other projects and converters. I loved this ESRI Shapefile creator in JavaScript and this python code will extract SVG paths and convert to JSON for use with RaphaelJS. MapShaper is a great online tool that will simplify an uploaded Shapefile and reduce its file size. There is also Bloch, but it’s python based. SVG scrubber is a similar concept but for SVG files. In terms of SVG, I really liked this SVG to HTML converter, SVG tester, and PHP SVG to JSON converter. Finally, this SVGKit is amazing and filled with many features and demos.

So, where do you find shapefile map data? I have found some pretty good shapefiles at US Census Bureau, DIVA-GIS, and Natural Earth Data. D-Maps is also really great but it offers maps in SVG format. In terms of SVG, there is also a lot of blank maps on Wikipedia.

Finally, since I mentioned some JavaScript frameworks above, I wanted to include some other JavaScript map engines. Polymaps, a project from simpleGeo is a great JavaScript library for generating maps and ModestMaps, from MapBox, is a great JS library for messing around with interactive maps. Also, I really like Winston Wolf’s Clickable Maps Project.

Update: I have tested this with various shapefiles so if you cannot get it to work, please make sure to leave a reference to your files in the comment (this way I can take a look).

If you are interested in learning more about TopoJSON, I think this example and article shows the benefits of that extension to GeoJSON.

Update:

Recently, I stumbled across File Bakery which lets you convert a zipped ESRI Shapefile or MS Access .accdb/.mdb file into CSV. Also, here is another Python based Shapefile to GeoJSON converter. Check it out.

External:

Ember.js Raphael.js Demo that lets you play with SVG Paths
ogr2ogr web client – lets you convert to/from GeoJSON
Flickr Shapefiles Public Dataset 2.0
JavaScript Shapefile Parser using Three.js
GeoJSON Lint and Viewer
GeoJSON Viewer by bbox, hash, or image tiles URL
GeoJSON Viewer
OpenLayers Vector Formats