DEV Community

Cover image for Trying Out Various Turf.js
MIERUNE profile image Yasunori Kirimoto
Yasunori Kirimoto for MIERUNE

Posted on

3

Trying Out Various Turf.js

#turf #turfjs #foss4g #gis

img

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.

img

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
    }
});
Enter fullscreen mode Exit fullscreen mode

Extracting points contained in polygons

Extract points contained within a polygon.

img

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
    }
});
Enter fullscreen mode Exit fullscreen mode

Polygon center of gravity acquisition

Acquire the center of gravity of a polygon.

img

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
    }
});
Enter fullscreen mode Exit fullscreen mode

Acquisition of position on a line at a specified distance

Get the position on the line at the specified distance.

img

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
    }
});
Enter fullscreen mode Exit fullscreen mode

Obtain self-intersection of polygon

Obtain the self-intersection of a polygon.

img

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
    }
});
Enter fullscreen mode Exit fullscreen mode

Related Articles

AWS Heroes

Vite Support for Various Map Library Starters

Yasunori Kirimoto for AWS Heroes ・ Jun 29 '22

#amazonlocationservice #maplibre #leaflet #vite
MIERUNE

Trying Out Various QGIS Processing

Yasunori Kirimoto for MIERUNE ・ Dec 14 '22

#qgis #foss4g #gis #processing
MIERUNE

COMTiles (Cloud Optimized Map Tiles) hosted on Amazon S3 and Visualized with MapLibre GL JS

Yasunori Kirimoto for MIERUNE ・ Dec 23 '22

#foss4g #maplibre #s3 #cloudoptimized

References
Turf.js

profile
Sentry
 Promoted

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

profile
Docusign Developers
 Promoted

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Read next

mikeyoung44 profile image

New LoRA Method Boosts AI Model Performance by 20% with Zero Extra Costs

Mike Young -

pikotutorial profile image

Functions calling order in unit tests in C++

pikoTutorial -

gilles_hamelink_ea9ff7d93 profile image

"Unlocking Long-Context Potential: Advances in Speculative Decoding for LLMs"

Gilles Hamelink -

cnr_br profile image

Como o .NET Gerencia sua Memória (e por que você não deve interferir).

Cristiano Rodrigues -