Tesla problem with Open Layers and Leaflet

[JohanVO (Johan)]

I show OSM-maps on my website with the Open Layers or Leaflet environment using the Tesla theme.
However when ‘sidebar hidden’ is selected the maps won’t show correctly on opening the page. When the browser window is resized everything snaps in place and functions correctly. This happens in all browsers (Mac & Windows).

Examples of both pages:
Open layers API: resolution is not correct and popup on marker doesn’t respond until window is resized
https://assets.natuurpuntmaldegemknesselare.be/Test/activiteiten/krakeelparking_ol.html

Leaflet API: map isn’t drawn completely on the right side and marker is not centered until window is resized
https://assets.natuurpuntmaldegemknesselare.be/Test/activiteiten/brug_st_joris_leaflet.html

When using left or right sidebar all is well.
Can anyone help with this problem?

[robbeattie]

Both maps and markers look fine here under Chrome on a Mac. I’m seeing the whole map on page load and the marker. When I click the first one it says something about parking. When I click the second, I get the name of the location. Could you grab a screenshot of what you’re seeing to compare?

Rob

[JohanVO (Johan)]

Thanks for the reply, Rob.

These are screenshots of the maps after initial page load (no window resizing)

The Open Layers page:
The resolution is not correct (marker too big and not responding)
(Sorry, as a new user, I can apparently only put one picture in the post)

The Leaflet page:
Resolution is ok and marker responding but map not centered and drawn on the right side

This was grabbed from Safari on Mac. It’s the same on Chrome and Firefox.
All is fine after the slightest resizing of the window.

Johan

[robbeattie]

There’s something else going on. Here’s what I see on page load.

Rob

and

[JohanVO (Johan)]

This is really strange.
Can you try a reload of the page?
Reloading the page, even after a window resize, generates the error.

This is what I get under Chrome:

I tried Chrome 20, Safari 6 (OSX 10.8.5) on an older Mac, with the same result.
Normally I work with Safari 11 and Chrome 66 (OSX 10.12.6).

Johan

[robbeattie]

Nope. Did a Ctrl Reload using Chrome 65 on a MacBook running Sierra 10.12.6.

Still looks fine.

Rob

[JohanVO (Johan)]

I just tried it on a Macbook running High Sierra using Chrome 66 and got the same map error.
Do you have any idea what could be going on here?

Johan

[robbeattie]

Maybe it’s a High Sierra thing?

[JohanVO (Johan)]

No, it’s not a High Sierra problem.
Tested it at work today on several computers (Mac - Mountain lion, Sierra, High Sierra & Windows 10) and different browsers (Safari, Chrome, Firefox, Edge), always with the same result.
In the preview mode in RW (7.5.5) the behavior is as in the browser:
Map not fully drawn on the right side on page load, everything snaps in place after window resize (see screenshot)
Still think it’s related to the ‘hidden sidebar’ option in the Tesla theme because I can’t reproduce it with any other theme and the problem disappears when the option ‘sidebar left’ or ‘sidebar right’ is on.

[JohanVO (Johan)]

I found a solution to the problem on the forum ‘stackoverflow.com’:

Resizing a leaflet map on container resize

Triggering the ‘map-container-resize event’ with a minimal delay solved the problem:
setTimeout(function(){ mymap.invalidateSize()}, 10);

Now the map is correctly centered on ‘myMarker’ on page load.

Maybe this helps someone with the same problem.

[instacks (Jannis from inStacks Software)]

Would be quite interesting for me if you encounter same problems with the OpenStreetMap Stack, which also uses Leaflet. Let me know if you are interested to test this