Check if map is loaded!

[anxheloo]

Is there a way to check if map is loaded? and till it loads I want to show a loading indicator. I am trying this : const onLoad = useCallback((map) => {
mapRef.current = map;
}, []); with this prop in the Map component: onLoad={onLoad} , and trying to check if mapRef.current than do something, tried also to change a state inside this function but nothing happens with this .

[usefulthink]

Currently, you can only check if the Maps JavaScript API is loaded using the useApiIsLoaded hook.
If you want to wait until the map is fully rendered, you can use an overlay and the tilesloaded or idle events, roughly like this:

const MyMap = () => {
  const [mapIsReady, setMapIsReady] = useState(false);
  const handleTilesLoaded = useCallback(() => setMapIsReady(true), []);

  return <>
    <Map onTilesLoaded={handleTilesLoaded}>...</Map>
    {!mapIsReady && <div className="loading-overlay"></div>}
  </>;
};

[anxheloo]

Yeah overlay is working, thank you very much. It seems like a good solution