CODEWITHSUNDEEP
cssgoogle-mapsd3.jsleaflet
Md Johirul Islam
Md Johirul Islam

Reputation: 5162

How to move popup div along with marker in leaflet

I have a map drawn using leaflet. In that map I have drawn several markers at different locations. On clicking the marker I am creating a popup div that shows some message. I have the code:

markers.on("click", function(d) {
    div.html("This is Some info").style(
        "left", (d3.event.pageX) + "px").style(
        "top",  (d3.event.pageY - 80) + "px");
}

So the div appears in the location where I clicked i.e. at the location of the marker. Now if I drag the map the markers move along with the map but the div remains at the same location. How can I change the style of div with drag event so that the div also moves along with marker?

I was trying the following code in 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";
}

But it still shows the same pixel position as previous time.

Upvotes: 1

Views: 1505

Answers (1)

jbdev
jbdev

Reputation: 751

You could try using the map 'drag' event to calculate the shift and then apply that to your div location. Something along these lines...

    var startCoords;
    var startLat;
    var startLng;
    var movedCoords;
    var shiftLat;
    var shiftLng;

    map.on('dragstart', function() {
        startCoords = map.getCenter();
        startLat = startCoords.lat;
        startLng = startCoords.lng;
        console.log("STARTED FROM:  " + startLat + "," +startLng);

    });

    map.on('drag', function() {
        movedCoords = map.getCenter();
        shiftLat = startLat - movedCoords.lat;
        shiftLng = startLng - movedCoords.lng;
        console.log("Shifted:  " + shiftLat + "," + shiftLng);
        //apply shift to custom div here...

    });

Upvotes: 2

Related Questions