Map first render

[VolteCoOfficial]

Hi!

If my app is in dark mode and I set the style on the map to be DARK, the first render of the map is still light and it causes a flicker in my app on load.

How to avoid that?
How to set the map first picture?

I already have an onAPILoad hook but that did not help since the map initial frame is coming after load. Will come back with some code later.

[usefulthink]

When I create the map like this:

<APIProvider apiKey={API_KEY}>
    <Map
      colorScheme={'DARK'}
      {/* ...other props... */}
    />
  </APIProvider>

I don't see any flash in the wrong map-style, so I suspect that in your case the state-variable or prop controlling the color-scheme changes, and the Map component renders twice. This is really important to avoid, since that might actually double your cost.

[VolteCoOfficial]

Thank you very much. Will check my theme provider component if it renders double

[VolteCoOfficial]

export function MapComp({
  children,
  onClick,
}: {
  children?: React.ReactNode;
  onClick?: (event: MapMouseEvent) => void;
}) {
  const { theme } = useTheme();
  const { setZoomLevel } = useCurrentMapZoomLevel();
  const mapsApiLoaded = useApiIsLoaded();

  useEffect(() => {
    console.log("Rendering");
  }, []);

  if (!mapsApiLoaded) {
    return <DataLoader />;
  }

  return (
    <Map
      className="h-full w-full"
      defaultCenter={{ lat: 147.267585012804254, lng: 39.48881287724141 }}
      defaultZoom={DEFAULT_ZOOM_LEVEL}
      gestureHandling={"greedy"}
      disableDefaultUI={true}
      mapId={MAP_ID}
      colorScheme={theme === "dark" ? "DARK" : "LIGHT"}
      reuseMaps={true}
      streetViewControl={true}
      renderingType={"VECTOR"}
      onClick={onClick}
      onZoomChanged={(event) => setZoomLevel(event.detail.zoom)}
    >
      {children}
    </Map>
  );
}

This debug useEffect prints to console only once. So there is no double rendering

[VolteCoOfficial]

I'm sure it renders once. Here it is what I see

[mrMetalWood]

I think your debug useEffect only renders once because you added an empty dependency array ([]). That tells react to only render once.

A few things to try:

• console.log(theme) right after getting it with useTheme and see if it really always is "dark"
• Hardcode "DARK" in the colorTheme prop and see if the issue still exists.