Activity map zoom in/out doesn't always refresh the map correctly

Zoom is not needed to see this, just open the map on the full screen and check surrounding tiles.

If I have set google maps earlier, and have just opened an activity page, then after opening the full screen - working part is at the center, size of the minimap, surrounding tiles don't load. If I move the map up or down - then it loads only upper or lower tiles, on the right and left side it's grey. So it still loads tiles needed for the minimap, despite opening the full screen.

If I change to google maps after opening the full screen, then it's working ok. Even after closing the full screen, and opening it again - that's why it's important to reload an activity page, after it starts working, then it keeps working.

On your video it loaded surrounding tiles, if the video starts just after reloading an activity page - then maybe speed of connection can has effect, only because it then maybe loads more surrounding tiles for high speed connection. But size of the requested map view probably is still smaller then full screen.

But I didn't test if that's the case, it should be tested on same browser with normal connection and high speed. Or find size of the map view in code.

BunBun! said:

Zoom is not needed to see this, just open the map on the full screen and check surrounding tiles.

Zooming in/out is the topic of this thread. However, the opening of the full screen mode is on the video too - it starts on the small map of the Activity page, then opening the full screen. No strange effects, no gray rectangles, no empty space, full resolution, everything loads fine. No Google Maps opened in the background.

BunBun! said:

But size of viewport probably is still smaller then full screen.

Not sure what you mean. The full screen mode was a true full screen (1920x1080 pixels), additionally with the Chrome browser in the full-screen mode too (F11), and as I wrote, I even tried it with the browser window fully stretched across three monitors - it still loads the full screen mode without any ill effects.

I checked and the event named "load" makes the map to correctly resize. After opening the full screen, if working part is still as minimap, then this command refreshes it to full size:

document.getElementsByTagName('iframe')[0].dispatchEvent(new Event('load'))

BunBun! said:

But you can try this: make very small browser's window, open an activity page, click on the map's full screen - and then enlarge browser's window to your whole screen.

Just tried. It still works fine, no empty space, no unfilled rectangles, full resolution, full screen view filled instantenously. I could not use the video screen capture in this case, since it works for the active window only, and stops recording when I switch the browser window from mini-view to the full-size window, hence I recorded it with a phone, so it is a bit whacky, but demonstrating clearly there are no ill effects.

If you started with reloaded activity's page and it worked, then maybe time of loading resources has something to it (fast/slow PC).

I tried adding events listener, but I couldn't make it to log those events. I tried to see if map's resize is missing or maybe it runs too fast, before the window finish resizing.

When resize didn't do its job, then entering by hand an event: load (to iframe) or resize (to content of the iframe) makes the map properly resize and then it works normally.

(document.getElementsByTagName('iframe')[0].contentWindow).dispatchEvent(new Event('resize'))

BunBun! said:

If you started with reloaded activity's page and it worked, then maybe time of loading resources has something to it (fast/slow PC).

No, the loading is smooth for any activity with a map I open. No reloading needed. And no need for entering any code.

This is what I see. There's no Chrome zoom (I switched it off for simplicity), and I don't move the map at all.

1. I click on Activity and I see the main screen

2. Then I click the full screen icon straight away

That's the simplest way to see some of the problems. There are no problems with Internet connection or anything like that.

I did find another issue. I left the map in fullscreen mode and refreshed the page

Empty container with loading cursor and this error in the console:

Moseleyi said:

1. I click on Activity and I see the main screen

2. Then I click the full screen icon straight away

That's the simplest way to see some of the problems. There are no problems with Internet connection or anything like that.

Yes, that's why I did too, as you can see on the videos I posted earlier, and I see no issues at all. So either there is a problem with the bandwidth between you and Google's servers, or there might a browser extension interferring, and causing the problems (perhaps an ad-blocker?).

trux said:

No reloading needed.

I mean, that this happens with newly opened activity, if you interact with map, then you need to reload a page for fresh state for this to happen again.

I already checked without adblock and even on virtual machine with clean Chrome, it still happens.

It's not network issue, as after resize event - map works totally ok.

Of course you don't need to enter any code if it works, manual event (or switching to other map) is needed only if it didn't happen automatically. So the problem is why sometimes this resize function doesn't work by itself.

I'm not sure, but name indicates that this may be the leaflet-googlemutant, looking for this there were some similar issues.

And as Moseleyi wrote, an activity link can't be properly opened with parameter ?fullscreen=true (which is added to a link on opening full screen), so the function is buggy.