After creating a map using leaflet and adding markers to different locations, I implemented code that displays a popup div with a message when a marker is clicked. Here is the code snippet:
markers.on("click", function(d) {
div.html("This is Some info").style(
"left", (d3.event.pageX) + "px").style(
"top", (d3.event.pageY - 80) + "px");
}
The issue arises when dragging the map; the markers move while the div remains static. How can I update the div's style during the drag event so it moves along with the marker?
I attempted the following code within the drag event method:
if(d.code==clickedcode)
{
console.log((map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px , "
+(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px");
div.style["left"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px";
div.style["top"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px";
}
However, the div continues to show the same pixel position as before.