Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

Rendering Binary Shapefiles With JavaScript

July 22nd 2010

A Shapefile is a commonly used binary format that stores geometric data such as lines, points and polygons along with attribute information that describes what that geometric data represents.  Despite the term “shapefile,” a shapefile is actually a set of several files, three of which are mandatory to store the data comprising a “shapefile”.  The first of these files is the .shp file, which stores the actual geometric data.  Another file, the .shx file, is an index file that allows seeking forwards and backwards very quickly.  The last mandatory file in a “shapefile” is the .dbf file, which stores the attribute information for the geometric data.

Tom Carden has written a shapefile renderer in JavaScript using the HTML5 Canvas element.  It loads the binary data using an AJAX request, parses it, and renders it in the canvas element.  And it does it pretty quickly as well, as you can see in this demo, which renders an interactive map similar to Google Maps.  You can drag the map around, and zoom using your scroll wheel.  Since the files are binary, they are fairly small.  An equivalent file in a text format such as SVG would probably be much larger.

Very cool work!  You can check out the map demo here, some more complex demos here, and the source code on Github.