Convert Shape File to GeoJSON and Add to Page

00b.gif Download this zip archive of 1940 Oakland Census Areas shape files.

In QGIS, examine your layer's shape file to determine its CRS. Make a note of the EPSG number.

Zip up (compress) your .shp, .dbf, and .shx (.prj optional) into a single .zip file

Go to Ogre, a web service that translates spatial files into GeoJSON using the ogr2ogr tool, upload the zip file, and convert.


The GeoJSON will look something like this

var x = {"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::4269" } },
"features": [{ "type": "Feature",
"properties": { "ID": 1.0, "TRACT": "1", "TRACT_2": "1", "POPULATION": 527.0},
"geometry": { "type": "Polygon",
"coordinates": [ [ [ -122.238579, 37.857326 ], [ -122.23918, 37.857226 ],
[ -122.240179, 37.857226 ], [ -122.241579, 37.857326 ],

Save the result as filename.geojson. The conversion saves all the features in the shapefile as a single GeoJSON object of type "FeatureCollection."


Note: The GeoJSON file will likely be very large. In practice we will probably keep it in a separate file and use a bit of Leaflet/Javascript to load it into a variable in our script. For this example, though, we'll just put it right into the code.

We will assign this object to a variable (here, x):

var x = {"type": "FeatureCollection",
"crs": ...

We will use Leaflet's geoJson class to display the layer on the map. The generic syntax will look like this:

L.geoJson( <GeoJSONObject, <GeoJSON options>)]

and we'll append the addTo(mapobject) method we have seen before.

L.geoJson(x, {}).addTo(ourmap);

We'll make a few other tweaks for display on this page but you can keep the original values. The <div> size has been reduced to 300x300 and the zoom changed to 10.

04b.gif AddingGeoJSONlayer.gif