Jump to content

Rendering Binary Shapefiles With JavaScript


Recommended Posts

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.

see the demo here :




you can download the script for free here :




Link to comment
Share on other sites

  • 1 month later...
  • 3 weeks later...
  • 2 weeks later...
  • 4 weeks later...
  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

By using this site, you agree to our Terms of Use.



If you enjoy our contents, support us by Disable ads Blocker or add GIS-area to your ads blocker whitelist