Leaflet Maps, refresh markers

Wappler General Need Help
1

I have a map with multiple markers.
I have a click event set on the markers which toggles a value in a database record between 0 and x (typically 1 - 30)
I have this working without problem.
However the color of the map pin should change from it's default blue to red (coded using Leaflet color attribute based on value of data element ). This works on page refresh so code is ok.
However i don't see a way to refresh the marker/ markers without refreshing the entire page which i don't want to do.

Can it be done, i expected a "marker refresh" action to be available but don't see one

2

Think i probably having a brief moment of stupidity here (again). Not near computer but i assume a simple server connection reload would trigger a map refresh. Will check tomorrow.

3

Nope, refreshing data set does not refresh leaflet map. Is there a Wappler way or do i have to resort to custom .js?

6

Seems to be working by triggerering

<script>
    function lmrefresh()
    dmx-parse('leafletmap1.load()');

</script>

from a flow, needed a 50ms wait before reloading data or timing issue was present delaying the map icon refresh

7

for info, this is what i am trying to achieve, currently using custom .js (with diagnostic notifications on). Blue means properties in that postal area unselected, red means selected

mapgif

8

Just to confirm what you are trying to achieve.
On click you update the database record and change the value used in the Color option of the marker, then you reload the markers data source but the marker color does not change?

Screenshot 2025-10-24 at 10.38.43
Screenshot 2025-10-24 at 10.38.43452×331 6.49 KB

9

No, the click action causes a database update.
Each post area has a field with the count of the houses in the area and a selected flag
When the marker is clicked, a database update toggles that the postcode to be included/ excluded from the group
The data query returns either 0 or the count of houses in the post code area, dependent on status, selected or not.
Sample data

    {
        "UVID_count": 27,
        "Elector_Number_Prefix": "DCG",
        "PostCode": "NE21 6AL",
        "Latitude": 54.953929,
        "Longitude": -1.726125,
        "houses": 14
    },
    {
        "UVID_count": 3,
        "Elector_Number_Prefix": "DCG",
        "PostCode": "NE21 6AS",
        "Latitude": 54.952763,
        "Longitude": -1.728018,
        "houses": 0
    },

The color change is simply toggled on the basis of the "houses" value being 0 or non zero

marker-color="houses>0?'red':'blue'"

In above case NE21 6AL would be red (non zero), NE21 6AS blue (zero)

i need the map to refresh on each pin click

10

That is what i also mean. Do you reload the markers data source after the update is done?

11

Yes, i am.
Click runs a flow to call database update then reload the data.
Ideally i want to run a leafletmap.refresh() on success of the data load which i am having to do with custom .js
Was hoping for a native Wappler way of doing this as the data load does not seem to automatically trigger a map refresh.

14

Do you need a Wappler solution?

Why not on server connect success call the flow -> run javascript -> lmrefresh?

1 Like
15

Thanks Franse
That's what i am doing now and it does remove the need for the wait but i hoped to remove the need to run the custom .js to refresh the map , a leaflet map refresh action seems a huge omission in my opinion or alternatively should the map not refresh automatically on data change, i suspect that is the correct course and probably the easiest change to the leaflet maps behaviour to force re-rendering

1 Like