SVG Path length in Leaflet Routing Machine

276 Views Asked by At

I am using Leaflet Routing Machine to create map route.

My requirement is, if there are multiple locations like A, B, C, D, E. I am getting the length of svg path from A to E. But i need length form A to B, B to C, C to D, D to E. Please help someone.

click to see image

Red color line is svg path. So, when i click on any marker then i need length from basel to that marker. i mean, i need to get length from basel to neuchatel or basel to bern or neuchatel to bern, etc.

var routeControl = L.Routing.control({
  waypoints: waypoints,
  reverseWaypoints: false,
  lineOptions: {
    styles: [{color: 'red', opacity: 1, weight: 3}]
  },
  geocoder: L.Control.Geocoder.nominatim({
    serviceUrl: 'http://localhost:8084/'
  }),
  createMarker: function(i, wp, nWps) {
    console.log(wp)
    let custom_icon = L.divIcon({
      iconSize: [100, 20],
      popupAnchor: [-30, -18],
      shadowUrl: '',
      html: '<div class="notification '+wp.name+'" data-pathid="'+(i+1)+'" style="color: #000;background-color: transparent;"><img src="img/blue.png"><span class="city-name">' + latlng[i].name + '</span></div>'
    })
    marker = L.marker(
      [wp.latLng.lat, wp.latLng.lng], 
      { 
        icon: custom_icon
      })
      .bindPopup(latlng[i].name)
      .openPopup()
      .addTo(map);
    // marker.on('click', onMarkerClick);
  }
}).addTo(map);
0

There are 0 best solutions below