Proximity Analysis with Turf.js

Turf is a great little JavaScript library for browser-based spatial analysis. I toyed around with it a bit and made a simple little map that performs proximity analysis on a set of points. Here’s the final product:

http://chinmayms.com/maps/turf_distances.html

Premise

A set of points are distributed around a central location. Turf is then used to calculate the distance between the centre and each of the surrounding points. The points are then classified according to the distance from the centre.

The Process

I needed to get a suitable dataset. Having no immediate access to GIS tools meant subsetting would be hard so I created my own data instead using http://geojson.io/. No data constraints meant I could use any base map I wanted so I went with the Palm Jumeirah. Here’s the GeoJSON if you want to reuse it: http://pastebin.com/CLhs7eTu.

Next, I used Mapbox to set up a pretty map, get it to point at the right place and imported the GeoJSON into a FeatureLayer. The centre point was not included in the original data, so I added it as a separate point for ease of use:

var points = L.mapbox.featureLayer(geojson);

var centre = L.mapbox.featureLayer({ type: ‘Feature’, geometry: { type: ‘Point’, coordinates: [ 55.13089656829833, 25.119836259514056 ] }, properties: { ‘marker-size’: ‘large’, ‘marker-color’: ‘#F2F3F1’, ‘marker-symbol’: ‘circle’ } });

Turf provides a very neat distance function which calculates the distance between two points on the map. What’s great about it is that it uses the Haversine formula to account for the Earth’s curvature. I needed access to the actual coordinates of the features so that mean’t extracting data from the FeatureLayers I created. Two new variables served the purpose of storing the extracted data:

var pointFeatures = points.getGeoJSON(); var centreFeatures = centre.getGeoJSON();

I could have used the original GeoJSON, but it could pose problems were I to develop this code into something bigger.

Up next is the actual distance calculation. A for loop gets each individual point and the distance function calculates it’s distance from the centre. for(var i=0;i<pointfeatures.features.length;i++) { var distance = turf.distance(centreFeatures,pointFeatures.features[i]); }

And that’s the basics covered. All that comes next is presenting the processed data in a meaningful way. I created a chloropleth map that divides the calculated distances into ranges. These ranges are then used to colour-code a marker for each point. This is the final function:

function calculateDistances() { for(var i=0;i<pointfeatures.features.length;i++) { var distance = turf.distance(centreFeatures,pointFeatures.features[i]);

if(distance<=1.3) { pointFeatures.features[i].properties[‘marker-color’] = ‘#F0BD55’; } else if(distance>1.3 && distance<=1.88) { pointFeatures.features[i].properties[‘marker-color’] = ‘#5C90A7’; } else if(distance>1.88) pointFeatures.features[i].properties[‘marker-color’] = ‘#D83B38’;

} points.setGeoJSON(pointFeatures); }

And that’s it. The rest of the code is just adding a reset() function to set the map to its original state, binding the calculateDistances() function to a click event on the centre point and instructions on how to use the map.

All in all, Turf is a very valuable tool for web mappers and I can’t wait to carry out some analysis with actual data.