Search code examples
reactjsgoogle-maps-api-3geoserverwms

Is there any event listener to check if the wms layer has loaded or not in google maps?


In a react web application, I am overlaying wms tiles on google maps using map's property overlayMapTypes.

if (map && activeLayer) {
    let layer = new window.google.maps.ImageMapType({
       getTileUrl: activeLayer.type === "wms" ? getTileUrl : getWMTSUrl,
       tileSize: new window.google.maps.Size(256, 256),
       minZoom: 0,
       maxZoom: 24,
       opacity: 1.0,
       isPng: true,
    });
    map.overlayMapTypes.setAt(0, layer);
}

Some layers take time to load. So, I want to show a spinner or a message while the layer is being loaded. Is there an event to get the status of it to check if it is still loading or loading is completed?

There is an event listener tilesloaded, but this is for the google maps base tiles, not for the overlayed map tiles.

  useEffect(() => {
    if (map) {
      map.addListener("tilesloaded", () => {
        console.log("Tiles Loaded");
      });
    }
  }, [map]);

Solution

  • tilesloaded event listener is available for ImageMapType as well

          let layer = new window.google.maps.ImageMapType({
            getTileUrl: activeLayer.type === "wms" ? getTileUrl : getWMTSUrl,
            tileSize: new window.google.maps.Size(256, 256),
            minZoom: 0,
            maxZoom: 24,
            opacity: 1.0,
            isPng: true,
          });
    
          map.overlayMapTypes.setAt(0, layer);
    
          layer.addListener("tilesloaded", () => {
            console.log("Overlay tiles loaded");
          });