diff --git a/grommet-leaflet/README.md b/grommet-leaflet/README.md
index 723ab48..a4f5f0a 100644
--- a/grommet-leaflet/README.md
+++ b/grommet-leaflet/README.md
@@ -58,10 +58,10 @@ Map supports all [Leaflet Map](https://leafletjs.com/reference.html#map) and [Re
In addition, it also supports the following props:
-| Prop | Type | Default value | Required | Notes |
-| ----------- | -------- | ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Prop | Type | Default value | Required | Notes |
+| ----------- | -------- | ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `tileLayer` | `object` | `undefined` | `true` | {
url: `string` in the form of `'https://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'`,
attribution?: `string` e.g. `© OpenStreetMap contributors`
} |
-| `theme` | `object` | | | See [theme structure](#theme-structure) |
+| `theme` | `object` | | | See [theme structure](#theme-structure) |
### Marker
@@ -115,10 +115,10 @@ MarkerCluster supports all [Leaflet.markercluster properties](https://github.com
In addition, it also supports the following props:
-| Prop | Type | Default value |
-| ------- | -------------------------- | ------------------------------------------------ |
-| `icon` | `({ cluster }) => Element` | `({ cluster }) => ` |
-| `popup` | `({ cluster }) => Element` | `undefined` |
+| Prop | Type | Default value |
+| ------- | -------------------------------------------------------- | ------------------------------------------------ |
+| `icon` | `({ cluster }) => Element` | `({ cluster }) => ` |
+| `popup` | `({ cluster }) => Element \| null \| false \| undefined` | `undefined` |
For large datasets, it can be beneficial to apply `chunkedLoading` to MarkerCluster. See [leaflet.markercluster docs](https://github.com/Leaflet/Leaflet.markercluster#chunked-addlayers-options) for additional details.
diff --git a/grommet-leaflet/src/layers/Controls/Controls.jsx b/grommet-leaflet/src/layers/Controls/Controls.jsx
index 2d12fc3..ed62b5b 100644
--- a/grommet-leaflet/src/layers/Controls/Controls.jsx
+++ b/grommet-leaflet/src/layers/Controls/Controls.jsx
@@ -36,6 +36,7 @@ const Controls = ({ locations }) => {
useEffect(() => {
if (bounds && !mounted) {
if (
+ // eslint-disable-next-line no-underscore-dangle
JSON.stringify(bounds._northEast) === JSON.stringify(bounds._southWest)
) {
// if the bounds are the same, zoom to the bounds of the locations
diff --git a/grommet-leaflet/src/layers/MarkerCluster/MarkerCluster.jsx b/grommet-leaflet/src/layers/MarkerCluster/MarkerCluster.jsx
index a803c20..078fad4 100644
--- a/grommet-leaflet/src/layers/MarkerCluster/MarkerCluster.jsx
+++ b/grommet-leaflet/src/layers/MarkerCluster/MarkerCluster.jsx
@@ -36,7 +36,8 @@ const MarkerCluster = ({ icon: iconProp, popup: popupProp, ...rest }) => {
return (
{
- if (popupProp) {
+ // only bind popup if popupProp is defined
+ if (popupProp({ cluster })) {
const popup = cluster.bindPopup(
ReactDOMServer.renderToString(
diff --git a/grommet-leaflet/src/layers/MarkerCluster/index.d.ts b/grommet-leaflet/src/layers/MarkerCluster/index.d.ts
index c26d0cf..1dac5a8 100644
--- a/grommet-leaflet/src/layers/MarkerCluster/index.d.ts
+++ b/grommet-leaflet/src/layers/MarkerCluster/index.d.ts
@@ -3,14 +3,14 @@ import * as L from 'leaflet';
import 'leaflet.markercluster';
export interface MarkerClusterProps {
- icon?: (any) => JSX.Element;
- popup?: (any) => JSX.Element;
+ icon?: ({ cluster }: { cluster: any }) => JSX.Element;
+ popup?: ({ cluster }: { cluster: any }) => JSX.Element | null | false | undefined;
}
export interface MarkerClusterExtendedProps
extends MarkerClusterProps,
- L.MarkerClusterGroupOptions,
- Omit {}
+ L.MarkerClusterGroupOptions,
+ Omit { }
declare const MarkerCluster: React.FC;