<!DOCTYPE html>

<head>

<title>Peta Rute Asia Tenggara - LeafletJS</title>

<!-- Leaflet CSS -→

<link

rel="stylesheet"

href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"

/>

<style>

body {

margin: 0;

font-family: Arial, Helvetica, sans-serif;

background: #f3f4f6;

}

header {

padding: 12px 20px;

background: #0f172a;

color: white;

font-size: 18px;

font-weight: bold;

letter-spacing: 1px;

}

#map {

width: 100%;

height: calc(100vh - 50px);

}

.leaflet-popup-content {

font-size: 14px;

}

</style>

</head>

<body>

Rute Backpacker: Jakarta → Singapura → Kuala Lumpur → Johor Bahru → Bangkok

</header>

<!-- Leaflet JS -→

// =========================

// DATA KOORDINAT KOTA

// =========================

const cities = [

{

lat: -6.2088,

lng: 106.8456,

desc: “Indonesia”

},

{

lat: 1.3521,

lng: 103.8198,

desc: “Singapore”

},

{

lat: 3.1390,

lng: 101.6869,

desc: “Malaysia”

},

{

lat: 1.4927,

lng: 103.7414,

desc: “Malaysia”

},

{

lat: 13.7563,

lng: 100.5018,

desc: “Thailand”

}

];

// =========================

// INIT MAP

// =========================

const map = L.map('map').setView([5.5, 103], 5);

// TILE MAP (OpenStreetMap)

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

attribution: ‘© OpenStreetMap Contributors’

}).addTo(map);

// =========================

// MARKER

// =========================

const latlngs = [];

cities.forEach((city, index) => {

const marker = L.marker([city.lat, city.lng])

.addTo(map)

.bindPopup(`

<b>${index + 1}. ${city.name}</b><br>

${city.desc}<br>

(${city.lat}, ${city.lng})

`);

latlngs.push([city.lat, city.lng]);

});

// =========================

// GARIS PENGHUBUNG (POLYLINE)

// =========================

const routeLine = L.polyline(latlngs, {

color: 'blue',

weight: 5,

opacity: 0.8,

dashArray: ‘12, 12’

}).addTo(map);

// Zoom agar semua marker terlihat

map.fitBounds(routeLine.getBounds());

// =========================

// ANIMASI GARIS

// =========================

let offset = 0;

setInterval(() => {

offset++;

routeLine.setStyle({

dashOffset: offset

});

}, 120);

</script>

</body>

</html>

Yeah, Here's your note ✨🎉