Quantcast
Channel: Active questions tagged ubuntu - Stack Overflow
Viewing all articles
Browse latest Browse all 6015

How to change the icon of leaflet-routing-machine

$
0
0

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?


Viewing all articles
Browse latest Browse all 6015

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>