Leaflet Route Line with Animated Vehicle — Free HTML CSS JS Snippet

<div class="rt-wrap">
  <div class="rt-bar">
    <div class="rt-title">Delivery #4471 — En Route</div>
    <div class="rt-eta" id="rtEta">ETA --</div>
    <button class="rt-btn" id="rtBtn" type="button">Pause</button>
  </div>
  <div class="rt-map" id="rtMap"></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif}
.rt-wrap{height:100vh;min-height:480px;display:flex;flex-direction:column}
.rt-bar{padding:12px 16px;background:#fff;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rt-title{font-size:13px;font-weight:800;color:#0f172a;flex:1;min-width:160px}
.rt-eta{font-size:12px;font-weight:700;color:#6366f1}
.rt-btn{background:#eef0ff;color:#6366f1;border:none;border-radius:8px;padding:7px 14px;font:700 12px system-ui;cursor:pointer}
.rt-btn:hover{background:#e0e4ff}
.rt-map{flex:1}
.rt-van-icon{font-size:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));transform-origin:center}

var ROUTE = [
  [37.7599, -122.4187], [37.7650, -122.4110], [37.7720, -122.4050],
  [37.7790, -122.4130], [37.7830, -122.4220], [37.7936, -122.3965],
];

var map = L.map('rtMap').setView(ROUTE[0], 13);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
  attribution: 'Tiles © Esri',
  maxZoom: 19,
}).addTo(map);

L.polyline(ROUTE, { color: '#c7d2fe', weight: 6 }).addTo(map);
var traveled = L.polyline([ROUTE[0]], { color: '#6366f1', weight: 6 }).addTo(map);
L.circleMarker(ROUTE[0], { radius: 6, color: '#16a34a', fillColor: '#16a34a', fillOpacity: 1 }).addTo(map);
L.circleMarker(ROUTE[ROUTE.length - 1], { radius: 6, color: '#dc2626', fillColor: '#dc2626', fillOpacity: 1 }).addTo(map);

var vanIcon = L.divIcon({ className: '', html: '<div class="rt-van-icon">\ud83d\ude9a</div>', iconSize: [26, 26], iconAnchor: [13, 13] });
var van = L.marker(ROUTE[0], { icon: vanIcon }).addTo(map);

// Precompute the cumulative distance to each waypoint so a single 0..1
// "progress" value can be mapped to an exact lat/lng anywhere ALONG the
// route -- not just snapped to the nearest waypoint.
function dist(a, b) { return Math.hypot(a[0] - b[0], a[1] - b[1]); }
var cumulative = [0];
for (var i = 1; i < ROUTE.length; i++) cumulative.push(cumulative[i - 1] + dist(ROUTE[i - 1], ROUTE[i]));
var totalDist = cumulative[cumulative.length - 1];

function pointAt(progress) {
  var target = progress * totalDist;
  for (var i = 1; i < cumulative.length; i++) {
    if (target <= cumulative[i] || i === cumulative.length - 1) {
      var segStart = cumulative[i - 1], segEnd = cumulative[i];
      var segT = segEnd > segStart ? (target - segStart) / (segEnd - segStart) : 0;
      var a = ROUTE[i - 1], b = ROUTE[i];
      return {
        lat: a[0] + (b[0] - a[0]) * segT,
        lng: a[1] + (b[1] - a[1]) * segT,
        bearing: Math.atan2(b[1] - a[1], b[0] - a[0]) * 180 / Math.PI,
        segIndex: i,
      };
    }
  }
  return { lat: ROUTE[0][0], lng: ROUTE[0][1], bearing: 0, segIndex: 0 };
}

var DURATION = 14000;
var startTime = null;
var pausedAt = 0;
var running = true;
var etaEl = document.getElementById('rtEta');
var btn = document.getElementById('rtBtn');

function tick(now) {
  if (!running) return;
  if (startTime === null) startTime = now - pausedAt;
  var elapsed = now - startTime;
  var progress = Math.min(1, elapsed / DURATION);
  var p = pointAt(progress);

  van.setLatLng([p.lat, p.lng]);
  traveled.setLatLngs(ROUTE.slice(0, p.segIndex).concat([[p.lat, p.lng]]));

  var remainingMin = Math.ceil((1 - progress) * 12);
  etaEl.textContent = progress >= 1 ? 'Delivered' : 'ETA ' + remainingMin + ' min';

  if (progress < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

btn.addEventListener('click', function () {
  running = !running;
  btn.textContent = running ? 'Pause' : 'Resume';
  if (running) {
    startTime = null; // recomputed relative to pausedAt on next tick
    requestAnimationFrame(function (now) { pausedAt = 0; tick(now); });
  } else {
    pausedAt = performance.now() - startTime;
  }
});