Live Scenario Planning in Leaflet.js with Turf.js

22 Jan

When I started scenario planning, I had to run my data through a model to get some output. To try a new scenario, I had to rerun the model with new data and then compare the outputs. The process was slow. With the tools currently available, we can do better. I wrote a simpl live scenario planning application using Leaflet.js using Turf.js as the “model”. I put model in quotes because for the example we will simply sum a field in each marker.

The application showing the values of two fields in our data.

The application showing the values of two fields in our data.

The above image is my application. It takes points in Albuquerque and sums two different fields and displays the results in a bar chart below. The application starts as follows:

1. Create a Leaflet.js Map.

var map =‘map’, {
center: [35.10418, -106.62987],


2. Add my base scenario points and a polygon for the area of interest.

var p1 = turf.point(-106,35, {“marker-color”: “#6BC65F”,”title”: 100, “description”: “Not in Polygon”, “someOtherProperty”:3 });
var p2 = turf.point(-106.62987,35.10418, {“marker-color”: “#6BC65F”,”title”: 4, “description”: “In Polygon”, “someOtherProperty”:6 });
var p3 = turf.point(-106.64429,35.14125, {“marker-color”: “#6BC65F”,”title”: 1, “description”: “Also in Polygon”, “someOtherProperty”:5 });

var polygon = turf.polygon([ [
[-106.73355,35.21197],[-106.73355,35.04911],[ -106.51932,35.04911],[-106.49872,35.19177]
]], {
“fill”: “#6BC65F”,
“stroke”: “#6BC65F”,
“stroke-width”: 5,
“description”:”A sample polygon”

var p = turf.featurecollection([polygon]);
var t = turf.featurecollection([p1,p2,p3]);

3. Add the Turf.js points to the map as GeoJSON in Leaflet.js

function onEachFeature(feature, layer) {

layer.bindPopup(“<h3>Add this number: “”</h3>”;

L.geoJson(t, {
onEachFeature: onEachFeature

4. Using Turf.js, get the sum of the base scenario for two fields.

var sum = turf.sum(p,t,”title”,”titleOutput”);
var sum = turf.sum(p,t,”someOtherProperty”,”otherOutput”);

5. Setup both charts using the base scenario. The example only shows the code for the first chart.

var data={
labels: [“Title Value”],
datasets: [
{label: “Title Value”,
fillColor: “rgba(151,187,205,0.5)”,
strokeColor: “rgba(151,187,205,0.8)”,
highlightFill: “rgba(151,187,205,0.75)”,
highlightStroke: “rgba(151,187,205,1)”,
data: [sum.features[0].properties.titleOutput]}]};

var ctx = document.getElementById(“myChart”).getContext(“2d”);
var myBarChart = new Chart(ctx).Bar(data);

6. Hold the value we will change in a variable so we can change it later.

var x=sum.features[0].properties.titleOutput;

7. Setup an onclick method to modify the scenario. The method will add a marker and provide a textbox to set a value.

L.marker(e.latlng).addTo(map).bindPopup(‘Add Title Value:<input type=”text” id=”v”><br><button onclick=”add()”>Add</button>’).openPopup();

8. Lastly, when the user clicks the button on the new marker, we update the scenario and redraw the chart.

function add(){
var d = {
labels: [“Title Value”],
datasets: [{
label: “Title Value”,
fillColor: “rgba(151,187,205,0.5)”,
strokeColor: “rgba(151,187,205,0.8)”,
highlightFill: “rgba(151,187,205,0.75)”,
highlightStroke: “rgba(151,187,205,1)”,
data: [x]}]};
myBarChart= new Chart(ctx).Bar(d);

If you add a point in the study are, you can add a new Title Value and the chart will update as in the image below.

Title Value is now 10.

Title Value is now 10.

This is a simplistic example but it shows the possibilities for live updating a dashboard as the data changes. This method allows for quick iterations in your models.


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: