feat: add MarkerClusterer

# Conflicts:
#	pnpm-lock.yaml

Author: pyjun01

README.md

@@ -15,7 +15,7 @@ Google map react componentize project
 - [x] Rectangle
 - [x] Circle
 - [ ] AdvancedMarkerView
-- [ ] MarkerClusterer
+- [x] MarkerClusterer
 - [ ] HeatmapLayer
 
 ## DEMO

package.json

@@ -46,6 +46,7 @@
     "@babel/plugin-syntax-typescript": "^7.22.5",
     "@babel/types": "^7.22.19",
     "@googlemaps/js-api-loader": "^1.16.2",
+    "@googlemaps/markerclusterer": "^2.5.1",
     "@types/google.maps": "^3.54.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

pnpm-lock.yaml

@@ -5,7 +5,7 @@ export interface AnchorContextData {
 }
 
 export const AnchorContext = createContext<AnchorContextData>({
-  setAnchor: () => void 0,
+  setAnchor: () => {},
 });
 
 export const useSetAnchor = () => useContext(AnchorContext).setAnchor;

src/components/InfoWindow/Context.tsx

@@ -1,11 +1,12 @@
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 
 import { MarkerProps } from './type';
 import { useApplyMarkerEvent } from '../../hooks/useApplyMarkerEvent';
 import { useImportLibrary } from '../../hooks/useImportLibrary';
 import { passRef } from '../../utils/passRef';
 import { useSetAnchor } from '../InfoWindow/Context';
 import { useMapContext } from '../Provider/MapProvider';
+import { useMarkerClusterer } from '../MarkerClusterer/Context';
 
 export const Marker = forwardRef<google.maps.Marker, MarkerProps>(
   function Marker(
@@ -41,6 +42,8 @@ export const Marker = forwardRef<google.maps.Marker, MarkerProps>(
     const map = useMapContext();
     const markerLib = useImportLibrary('marker');
     const setAnchor = useSetAnchor();
+    const cluster = useMarkerClusterer();
+    const isFirstMount = useRef(true);
 
     const [marker, setMarker] = useState<google.maps.Marker | null>(null);
 
@@ -61,13 +64,20 @@ export const Marker = forwardRef<google.maps.Marker, MarkerProps>(
 
       // for InfoWindow
       setAnchor(marker);
+      // for MarkerClusterer
+      cluster?.addMarker(marker);
 
       return () => {
         marker?.setMap(null);
         setAnchor(null);
+        cluster?.removeMarker(marker);
       };
     }, [markerLib?.Marker]);
 
+    useEffect(() => {
+      marker?.setMap(cluster ? null : map);
+    }, [cluster]);
+
     useEffect(() => {
       marker?.setPosition({ lat, lng });
     }, [lat, lng]);

src/components/Marker/index.tsx

@@ -0,0 +1,38 @@
+import { ComponentProps, createContext, useContext } from 'react';
+
+export interface MarkerClustererContextData {
+  addMarker: (marker: google.maps.Marker) => void;
+  removeMarker: (marker: google.maps.Marker) => void;
+}
+
+const initialContextData = {
+  addMarker: () => {
+    throw Error(
+      'You must use `useMarkerClusterer` inside of `MarkerClustererProvideer`',
+    );
+  },
+  removeMarker: () => {
+    throw Error(
+      'You must use `useMarkerClusterer` inside of `MarkerClustererProvideer`',
+    );
+  },
+};
+
+export const MarkerClustererContext =
+  createContext<MarkerClustererContextData>(initialContextData);
+
+export const useMarkerClusterer = () => {
+  const data = useContext(MarkerClustererContext);
+
+  if (data === initialContextData) {
+    return null;
+  }
+
+  return data;
+};
+
+export function MarkerClustererProvider(
+  props: ComponentProps<typeof MarkerClustererContext.Provider>,
+) {
+  return <MarkerClustererContext.Provider {...props} />;
+}

src/components/MarkerClusterer/Context.tsx

@@ -0,0 +1,69 @@
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+
+import {
+  MarkerClusterer as MarkerClustererClass,
+  MarkerClustererOptions,
+} from '@googlemaps/markerclusterer';
+
+import { passRef } from '../../utils/passRef';
+import { useMapContext } from '../Provider/MapProvider';
+import { MarkerClustererProps } from './type';
+import { MarkerClustererProvider } from './Context';
+
+const createMarkerClusterer = (options: MarkerClustererOptions) =>
+  new MarkerClustererClass(options);
+
+export const MarkerClusterer = forwardRef<
+  MarkerClustererClass,
+  MarkerClustererProps
+>(function MarkerClusterer(
+  { children, algorithmOptions, algorithm, renderer, onClusterClick },
+  ref,
+) {
+  const map = useMapContext();
+  const markers = useRef(
+    new Set<google.maps.Marker | google.maps.marker.AdvancedMarkerElement>(),
+  );
+  const markerCluster = useRef(
+    createMarkerClusterer({
+      map,
+      algorithmOptions,
+      algorithm,
+      renderer,
+      onClusterClick,
+    }),
+  );
+
+  const value = useMemo(
+    () => ({
+      addMarker: (marker) => (
+        markers.current.add(marker), markerCluster.current.addMarker(marker)
+      ),
+      removeMarker: (marker) => (
+        markers.current.delete(marker),
+        markerCluster.current.removeMarker(marker)
+      ),
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    passRef(ref, markerCluster.current);
+  }, []);
+
+  useEffect(() => {
+    markerCluster.current.setMap(null);
+    markerCluster.current = createMarkerClusterer({
+      map,
+      markers: Array.from(markers.current),
+      algorithmOptions,
+      algorithm,
+      renderer,
+      onClusterClick,
+    });
+  }, [algorithmOptions, algorithm, renderer, onClusterClick]);
+
+  return (
+    <MarkerClustererProvider value={value}>{children}</MarkerClustererProvider>
+  );
+});

src/components/MarkerClusterer/index.tsx

@@ -0,0 +1,7 @@
+import { MarkerClustererOptions } from '@googlemaps/markerclusterer';
+import { ReactNode } from 'react';
+
+export interface MarkerClustererProps
+  extends Omit<MarkerClustererOptions, 'markers' | 'map' | ''> {
+  children?: ReactNode;
+}