useMarkerCluster

A React hook for clustering markers using the marker-cluster library.

Example

import useMarkerCluster from "use-marker-cluster";
import { GoogleMap, OverlayView } from "google-maps-js-api-react";

const Map = ({ points }) => {
  const markerCluster = useMarkerCluster(
    points,
    (point) => [point.lng, point.lat],
    {
      asyncMode: true,
    }
  );

  return (
    <GoogleMap
      style={mapStyle}
      defaultOptions={{
        scrollwheel: true,
        center: { lat: 0, lng: 0 },
        zoom: 5,
      }}
      // it's probably better to wrap it in a debounce method or use setTransition
      onBoundsChanged={function (bounds) {
        const sw = bounds.getSouthWest();
        const ne = bounds.getNorthEast();

        markerCluster
          .setZoom(this.getZoom()!)
          .setBounds(sw.lng(), sw.lat(), ne.lng(), ne.lat())
          // callback method triggers rerender
          .callback();
      }}
    >
      {markerCluster.getPoints(
        ({ lat, lng, id }, key) => (
          <OverlayView lat={lat} lng={lng} key={key} preventMapHitsAndGestures>
            <div style={markerStyle}>m{id}</div>
          </OverlayView>
        ),
        (lng, lat, count, expandZoom, key) => (
          <OverlayView lat={lat} lng={lng} key={key} preventMapHitsAndGestures>
            <div style={markerStyle}>{count}</div>
          </OverlayView>
        )
      )}
    </GoogleMap>
  );
};

API

useMarkerCluster

const useMarkerCluster: <P>(points: P[], getLngLat: (item: P) => [lng: number, lat: number], options?: UseMarkerClusterOptions): MarkerCluster<P>;

The useMarkerCluster hook provides an easy way to cluster markers on a map by continuously monitoring the points parameter and clustering them when new data is received. Once clustering is complete, the hook will automatically trigger a rerender. For better understanding of usage see example

Returns MarkerCluster instance

UseMarkerClusterOptions

Name	Type	Description	Default
asyncMode?	boolean	if true, the clustering process will be moved to another thread and will not block the UI	false
minZoom?	number	min zoom level to cluster the points on	0
maxZoom?	number	max zoom level to cluster the points on	16
radius?	number	cluster radius in pixels	60
extent?	number	size of the tile grid used for clustering	256
callback?	() => void	a method that will be executed after clustering or called from MarkerCluster instance
onLoaded?	() => void	a method that will be executed only after the clustering is completed

---

useMarkerCluster.cleanup

useMarkerCluster.cleanup();

If asyncMode has been set, use this method to abandon the Worker if necessary

---

License

MIT © Krombik