v1.1.8

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 enable leaflet.markercluster default 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 file

or 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
  animate option to false:

<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 options property
• Update Demo-app with fresh examples