Leaflet in modal no marker

web-works · November 25, 2024, 3:10pm

I have a list of addresses with a button to data-detail. Clicking the button will open the modal and show leaflet map. Centered as initiated. The address plus coordinates from the Data_Detail are show in the heading, but not on the map. No marker either.
How can I fix this?
It is at Adressen in Skuzum

This is the code:

<div class="modal-body">
                    <div is="dmx-leaflet-map" id="leafletmap1" latitude="53.0425366" longitude="5.4190261" address="Boppesteech 1, Idsegahuizum" zoom="17" style="width: 100%; height: 600px;" scale-control="true" scale-control-imperial="false" dmx-bind:markers="ddadres.data" marker-id="id_adres" marker-latitude="breedtegraad" marker-longitude="lengtegraad" marker-tooltip="straat+' '+huisnummer" keyboard="false">
                    </div>
                </div>

Teodor · November 26, 2024, 6:54am

What happens if the map is on the page, do you then see the marker?

web-works · November 26, 2024, 9:05am

It is on the page now, but no marker.
So I have 2 maps on the page now. The top one its data from data-detail and shows no markers.
The bottom one gets data from the regular server action and shows all the the markers.

Teodor · November 26, 2024, 1:57pm

On your page you have 2 data detail regions: ddadres and ddadres1. With your button you are setting the data to the ddadres1 but for the map you are using dmx-bind:markers="ddadres.data" so as no data is set for it, no pins are shown. Make sure to use the same data details for both the button that sets the data and in the map.

web-works · November 26, 2024, 2:40pm

Ok, I totally remove the modal with the map. So now only the upper map on the page use ddadres. No more ddadres1.
The lower map still uses the basic sc.
The detail map still shows no Marker, although the address in the para above it shows the selected address from ddadres.

Teodor · November 26, 2024, 2:47pm

I see the issue. The problem is that the leaflet map expects an array and the data detail does not return an array but a single item object. You need to use the server action there directly and filter it instead.

web-works · November 26, 2024, 4:02pm

I will try and get that done. No guarantees that I will do it correctly. You know my math is not very good.

web-works · November 27, 2024, 9:35am

Took me some time (as usual), but got it working now as I intended. Thanks @Teodor

brad · June 23, 2026, 3:31am

@web-works @Teodor

I'm facing this same issue. I have a Leaflet map that gets its lat/long from a data detail in a modal. I can successfully get the map to show in the modal but it does not show any markers.

This thread says it was solved but doesn't say how it was solved. Has anyone gotten markers to show in a modal using data detail?

Teodor · June 23, 2026, 5:28am

Yes the solution is to:

web-works · June 23, 2026, 9:18am

Happy to be able to be of help instead of asking for it:
Filter record set:

Button link:

<button id="btn2" class="btn btn-warning mt-3" dmx-on:click="modalmap.show();modalmap.form1.filter.setValue(id_deelnemer)">Toon op kaart</button>

The form in the modal. Form type = GET:

 <form id="form1">
  <input id="filter" name="filter" class="form-control" dmx-bind:value="scfilter.data.query[0].id_deelnemer" type="hidden">
</form>

The filter: