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;