Using Leaflet.Geodesic to interpolate large polygons into geodesic arcs, then applying turf.intersect
HTML
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css">
<script src="https://rawgit.com/henrythasler/Leaflet.Geodesic/master/Leaflet.Geodesic.min.js"></script>
<div id="mapid" style="height:100%;width:100%;position:fixed;"></div>
JavaScript
var mapLayer = L.map('mapid', {
zoomAnimation: false
});
var pid = 'karan44.pdmio34k';
var at = 'pk.eyJ1Ijoia2FyYW40NCIsImEiOiJjaWx0Y3A3MmkwMDhjdmdrc20xazM4M25vIn0.hUFDaS5EPmoJwiZi1Wz5AQ';
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?', {
id: pid,
accessToken: at
}).addTo(mapLayer);
var polygon1 = turf.polygon([
[
[3.405762, 51.395350],
[5.009766, 53.340303],
[7.141113, 53.653999],
[5.822754, 51.037508],
[3.405762, 51.395350]
]
], {
"fill": "#00000F",
"stroke": "#00000F",
"stroke-width": 1
});
var polygon2 = turf.polygon([
[
[0.241699, 54.173488],
[10.162354, 50.908012],
[8.854980, 50.062208],
[0.241699, 54.173488]
]
], {
"fill": "#0000FF",
"stroke": "#0000FF",
"stroke-width": 1
});
var polygon1a = geodesify(polygon1, 30);
var polygon2a = geodesify(polygon2, 30);
var polygon = turf.intersect(polygon1a, polygon2a);
polygon.properties = {
"fill": "#FF0000",
"stroke": "#FF0000",
"stroke-width": 1
};
L.mapbox.featureLayer().setGeoJSON(polygon1a).addTo(mapLayer);
L.mapbox.featureLayer().setGeoJSON(polygon2a).addTo(mapLayer);
L.mapbox.featureLayer().setGeoJSON(polygon).addTo(mapLayer);
mapLayer.setView([52.1, 5.5], 8);
//interpolates simple GeoJSON polygon features along geodesic arcs
function geodesify(input, steps) {
if (typeof steps === 'undefined') {
steps = 50; //interpolation steps on each segment
}
var tempLine = {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": []
},
"properties": {}
}
if (input.geometry.type === "Polygon") {
tempLine.geometry.coordinates = input.geometry.coordinates[0];
tempLine.properties = input.properties;
tempLine.properties.geodesic = "true"; //tells Leaflet.Geodesic to interpolate this feature
tempLine.properties.geodesic_steps = steps;
var geoLine = L.geoJson(tempLine).toGeoJSON();//convert interpolated feature back to GeoJSON
var output = {
"type":...