Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
We used the map as the foundation, and used the leaflet tools to draw the line along the route that we wanted the user to follow. This route went through a harbour area, and major buildings, steps etc. To use the routing engine you will have to have it map based, but you can overlay any image as a base layer of course.
is there any example related to overlay anyimage ?
guys please help here
Mirco Luperi

hi, I am a university student. for a project I created a small web app using leaflet and leaflet routing machine. I have a problem due to lack of experience in the sector.
I have this warning:
"You are using OSRM's demo server. Please note that it is NOT SUITABLE FOR PRODUCTION USE.
Refer to the demo server's usage policy: https://github.com/Project-OSRM/osrm-backend/wiki/Api-usage-policy

To change, set the serviceUrl option.

Please do not report issues with this server to neither Leaflet Routing Machine or OSRM - it's for
demo only, and will sometimes not be available, or work in unexpected ways.

Please set up your own OSRM server, or use a paid service provider for production."

to make the app usable, do i have to change the serviceUrl option?
how do it?

2 replies
Hi there. I am new to leaflet, and just found the Routing Machine. Routing Machine does much of what I am looking to do, but I do not need routing via roads. I would like to route direct straight line waypoint to waypoint as would be done for aviation or nautical routes. Is this easily accomplished with the Routing Machine?
2 replies
Chris Allison
Is anyone here using GeoJSON Path Finder?
Specifically, I've got Leaflet Routing Machine working just fine with OSMR; plugging in a network geojson is good (I can display the network in Leaflet), but calling pathFinder.findPath() returns null.
I want more than one route between two waypoints but couldn't find any way.
do you have any suggestions?
1 reply
Louis-Etienne Leuilliot

Hello there ! its me again

so, i have my polyline now simplyfied and clean,

but there is some error in my itinerary,

To construct my itinerary i encode a polyline with a lot of coordinates, and for reduce them i take from the instruction only steps that have a modifier element
but sometimes it is not working like expected


on the capture, you can see the purple line, its my itinerary, and the red is the generated route
how can i do that ?

( its a simple example, but i have more complexe sometimes, its really weird, i dont know how is generate the route i have sometimes my route going into an impass and come back ??? )

prohibited direction is authorized but it doesn't seem to be taken into account.

Ivan Bodnar
What does the error mean?
Routing error: {status: -1, message: "OSRM request timed out."}
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
    <script src="Control.Geocoder.js"></script>
        var mymap = L.map('mapid').setView([48.89, 24.66], 14);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=1234567890qwertyuiop', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1

            waypoints: [
                L.latLng(48.87, 24.62),
                L.latLng(48.91, 24.69)
            routeWhileDragging: true,
            geocoder: L.Control.Geocoder.nominatim()
1 reply
Sami Greenbury
I want to use Leaflet Routing Machine to draw a route - but to draw it slowly (so you can see the drive move across the country). Is there any built in magic that might make that easier for me?
Does anyone know analogs in PHP for translating route hints into a text description?
Flo G
Can anyone help me on how to remove the route from the map?
Could anyone help me with adding two markers to make a route based on a onClick event on the map?
Is there any way to get place name from OSRM? if yes kindly explain with code if possible
@perliedman hi, how to leaflet-routing-machine and GPS navigator real time ? can you help me.
Mauro Spivak
Hey there! I'm using LRM to create new routes as well as reading existing routes. Thereof, when I want to create a new route, I pass an empty array to the plan.waypoints option. However, if getWaypoints() right after initializing returns two "null" waypoints.
So to get around this, I decided that the first two stops added would be replacing the existing null ones. But this makes my waypointspliced event waaay too complex to handle and it made me think I'm doing something else wrong. @perliedman am I?
Kind regards, can you calculate the route by car, motorcycle or walking? Thank you
also, in apache cordova the biodecoding doesn't work, maybe you can check it? or show how it should be configured?
Is there a way to include the reversed route with the original route ? I mean, for example. to add a button beside that of "reverse route" to display both the original and the reversed route, and to sum them as a single route, as I am looping the route , one time from Start to End , the other from End to Start. I need to send the JSON or any form of data of the two ways to database in one shot. Note that not always the two ways are the same. Also, I need to modify each route independently. I mean, I can add some waypoints (vias) to the original route but not to the reversed route and vise versa. Can you help me with this ? Thank you
Good day! L.Routing.control draws those points that were not set, the line is drawn on other roads, is there any solution to this problem. Thank you in advance @perliedman
Miguel Amaro
Hi ! Can anyone help me? How I can remove the directions container from leaflet routing machine ?
Benjamin Leroy
Hi !
I have a question for you because I cannot find the info in the doc, it's possible to configure a number of tiles to load? When I move around in my map, the leaflet-routing-machine trait disappears.
Thank you for your help !
I have some problems with my map and I don't know if it's possible. I have a route with multiple waypoints and you can drag new waypoints to the map. Is it possible to diferenciate this new waypoints from the others with the createMarker? @perliedman
Souhir ZRIBI
I am debutant at leaflet routing machine
and I cherche to undrestand the algo of routing and how we choose the route and alternative route
Anjula Paulus
Hi there, can someone help out with getting longitude and latitude of markers placed on the map ?
1 reply
Luiz Felix
Can someone help me ? I need to draw a manual route passing a latlon array, I saw in the doc that it is possible to do this with iroute coordinates, but I have no idea how to implement it
RoutingEvents = L.Routing.control({ waypoints: [ L.latLng(-23.222688, -45.908318), L.latLng(-23.212429, -45.906858), ], /* geocoder: L.Control.Geocoder.nominatim(), */ routeWhileDragging: true, showAlternatives: true, addWayPoints: true, altLineOptions: { styles: [ { color: 'black', opacity: 0.15, weight: 9 }, { color: 'white', opacity: 0.8, weight: 6 }, { color: '#abe1ca', opacity: 0.9, weight: 2 } ] } }).addTo(map);
Luiz Felix
@aimprogman: helpme
Jivthesh M R
how can we add sea routes to leaflet maps
any plugin avilable
Andrew Ortega
Hi, it is possible to load the itinerary/plan without pass any waypoint as this example: https://cykelbanor.se/#bl=Karta
Andrew Ortega

Hi, it is possible to load the itinerary/plan without pass any waypoint as this example: https://cykelbanor.se/#bl=Karta

nvm I just found it is a different control and make it work, thanks.

Hello, I have created a kind of itinerary, but I would like to know if it is possible to remove the markers to just keep the path? Thanks a lot
Hello there, I want to retrieve the totalDistance from the summary of a route, but it is undefined when i call it. I do not understand why it is, because the route is being calculated and shown on the Map. Here is my code:
so how do I call the route.summary.totalDistance properly? I've seen some "solutions" with accessing the IRoute via the pushing of a route to a routes array, which i tried, but didnt work: --- alert('Distance: ' + routes[0].summary.totalDistance); ---. It seems that the summary is undefined when i try to print it which i do not understand
Greetings ! Does the leaflet-routing-machine support Here Routing API? Thanks.

Hi, I'm using geocoder "photon". I want to get suggestion address from postal code , street number I use this osm_tag: ["place:city", "place:town", "place:village","addr:postcode=*"] from this link https://wiki.openstreetmap.org/wiki/Key:postal_code

example of address: 4 rue emile baudot 91120 palaiseau

But not working with addr:postcode , any idea please .Thank you in advance

Hi , how I can use osrm leaflet routing machine with geocoder google map

This is my example : https://jsfiddle.net/Aminali/kLs34ef8/7/

I want to change search with geocoder google

Hey folks, my names nicolas and me and my freinds are trying to create a react based app using react-leaflet and leaflet-routing machine. Were trying to get the app to listen for click events and then add a point to the map, when a second point is made the router connects them, when a user adss a third point it extends the route to that point as well and so on.
https://onthegomap.com/#/create this would be a great example of what were trying to build at this point
what would be the best approach for this? were getting quite overhwlemed by the api docs for leaflet routing machine and how to do this best practice wise

Hi all. I am trying to add custom Lat and Lng between the starting and ending waypoints in the Routing Machine.

How would I use the following:

const customCallback = (callback) => (context, error, routes) => {
  for (const route of routes) {
    route.coordinates = [...route.coordinates, L.latLng(12.33, 49.6753)];

  callback(context, error, routes);

const router = L.Routing.OSRMv1.extend({
  initialize: function (options) {
    L.Routing.OSRMv1.prototype.initialize.call(this, options);

  route: function (waypoints, callback, context, options) {
    const originalCallback = options.callback;
    L.Routing.OSRMv1.prototype.route.call(waypoints, customCallback(originalCallback), this, options);

    const routingControl = L.Routing.control({
      addWaypoints: false,

      collapsible: true,
      createMarker: function (i, wp, nWps) {
        if (i === 0) {
          return L.marker(wp.latLng, {
            icon: startIcon,
            draggable: true,
            keyboard: true,
            alt: 'current location'
        if (i === nWps - 1) {
          return L.marker(wp.latLng, {
            icon: finishIcon,
            draggable: true,
            alt: 'current destination'
      draggableWaypoints: true,

      fitSelectedRoutes: true,

      geocoder: L.Control.Geocoder.nominatim(),

      lineOptions: {
        styles: [{ color: 'chartreuse', opacity: 1, weight: 5 }]


I tried: 
But that yields 
// TypeError: Cannot convert undefined or null to object