Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Leaflet Routing Machine - Usage of options

Tags:

leaflet

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 !

like image 324
Sir Vico Avatar asked Dec 03 '15 22:12

Sir Vico


2 Answers

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

like image 105
iH8 Avatar answered Sep 30 '22 21:09

iH8


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

like image 45
Robert Kovacs Avatar answered Sep 30 '22 19:09

Robert Kovacs