Turf w/ Leaflet

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

var center = [103.06965947, 25.16636095];

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


var points1=[[
[103.0696, 25.1663],
[103.0693, 25.1659],
[103.0699, 25.1654],
[103.0696, 25.1663]]];
var points2=[[
[103.0688, 25.1666],
[103.0686, 25.1658],
[103.0696, 25.1658],
[103.0697, 25.1658],
[103.0688, 25.1666]]];
var polygon1 = turf.polygon(points1);
var polygon2 = turf.polygon(points2);

var intersection = turf.intersect(polygon1,polygon2, {stroke: '#000'})

L.geoJSON(polygon1).addTo(map);
L.geoJSON(polygon2).addTo(map);

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