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);
};
Leaftlet divIcon with clickable button
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,
Anyone could help me.