Posted on Jul 19, 2023

Trying Out Various Turf.js

I've been experimenting with Turf.js 🎉

Turf.js is an open-source geospatial analysis library that can process various location data, such as the center of gravity and distance calculations.

I have written an article on "dayjournal memo," in which I tested more than 50 different functions of Turf.js. I would like to introduce five features that I recommend!

The following is a detailed explanation.

Advance Preparation
Buffer creation
Extracting points contained in polygons
Polygon center of gravity acquisition
Acquisition of position on a line at a specified distance
Obtain self-intersection of polygon

Advance Preparation

Use the built environment to get started on Turf.js easily.

https://github.com/dayjournal/turfjs-starter

Buffer creation

Create a buffer from points.

src/main.ts

const point = turf.point([139.770, 35.676]); map.addSource("FeaturesPoint", { type: "geojson", data: point }); map.addLayer({ id: "FeaturesPoint", type: "circle", source: "FeaturesPoint", layout: {}, paint: { "circle-pitch-alignment": "map", "circle-stroke-color": "#1253A4", "circle-stroke-width": 5, "circle-stroke-opacity": 0.8, "circle-color": "#1253A4", "circle-radius": 5, "circle-opacity": 0.5 } }); const buffered = turf.buffer(point, 10, { units: "kilometers" }); map.addSource("PolygonSample", { type: "geojson", data: buffered }); map.addLayer({ id: "PolygonSample", type: "fill", source: "PolygonSample", layout: {}, paint: { "fill-color": "#58BE89", "fill-opacity": 0.5 } }); map.addLayer({ id: "PolygonLineSample", type: "line", source: "PolygonSample", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#58BE89", "line-width": 5, "line-opacity": 0.8 } });

Extracting points contained in polygons

Extract points contained within a polygon.

src/main.ts

const points = turf.randomPoint(30, { bbox: [139.7533, 35.6713, 139.7808, 35.6901] } ); map.addSource("RandomPoint", { type: "geojson", data: points }); map.addLayer({ id: "RandomPoint", type: "circle", source: "RandomPoint", layout: {}, paint: { "circle-pitch-alignment": "map", "circle-stroke-color": "#8DCF3F", "circle-stroke-width": 10, "circle-stroke-opacity": 0.8, "circle-color": "#8DCF3F", "circle-radius": 10, "circle-opacity": 0.5 } }); const polygon = turf.polygon([[ [139.7661, 35.6759], [139.7718, 35.6741], [139.7722, 35.6745], [139.7786, 35.6837], [139.7734, 35.6843], [139.7709, 35.6846], [139.7687, 35.6799], [139.7661, 35.6759] ]]); map.addSource("PolygonSample", { type: "geojson", data: polygon }); map.addLayer({ id: "PolygonSample", type: "fill", source: "PolygonSample", layout: {}, paint: { "fill-color": "#FFD464", "fill-opacity": 0.5 } }); map.addLayer({ id: "PolygonLineSample", type: "line", source: "PolygonSample", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#FFD464", "line-width": 5, "line-opacity": 0.8 } }); const ptsWithin = turf.pointsWithinPolygon(points, polygon); map.addSource("Points", { type: "geojson", data: ptsWithin }); map.addLayer({ id: "Points", type: "circle", source: "Points", layout: {}, paint: { "circle-pitch-alignment": "map", "circle-stroke-color": "#1253A4", "circle-stroke-width": 5, "circle-stroke-opacity": 0.8, "circle-color": "#1253A4", "circle-radius": 5, "circle-opacity": 0.5 } });

Polygon center of gravity acquisition

Acquire the center of gravity of a polygon.

src/main.ts

const polygon = turf.polygon([[ [139.7661, 35.6759], [139.7718, 35.6741], [139.7722, 35.6745], [139.7786, 35.6837], [139.7734, 35.6843], [139.7709, 35.6846], [139.7687, 35.6799], [139.7661, 35.6759] ]]); map.addSource("PolygonSample", { type: "geojson", data: polygon }); map.addLayer({ id: "PolygonSample", type: "fill", source: "PolygonSample", layout: {}, paint: { "fill-color": "#58BE89", "fill-opacity": 0.5 } }); map.addLayer({ id: "PolygonLineSample", type: "line", source: "PolygonSample", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#58BE89", "line-width": 5, "line-opacity": 0.8 } }); const centroid = turf.centroid(polygon); map.addSource("FeaturesPoint", { type: "geojson", data: centroid }); map.addLayer({ id: "FeaturesPoint", type: "circle", source: "FeaturesPoint", layout: {}, paint: { "circle-pitch-alignment": "map", "circle-stroke-color": "#1253A4", "circle-stroke-width": 5, "circle-stroke-opacity": 0.8, "circle-color": "#1253A4", "circle-radius": 8, "circle-opacity": 0.5 } });

Acquisition of position on a line at a specified distance

Get the position on the line at the specified distance.

src/main.ts

const line = turf.lineString([ [139.7506, 35.6611], [139.7648, 35.6736], [139.7689, 35.6854] ]); map.addSource("LineSample", { type: "geojson", data: line }); map.addLayer({ id: "LineSample", type: "line", source: "LineSample", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#1253A4", "line-width": 5, "line-opacity": 0.6 } }); const point = turf.along(line, 2, { units: "kilometers" }); map.addSource("PointSample", { type: "geojson", data: point }); map.addLayer({ id: "PointSample", type: "circle", source: "PointSample", layout: {}, paint: { "circle-pitch-alignment": "map", "circle-stroke-color": "#8DCF3F", "circle-stroke-width": 10, "circle-stroke-opacity": 0.8, "circle-color": "#8DCF3F", "circle-radius": 10, "circle-opacity": 0.5 } });

Obtain self-intersection of polygon

Obtain the self-intersection of a polygon.

src/main.ts

const polygon = turf.polygon([[ [139.76398944854733, 35.68560526180893], [139.75956916809082, 35.681003987351055], [139.7629165649414, 35.67378781807109], [139.76879596710205, 35.67570522138987], [139.7691822052002, 35.6794004505696], [139.75961208343506, 35.67549605235727], [139.75948333740234, 35.67786660262532], [139.76265907287595, 35.680446239082066], [139.7603416442871, 35.68504754570482], [139.7706413269043, 35.68421096423828], [139.77059841156006, 35.68581440434281], [139.76398944854733, 35.68560526180893] ]]); map.addSource("PolygonSample", { type: "geojson", data: polygon }); map.addLayer({ id: "PolygonSample", type: "fill", source: "PolygonSample", layout: {}, paint: { "fill-color": "#FFD464", "fill-opacity": 0.5 } }); map.addLayer({ id: "PolygonLineSample", type: "line", source: "PolygonSample", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#FFD464", "line-width": 5, "line-opacity": 0.8 } }); const point = turf.kinks(polygon); map.addSource("FeaturesPoint", { type: "geojson", data: point }); map.addLayer({ id: "FeaturesPoint", type: "circle", source: "FeaturesPoint", layout: {}, paint: { "circle-pitch-alignment": "map", "circle-stroke-color": "#1253A4", "circle-stroke-width": 5, "circle-stroke-opacity": 0.8, "circle-color": "#1253A4", "circle-radius": 5, "circle-opacity": 0.5 } });