Releases: yuzhva/react-leaflet-markercluster
v4.2.1
Close #165
Full Changelog: v4.2.0...v4.2.1
v4.2.0
Copied types from DefinitelyTyped into here, credits to @CiaccoDavide and @bhubert for maintaining these types prior to their arrival into the source.
Full Changelog: v4.1.2...v4.2.0
v4.1.2
v4.1.1
What's Changed
Full Changelog: v4.1.0...v4.1.1
v4.1.0
Consolidating release notes from v2.0.0 to v4.1.0 as @charlieforward9 is now the maintainer of this repository. Future Github releases will track npm release cycles.
What's Changed
- Corrected English in Readme by @jlsorak in #44
- Handle empty markers prop (match original markercluster functionality) by @thisissami in #41
- [beta] 2.0.0: react-leaflet v2 and React 16.3 context support by @yuzhva in #72
- [beta] 2.0.0-rc2: [fix] Missing popup content. Send map to react-leaflet contextValue by @yuzhva in #73
- [beta] 2.0.0-rc3: [fix] Use 'startsWith' instead of 'includes' for event listener by @yuzhva in #75
- [release] 2.0.0: support of react-leaflet v2 by @yuzhva in #107
- Fixing compatibility issue with leaflet v4 and React 18 by @changey in #194
- Update react-leaflet-markercluster.js by @l4b4r4b4b4 in #189
- Support for bulk adding layers by @olabalboa in #86
- [release] region/bulk support by @charlieforward9 in #211
New Contributors
- @jlsorak made their first contribution in #44
- @thisissami made their first contribution in #41
- @changey made their first contribution in #194
- @l4b4r4b4b4 made their first contribution in #189
- @olabalboa made their first contribution in #86
- @charlieforward9 made their first contribution in #211
Full Changelog: v1.1.6...v4.1.0
V2.0.0
Support of the react-leaflet
v2 has been introduced.
There are critical changes that touch to the MarkerClusterGroup API:
1. Support of marker
object lat
and lng
keys are removed.
2. options
property of MarkerClusterGroup
removed.
3. Console deprecated warnings are removed.
4. Better handling of events.
5. Demo application completely rewritten and replaced with StoryBook.
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 enableleaflet.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 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
options
property - Update Demo-app with fresh examples
v1.1.7
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.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 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} />
// ...
)
}
// ...