Critical changes that touch to the MarkerClusterGroup API.
1. marker object lat and lng keys are deprecated (will be removed at v1.2.0).
To set marker position, please use position key at marker object like:
const markers = [
{ position: [49.8397, 24.0297] },
{ position: [52.2297, 21.0122] },
{ position: [51.5074, -0.0901] },
];position that is Leaflet.LatLng
array or object, that could be declared like:
const markers = [
{ position: [49.8397, 24.0297] }, // [lat, lng]
{ position: { lat: 52.2297, lng: 21.0122 } },
{ position: { lat: 52.2297, lon: 21.0122 } },
];2. wrapperOptions is fully deprecated and will not use anymore (will be removed at v1.1.8).
How to replace wrapperOptions old enableDefaultStyle | disableDefaultAnimation | removeDuplicates features:
enableDefaultStyle:to enableleaflet.markerclusterdefault style for cluster,
just import Markercluster styles:
@import '~react-leaflet-markercluster/dist/styles.min.css'; // sass
@import url('~react-leaflet-markercluster/dist/styles.min.css'); // css
require('react-leaflet-markercluster/dist/styles.min.css'); // inside .js fileor include CSS styles directly to the head of HTML file:
<link rel="stylesheet" href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css" />disableDefaultAnimation:to disable markers animation, set Leaflet.markercluster
animateoption tofalse:
<MarkerClusterGroup markers={markers} options={{ animate: false }} />removeDuplicates:you could use our previous solution for markers filtering
(before sending them to MarkerClusterGroup) as follows:
function removeMarkersWithSameCoordinates(markers) {
// init filtered markers list with first marker from list
const filteredMarkers = [markers[0]];
markers.forEach((marker) => {
if (!JSON.stringify(filteredMarkers).includes(JSON.stringify(marker))) {
filteredMarkers.push(marker);
}
});
return filteredMarkers;
}
// ...
render() {
const filteredMarkers = removeMarkersWithSameCoordinates(this.props.markers);
return (
// ...
<MarkerClusterGroup markers={filteredMarkers} />
// ...
)
}
// ...