<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ghaziabad Junction → Puri — Route Animation</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<style>
html,body,#map { height: 100%; margin: 0; padding: 0; }
.controls { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; background: rgba(255,255,255,0.9); padding: 8px 12px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
button { margin: 0 6px; }
</style>
</head>
<body>
<div id="map"></div>
<div class="controls">
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="reset">Reset</button>
<label>Speed: <select id="speed"><option value="1">1x</option><option value="2">2x</option><option value="4">4x</option></select></label>
</div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
// Coordinates (decimal) — Ghaziabad area and Puri (Odisha)
const ghaziabad = [28.653232, 77.429039]; // Ghaziabad Junction (approx)
const puri = [19.80793, 85.83779]; // Puri / Puri Railway Station (approx)
// create the map
const map = L.map('map').setView([24.2, 81.6], 6);
// add OpenStreetMap tiles (requires internet when opened)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// add endpoints
const markerA = L.marker(ghaziabad).bindPopup('Ghaziabad Junction').addTo(map);
const markerB = L.marker(puri).bindPopup('Puri Railway Station').addTo(map);
// draw a straight polyline (you can replace with detailed route if you provide it)
const route = L.polyline([ghaziabad, puri], {weight: 4}).addTo(map);
// prepare animated marker
const animatedMarker = L.circleMarker(ghaziabad, {radius: 8}).addTo |
OpenStreetMap