how it is possible to change the color of the itinirary from red to another color with the leaflet routing machine library ? I have to change the styles option with the L.Routing.Line, but I don't know how. /

import L from 'leaflet';

class CarteController {
  /* @ngInject */
  constructor($http) {
    this.name = 'carte';
    this.$http = $http;

    this.map = L.map('map');

    L.tileLayer('http://{s}.tile.osm/{z}/{x}/{y}{r}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(this.map);

    const control = L.Routing.control({
      waypoints: [
        L.latLng(45.750000, 4.850000),
        L.latLng(45.188529, 5.724523999999974),
        L.latLng(45.00, 5.74)
      ],
      routeWhileDragging: true,
      geocoder: L.Control.Geocoder.photon()
    });
    control.addTo(this.map);
    control.on('waypointschanged', () => {
      console.log(control._routes[0].summary.totalDistance);
      this.distance = `${Math.round(control._routes[0].summary.totalDistance / 1000)} km`;
      this.temps = this.secondsToHm(control._routes[0].summary.totalTime);
    });

    new L.Routing.Plan({
      geocoderPlaceholder: (i, numberWaypoints) => {
        return i === 0 ?
          'Départ' :
          (i < numberWaypoints - 1 ?
            `Via ${i}` :
            'Arrivée');
      }
    }).addTo(this.map);
  }

  secondsToHm(d) {
    console.log(d);
    d = Number(d);
    const h = Math.floor(d / 3600);
    const m = Math.floor(d % 3600 / 60);
    return ((h > 0 ? h + " h " + (m < 10 ? "0" : "") : "") + m + " min"); // eslint-disable-line
  }
}

export default CarteController;

how it is possible to change the color of the itinirary from red to another color with the leaflet routing machine library ? I have to change the styles option with the L.Routing.Line, but I don't know how. http://www.liedman/leaflet-routing-machine/api/

import L from 'leaflet';

class CarteController {
  /* @ngInject */
  constructor($http) {
    this.name = 'carte';
    this.$http = $http;

    this.map = L.map('map');

    L.tileLayer('http://{s}.tile.osm/{z}/{x}/{y}{r}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(this.map);

    const control = L.Routing.control({
      waypoints: [
        L.latLng(45.750000, 4.850000),
        L.latLng(45.188529, 5.724523999999974),
        L.latLng(45.00, 5.74)
      ],
      routeWhileDragging: true,
      geocoder: L.Control.Geocoder.photon()
    });
    control.addTo(this.map);
    control.on('waypointschanged', () => {
      console.log(control._routes[0].summary.totalDistance);
      this.distance = `${Math.round(control._routes[0].summary.totalDistance / 1000)} km`;
      this.temps = this.secondsToHm(control._routes[0].summary.totalTime);
    });

    new L.Routing.Plan({
      geocoderPlaceholder: (i, numberWaypoints) => {
        return i === 0 ?
          'Départ' :
          (i < numberWaypoints - 1 ?
            `Via ${i}` :
            'Arrivée');
      }
    }).addTo(this.map);
  }

  secondsToHm(d) {
    console.log(d);
    d = Number(d);
    const h = Math.floor(d / 3600);
    const m = Math.floor(d % 3600 / 60);
    return ((h > 0 ? h + " h " + (m < 10 ? "0" : "") : "") + m + " min"); // eslint-disable-line
  }
}

export default CarteController;

• javascript
• angularjs
• ecmascript-6
• leaflet

1 Answer 1

According to the doc :

 L.Routing.line(yourRoute, {
   styles:[{color: 'black', opacity: 0.15, weight: 9}, {color: 'white', opacity: 0.8, weight: 6}, {color: 'green', opacity: 1, weight: 2}]
});

source:http://www.liedman/leaflet-routing-machine/api/#lineoptions

You can also try in the Control:

L.Routing.control({
   waypoints: waypoints,
   lineOptions: {
      styles: [{color: 'white', opacity: 1, weight: 5}]
   }
}).addTo(this.map)

source: https://trustdarkness./wordpress/leaflet-routing-machine-custom-icons-and-custom-lines/