Introduction

In this blog post I’ll show how an inverse distance weighted interpolator (IDW) can be applied with Turf.js. My blog post can serve as a tutorial for you, to try yourself to interpolate own data sets with Turf.js (e.g. temperature data).

The example uses a set of geocoded rental data of 3-room, apartments located in the city of Potsdam (fetched on the 19th of March).

From an analytical viewpoint, the resulting map isn’t that useful and just shows a spatial trend of the rental offers rental costs in € without service costs. Absolute prices had to be interpolated, as the apartment sizes in the fetched data were missing.

IDW actually is one of the least applicable spatial interpolators for rental data, due to known effects as bull eyes; but Turf.js´s client side processing is in heavy development and for sure other interpolation algorithms will be integrated soon. So far Turf.js is capable to interpolate isolines, plane points, triangulated irregular networks and IDW. If you are interested how IDW works, I can recommend the interpolation tutorial on Gitta Info: http://www.gitta.info/ContiSpatVar/de/html/Interpolatio_learningObject2.xhtml

The map

Turf.js IDW example

The resulting map is styled as choropleth map, using the leaflet.jschoroplet plugin. The example geoprocesses the GeoJson data with the turf.js´s IDW plugin by Michele Ferreti. His turf-inverse-distance-weighting module was accepted as part of the turf.js library. He also hosts an example of a Leaflet.js, Turf.js IDW vizualisation, which served as basis for my tutorial.

Relevant code blocks

In the body of the document, several JavaScript libraries have to be integrated. That’s first leaflet.js for the map canvas and the functions of the slippy map, second turf.js,for the interpolation and choropleth.js, that styles the resulting map as choropleth map and creates the map legend.

After setting the parameters for the leaflet.js map canvas and after integrating the TileMapService for the base map,
the GeoJson file with the points for the interpolation has to be integrated to the script. Unlikely external referencing
via Ajax can’t pass the points to the interpolator. Therefore, the script soon can get quite long, which can be confusing.

In the next section, the actual interpolation is realized by the turf.idw function. The attribute of the GeoJson to be interpolated, the power of the interpolation, the cell size of the resulting grid and the measurement units have to be defined.