Trying Out Various Turf.js
Tags: turf, turfjs, foss4g, gis
Published: 2023-07-19 09:46:35

![img](https://www.memo.dayjournal.dev/images/try-099_00.png)

### I've been experimenting with Turf.js :tada:  

[Turf.js](https://turfjs.org) 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](https://memo.dayjournal.dev/tags/turf-js/)," in which I tested more than 50 different functions of Turf.js. I would like to introduce five features that I recommend!

<br>

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

<br>

## Buffer creation
Create a buffer from points.

![img](https://www.memo.dayjournal.dev/images/try-099_01.png)  

#### src/main.ts

```typescript
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
    }
});
```

<br>

## Extracting points contained in polygons
Extract points contained within a polygon.

![img](https://www.memo.dayjournal.dev/images/try-099_02.png)  

#### src/main.ts

```typescript
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
    }
});
```

<br>

## Polygon center of gravity acquisition
Acquire the center of gravity of a polygon.

![img](https://www.memo.dayjournal.dev/images/try-099_03.png)  

#### src/main.ts

```typescript
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
    }
});
```

<br>

## Acquisition of position on a line at a specified distance
Get the position on the line at the specified distance.

![img](https://www.memo.dayjournal.dev/images/try-099_04.png)  

#### src/main.ts

```typescript
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
    }
});
```

<br>

## Obtain self-intersection of polygon
Obtain the self-intersection of a polygon.

![img](https://www.memo.dayjournal.dev/images/try-099_05.png)  

#### src/main.ts

```typescript
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
    }
});
```

<br>

Related Articles
{% link https://dev.to/aws-heroes/vite-support-for-various-map-library-starters-4m82 %}
{% link https://dev.to/mierune/trying-out-various-qgis-processing-2ej1 %}
{% link https://dev.to/mierune/comtiles-cloud-optimized-map-tiles-hosted-on-amazon-s3-and-visualized-with-maplibre-gl-js-3bed %}

<br>

References
[Turf.js](http://turfjs.org/)