Circular buffers with Leaflet Geodesy followed by union with Turf.js
HTML
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-geodesy/v0.1.0/leaflet-geodesy.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js"></script>
<div id="map"></div>
CSS
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
JavaScript
/////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
/////////////////////////////////////////////////////////////////////////////////////////////
var map = L.map('map').setView([-25.8184071, 28.2024388], 10);
ATTR = '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'© <a href="http://cartodb.com/attributions">CartoDB</a>';
CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
L.tileLayer(CDB_URL, {
attribution: ATTR
}).addTo(map);
/////////////////////////////////////////////////////////////////////////////////////////////
//generating the input geometry//
/////////////////////////////////////////////////////////////////////////////////////////////
//create some random GeoJSON points (functions below)
var dotcount = 10;
var dots = make_dots(dotcount);
var dotLayer = L.geoJson(dots).addTo(map);
//create circular buffer around each point
var cradius = 7000
var copts = {
parts: 144
};
var circleLayer = L.layerGroup();
dotLayer.eachLayer(function(layer) {
var circ = LGeo.circle(layer.getLatLng(), cradius, copts).addTo(circleLayer);
});
/////////////////////////////////////////////////////////////////////////////////////////////
//performing the union//
/////////////////////////////////////////////////////////////////////////////////////////////
//style for union result
var unionStyle = {
fillColor: '#FA0',
fillOpacity: 0.2,
color: '#F00',
opacity: 0.5,
weight: 3
}
//union function using turf.js
function unify(polyList) {
for (var i = 0; i < polyList.length; ++i) {
if (i == 0) {
var unionTemp = polyList[i].toGeoJSON();
} else {
unionTemp = turf.union(unionTemp, polyList[i].toGeoJSON());
}
}
return L.geoJson(unionTemp, {style: unionStyle});
}
//perform union and add to map
var circleUnion =...