can I use Markerclusterer's SuperClusterViewportAlgorithm

[xine14236]

I refer to marker-clustering example, but I use SuperClusterViewportAlgorithm , it will face problem:like this

it look like it doesn't have fully initialized .

my code :

import React, { useCallback, useEffect, useMemo, useState } from "react";

import { useMap } from "@vis.gl/react-google-maps";
import {
  MarkerClusterer,
  SuperClusterViewportAlgorithm,
} from "@googlemaps/markerclusterer";
import CustomerMarker from "./customerMarker";

const customAlgorithm = new SuperClusterViewportAlgorithm({
  radius: 150, // 半径大小调整以适配你的图标
  minPoints: 2,
  maxZoom: 20,
  // 控制形成一个集群所需的最小点数
});

const customRenderer = {
  render: ({ count, position }) => {
    // 創建一個自訂的叢集圖標

    const div = document.createElement("div");
    div.className = "custom-cluster";
    div.textContent = count; // 顯示叢集內的標記數量
    div.style.background = count > 6 ? "#FF5300" : "#2CC295";
    div.style.color = "#fff";
    div.style.borderRadius = "50%";
    div.style.textAlign = "center";
    div.style.lineHeight = "40px";
    div.style.width = "60px";
    div.style.height = "60px";
    div.style.fontSize = "40px";
    div.style.zIndex = "1";
    div.style.display = "grid";
    div.style.placeItems = "center";

    // 返回自訂的叢集樣式和位置
    return new google.maps.marker.AdvancedMarkerElement({
      position,
      content: div,
      zIndex: 99,
    });
  },
};

function ClusterMarker({
  mapLists = [],
  handleShowStoreOpen = () => {},
  activeMarker,
}) {
  const [markers, setMarkers] = useState({});
  const map = useMap();
  const [count, setCount] = useState(0);
  const clusterer = useMemo(() => {
    if (!map) return null;

    return new MarkerClusterer({
      map,
      renderer: customRenderer,
      algorithm: customAlgorithm,
      gridSize: 60,
    });
  }, [map]);

  const setMarkerRef = useCallback((marker, key) => {
    setMarkers((markers) => {
      if ((marker && markers[key]) || (!marker && !markers[key]))
        return markers;

      if (marker) {
        return { ...markers, [key]: marker };
      } else {
        const { [key]: _, ...newMarkers } = markers;

        return newMarkers;
      }
    });
  }, []);

  useEffect(() => {
    if (!clusterer) return;

    clusterer.clearMarkers();
    clusterer.addMarkers(Object.values(markers));
  }, [clusterer, markers]);

  // Generate markers outside of .map()

  return (
    <>
      {mapLists.map((mapItem, index) => {
        return (
          <CustomerMarker
            key={mapItem.key}
            mapItem={mapItem}
            index={index}
            activeMarker={activeMarker}
            handleShowStoreOpen={handleShowStoreOpen}
            setMarkerRef={setMarkerRef}
          />
        );
      })}
    </>
  );
}

export default ClusterMarker;

[mrMetalWood]

Yes, it looks like the SuperClusterViewportAlgorithm needs the map to be initialized. Does it work when you define the customAlgorithm and the customRenderer inside the useMemo where you are creating the MarkerClusterer? Like this:

import React, { useCallback, useEffect, useMemo, useState } from "react";

import { useMap } from "@vis.gl/react-google-maps";
import {
  MarkerClusterer,
  SuperClusterViewportAlgorithm,
} from "@googlemaps/markerclusterer";
import CustomerMarker from "./customerMarker";

function ClusterMarker({
  mapLists = [],
  handleShowStoreOpen = () => {},
  activeMarker,
}) {
  const [markers, setMarkers] = useState({});
  const map = useMap();
  const [count, setCount] = useState(0);
  const clusterer = useMemo(() => {
    if (!map) return null;

    const customAlgorithm = new SuperClusterViewportAlgorithm({
      radius: 150, // 半径大小调整以适配你的图标
      minPoints: 2,
      maxZoom: 20,
      // 控制形成一个集群所需的最小点数
    });

    const customRenderer = {
      render: ({ count, position }) => {
        // 創建一個自訂的叢集圖標

        const div = document.createElement("div");
        div.className = "custom-cluster";
        div.textContent = count; // 顯示叢集內的標記數量
        div.style.background = count > 6 ? "#FF5300" : "#2CC295";
        div.style.color = "#fff";
        div.style.borderRadius = "50%";
        div.style.textAlign = "center";
        div.style.lineHeight = "40px";
        div.style.width = "60px";
        div.style.height = "60px";
        div.style.fontSize = "40px";
        div.style.zIndex = "1";
        div.style.display = "grid";
        div.style.placeItems = "center";

        // 返回自訂的叢集樣式和位置
        return new google.maps.marker.AdvancedMarkerElement({
          position,
          content: div,
          zIndex: 99,
        });
      },
    };

    return new MarkerClusterer({
      map,
      renderer: customRenderer,
      algorithm: customAlgorithm,
      gridSize: 60,
    });
  }, [map]);

  const setMarkerRef = useCallback((marker, key) => {
    setMarkers((markers) => {
      if ((marker && markers[key]) || (!marker && !markers[key]))
        return markers;

      if (marker) {
        return { ...markers, [key]: marker };
      } else {
        const { [key]: _, ...newMarkers } = markers;

        return newMarkers;
      }
    });
  }, []);

  useEffect(() => {
    if (!clusterer) return;

    clusterer.clearMarkers();
    clusterer.addMarkers(Object.values(markers));
  }, [clusterer, markers]);

  // Generate markers outside of .map()

  return (
    <>
      {mapLists.map((mapItem, index) => {
        return (
          <CustomerMarker
            key={mapItem.key}
            mapItem={mapItem}
            index={index}
            activeMarker={activeMarker}
            handleShowStoreOpen={handleShowStoreOpen}
            setMarkerRef={setMarkerRef}
          />
        );
      })}
    </>
  );
}

export default ClusterMarker;

[xine14236]

Thank you for your reply. I used onTilesLoaded to improve the condition for setMapInitialized, which is now better, but the issue still occurs occasionally. I am currently trying to use MapCanvasProjection, but I don't know how to proceed

 <Map
              onTilesLoaded={() => {
                setMapInitialized(true);
              }}
              reuseMaps={true}
              tilt={0}
              heading={0}
              defaultCenter={center}
              defaultZoom={17}
              mapId="3f421d0056ca4682"
              options={options}
              onClick={handleClickAway}
              onCenterChanged={
                (newCenter) => {
                  saveCenterDebounced(newCenter);
                }

                // console.log(newCenter)
              }
              // onCameraChanged={handleCameraChanged}
              onCameraChanged={() => {
                setMapInitialized(false);
              }}
            >
                <ClusterMarker
                  mapLists={mapLists}
                  activeMarker={activeMarker}
                  handleShowStoreOpen={handleShowStoreOpen}
                  mapInitialized={mapInitialized}
                />
</Map>

clusterMarker.jsx:

import React, { useCallback, useEffect, useMemo, useState } from "react";

import { useMap } from "@vis.gl/react-google-maps";
import {
  MarkerClusterer,
  SuperClusterViewportAlgorithm,
} from "@googlemaps/markerclusterer";
import CustomerMarker from "./customerMarker";

function ClusterMarker({
  mapLists = [],
  handleShowStoreOpen = () => {},
  activeMarker,
  mapInitialized = false,
}) {
  const [markers, setMarkers] = useState({});
  const map = useMap();
  const [count, setCount] = useState(0);
  const [projection, setProjection] = useState(null);

  const clusterer = useMemo(() => {
    if (!map || mapInitialized) return null;

    const customAlgorithm = new SuperClusterViewportAlgorithm({
      radius: 150, // 半径大小调整以适配你的图标
      minPoints: 2,
      maxZoom: 20,
      // 控制形成一个集群所需的最小点数
    });

    const customRenderer = {
      render: ({ count, position }) => {
        // 創建一個自訂的叢集圖標

        const div = document.createElement("div");
        div.className = "custom-cluster";
        div.textContent = count; // 顯示叢集內的標記數量
        div.style.background = count > 6 ? "#FF5300" : "#2CC295";
        div.style.color = "#fff";
        div.style.borderRadius = "50%";
        div.style.textAlign = "center";
        div.style.lineHeight = "40px";
        div.style.width = "60px";
        div.style.height = "60px";
        div.style.fontSize = "40px";
        div.style.zIndex = "1";
        div.style.display = "grid";
        div.style.placeItems = "center";

        // 返回自訂的叢集樣式和位置
        return new google.maps.marker.AdvancedMarkerElement({
          position,
          content: div,
          zIndex: 99,
        });
      },
    };

    return new MarkerClusterer({
      map,
      renderer: customRenderer,
      algorithm: customAlgorithm,
      gridSize: 60,
    });
  }, [map, mapInitialized]);

  const setMarkerRef = useCallback((marker, key) => {
    setMarkers((markers) => {
      if ((marker && markers[key]) || (!marker && !markers[key]))
        return markers;

      if (marker) {
        return { ...markers, [key]: marker };
      } else {
        const { [key]: _, ...newMarkers } = markers;

        return newMarkers;
      }
    });
  }, []);

  useEffect(() => {
    if (!map) return;
    const MapCanvasProjection =  google.maps;
    console.log(MapCanvasProjection);
  }, [map]);

  useEffect(() => {
    if (!clusterer) return;

    clusterer.clearMarkers();
    clusterer.addMarkers(Object.values(markers));
  }, [clusterer, markers]);

  // Generate markers outside of .map()

  return (
    <>
      {mapLists.map((mapItem, index) => {
        return (
          <CustomerMarker
            key={mapItem.key}
            mapItem={mapItem}
            index={index}
            activeMarker={activeMarker}
            handleShowStoreOpen={handleShowStoreOpen}
            setMarkerRef={setMarkerRef}
          />
        );
      })}
    </>
  );
}

export default ClusterMarker;