I use leaflet routing machine and it's working fine with me.

enter image description here

Here is my code:

<!DOCTYPE html>

    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
          crossorigin="" />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"

    <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>

        #mapid {
            height: 480px;
    <div id="mapid"></div>
    <div id="distancetravelled"></div>

        // set map view to a specefic lat, long in Egypt
        var mymap = L.map('mapid').setView([30.026300, 31.496773], 13);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}{r}.png', {
            attribution: '© OpenStreetMap contributors'

        var control = L.Routing.control({
            waypoints: [
                L.latLng(57.74, 11.94),
                L.latLng(57.6792, 11.949)
            routeWhileDragging: true



It draws the line immediately after I load the map, but I want it to draw the line slowly like this sample for example enter image description here

  • 1
    Can you also show the current speed you are experiencing as well as in the example above?
    – whyzar
    Commented Oct 23, 2018 at 17:05
  • 1
    This example is just an image to show the result I hope. It's called Leaflet.Polyline.SnakeAnim but it draws poly lines not on roads, and leaflet routing machine draws on road, so I want it with leaflet routing machine. If you are interisted in Leaflet.Polyline.SnakeAnim you can find a full example at this url github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim Commented Oct 23, 2018 at 17:13
  • 1
    What about the line that loads on your map as you mentioned ? "I use leaflet routing machine and it's working fine with me. It draws the line immediately after I load the map, "
    – whyzar
    Commented Oct 23, 2018 at 17:20
  • 1
    I edited the question and added image to demonstrate result of the leaflet routing machine. Commented Oct 23, 2018 at 17:28
  • 1
    Which version of leaflet are you using?
    – whyzar
    Commented Oct 23, 2018 at 17:30

2 Answers 2


I achieved this animation using only CSS. See the following tutorial: https://css-tricks.com/svg-line-animation-works/#article-header-id-7 (Note: the tutorial covers other interesting line animations as well!)

First of all add the class .animate to the routing line:

var control = L.Routing.control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    lineOptions: {
        styles: [{className: 'animate'}] // Adding animate class
    routeWhileDragging: true

And add the following CSS to your page:

path.leaflet-interactive.animate {
    stroke-dasharray: 1920;
    stroke-dashoffset: 1920;
    animation: dash 20s linear 3s forwards;

@keyframes dash {
    to {
        stroke-dashoffset: 0;

The speed of the route is determined by the width of the stroke-dasharray and the animation-speed. In this example the route-animation will travel 1920px in 20 seconds. You can speed up or slow down the animation by adjusting either one of those CSS-values.

In this example I have also delayed the animation for 3 seconds, to give the map tiles a chance to load completely.

  • This is really great! I would love to know how to get an onAnimationEnd event trigger when the route has completed drawing
    – lys
    Commented Jun 11, 2021 at 9:55

It appears that there isn't a single way approach to achieve the outcome you are seeking. However, that are several ways that you may be able to have the change to adjust the speed of your route animation.

Animate found route #101 is a suggestion from a user to add this feature -

Add an option to animate the display of a new route, such that it grows from the start waypoint towards the destination. Which is similar to this -


Suggestions of how to achieve this animation includes:

An option is to use D3 http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/. I'm using it in a sample that visualizes different driving times for our routing http://ptv-logistics.github.io/fl-labs/

A Leaflet plugin that does more or less exactly this: https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim

that nearly works, however it requires #191 and if you snakeIn the L.Routing.line by changing line 582 to read: this._line.addTo(this._map).snakeIn();

there is a bit of a problem as L.Routing.line is a layergroup that contains some stuff around the markers plus a polyline for each style assigned to the routeline, so they all get animated. It kind of needs to draw the first stuff fast, then the last style layer gets animated but I can't figure out how to do that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.