Here is the usage of "new L.Routing.Control()
":
Leaflet Routing Machine - Usage of options
I copied the code and then modify it by adding two "routingControl_1
" and "routingControl_2
":
var routingControl_1 = new L.Routing.Control({ waypoints: [ L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949) ], show: false}).addTo(map);var routingControl_2 = new L.Routing.Control({ waypoints: [ L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949) ], show: false}).addTo(map);
But the two "L.Routing.Control()
"s have the same icon "leaflet.routing.icons.png
" in the UI.
Here is the source code related to "leaflet.routing.icons.png":(I downloaded this project and then search all files contains the keyword "leaflet.routing.icons.png
")
https://github.com/perliedman/leaflet-routing-machine/blob/master/dist/leaflet-routing-machine.css
.leaflet-routing-icon { background-image: url('leaflet.routing.icons.png'); -webkit-background-size: 240px 20px; background-size: 240px 20px; background-repeat: no-repeat; margin: 0; content: ''; display: inline-block; vertical-align: top; width: 20px; height: 20px;}
https://github.com/perliedman/leaflet-routing-machine/blob/master/src/itinerary-builder.js
createStep: function(text, distance, icon, steps) { var row = L.DomUtil.create('tr', '', steps), span, td; td = L.DomUtil.create('td', '', row); span = L.DomUtil.create('span', 'leaflet-routing-icon leaflet-routing-icon-'+icon, td); td.appendChild(span); td = L.DomUtil.create('td', '', row); td.appendChild(document.createTextNode(text)); td = L.DomUtil.create('td', '', row); td.appendChild(document.createTextNode(distance)); return row;}
The "createStep: function(text, distance, icon, steps)
" has an icon
argument, but I don't know how to set it when creating the "new L.Routing.Control()
".
# Here is the dummy code.
var routingControl_1 = new L.Routing.Control({ waypoints: [ L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949) ], show: false, custom_icon: /path/to/my_icon_1.png}).addTo(map);var routingControl_2 = new L.Routing.Control({ waypoints: [ L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949) ], show: false, custom_icon: /path/to/my_icon_2.png}).addTo(map);
How to set the custom icon for L.Routing.Control
?