Leaflet Routing Machine (see: https://github.com/perliedman/leaflet-routing-machine ) is a Leaflet plugin to use a routing backend for displaying (turn-by-turn) routes interactively on a map.

The Fast Routing API can be used as a reliable service provider for the Leaflet Routing Machine, as the demo servers based on OSRM are not meant to be used in production.

This tutorial will show you how to integrate the Fast Routing API into a map using Leaflet, the Leaflet-Routing-Machine plugin and providers for map tiles, geocoding an d routing (all needed for a fully functional interactive routing web application).

Prerequisites:

a) Sign up at https://rapidapi.com/Routing/api/fast-routing/pricing to receive an API key.

b) (optional but recommended): Sign up for a Geocoding API as well as a map tiles API. For a unified experience it’s best to use matching data providers. Fortunately the catelogue at the RapidAPI hub presents both a Geocoding API based on OSM data here: https://rapidapi.com/GeocodeSupport/api/forward-reverse-geocoding and a map tiles provider here: https://rapidapi.com/MapTilesApi/api/maptiles (if you want high resolution tiles, this API might be an alternative: https://rapidapi.com/MapTilesApi/api/retina-tiles ).

Integrating required plugins:

You’ll need the Leaflet framework as well as the Leaflet-Routing-Machine plugin for Leaflet (and this will need the Leaflet-Control-Geocoder plugin):

Therefore you’ll have to integrate the following plugins in the head section of your html:

		<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
		<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
		<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
		<script src="https://unpkg.com/leaflet@latest/dist/leaflet-src.js"></script>
		<script src="https://unpkg.com/leaflet.icon.glyph@0.2.0/Leaflet.Icon.Glyph.js"></script>
		<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"><script>
		<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>

You would also have to style a map container div via css. Our demo at https://fast-routing-api.demo.routingapi.net uses a empty div

	<div></div>

with the following style definitions:

<style>#map{width:100%;height:100%;}</style>

applied.

Integrating the endpoints to be used:

We set up the endpoint urls as a window object in javascript assuming you’ll use the APIs recommended above:

<script>
window.LRM = {
apiKey: ‘YOUR-X-RAPIDAPI-KEY’,
tileLayerUrl: 'https://maptiles.p.rapidapi.com/local/osm/v1/{z}/{x}/{y}.png?rapidapi-key=’+apiKey,
osmServiceUrl: ‘https://fast-routing.p.rapidapi.com/route/v1’,
geocodeServiceUrl: ‘https://forward-reverse-geocoding.p.rapidapi.com/v1/’
};
</script>

You will have to replace YOUR-X-RAPIDAPI-KEY with your active api key from RapidAPI and be actively subscribed to the Fast Routing API, MapTiles API and the Forward & Reverse Geocoding API to have the following example working.

Setting up the map:

Use the following Javascript to setup the map including the Leaflet-Routing-Machine:

<script>
var map = L.map(‘map’),
L.tileLayer(LRM.tileLayerUrl, {
attribution: 'Routing: Fast Routing API, ’ + 'Geocoding: Geocoding API, ’ + 'Tiles: MapTiles API, ’ + 'Data: OpenStreetMap contributors. ’ +
‘Data uses ODbL license’
}).addTo(map);
</script>

and add the control for the Leaflet-Routing-Machine to this map:

<script>
var control = L.Routing.control({
router: L.routing.osrmv1({
requestParameters: {‘rapidapi-key’:LRM.apiKey},
hints: false,
language: lang,
serviceUrl: LRM.osmServiceUrl
}),
plan: L.Routing.plan(waypoints, {
createMarker: function(i, wp) {
return L.marker(wp.latLng, {
draggable: true,
icon: L.icon.glyph({ glyph: String.fromCharCode(65 + i) })
});
},
geocoder: L.Control.Geocoder.nominatim({serviceUrl:LRM.geocodeServiceUrl, geocodingQueryParams: {‘rapidapi-key’: LRM.apiKey},reverseQueryParams: {‘rapidapi-key’: LRM.apiKey}}),
routeWhileDragging: true
}),
hints: false,
routeWhileDragging: true,
routeDragTimeout: 250,
showAlternatives: true,

	altLineOptions: {
		styles: [
			{color: 'black', opacity: 0.15, weight: 9},
			{color: 'white', opacity: 0.8, weight: 6},
			{color: 'blue', opacity: 0.5, weight: 2}
		]
	}
})
.addTo(map)
.on('routingerror', function(e) {
	try {
		map.getCenter();
	} catch (e) {
		map.fitBounds(L.latLngBounds(waypoints));
	}

	handleError(e);
});

L.Routing.errorControl(control).addTo(map);
function handleError(e) {
if (e.error.status === -1) {
// HTTP error, show our error banner
document.querySelector(’#osrm-error’).style.display = ‘block’;
L.DomEvent.on(document.querySelector(’#osrm-error-close’), ‘click’, function(e) {
document.querySelector(’#osrm-error’).style.display = ‘none’;
L.DomEvent.preventDefault(e);
});
}
}
</script>

If everything went well, you should have a running instance of the Leaflet-Routing-Machine comparable to the one shown at https://fast-routing-api.demo.routingapi.net - otherwise please contact us either by private message, by mail or through the public discussion board at https://rapidapi.com/Routing/api/fast-routing/discussions