8

I am very much new to leaflet.

I have multiple markers plotted on my map in leaflet.

now I have to draw line between two markers when I select them.

Can any one help in doing this.

3
  • How you can select two circles at a time in leaflet??
    – Sunil
    Mar 4, 2013 at 13:12
  • Great answer.... can someone please tell me what should I do in case I want to Animate this line. For example: put a moving in the direction of the flow. A simple GIF images of arrow will also suffice my need. Jul 11, 2016 at 18:43
  • If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review
    – ArMoraer
    Jul 11, 2016 at 19:12

1 Answer 1

8

So it seems to me all you have to do is take the two markers you have selected and grab their latlngs and add them to the polyline.

var latlngs = Array();

//Get latlng from first marker
latlngs.push(marker1.getLatLng());

//Get latlng from first marker
latlngs.push(marker2.getLatLng());

//You can just keep adding markers

//From documentation http://leafletjs.com/reference.html#polyline
// create a red polyline from an arrays of LatLng points
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

// zoom the map to the polyline
map.fitBounds(polyline.getBounds());

Edit

In case you are looking for a way to also get the selected markers. You will need to probably listen to the click event of each marker and add the markers to an array that contains your selected markers. You will just need to limit that array to two entries. This is not an optimal solution but should get you there and will allow you to easily extend if you want more than two markers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.