3

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

enter image description here

Here is my code:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    @Scripts.Render("~/bundles/jquery")
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
          integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
          crossorigin="" />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
            integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
            crossorigin=""></script>

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

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

    <script>
        // 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'
        }).addTo(mymap);

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

        console.log(control);

    </script>
</body>
</html>

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 Oct 23 '18 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 – AHMAD EZZAT Oct 23 '18 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 Oct 23 '18 at 17:20
  • 1
    I edited the question and added image to demonstrate result of the leaflet routing machine. – AHMAD EZZAT Oct 23 '18 at 17:28
  • 1
    Which version of leaflet are you using? – whyzar Oct 23 '18 at 17:30
1

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 -

https://www.mapbox.com/bites/00094/

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, privacy policy and cookie policy

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