Critical changes that touch to the MarkerClusterGroup API:
1. options property is deprecated (will be removed at v1.2.0).
Since now you don't need to use options prop to pass Leaflet.markercluster option into <MarkerClusterGroup />.
Just pass whatever option you need from All Leaflet.markercluster Options
list to MarkerClusterGroup as prop.
For example:
// New API
<MarkerClusterGroup showCoverageOnHover={false} />
// How it was before 1.1.8
<MarkerClusterGroup options={{ showCoverageOnHover: false }} />or:
const createClusterCustomIcon = function (cluster) {
return L.divIcon({
html: `<span>${cluster.getChildCount()}</span>`,
className: 'marker-cluster-custom',
iconSize: L.point(40, 40, true),
});
}
// New API
<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon} showCoverageOnHover={false} />
// How it was before 1.1.8
<MarkerClusterGroup options={{ iconCreateFunction: clusterCustomIcon, showCoverageOnHover: false }} />2. Deprecated wrapperOptions property has been removed.
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} />
// ...
)
}
// ...3. Bug Fix
- Dependencies Update
- Demo-app: Update Panel props according to latest react-bootstrap specification
- Remove requiring of deprecated-styles inside react-leaflet-markercluster.js plugin
- Use react context store to access markers instead of cloning markers during their render
- Deprecation warnings about MarkerClusterGroup
optionsproperty - Update Demo-app with fresh examples