Openstreetmap tiles won't cover 100% width

[fanfarian]

The map won't load 100% of the div-width. As you can see in the screenshot, 40-50% of the right map space is empty.

If I zoom and drag the map around it eventually works. Also works if I resize the browser window by a tiny fraction (1px). Also works on load if the browser window is <= 1400px.

I suspect some load event issues with my theme. Can I somehow re-init the map when all loading events of my theme are completed?

Page: https://gruender.lexoffice.de/unterwegs/

Shortcode: [tsmap track=2,4,6 user=@ height=550px class=mymap markers=n color=red,blue,green,#FF8300 infobar=false zoom=10]

Screenshot:

[tinuzz]

Hello Stefan,

I wish I could help, but I'm afraid this is a problem with Leaflet and not with Trackserver. Trackserver just adds a div element and initializes the map in it. It doesn't meddle with the way Leaflet loads tiles or how it decides which tiles to load.

Can you open an issue for Leaflet ? https://github.com/Leaflet/Leaflet

We can leave this issue open in the mean time, I'm interested in where it goes

Sorry I can't be of more help.

Best regards, Martijn.

[tinuzz]

Hi,

If I call this in the JS console after loading your page:

Trackserver.mydata.tsmap_1[2].track._map.invalidateSize()

the view is reset and the missing tiles are loaded. However, you need the Leaflet map object to do this, and the only place where that is stored, is with the track data, so you need to know the ID of one of the tracks to get to it. In the example above, it is the [2].

What I could do, is store a reference to the map object in mydata..all, so you could get to it without knowing a track ID.

I'll get back to you with more information.

Regards, Martijn.

[tinuzz]

In trackserver.js, on line 363, before var _this = this;, insert the following line:

this.set_mydata(mymapdata.div_id, 'all', 'map', mymapdata.map);

Then, somewhere in the page, when your theme is fully loaded, you can call:

Trackserver.mydata.tsmap_1.all.map.invalidateSize()

Is this helpful?

Best regards, Martijn.

[fanfarian]

Hi,

sorry for my late reply, I was a bit busy with other projects.

Your solution works beautifully. Thanks for your quick help.

Cheers, Stefan

[tinuzz]

Thanks. I will add the code to Trackserver. I'll leave this issue open until then. I'm quite busy with other stuff myself...

Cheers, Martijn.

[tinuzz]

This fix will be part of the next Trackserver release, hence I'm closing the issue.