[OutSystems Maps] Leaflet Map not loading tiles correctly
outsystems-maps
Reactive icon
Forge component by Platform Maintenance
Application Type
Reactive

Hey,

We are moving to the OutSystems Maps, and when using the Leaflet version the tiles won't load correctly initially:

But once we resize the browser window the tiles suddenly load and everything is as it's supposed to be.

On this map, we have Markers and Polygon lines, but besides that we are not really doing anything else:

The container that holds the map does not have any styling.

We have tried to change the Zoom, the center position, the height, but this always happens.
We hit kind of a road block with this.

Looks like that there are also posts with this issue in StackOverflow but none of the solutions we found actually solved this problem:
https://stackoverflow.com/questions/53879753/leaflet-map-does-not-appear-correctly-until-resize

Update: Even without markers/polygon lines the tiles still only load after a window resize.

Thank you,
Luís Almeida

Hi Luís

Could you please share a sample OML and the steps to reproduce it?
Thank you in advance.

Cheers,
GM

Yes of course!


Hopefully you can also replicate it.

I included 2 screens, 1 where the tiles don't load:

 and another where they do.


But the solution I have does not seem optimal at all, and I noticed that it created some unintended behavior such as resetting the zoom

This is the scenario that we have, were we are loading maps inside tabs, and currently we have 3 tabs and each one of them has 1 map.

Thank you,
Luís Almeida

Mapstest.oml

Hi Luís

I can't replicate 100% of the time but I was able to replicate.
We'll try to understand what's happening and once I have news I'll reach out.

Cheers,
GM


EDIT: This seems to be an issue on the library as mentioned here so will try to provide a workaround for a future release

Hi @Luís Almeida 

On a quick test, I using our API, I was able to make it work by calling an API method on the Map_Initialized event (in the case of the Tabs you need to do the same on the TabChange event):

This is not a fix but it should unblock your use case.

Check a sample attached based on the module you shared.

Cheers,
GM


Mapstest_Mod.oml

Hi @Luís Almeida  

Any feedback on this topic?

EDIT: By the way the API call for version 1.6.0 should be the following instead:

MapAPI.MapManager.GetMapById("LeafletMap1").updateHeight();

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.