Turf.js: Adding Markers to a Line at Specific Intervals

16 Feb

If it is not obvious, I love Turf.js. As I start to use it in my production work, I am always looking at the possibilities it opens up for my applications. So far, I have only been using simple buffers to help create my query geometry to send to ArcServer. And in that simple regard, it has cut down my workload significantly. I am always looking for new ways I can use Turf.js to solve problems and I think I found one. In this post, I will show you how to add markers to a line segment at specified intervals.

 

Result: Markers added every mile along I-40 Segment

Result: Markers added every mile along I-40 Segment

My Work

I do a lot of web mapping for road work. I currently have an application that allows a user to draw a line along a road to specify where they would like to work. Knowing the length of the work area and seeing it broken in to intervals could be very useful for me later in the process.

Turf for Distance

The first thing I need to do is convert a line from Leaflet,js to use in Turf.js. Leaflet to Turf is simple. Take a Leaflet geometry and call .toGeoJSON() on it. now you have an object that can be used with Turf. To get the length of a line using turf, you just use .lineDistance(line, units).

var l = L.polyline([[35.05586,-106.82007],[35.06204, -106.7926],
[35.10699, -106.70334],[35.10474, -106.67313],
[35.10671, -106.65287],[35.10559, -106.62987],
[35.10755, -106.6151],[35.10362, -106.58627],
[35.06232, -106.48121]]);

var jsonLine=l.toGeoJSON();
var length = turf.lineDistance(jsonLine, ‘miles’);
var dist=Math.floor(length);

The code above creates a line along I-40. It is then converted to GeoJSON and the length is calculated in miles using Turf. I use Math.floor to round down by removing the decimal places.

Add Markers at Mile Intervals

You can add a marker at an interval using turf.along(line,distance,units). This is great, but it only adds a single point. We need to setup a loop that drops markers every mile. We grabbed the distance for this purpose.

The first thing to do is create he result object and add the line to it.

var result = {
“type”: “FeatureCollection”,
“features”: [jsonLine]
};

Next, we will setup a loop that adds a marker for every mile along the line. The loop adds the result to the result features array.

for(step=1;step<dist+1;step++){

result.features.push(turf.along(jsonLine, step,’miles’));

}

Now you can add the result to the map.

L.geoJson(result).addTo(map);

Turf works effortlessly with Leaflet. Leaflet to Turf using toGeoJSON() and Turf to Leaflet using L.geoJson().

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

%d bloggers like this: