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]);
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");
});