perliedman / leaflet-routing-machine

Control for routing in Leaflet
https://www.liedman.net/leaflet-routing-machine/
Other
1.08k stars 350 forks source link

show estimated time and length on routes #605

Closed RZsam closed 3 years ago

RZsam commented 4 years ago

hi there. I've searched through docs and issues but did not find anything. can distance and time between two waypoints be shown on route like google maps?

image

perliedman commented 3 years ago

Nothing built in to do this, but you can do it by using for example the routeLine option.

amjedGabteni commented 2 years ago

here how i get it to work ( idont know if it's the best way to do it , but it work )

 var group = new L.layerGroup().addTo(this.map)
 route.on('routeselected', function (e) {
     var route = e.route;
     var blankMarker = L.icon({
       iconUrl: "../../assets/imgs/home/map-marker.png",
       iconSize: [0, 0],
       iconAnchor: [0, 0],
     });
     var distance = (e.route.summary.totalDistance / 1000).toFixed(2);
     var time = Math.round(e.route.summary.totalTime % 3600 / 60);
     var pop = `<div id="container">
    <div id="content">
     <div class="details-text">Distance : <b>`+ distance + ` Km</b></div>
     <div class="details-text">Temps estimé: <b>`+ time + ` Min</b></div>
  </div>`;
     console.log('route selected ', e.type)
     var marker = L.marker([route.coordinates[50].lat, route.coordinates[50].lng], { icon: blankMarker }).bindTooltip(pop, {
       permanent: true,
       direction: 'top'
     });
     if (e.type === 'routeselected') {
       //marker.remove()
       group.clearLayers();
       group.addLayer(marker)
     }
   });