use-marker-cluster v1.0.2

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

useMarkerCluster.cleanup

useMarkerCluster.cleanup();

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

License

MIT © Krombik