[GIS] Google Maps Tiles Waiting for WMS Requests to Complete

google mapswms

We're using Geoserver WMS to render overlays on top of a google map (which works great), but upon first map load it appears that the base google map is waiting for the WMS requests to complete BEFORE rendering its own (google) tile. This means that while WMS overlays are loading, the base google map tile isn't there and we end up with a grey tile until it's done…rather than the normal google map tile without the overlay.

Example (Note: Black lines are just redacted labels…not relevant):
enter image description here

During panning/zooming we end up with the previous tile stuck until the WMS request has finished again (making it look pixelated). Understanding that the WMS tile may look this way because it hasn't loaded yet…but the base google map is also doing the same thing while the WMS request runs.

Example:
enter image description here

Once the WMS request finishes, the WMS tile and google map tile render normally and everything is fine.

Does anyone know how to tell google maps to NOT wait for the all WMS overlays to complete before rendering the base tiles?

We've tried modifying the googleMap.overlayMapTypes.setAt to ensure we've never using index 0 (which was a shot in the dark)…but otherwise, I can't seem to find any detail on this issue or how to work around. Perhaps I'm asking/searching the question the wrong way…

Anyone have any suggestions?

UPDATE:

After spending the day testing, it appears that this has something to do with the built in Google Maps ImageMapType. When we use the built in getTile method, this issue occurs. When we override the method and provide a standalone implementation it does not. Curiously, it seems that only the built in ImageMapType supports knowing when tiles are actually loaded. When we implement our own getTile method, tilesloaded/idle fires well before the WMS overlays are done rendering. This is not the case with the built in getTile method (unrelated to this issue but is a blocker for us just providing our own implementation and calling this one fixed).

So, in this implementation, we get grey tiles and pixelation.

// Extending google.maps.ImageMapType
public getTile(coord: google.maps.Point, zoom: number, ownerDocument: Document): Element {
    return super.getTile(coord, zoom, ownerDocument);
}

In this type of implementation we do not:

// Implementing google.maps.MapType
public getTile(coord: google.maps.Point, zoom: number, ownerDocument: Document): Element {
    var tile = ownerDocument.createElement('div');
    tile.style.height = "256px";
    tile.style.width = "256px";
    tile.style.opacity = "1";
    let url = this.options.getTileUrl(coord, zoom);
    let img = new Image();
    img.src = url;
    tile.appendChild(img);
    return tile;
}

Currently we're checking with Google support to see if they can shed any light. I'll keep this question updated.

Best Answer

The engineering team is aware of both the issues you raise. There is an internal ticket for the ImageMapType waiting to load all tiles and they recommend implementing your own getTile() function as a workaround.

In doing so you also lose the "tilesloaded" event; for which an issue is logged here: https://issuetracker.google.com/35830284

Related Question