perliedman / leaflet-routing-machine

Control for routing in Leaflet

Leaflet Routing Machine

This plugin is barely maintained! It has been a good long while since I had any reason to work with routing or Leaflet, and it does not look like that will change. I do not spend time on maintaining this plugin, and only rarely can I find time to respond to issues. If you want to take over as maintainer, feel free to contact me at [email protected].

Find the way from A to B on a Leaflet map. The plugin supports multiple backends:

• OSRM - builtin and used by default (version 5)
• Mapbox Directions API - builtin with the class L.Routing.Mapbox
• GraphHopper - through plugin lrm-graphopper
• Mapzen Valhalla - through plugin lrm-valhalla
• TomTom Online Routing API - through plugin lrm-tomtom by Mathias Rohnstock
• Legacy support for OSRM version 4 through plugin lrm-osrm4
• Esri - through plugin lrm-esri

Features

• Standard Leaflet control, with Leaflet look and feel
• Routing from start to destination, with possibility of via points
• Add, edit and remove waypoints through both address input and using the map
• Multiple language support
• Highly customizable for advanced use
• Customizable look (theming / skins)
• Open Source released under ISC License (more or less equivalent with the MIT license)

Go to the Leaflet Routing Machine site for more information, demos, tutorials and more.

Update 2020-04-06: Out of the box, Leaflet Routing Machine relies on OSRM's demo server. At this moment, the demo server (which is outside scope of the plugin and outside control of the plugin's author) is no longer maintained, and its SSL certificate has expired. The plugin will not work unless you configure a routing backend yourself. I am sorry to say that, to my knowledge, there is no good default.

Support and New Features

Leaflet Routing Machine is in many ways already a feature complete routing UI. Most likely, your requirements are already covered and require very little adaptation.

For questions and discussions, you might want to look at the Leaflet Routing Machine gitter.

Building

npm install

This requires Node and npm, as well as grunt.

Usage

Download latest release, or obtain the latest release via unpkg.com.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-routing-machine.js"></script>

or via npm:

npm install --save leaflet-routing-machine

var L = require('leaflet');
require('leaflet-routing-machine');

...

LRM attaches itself onto L.

Go to the Leaflet Routing Machine site for more information, demos, tutorials and more.

leaflet-routing-machine's Issues

Clearing route

So this is a known issue, but does anyone know of a workaround to clear the route?

Perhaps I'll have to clear the whole map div and reload it?

Snapping markers to the route geometry

It should be possible to snap the marker to the geometry of the nearest road segment.

An alternative would be to display a dashed line from the marker to the route, to give the user a visual cue that there is no geometry at that point.

Best would be to have an option for both. :-)

Pedestrian routing

Hello,

Is it possible to create pedestrian routing ?

Thanks :)

allow options to be passed to specify serviceUrl for OSRM

in L.Routing.Control.js

            initialize: function(options) {
                    L.Util.setOptions(this, options);

•                   this._router = this.options.router || new L.Routing.OSRM();
  

•                   this._router = this.options.router || new L.Routing.OSRM(options);
                  this._plan = this.options.plan || L.Routing.plan(undefined, { geocoder: this.options.geocoder });
                  if (this.options.geocoder) {
                          this._plan.options.geocoder = this.options.geocoder;
  

Hide/show sidebar

It should be possible to hide (and then show) the control's sidebar.

draggableWaypoints & addWaypoints not working

Hello,

I'm trying to integrate leaflet & routing machine into my application.
I have an issue when I'm trying disable adding new waypoints:

    L.Routing.control({
      waypoints: waypoints,
      draggableWaypoints: false,
      addWaypoints: false,
      show: false,
      routeWhileDragging: false
    }).addTo(this._map);

Buy I still can add new waypoint by clicking, and still can drag this waypoints.

How can I disable it completely?

PS
Also I can't disable route dragging. How can I do this?

LRM and leaflet 0.8 dev

Does LRM wordt with leaflet 0.8?

i'm getting browser erros like "Uncaught TypeError: Cannot read property 'call' of undefined"

Defining Waypoints

I have seen in the documentation that IWaypoint is defined as having a lngLat and name variables. How do I define the array of IWaypoints to pass to L.Routing.Control so that the 'name' variable is passed to waypointIcon function.

Hide itinerary instructions

Hi,

I'm currently trying to put a route map on my website. I want to display the road, but not the text instructions without modifying the CSS (like display; none on .leaflet-routing-alt).

Is there a solution for doing that ? I've searched but I didn't manage to find a solution.

Thanks !

can we change backend?

I am using this plugin and it is using osrm backend.

i am using leaflet and ptv xserver xmap (http://xserver.ptvgroup.com). It has also xroute service for routing.

can i use xroute service instead of your backend service? if yes then how and what changes need to required.

Please provide solution asap.

Regards,
Dharmesh

Is there any way to know when the route has been found

Is there any event or other mechanism to know whether and when a route has been found and available in the object instance to manipulate?

I want to save the points in the route to a database to avoid abusing the routing server with repeated requests as in my application I would have hundreds of people viewing the route for any one redoing the route.

Processing many subsequent JSON requests

There are timing issues when processing many subsequent JSON requests if some of the requests are still pending while others are being resolved.

How to reproduce:

• generate a route
• quickly drag one marker around the map
• stop dragging but keep the mouse button clicked

Observation:

• multiple routes to previous locations of the marker are drawn and deleted until the final route to the marker's current position is drawn

Expectation:

• no intermediate routes are drawn

Possible Solution:

• embed some counter in the json request (see osrm-frontend-v1) and only process the json response with the current system counter

Related issue:
When releasing the mouse button in step three of the above example, unpredicted results may arise:

• the marker may jump back to a previous location and this becomes the final route
• the marker may stay at the current position but the final route is drawn to a previous location, effectively disconnecting marker and route.

Possible Solution:

• after dragging is done, i.e. the marker released, issue another request to the server (which will be the route that will be drawn when using the possible solution for the above problem)

Improve itinerary description

The text description of a route is sometimes hard to follow, and not very detailed. Look into what can be improved.

See for example: #6 (comment)

Examples not working!

Hello, I've checked http://www.liedman.net/leaflet-routing-machine/styling.html several times during last week, and it worked ok. But today, none of the three examples is working... perhaps an issue with OSRM? Thank you!

Geocoder name issue

I am trying to setup the combination of both the routing machine and the geocoder you made, but I am running into some problems. The example code uses the geocoder with capital G like so:

geocoder: L.Control.Geocoder()

However, when I do that, I get an empty routing box on the webpage like so:
https://www.dropbox.com/s/xbbh1jsl5rp6k1e/Screenshot%202014-10-03%2011.01.19.png?dl=0

On the other hand, if I change the Geocoder to geocoder I do get the expected interface:
https://www.dropbox.com/s/g5peincokpfrvgx/Screenshot%202014-10-03%2011.05.37.png?dl=0

But when pressing enter I get the following js error:

Uncaught TypeError: object is not a function main.js:9524L.Routing.Autocomplete.L.Class.extend._complete main.js:9524L.Routing.Autocomplete.L.Class.extend._keyPressed main.js:9452handler

It seems as if the the completefn is uknown
https://www.dropbox.com/s/9x7hkdo3jz3d6ls/Screenshot%202014-10-03%2011.06.12.png?dl=0

Should I set it in some way? Thank you very much, also for the plugins! They are great!

Make it possible to control how the map view is set

See Project-OSRM/osrm-frontend#23

No feedback when geocoder doesn't return any results

Removing a L.Routing.line() added to map

I've added a line to the map using

L.Routing.line(routes[0]).addTo(map);

when a user drops a pin on the map. When they drop a new pin, I'd like to remove the previous line, but don't see a method for removing it.

Use JSON instead of JSONP to be CSP compliant

Hi,

I'm working on a FirefoxOS application, using leaflet-routing-machine (which works great btw).
Since FirefoxOS enforce CSP, and your lib is using JSONP, I can't make a privileged app.

It would be quite easy to replace JSONP with classic JSON no ?

I'd happy to hear your thought about this.

Thanks !

Autocomplete results can show behind other elements

Since the autocomplete results' div is attached after the input element, it might end up behind other positioned elements that don't belong to the routing control's container.

Fix by adding the results container to the body instead, but this requires some work with calculating the position.

Interactive example doesn't work

Hi, I don't get it working neither Chrome nor Firefox. I copied the code and tryed it in my server and I haven't had luck either.

First question:
I want to use a line to get the route between two point without using the default L.Routing.Control, I want to create amuch more minimalistic display at this stage and I thought that it could be the way. Am I right?.
For sure I'l need the summarize data to get distance and time information.

Second: if I choose the L.Routing Control, I need to change the default language to mine. I guess with a forked version and by modifying the _getInstructionTemplate function could work.

I highly appreciate any hints, I am a totally beginner with mapping and javascript too.
Thanks :)

Walking directions

Hello, I'm using the routing machine on a Drupal installation, and could not figure out how to specify to OSM the route as walk/foot instead of driving/car. Is that supported? If it is, how must be specified?

Select alternative route after result has been scrolled

If two alteratives are shown, and one of them is scrolled so that just part of the itinerary is visible when minimized, it is hard to click the alternative, since an itinerary instruction is easily chosen instead, which doesn't cause to route to be maximized.

Select geocoder input's content when input is selected

Click on result doesn't work

Hi.
I can select result from Geocoder by keyboard, but when i click on result nothing happens.

bad request

For certain requests, I am getting '400 Bad Request' using the sample code. For example: http://router.project-osrm.org/viaroute?instructions=true&loc=-122.4,37.78&loc=-122.32,37.93&jsonp=_l_routing_machine_0. Any ideas? The latlngs in the samples display the routes correctly. Thanks

support - How to remove router

Hi, can you please tell me how you would remove the router ?

List event and other

Hello!
I try use control, but documentation is so small. Where I may get list events? or how use L.Routing.Itinerary, L.Routing.Line, L.Routing.OSRM?

Add start and end points by clicking the map

complicated routes end up leaving the roads

I am trying to use it for a fairly messy route, lots of drops. It seems that with lots of waypoints the routes stop following the roads and are drawn as straight lines between junctions. Is there a way to tell it to use more points?
In the example below you can see it cutting across St James Square and not following the curve of Regent Street and lots of other straight lines across buildings.

Callback for found routes

It would be nice to give the router a callback that fires when the routes are found.
Currently I can not find any possibility to do that.

Geocoder results still shown after one is selected

Visible in the online github demo.

Save route information

Hi, I'm trying to save the data in a database of the routes that i create.

I'm using at the moment getPlan() to pick all the data of the route, but i have some doubts.

• How can I load this data again in te constructor? I know that I ca store the waypoints and later use it in the initialize, but i don't know if this will give me the same route all the time
• There is one way to store in de database the planning in JSON and later load this JSON in the constructor?

Maybe there should be a google group forum where to ask this kind of questions, instead using this place.

Thank you in advance! :)

serviceUrl can not be set via API

When using the leaflet-routing-machine inside a cordova app on an Android device (probably other platforms too) the current serviceUrl points to the files of the device because of the leading "//".
I tried to set the serviceUrl to something else via API but did not make it work. When I change the code of your library it works on the device.
Can you tell me how to change the serviceUrl via API?

btw.: Some API documentation would be nice! :-)

No way to delete waypoints.

After adding a waypoint, you can never delete it.

Snapping Layer?

The other leaflet routing project has the feature for providing a "Snapping" layer. By default it uses OSM data served in geoJson format. But I created my own snapping layer of trails not on OSM and output it as GeoJSon service URL. This would be a great feature to allow changing the snapping source.

Modify marker?

Hi, thank you for developing this usefull addon.

I'm trying to change the marker (using awesome markers) but i can't find a proper way to do it. where can I modify the marker?

I think that is needed a documentation (maybe I'll join to improve this plugin)

Greetings

Certain Lat/Lon combinations cause error.

I have the following code snippet which was working earlier, but leads to an error now. I wonder what changed in the routing machine plugin that is causing it.

  L.Routing.control({
      waypoints: [
          L.latLng(40.74119, -73.9925),
          L.latLng(40.73573, -73.99302)
      ]
  }).addTo(map);

The error message I am getting in my browser console is

Uncaught TypeError: Cannot read property 'length' of undefined 

Initialization when using a custom plan instance needs to be clearer

How and where to pass waypoints, geocoder, etc. with less redundancy and more obvious.

geocoderClassName option is not used

In L.Routing.Plan, the geocoderClassName isn't actually applied anywhere.

Route distance in miles?

Is there a way to easily change the KM to miles?

Add timeout and timestamp to jsonp calls

To guard against data races and timeouts, the jsonp-calls to the OSRM api should include a timeout function and only accept the answer from the newest request.

We could probably get inspiration from here:

https://github.com/Project-OSRM/osrm-frontend/blob/master/WebContent/utils/OSRM.JSONP.js

Improve check to tell if argument is LatLng or IWaypoint

Current check assumes anything that hasn't the property latLng is an L.LatLng:

https://github.com/perliedman/leaflet-routing-machine/blob/master/src/L.Routing.Plan.js#L79

Should probably be the other way around, i.e. assume it is an waypoint unless it has ´latandlng`.

Bower support

Makes distribution easier :)

http://bower.io/

see #52

need to center off once new route created after dragend

i need to center off once new route created after dragend in routing machine js.

please provide help on it.

set the End-Start input box text to my language

Hi, I need to set the control in spanish, even it was translated, at the very begining appears "Start" and "End" which isn't consistent enough with the control language.
My workaround: I added 2 options to L.Routing.Plan, "source" and "dest" which are set at the begining.
Then I modified the geocoderPlaceholder function by replacing 'Start 'with 'source' and so on.
For sure there could be a better solution, I appreciate so much any tip to improve it.
Thanks!

Change route line color

Hello,

I would like to change the route line color to blue, the default is red, how can I do?

my code looks like:

 var router = new L.Routing.OSRM({serviceUrl: 'http://localhost:5000/viaroute'});
            var waypoints = [];
           // I fill the waypoints array dinamically
            L.Routing.control({
                router: router,
                waypoints: waypoints,
                //geocoder: L.Control.Geocoder.nominatim(),
                routeWhileDragging: true
            }).addTo(map);

updated of osrm json

the hintData is rained used.
crash

if you are not using a geocoder then dragging waypoints causes error

line https://github.com/perliedman/leaflet-routing-machine/blob/master/src/L.Routing.Plan.js#L315
this._updateWaypointName(i, true);

that doesn't check to see if the geocoder has been set in options, putting it inside an if statement like
if (this.options.geocoder && this.options.geocoder.reverse){
this._updateWaypointName(i, true);
}

fixes it, but there might be a neater place for the fix

i18n support

This plugin need i18n support (at least I need it). I'm ready to contribute but I would like to know if you are against using a solution like https://github.com/yohanboniface/Leaflet.i18n