Leaflet Markercluster - write persistent data to each marker

Question

I have a map implemented via leaflet and there is a button to send the bounds of the map to a server which in turn responds to me with an array of elements. Each element has a latitude, a longitude and a unique id.

What I get from the server looks roughly like this:

[{
    "poi_marker": "redMarker.png",
    "poi_id": 412, //this is my unique ID
    "poi_pos": {
        "lat": 17.53243,
        "lng": 14.52353
        }
},...]

So far my code looked like this:

function createAndAddMarker(prefill) {
    let marker = createMarker(prefill.poi_pos, prefill.poi_marker);

    map.addLayer(marker);
    marker._icon.dataset.uniqueId = prefill.poi_id;

    return marker;
}

function createMarker(coords, iconUrl) {
    let redMarker = L.icon({
        iconUrl: iconUrl,
        iconSize: [20, 32], // size of the icon
        iconAnchor: [10, 32], // point of the icon which will correspond to marker's location
    });

    let createdMarker = new L.marker(coords, {
        draggable: true,
        zIndexOffset: 101,
        icon: redMarker
    });

    return createdMarker;
}

and that worked fine! Now that I tried to implement leaflet.markercluster the first function looks pretty similar:

function createAndAddMarker(prefill) {
    let marker = createMarker(prefill.poi_pos, prefill.poi_marker);

    clusterLayer.addLayer(marker); //clusterLayer = layer that got created & added a when map did
    marker._icon.dataset.uniqueId = prefill.poi_id;

    return marker;
}

but there is already 2 problems with it.

1. Not all the markers get actually drawn to the map because some are already clustered. For these items that don't get drawn, the line marker._icon.dataset.uniqueId = prefill.poi_id will throw an error as it can not find "marker._icon" because the marker doesn't seem to have an icon as long as it's not drawn.

2. The markers that get drawn get the uniqueId written onto them, but if I zoom out and make them cluster up too, the original marker+icon gets removed from the DOM and readded when I zoom in again. Unfortunately, it get's readded without my unique-id, so I have no idea how to persistenly link the marker with the unique Id.

I need to get corresponding unique-ID to a marker, every time I click on it, but have no idea how to achieve this.

Your input is very much appreciated!

If something is unclear pls let me know and I will attempt to clarify as much as possible.

Thanx in advance!

Answer 1

As you have very well spotted, the Leaflet Marker icon may be removed from DOM / recreated from scratch when Leaflet.markercluster plugin needs to hide the Marker (e.g. if it is clustered or far away from the view port).

Hence attaching data to that icon is troublesome.

But you have several other possibilities to attach your data to the Marker instead, as described in Leaflet: Including metadata with CircleMarkers:

• directly to the Marker object
• within the options when creating the Marker
• to the Marker Feature properties

You do not necessarily need to use a DOM object's dataset to attach your JavaScript data.