Leaflet markers - dynamic attributes doesn't work for me?

[m_gabor]

Hi all,

Just trying to get my first leaflet map work based on Teodors docs, but whatever I try, it is just not working for me.
The goal is to show one single marker with dynamic lat and long values.
Added the map without any issue. Then added a marker and set its dynamic attributes to the right values.

<div class="col">
                                <div is="dmx-leaflet-map" id="map_breeder" latitude="47.1817585" longitude="19.5060937" address="Hungary" zoom="10" style="width: 100%; height: 600px;">
                                    <dmx-leaflet-marker id="leafletmarker" dmx-bind:latitude="sc_get_breeder_details.data.qry_get_breeder_details.latitude" dmx-bind:longitude="sc_get_breeder_details.data.qry_get_breeder_details.longitude"></dmx-leaflet-marker>
                                </div>
                            </div>

The result in the console below, lat and long is null.

Obviously the values are returned from the database:

Also tried with dynamic markers, same result...

Just a guess, but probably Leaflet loads before these values returned from the query, in this case how do I refresh Leaflet on a sc success?

Could anyone point me to the right direction?

Gabor

[famousmag]

which wappler version you use?

Just asking...
have you checked/enabled the "dynamic markers"?

[m_gabor]

Latest beta channel

Tried with dynamic markers setting the lat/long details there, but got the same result.

[George]

And how is the dynamic data loaded? Because it is probably loaded later and not initially available during the init of the leaflet map

[m_gabor]

Hi @George

Probably that is the case. It is a normal sc data (auto load).
The map is in a tab if that makes any difference?

Gabor

[Cheese]

Not sure if Tabs are the same as Modals where by you have to reinitialise (invalidate size in Leaflet terms) the map using a Dynamic Event on shown..? This will then re-render the map instance. Like I said I am not sure if you have the same Dynamic Events for Tabs as you do for Modals... If not then maybe they need to be added in the future?

[George]

Make sure your server connect comes first in html, preferably on the top somewhere and later the leaflet map

[m_gabor]

It does, I have a section first for all server connects, then the actual page.

[m_gabor]

Probably the same as modals as I had to use invalidateSize() to make it work.

Unfortunately there is no onShow event for the map. An onShow or reinitializeMarkers or something like that would be great, so we could use the server connects onSuccess event, where the location data is coming from.

As a temporary solution I used the Tab header onClick event for invalidateSize() and addMarker() so I could add my bindings.

[Cheese]

@m_gabor

Unfortunately there is no onShow event for the map. An onShow or reinitializeMarkers or something like that would be great, so we could use the server connects onSuccess event, where the location data is coming from.

You can select from a wide range of events for the map based on Server Action responses within Dynamic Events for the Action itself.

Would be helpful to have the same events for Off Canvas and Tabs as Modals have, so an on show event could be triggered? Maybe something @George could investigate as it is very useful when you know it exists (we use it a lot with modals).