Is there a way to change the color of the itinerary from red to a different color using the Leaflet routing machine library? I need to modify the styles option with the L.Routing.Line, but I'm not sure how to do it.
import L from 'leaflet';
class MapController {
/* @ngInject */
constructor($http) {
this.name = 'map';
this.$http = $http;
this.map = L.map('map');
L.tileLayer('http://{s}.tile.osm.org/{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.time = this.secondsToHm(control._routes[0].summary.totalTime);
});
new L.Routing.Plan({
geocoderPlaceholder: (i, numberWaypoints) => {
return i === 0 ?
'Starting Point' :
(i < numberWaypoints - 1 ?
`Via ${i}` :
'Destination');
}
}).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 MapController;