Easy, flexible routing for Leaflet
Usually, you want to integrate Leaflet Routing Machine’s functionality with other functions in your page or app. This tutorial will show you some common use cases and illustrates the integration points that are available in Leaflet Routing Machine.
Like many other JavaScript libraries in general, and Leaflet and its plugins in particular, events are an important mechanism for integration and adding functionality.
Most parts of Leaflet Routing Machine will fire events that your code can listen for, and take action. This uses Leaflet’s event system, so if you are not familiar with it, now might be a good time to read up on it.
All events of the different components in Leaflet Routing Machine are documented in the Leaflet Routing Machine API docs.
A common scenario is that your app wants to do something once a route has been calculated and displayed in Leaflet Routing Machine.
JavaScript and Leaflet Routing Machine are asynchronous: when a request for a route is sent, the code doesn’t halt to wait for the response, but continues immediately. The route will be available at some later point. Because of this, there’s no function like getRoute()
or similar in Leaflet Routing Machine: if you need to access a route, you should instead listen for events, that will tell you when routes have been received from the routing backend, or when a route is displayed in the map.
The control will fire a routesfound
event once the backend returns one or more route as a response to a routing request.
L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
routeWhileDragging: true,
geocoder: L.Control.Geocoder.nominatim()
})
.on('routesfound', function(e) {
var routes = e.routes;
alert('Found ' + routes.length + ' route(s).');
})
.addTo(map);
Similarily, and perhaps more common, is to take some action once a route is
shown in the map and itinerary. The event routeselected
is fired when
a response is shown to the user, as well as when the user selects an alternative route from the control.
L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
routeWhileDragging: true,
geocoder: L.Control.Geocoder.nominatim()
})
.on('routeselected', function(e) {
var route = e.route;
alert('Showing route between waypoints:\n' + JSON.stringify(route.inputWaypoints, null, 2));
})
.addTo(map);
Try the (somewhat annoying) result below, drag the waypoints, alerts will popup as new routes are returned and selected:
See RoutingResultEvent
and RouteSelectedEvent
for more details on data available from these events.
Depending on the load on your backend, and the users network bandwidth, a routing request can be very quick (which is usually the case with OSRM), or take a while. Displaying some kind of feedback that a request is in progress can be a good idea.
To help with this, Leaflet Routing Machine fires a routingstart
every time a routing request is sent to the backend. Corresponding to this, a routesfound
(as shown above) or routingerror
will fire to indicate success or failure. This can be used to display and hide a spinner:
L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
routeWhileDragging: true,
geocoder: L.Control.Geocoder.nominatim()
})
.on('routingstart', showSpinner)
.on('routesfound routingerror', hideSpinner)
.addTo(map);
As can be seen in the example above, Leaflet Routing Machine will fire a routingerror
event if an error occurs during routing. By default, the control will listen for this event and log any errors to the console, but in a more complex application, you probably want to do some more advanced error handling to show the result to the user.
A quick way to add some basic error feedback is to use the built-in ErrorControl
. It expects you to pass a L.Routing.Control
to it, and will hook up to the error event:
var control = L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
routeWhileDragging: true,
geocoder: L.Control.Geocoder.nominatim()
});
L.Routing.errorControl(control).addTo(map);
The default console error handling can be disabled by passing the option defaultErrorHandler
to false
.
This prevents Leaflet Routing Machine from displaying a route. The demo server will hopefully be back up soon. Please do not report this as an issue, Leaflet Routing Machine has no control over the demo server.
In production, set up your own OSRM instance, or pay a service provider.