CODEWITHSUNDEEP
javascriptnode.jsubuntuleafletleaflet-routing-machine
stackbiz
stackbiz

Reputation: 1450

How to change the icon of leaflet-routing-machine

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?

Upvotes: 0

Views: 212

Answers (0)

Related Questions