markerClusterOptions

by marcus211

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/[email protected]/dist/L.Deflate.js"></script>
<div id="map"></div>

CSS

#map {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}

JavaScript

map = new L.Map('map');

L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
  }
).addTo(map);
map.setView([51.505, -0.09], 11);


let deflate_features = L.deflate({
  minSize: 5000,
  markerCluster: true,
  markerClusterOptions: {
    //showCoverageOnHover: true,
    showCoverageOnHover: false,
  }
});

//map.setView([51.505, -0.09], 12);
deflate_features.addTo(map);

var polygon = L.polygon([
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
]);
deflate_features.addLayer(polygon);

var polyline = L.polyline([
  [51.52, -0.05],
  [51.53, -0.10],
], {
  color: 'red'
});
deflate_features.addLayer(polyline);

var polyline2 = L.polyline([
  [51.535, -0.1],
  [51.525, -0.05],
], {
  color: 'green'
});
deflate_features.addLayer(polyline2);