Union function using Turf.js and Leaflet Geodesy
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
#map {
height: 500px;
}
JavaScript
var map = L.map("map").setView([18.5204, 73.8567], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var cradius = 80000
var copts = {
parts: 144
};
var cities = new L.LayerGroup();
var chicago = LGeo.circle([18.5204, 73.8567], cradius, copts).addTo(cities);
var newOrleans = LGeo.circle([29.95, -90.07], cradius, copts).addTo(cities);
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);
}
var cityUnion = unify(cities.getLayers()).addTo(map);