Using GeoJSON with Leaflet

city park with buildings in background

Last November, I presented an introductory session on the GeoJSON data format at the Central PA GIS Day event in Harrisburg, PA.  I also have a GeoJSON/Leaflet pen on CodePen that has been getting decent traffic lately.  With these things in mind, I thought I’d share a some thoughts about GeoJSON. My presentation and demos from the GIS Day event are available on GitHub.

GeoJSON is essentially a geographic version of JSON (JavaScript Object Notation). It is another way to share geodata across the web and internet. Some other common ways are Esri REST services, Open Geospatial Consortium services, and Keyhole Markup Language (KML). In my work with Cumberland County, I use Esri REST services almost exclusively. But I have some side projects in which I plan to use GeoJSON.

A single GeoJSON file can contain a mix of geometry types. The example from my presentation included points and polygons. The points are cultural sites around Harrisburg, and the polygons are parks. The information related to the geometry type and coordinates are stored in the Geometry object. The coordinates represent the vertex/vertices. This is similar to the Shape field in a shapefile.

geojson-snippet
Sample GeoJSON file

 

While you can have a GeoJSON file containing only location information, you can also have features which contain properties. The properties are similar to the attribute fields in a shapefile. For the Harrisburg sites, there are properties for name, address, and website. When developing a web map, these properties can be used to generate content for popups that is unique for each feature. You can also use the properties to symbolize features into groups. For example, if you had a zoning district data and a property named “District,” you could display each zoning district with a unique color, similar to a printed zoning map.

 

var zoningDistrict = new L.GeoJSON.AJAX('path/to/zoning.geojson', {
    style: function (feature) {
        // placeholder for fill color
        var fillColor;

        // GeoJSON feature property for zoning district
        var district = feature.properties.DISTRICT;

        // Switch statement based upon zoning district
        switch(district) {
            case 'Residential':
                fillColor = '#ffA500';
                break;
            case 'Commercial':
                fillColor = '#ff0000';
                break;
            case 'Industrial':
                fillColor = '#800080';
                break;
            default:
                fillColor = '#008000';
        }

        // return symbol properties for zoning districts
        return {
           // outline color
            color: '#fff',
            // outline width
            weight: 2.5,
            // fill color based upon switch statement
            fillColor: fillColor,
            // fill opacity
            fillOpacity: 0.5
        }

    }
}).addTo(map);

 

screenshot of a popup for a leaflet web map
Sample popup for a GeoJSON feature in a Leaflet web map

 

If you plan on using GeoJSON with the Leaflet.js library, there are a few ways you can add the data. You could use a vanilla JavaScript AJAX call, jQuery’s getJSON method, or the Leaflet AJAX plugin. I’ve created a CodePen that illustrates the first two methods.

Maybe you’ll want to use GeoJSON in your next web map project!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s