Leaflet.js Routing — Directions and Route Calculation

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about Leaflet.js Routing. We cover key concepts, practical examples, and best practices to help you master this topic.

Leaflet.js routing adds turn-by-turn directions to maps using the Leaflet Routing Machine plugin with multiple routing backend providers.

What You'll Learn

By the end of this guide, you will install Leaflet Routing Machine, configure route waypoints, customize route styles, display turn instructions, switch between travel modes, and build a route planner interface.

Basic Route

// npm install leaflet-routing-machine
L.Routing.control({
    waypoints: [
        L.latLng(40.7128, -74.0060),
        L.latLng(40.7580, -73.9855)
    ],
    routeWhileDragging: true
}).addTo(map);

Custom Route Style

L.Routing.control({
    waypoints: [
        L.latLng(40.7128, -74.0060),
        L.latLng(40.7580, -73.9855)
    ],
    lineOptions: {
        styles: [
            { color: '#4ecdc4', opacity: 0.8, weight: 6 },
            { color: '#fff', opacity: 1, weight: 2 }
        ]
    },
    showAlternatives: true,
    altLineOptions: {
        styles: [
            { color: '#ff6b35', opacity: 0.5, weight: 4 }
        ]
    }
}).addTo(map);

Travel Mode

L.Routing.control({
    waypoints: [...],
    router: L.Routing.osrmv1({
        profile: 'cycling', // driving, cycling, walking
        serviceUrl: 'https://router.project-osrm.org/route/v1'
    })
}).addTo(map);

Route Instructions

L.Routing.control({
    waypoints: [...],
    show: true,
    collapsible: true,
    summaryTemplate: '<div class="route-summary"><b>{name}</b><br>Distance: {distance}, Time: {time}</div>'
}).addTo(map);

Common Mistakes

1. Missing OSRM Server

Routing Machine needs a routing backend. The default demo server has rate limits. Set up your own OSRM server for production.

2. CORS Issues

Browser CORS blocks requests to some routing servers. Use a proxy or configure the server with CORS headers.

3. Too Many Waypoints

OSRM limits waypoints to 100 per request. For multi-stop routes, use a trip API instead.

4. Route Not Updating on Waypoint Drag

Set routeWhileDragging: true to recalculate as the user drags waypoints.

5. Instructions Language

Default instructions are in English. Set the language option for localized directions.

Practice Questions

Q1: What is the default routing backend? A: OSRM (Open Source Routing Machine) with the demo server at router.project-osrm.org.

Q2: How do you add multiple waypoints? A: Pass an array of L.latLng to the waypoints option with more than two points.

Q3: How do you style the route line? A: Use lineOptions.styles array with Leaflet path options.

Q4: What travel profiles are available? A: driving, cycling, walking. Set via the profile property on the router.

Q5: How do you get route distance and time? A: Listen to the 'routesfound' event on the control.

Challenge: Build a route planner with drag-and-drop waypoints, travel mode selector, elevation profile chart, and estimated time of arrival display.

FAQ

Can I use Google Maps for routing?

Yes. Implement a custom router class that calls the Google Directions API.

How do I show elevation in a route?

Use the OSRM elevation option and render elevation data with a separate chart library.

Does routing work offline?

No. Routing requires a server. For offline, use a locally hosted OSRM instance.

How do I avoid tolls or highways?

Set route options via the OSRM API: url parameters like 'exclude=toll'.

Can I get turn-by-turn notifications?

Use the instruction events: 'instruction' fires at each turn.

Try It Yourself

Build a route planner with two waypoints.

<!DOCTYPE html>
<html>
<head>
    <title>Routing Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3/dist/leaflet-routing-machine.css" />
    <script src="https://unpkg.com/leaflet@1.9/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-routing-machine@3/dist/leaflet-routing-machine.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Route Planner</h2>
<div id="map" style="height:400px;border-radius:8px;"></div>
<script>
var map = L.map('map').setView([40.7484, -73.9856], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OSM'
}).addTo(map);

L.Routing.control({
    waypoints: [
        L.latLng(40.7484, -73.9856),
        L.latLng(40.7580, -73.9855),
        L.latLng(40.7128, -74.0060)
    ],
    routeWhileDragging: true,
    showAlternatives: true,
    lineOptions: {
        styles: [{ color: '#4ecdc4', weight: 5 }]
    }
}).addTo(map);
</script>
</body>
</html>

What's Next

Build custom controls.

Controls Custom — Custom controls. Popups — Custom popups.

← Previous Leaflet.js Heatmap — Density Visualization Layer Next → Leaflet.js Custom Controls — Building UI for Map Interactions

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Leafletjs