Leaftlet divIcon with clickable button

Question

I'm working on leaflet and I wanted to add click event for a icon in the custom divIcon as below,

If user clicks on the edit(pencile) icon then click event should trigger, Here is the code I'm working on..,

    const drawShapeLabel = (layer: L.Layer, geoJson, coord, offset, iconAnchor) => {
        const handleEditClick = (event) => {
            console.log("Edit clicked");
        };
        const labelIcon = L.divIcon({
            className: "shape-label " + geoJson?.properties.backendId,
            html: `
                    <div>
                        <img style="position: absolute; top: 6px;" src="${Rearrange}">
                        <span style="position: relative; right: -10px; top: -6px;">${
                            geoJson?.properties.label ? geoJson.properties.label : ""
                        }</span>
                        <img id="editButton-${geoJson?.properties.backendId}" 
                        style="position: relative; right: -12px; top: -2px; cursor: pointer;" 
                        src="${Edit}" onclick="{handleEditClick(event)}" alt="Edit">
                    </div>
                `,
            iconSize: [80, 20],
            iconAnchor: iconAnchor,
        });

        const marker = L.marker([coord[1], coord[0] + offset], {
            icon: labelIcon,
        });

        // marker
        //     .on("add", () => {
        //         alert("clicked");
        //         const button = document.getElementById(`editButton-${geoJson?.properties.backendId}`);
        //         alert("button");
        //         // if (button) {
        //         //     button.addEventListener("click", handleEditClick);
        //         // }
        //     })
        //     .addTo(context.map);

        // const marker = L.marker([coord[1], coord[0] + offset], { icon: labelIcon });
        // marker.on("click", () => {
        //     console.log("Edit clicked");
        // });

        // const marker = drawShapeLabelComponent(geoJson, coord, offset, iconAnchor);
        marker.addTo(context.map);
    };

I'm able to see the custom divIcon but onClick event is not triggring.

I tried few solutions like,

1. React Leaflet divIcon with clickable button
2. https://react-leaflet.js.org/docs/example-popup-marker/

Anyone could help me.

Answer 1

When working with leaflet-react I always recommend to work in a more "react" way. Instead of manipulation that layers and marker of the map use the correct tags.

When it comes to you specifik problem its hard to say exactly whats wrong. Since I dont have access to the full code. However as you can see from your code is the divicon never clickable its just static html.

I would recommend look over how you work with Markers. Make sure that you add them as regular react components. As they do in React Leaflet divIcon with clickable button You can then add a click eventHandler that will make it work. An important note here is that its click and not onClick in eventHandlers.

<Marker
  position={[51.505, -0.09]}
  icon={labelIcon}
  eventHandlers={{
    click: () => console.log("Edit clicked"),
  }}
/>

Give it a go and share more code if you cant get it to work.