EVOLUTION-MANAGER

Edit File: marker-clustering-convexhull.html

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet debug page</title>

<div id="map"></div>
	<button id="populate">Populate 1 marker</button>
	<button id="remove">Remove 1 marker</button>

var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				maxZoom: 18,
				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
			}),
			latlng = L.latLng(50.5, 30.51);

var map = L.map('map', {center: latlng, zoom: 15, layers: [tiles]});

var markers = L.markerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false });

function populate() {
			for (var i = 0; i < 100; i++) {
				var m = L.marker(getRandomLatLng(map));
				markers.addLayer(m);
			}
			return false;
		}
		function getRandomLatLng(map) {
			var bounds = map.getBounds(),
				southWest = bounds.getSouthWest(),
				northEast = bounds.getNorthEast(),
				lngSpan = northEast.lng - southWest.lng,
				latSpan = northEast.lat - southWest.lat;

return L.latLng(
					southWest.lat + latSpan * Math.random(),
					southWest.lng + lngSpan * Math.random());
		}

var polygon;
		markers.on('clustermouseover', function (a) {
			if (polygon) {
				map.removeLayer(polygon);
			}
			polygon = L.polygon(a.layer.getConvexHull());
			map.addLayer(polygon);
		});

markers.on('clustermouseout', function (a) {
			if (polygon) {
				map.removeLayer(polygon);
				polygon = null;
			}
		});

map.on('zoomend', function () {
			if (polygon) {
				map.removeLayer(polygon);
				polygon = null;
			}
		});

populate();
		map.addLayer(markers);
	</script>
</body>
</html>