DEV Community

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

Posted on

Trying Out Various Turf.js

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

References
Turf.js

Image of Bright Data

Cut Costs, Save Time – Get your datasets ready for action faster than ever.

Save on resources with our ready-to-use datasets designed for quick integration and application.

Reduce Costs

Top comments (0)

Image of Bright Data

Ensure Data Quality Across Sources – Manage and normalize data effortlessly.

Maintain high-quality, consistent data across multiple sources with our efficient data management tools.

Manage Data

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay