Leaflet GeoJSON pointToLayer

I make a lot of choropleth maps for my day gig, so when I was working on a fun side project using Leaflet’s library that would include points I got pretty giddy. At first I hit a few brick walls and was thinking to myself, “How in the world can I map these ^$@&*! points?” After lots of struggling, lots of Googling, and quite a bit of head pounding I finally found something that worked.

Fast forward a few months later… I was asked to put together an interactive map for my office that included points. WOAH! I was pretty ecstatic to branch out of the norm. And again, I hit the same roadblocks, until I remembered I had a similar experience only a few months ago.

I realized, unlike polylines and polygons, points were a little trickier. By default, simple markers are drawn for GeoJSON points. However, using the pointToLayer option we can create a circleMarker (more on that later). Leaflet recently updated their documentation, and they added more documentation on this subject, but I wanted to post this for others.

So let’s take a look at the steps needed to add points to a Leaflet map…

The code

Before getting started, add the Leaflet library to your code. The CSS file should be included in the head section of your document, and the JavaScript file should be located after the HTML content (for faster loading), but before any JavaScript content [Note: This example is shown with Leaflet JS version 0.7.3)]:

<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

In the HTML, add the map <div>. In this example we’ll be setting the map to 600 pixels by 400 pixels on the page:

<div id="map" style="width: 600px; height: 400px"></div>

In the JavaScript define the map, its extent, and coordinates. This example focuses on Duluth, Minnesota:

var map = L.map('map', {
	center: [46.7830, -92.1005],
	zoom: 15
});

Next, add in a basemap for reference (e.g. OpenStreetMap Mapnik). We’ll also set it to be on by default when the map loads using addTo(map):

var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

Now we’ll add the GeoJSON to the map using the style function (Note: the GeoJSON itself isn’t shown below, but is included in the final code below). In the example, we’ll be returning the color green:

geojsonLayer = L.geoJson(geojson, {
    style: function(feature) {
        return {
        	color: "green"
        };
    }
});

Now that we’re telling the GeoJSON to style with the color green we need to convert the points to a layer. The function will then pass a Lat/Lng allowing us to extend our GeoJSON styling options.

To do so, we’ll call the pointToLayer function. Since we’re dealing with points, we can return L.CircleMarker (L.Marker also works). From there we can set our parameters. In this case a circle radius of 10 pixels and fill opacity of 85% was set.

geojsonLayer = L.geoJson(geojson, {
    style: function(feature) {
        return {
        	color: "green"
        };
    },
    pointToLayer: function(feature, latlng) {
        return new L.CircleMarker(latlng, {
        	radius: 10, 
        	fillOpacity: 0.85
        });
    }
});

Because I like popups in my examples I added in the onEachFeature function that will bind a popup to the layer. In this case the geojson has a field with NAME in it and it is accessed using feature.properties.NAME. After the function, add the geojsonLayer to the map by using map.addLayer(geojsonLayer):

geojsonLayer = L.geoJson(geojson, {
    style: function(feature) {
        return {
        	color: "green"
        };
    },
    pointToLayer: function(feature, latlng) {
        return new L.CircleMarker(latlng, {
        	radius: 10, 
        	fillOpacity: 0.85
        });
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.NAME);
    }
});

map.addLayer(geojsonLayer);

HOORAY! We did it! 😛

Here’s the final code (including the GeoJSON content):

And a screenshot of the final map:

MapCapture

That’s it – now let’s go add some points to some Leaflet maps!

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