0

So what I want is for all the clusters and markers to be visible from the start. that is, when entering the page. But that's not the case.

Everything that should be on the map loads completely sporadically. Like when i hit hard refresh some times it suddenly wont load.

const bounds = Map.current
    ? Map.current.getMap().getBounds().toArray().flat()
    : null;

The code block above might be the issue. When the map is empty of markers and clusters this code block logs null aswell. How can i use this in useEffect if that could work?

Cluster code:

const points = useMemo(
    () =>
      data.map((store) => ({
        type: "Feature",
        properties: {
          cluster: false,
          storeId: store.id,
          category: store.country_code,
        },
        geometry: {
          type: "Point",
          coordinates: [store.coords[0], store.coords[1]],
        },
      })),
    [data]
  );

  const bounds = Map.current
    ? Map.current.getMap().getBounds().toArray().flat()
    : null;

  const { clusters } = useSupercluster({
    points,
    bounds,
    zoom: viewport.zoom,
    options: { radius: 75, maxZoom: 20 },
  });

Before and after refresh/move on map/saving code/pretty much anything

Unloaded

Loaded

So when i console log this: Console log clusters

Before:

Before loading

After:

After

Kruzt
  • 51
  • 1
  • 6

1 Answers1

0

@Kruzt are you using Mapbox GL JS? In that case, I'm not sure there's a need for the supercluster library. Have you tried something like this example? https://docs.mapbox.com/mapbox-gl-js/example/cluster/

Mikel Maron
  • 54
  • 1
  • No, i am using react-map-gl – Kruzt Jul 08 '22 at 07:28
  • react-map-gl is a React interface to Mapbox GL JS. And use-supercluster is a React interface to SuperCluster. My thought here is that using Mapbox GL JS built in clustering would address the issues you're seeing. It does look like react-map-gl support built in clustering directly https://visgl.github.io/react-map-gl/examples/clusters – Mikel Maron Jul 11 '22 at 14:31