Density Map with Turf.js

18 Feb

In a previous post, I showed how to interpolate using a TIN and Turf.js. Turf.js has other interpolation tools and in the post, I will show you how to construct a dot density map using the hex feature.

The Application

For this application, we will use Albuquerque Air Pollution Sources data and map which parts of the city have the highest density of pollution sources.  The application is available on JS Bin and will look like the image below.

The I-25 Corridor contains the highest density of pollution sources.

The I-25 Corridor contains the highest density of pollution sources.

How to Create the Application

To create this application, we will need to reuse the inside function as we did in the post on TINs. Instead of searching the TIN object, we will search the HEX object. the first step is to construct the hex grid over Albuquerque. to do so, we need to specify the bounding box and size of the hexagons.

var bbox = [-106.754150390625, 35.02887183968363,-106.47674560546875, 35.18615531474442];
var size = .01;
var hexgrid = turf.hex(bbox, size);
for(var x=0;x<Object.keys(hexgrid.features).length;x++){

In the above code, we iterated through the grid and added a property to each hexagon called count. This is where we will store the point count for each hexagon.

Next, we can setup the function for coloring the GeoJSON hexagon grid when we are done. I stole this straight from the leaflet.js website. I only changed the values in getColor().

function getColor(d) {
return d > 15 ? ‘#800026’ :
d > 13 ? ‘#BD0026’ :
d > 11 ? ‘#E31A1C’ :
d > 6 ? ‘#FC4E2A’ :
d > 4 ? ‘#FD8D3C’ :
d > 2 ? ‘#FEB24C’ :
d > 0 ? ‘#FED976’ :

function style(feature) {
return {
fillColor: getColor(,
weight: 2,
opacity: 1,
color: ‘white’,
dashArray: ‘3’,
fillOpacity: 0.7

We will add the Albuquerque Pollution Sources to the map using our standard AJAX code. Each point will be converted to GeoJSON and pushed to an array.

var params=”f=json&outSR=4326&outFields=*&where=1=1″;
var url = “;;
http=new XMLHttpRequest();“POST”, url, true);
http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
var result= JSON.parse(http.responseText);

var t = L.marker([result.features[x].geometry.y,result.features[x].geometry.x]);//.addTo(map);

When we have all the points, we call countem() to create the dot density map.

function countem(){

for(var y=0;y<Object.keys(hexgrid.features).length-1;y++){

for(var c=0;c<p.length-1;c++){
var poly=turf.polygon(hexgrid.features[y].geometry.coordinates);

} //end 2nd for
}//end 1st for

L.geoJson(hexgrid,{style: style}).addTo(map);}

The above code creates a loop for each hexagon in the grid. The second loop iterates through each point and tests if it is in the hexagon. If it is, we add 1 to the count. When we have tested every hexagon, we add the grid to the map as GeoJSON and color it.

To Do

This would be a great application to use with the Albuquerque Crime data. I tested it and there are several incidents missing coordinates, so I stuck to something simpler for our proof of concept.


One Response to “Density Map with Turf.js”


  1. Crime Density in Albuquerque | Architecture and Planning - February 23, 2015

    […] posted earlier on Air Pollution Density in Albuquerque. I used pollution sources because the crime data was missing x,y values. In this post, I will add a […]

Leave a Reply

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

You are commenting using your 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

%d bloggers like this: