Leaflet Routing Machine - Usage of options

6
votes

I don't quite get how to apply options to the leaflet routing machine. This is the basic code to use the routing :

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

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.Routing.control({
waypoints: [
    L.latLng(57.74, 11.94),
    L.latLng(57.6792, 11.949)
]
}).addTo(map);

Now, what I wanna do is, hide the itinerary text, from what I wrote in the API it should look like this :

L.Routing.itinerary({
  show: false
 }).addTo(map);

But this isn't working, when I try to make the markers not draggable and make the route not changeable it also doesn't work, I think I'm doing something wrong, 'cause I can change what ever I want in the code, it won't change anything about the display...

Basically what I wanna do is show a route that cannot be changed by dragging the markers and no itinerary text, in other words, you cannot change the original display.

Thanks for your time !

3
leaflet

3 Answers

11
votes

You can apply the option directly to L.Routing.Control:

var routingControl = new L.Routing.Control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    show: false
}).addTo(map);

L.Routing.itinerary is the baseclass for L.Routing.Control. There is no need to create a instance of it. You've already got L.Routing.Control added to your map. Since L.Routing.Control is extended from L.Routing.Itinerary it also inherits the show option. See the API:

L.Routing.Control: Combining the other classes into a full routing user interface. The main class of the plugin. Extends L.Routing.Itinerary and implements IControl.

http://www.liedman.net/leaflet-routing-machine/api/#l-routing-control

4
votes

I disabled draggable markers by overriding the createMarker function in the control.plan and passing draggable: false to the marker. Here is a snippet of a read-only leaflet map control configuration with routing machine. 

var control, waypoints;

waypoints = [];

control = L.Routing.control({
  waypoints: waypoints,
  plan: L.Routing.plan(waypoints, {
    createMarker: function(i, wp) {
      return L.marker(wp.latLng, {
        draggable: false
      });
    }
  }),
  addWaypoints: false,
  routeWhileDragging: false,
  show: false
}).addTo(map);

Another similar answer: here

0
votes

No need to create a new L.Routing.plan since L.Routing.control() accepte a draggableWaypoints option , 

let waypoints = [...]
L.Routing.control({
    waypoints: waypoints,
    draggableWaypoints : false,//to set draggable option to false
    addWaypoints : false //disable adding new waypoints to the existing path 
}).addTo(map);