I use leaflet routing machine and it's working fine with me.
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
Best Answer
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:And add the following CSS to your page:
The speed of the route is determined by the width of the
stroke-dasharray
and theanimation-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.