danryan.us

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.