Turf issue #1973

by Stefano

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<div id="map"></div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}

JavaScript

const points = [
  [121.477569, 31.249001],
  [121.480350, 31.246342],
  [121.483611, 31.243204],
  [121.486640, 31.240326],
  [121.488970, 31.237995],
];

const line = turf.lineString(points, {'stroke': "red", 'stroke-width': 1});
const cleaned = turf.cleanCoords(line);

const features = [];
line.geometry.coordinates.forEach((point) => {
  features.push(turf.point(point));
});
features.push(cleaned);

features.push(turf.lineString(
  [points[0], points[points.length - 1 ]],
  {'stroke': "lightgreen", 'stroke-width': 3}
));

const collection = turf.featureCollection(features);

console.log(JSON.stringify(collection));

var map = L.map('map', {
	center: [31.242, 121.485],
  zoom: 17,
  layers: [ L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png') ],
});

L.geoJSON(collection).addTo(map);