How to create routes using Leaflet

[GuillermoDylan]

How to create routes

Hello guys!
This is a quick guide filled mainly with short examples and references on how to create a route on maps given by the Leaflet library.

Using the MapQuest API

MapQuest is a JavaScript library for interactive maps, geocoding, directions, and traffic. It can be integrated with Leaflet and allows to create routes given two different points in the map, or even two different city names or directions.
This API requires the use of a API key.

Example

Given a map, we can create a route for two different places over it in the following way:

var dir = MQ.routing.directions();

dir.route({
  locations: [
    '1600 pennsylvania ave, washington dc',
    '935 pennsylvania ave, washington dc'
  ]
});
map.addLayer(MQ.routing.routeLayer({
  directions: dir,
  fitBounds: true
}));

As simple as it may seem, I recommend checking the following references, as they have a complete version of the code that is already set and itegrated with a leaflet map.

References:

V. Rusu. "map-app-directions". GitHub.
https://github.com/ruvictor/map-app-directions.

V. Rusu. "Leaflet Map Routing JavaScript App". Youtube.
https://www.youtube.com/watch?v=F8dnYNTncoU.

Using Leaflet Routing Machine

Leaflet Routing Machine is an open source API service to create routes over Leaftlet maps.
It does not require a lot of coding and seems to be of easy use.
Unfortunately, it has not been updated since 2021, and some of the plugins it requires might be outdated.

Example

We will need the following css styles and links:

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

We will need to install its dependency:
npm install --save leaflet-routing-machine

To add the basic routing control to your map instance, use this Javascript code:

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

References:

Leaflet Routing Machine.
https://www.liedman.net/leaflet-routing-machine/.

Tutorials page
https://www.liedman.net/leaflet-routing-machine/tutorials/

API documentation
https://www.liedman.net/leaflet-routing-machine/api/