[Leaflet] Problems in map's rendering?

Hello folks! 

1) I have a screen split into 3 tabs/web blocks. The map when inside the popup in one of the tiles or on the page but outside the web tiles, renders normally. 

But when I try to complete it inside the web block it crashes the display so I need to F11 to appear as it should (I did the test on different machines / browsers, no idea what it can be).

Initially I thought the problem was to use a web block inside another web block. But then instead of keeping a web block in one of the tabs, I took the same content and put it in an accordion - and the map renders normally.

My question then would be if I can confirm that it would be a plugin problem with this tab component or if it would still be something else.

___________________________________________________________________________

2) Also, I would like to ask about map refresh. When I save the new location in the popup, clicking on the popup again will render the map updated. But I have a static map on the screen, outside of this popup, which is not updated after the popup save.

Since it is a form, I should not refresh the entire page, as I would lose what was changed in the previous fields. I know that in a traditional web application it would be enough to define which container we would like to refresh, but in the case of a reactive application, I should keep it inside a web block, correct?

___________________________________________________________________________

3) Now, trying to use the same web block with the map in accordion causes me the popup not to be over the static map of the form, while in the tab it works fine - both use the same web block. Here are the images below:


Hi Motta,

Can you create a demo application that demonstrates the issues in item #1? This will help me investigate this issue better.

For Item 2 I would have the popup throw an event when it's closed. The screen where the form resides can then retrieve the new data for the map and display it via the input parameters or via the available actions.

Item 3 is a Z-Index issue. If I recall correctly the Leaflet map is displayed at index 1000. So you either need to override that number of increase the z-index of your carousel.

Hope this helps.

Greetings,

Vincent

Hello Vincent! Unfortunately, I still haven't had time to generate a demo with the examples covered, but I believe that the problem presented must be related to another issue.

The lat and long in our database are as text, so we have to use a function to convert them to decimals. I imagine this is what is impacting the initial rendering of the map - once I set the initial latitude and longitude to a specific value, the display happens immediately.

As an interim measure, I ended up setting a javascript timer to force the map to display. I will do more tests and after completion (and being able to review this screen in particular), I will return here with more reports. Thank you for your attention!

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