Skip to content

Instantly share code, notes, and snippets.

@nazt

nazt/journey-clean.html

Created May 7, 2026 03:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nazt/2454da5611127886aa0d7a0cf064d128 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nazt/2454da5611127886aa0d7a0cf064d128 to your computer and use it in GitHub Desktop.
Download ZIP
Journey map — clean, minimal, just map + scrubber (171 GPS points)
Raw
journey-clean.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Journey · 06 May 2026</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
*{margin:0;box-sizing:border-box}
body{background:#0a0a12;font-family:system-ui,sans-serif}
#map{height:100vh;width:100%}
.bar{position:fixed;bottom:16px;left:16px;right:16px;z-index:999;
display:flex;align-items:center;gap:10px;
background:rgba(10,10,18,0.85);backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:10px 14px}
.time{color:#e0c097;font-size:1.1rem;font-weight:600;min-width:44px}
.btn{width:30px;height:30px;border-radius:50%;border:1px solid rgba(224,192,151,0.4);
background:none;color:#e0c097;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.btn:hover,.btn.on{background:#e0c097;color:#0a0a12}
input[type=range]{flex:1;height:4px;accent-color:#e0c097;cursor:pointer}
.spd{padding:3px 6px;border-radius:4px;border:1px solid rgba(255,255,255,0.06);
background:none;color:#555;cursor:pointer;font-size:.65rem;font-family:inherit}
.spd.on{color:#e0c097;border-color:rgba(224,192,151,0.3)}
.place{position:fixed;bottom:72px;left:50%;transform:translateX(-50%);z-index:999;
color:#fff;font-size:.85rem;font-weight:500;
background:rgba(10,10,18,0.7);backdrop-filter:blur(8px);
padding:5px 14px;border-radius:20px;border:1px solid rgba(255,255,255,0.06);
transition:opacity .4s;white-space:nowrap}
.leaflet-control-attribution,.leaflet-control-zoom{display:none!important}
.dot{width:14px;height:14px;border-radius:50%;
background:radial-gradient(circle at 35% 35%,#fff,#e0c097);
box-shadow:0 0 10px #e0c097,0 0 24px rgba(224,192,151,0.3);
border:2px solid rgba(255,255,255,0.5)}
</style>
</head>
<body>
<div id="map"></div>
<div class="place" id="place">—</div>
<div class="bar">
<button class="btn" id="pb" onclick="toggle()">▶</button>
<span class="time" id="tm">09:10</span>
<input type="range" id="sl" min="0" max="170" value="0" oninput="go(+this.value)">
<button class="spd on" id="s1" onclick="spd(1)">1×</button>
<button class="spd" id="s3" onclick="spd(3)">3×</button>
<button class="spd" id="s10" onclick="spd(10)">10×</button>
</div>
<script>
const D=[["09:10", 18.778176, 99.051547, 95, "San Kamphaeng District", 18.77823, 99.051447, 50, 18.797438, 99.073023, 0], ["09:15", 18.763491, 99.038982, 93, "Mueang Chiang Mai District", 18.76336, 99.038872, 56, 18.797438, 99.073023, 0], ["09:20", 18.761192, 99.019903, 92, "Mueang Chiang Mai District", 18.760973, 99.019263, 62, 18.797438, 99.073023, 0], ["09:25", 18.767848, 99.005625, 90, "Mueang Chiang Mai District", 18.767896, 99.005707, 68, 18.797438, 99.073023, 0], ["09:30", 18.774644, 99.007796, 83, "Mueang Chiang Mai District", 18.774553, 99.007792, 69, 18.797438, 99.073023, 0], ["09:35", 18.77465, 99.007793, 79, "Mueang Chiang Mai District", 18.77457, 99.007796, 69, 18.797438, 99.073023, 0], ["09:40", 18.77465, 99.007793, 75, "Mueang Chiang Mai District", 18.774843, 99.00794, 69, 18.774576, 99.007663, 88], ["09:45", 18.774652, 99.007787, 75, "Mueang Chiang Mai District", 18.774566, 99.007706, 69, 18.774571, 99.007753, 87], ["09:50", 18.77465, 99.007795, 75, "Mueang Chiang Mai District", 18.774588, 99.007682, 69, 18.774526, 99.007776, 86], ["09:55", 18.77465, 99.007796, 75, "Mueang Chiang Mai District", 18.774581, 99.007735, 69, 18.774232, 99.007347, 84], ["10:00", 18.77465, 99.007796, 75, "Mueang Chiang Mai District", 18.774611, 99.00772, 69, 18.774526, 99.007776, 83], ["10:05", 18.77465, 99.007796, 75, "Mueang Chiang Mai District", 18.774592, 99.007745, 69, 18.774443, 99.007688, 82], ["10:10", 18.77465, 99.007796, 75, "Mueang Chiang Mai District", 18.774599, 99.007746, 69, 18.77448, 99.007688, 80], ["10:15", 18.77465, 99.007796, 75, "Mueang Chiang Mai District", 18.774593, 99.007744, 69, 18.774514, 99.007673, 79], ["10:20", 18.77465, 99.007796, 75, "Mueang Chiang Mai District", 18.774583, 99.007757, 69, 18.77438, 99.007587, 77], ["10:25", 18.77465, 99.007796, 74, "Mueang Chiang Mai District", 18.774582, 99.007759, 68, 18.774471, 99.007687, 76], ["10:30", 18.77465, 99.007796, 73, "Mueang Chiang Mai District", 18.774575, 99.007756, 68, 18.774294, 99.007426, 75], ["10:35", 18.774642, 99.007777, 68, "Mueang Chiang Mai District", 18.774579, 99.007758, 68, 18.774395, 99.00754, 73], ["10:40", 18.774598, 99.007752, 65, "Mueang Chiang Mai District", 18.774581, 99.007759, 68, 18.774475, 99.00769, 72], ["10:45", 18.774642, 99.007777, 62, "Mueang Chiang Mai District", 18.774582, 99.007759, 68, 18.774523, 99.00773, 71], ["10:50", 18.774642, 99.007777, 61, "Mueang Chiang Mai District", 18.774582, 99.007759, 68, 18.774523, 99.00773, 70], ["10:55", 18.774642, 99.007746, 61, "Mueang Chiang Mai District", 18.774582, 99.007759, 68, 18.774503, 99.007628, 69], ["11:00", 18.774642, 99.007748, 57, "Mueang Chiang Mai District", 18.774683, 99.007616, 67, 18.774376, 99.007627, 67], ["11:05", 18.774622, 99.007723, 52, "Mueang Chiang Mai District", 18.774593, 99.007728, 67, 18.774397, 99.007476, 66], ["11:10", 18.774579, 99.007675, 51, "Mueang Chiang Mai District", 18.774587, 99.007744, 67, 18.774325, 99.007607, 65], ["11:15", 18.774618, 99.007718, 51, "Mueang Chiang Mai District", 18.774596, 99.007715, 67, 18.774522, 99.007691, 64], ["11:20", 18.774623, 99.007664, 52, "Mueang Chiang Mai District", 18.774585, 99.007749, 67, 18.774233, 99.007415, 68], ["11:25", 18.774623, 99.007671, 53, "Mueang Chiang Mai District", 18.774582, 99.007759, 66, 18.774675, 99.007788, 73], ["11:30", 18.774623, 99.007674, 54, "Mueang Chiang Mai District", 18.774582, 99.007759, 66, 18.774538, 99.007773, 79], ["11:35", 18.774624, 99.007679, 55, "Mueang Chiang Mai District", 18.774634, 99.007701, 66, 18.774564, 99.007749, 83], ["11:40", 18.774624, 99.007687, 53, "Mueang Chiang Mai District", 18.77459, 99.00775, 66, 18.774628, 99.007803, 87], ["11:45", 18.774624, 99.007687, 53, "Mueang Chiang Mai District", 18.774629, 99.00772, 66, 18.774578, 99.007781, 90], ["11:50", 18.774618, 99.00762, 53, "Mueang Chiang Mai District", 18.77463, 99.0077, 65, 18.774599, 99.007828, 92], ["11:55", 18.774617, 99.007612, 59, "Mueang Chiang Mai District", 18.77454, 99.007718, 68, 18.77452, 99.00776, 92], ["12:00", 18.774624, 99.007683, 65, "Mueang Chiang Mai District", 18.774592, 99.007589, 74, 18.774536, 99.007753, 92], ["12:05", 18.774619, 99.00763, 69, "Mueang Chiang Mai District", 18.774582, 99.007704, 79, 18.774512, 99.007749, 91], ["12:10", 18.774624, 99.007684, 72, "Mueang Chiang Mai District", 18.774634, 99.00772, 84, 18.774479, 99.007722, 89], ["12:15", 18.774624, 99.007687, 70, "Mueang Chiang Mai District", 18.774614, 99.007683, 87, 18.774525, 99.007711, 88], ["12:20", 18.774624, 99.007687, 69, "Mueang Chiang Mai District", 18.77461, 99.00769, 91, 18.774513, 99.007735, 86], ["12:25", 18.774434, 99.007581, 65, "Mueang Chiang Mai District", 18.774558, 99.007809, 93, 18.774577, 99.007791, 86], ["12:30", 18.774624, 99.007687, 63, "Mueang Chiang Mai District", 18.774646, 99.007602, 95, 18.774479, 99.007697, 85], ["12:35", 18.774678, 99.007814, 63, "Mueang Chiang Mai District", 18.774641, 99.007616, 97, 18.774506, 99.007735, 84], ["12:40", 18.774595, 99.007648, 65, "Mueang Chiang Mai District", 18.774626, 99.007702, 98, 18.774567, 99.007767, 83], ["12:45", 18.77453, 99.007616, 69, "Mueang Chiang Mai District", 18.77458, 99.007664, 99, 18.774551, 99.007759, 83], ["12:50", 18.774608, 99.007608, 73, "Mueang Chiang Mai District", 18.774581, 99.007722, 100, 18.774562, 99.007779, 82], ["12:55", 18.774624, 99.007686, 76, "Mueang Chiang Mai District", 18.774574, 99.00771, 100, 18.774522, 99.007734, 80], ["13:00", 18.774624, 99.007687, 76, "Mueang Chiang Mai District", 18.774543, 99.007658, 100, 18.774619, 99.00759, 81], ["13:05", 18.774624, 99.007687, 74, "Mueang Chiang Mai District", 18.774551, 99.007689, 100, 18.774318, 99.007611, 84], ["13:10", 18.774624, 99.007687, 77, "Mueang Chiang Mai District", 18.774571, 99.007756, 100, 18.774523, 99.007716, 85], ["13:15", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774581, 99.007756, 100, 18.774553, 99.00777, 85], ["13:20", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774579, 99.007717, 100, 18.774678, 99.007829, 85], ["13:25", 18.774563, 99.007617, 82, "Mueang Chiang Mai District", 18.774582, 99.007755, 100, 18.774504, 99.00772, 83], ["13:30", 18.774597, 99.007656, 84, "Mueang Chiang Mai District", 18.774604, 99.007695, 100, 18.774452, 99.007681, 82], ["13:35", 18.774626, 99.007684, 88, "Mueang Chiang Mai District", 18.774597, 99.007741, 100, 18.77437, 99.007464, 80], ["13:40", 18.774612, 99.007674, 90, "Mueang Chiang Mai District", 18.774575, 99.007771, 100, 18.774496, 99.007701, 79], ["13:45", 18.774622, 99.007685, 92, "Mueang Chiang Mai District", 18.774581, 99.007761, 100, 18.77446, 99.007728, 78], ["13:50", 18.774624, 99.007687, 92, "Mueang Chiang Mai District", 18.774582, 99.007759, 100, 18.774689, 99.007904, 81], ["13:55", 18.774624, 99.007687, 92, "Mueang Chiang Mai District", 18.774582, 99.007759, 100, 18.774427, 99.007509, 85], ["14:00", 18.774624, 99.007687, 90, "Mueang Chiang Mai District", 18.774563, 99.007687, 100, 18.774571, 99.007753, 89], ["14:05", 18.774624, 99.007687, 89, "Mueang Chiang Mai District", 18.774584, 99.007756, 100, 18.774395, 99.007557, 92], ["14:10", 18.774624, 99.007687, 88, "Mueang Chiang Mai District", 18.774584, 99.007757, 100, 18.774581, 99.007823, 94], ["14:15", 18.774624, 99.007687, 88, "Mueang Chiang Mai District", 18.774583, 99.007758, 100, 18.774503, 99.007628, 96], ["14:20", 18.774624, 99.007687, 85, "Mueang Chiang Mai District", 18.774583, 99.007758, 100, 18.774669, 99.007798, 97], ["14:25", 18.774624, 99.007687, 84, "Mueang Chiang Mai District", 18.774555, 99.007747, 100, 18.774678, 99.007829, 97], ["14:30", 18.774624, 99.007687, 82, "Mueang Chiang Mai District", 18.774621, 99.007714, 100, 18.774427, 99.007509, 98], ["14:35", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774597, 99.007742, 100, 18.774495, 99.007594, 99], ["14:40", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774587, 99.007754, 100, 18.774524, 99.007787, 100], ["14:45", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774586, 99.007755, 100, 18.774601, 99.007787, 100], ["14:50", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774585, 99.007756, 100, 18.774465, 99.007732, 100], ["14:55", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774584, 99.007757, 100, 18.774321, 99.007458, 100], ["15:00", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774565, 99.007714, 100, 18.774368, 99.007415, 100], ["15:05", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774566, 99.007717, 100, 18.774269, 99.00741, 100], ["15:10", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774567, 99.00772, 100, 18.77437, 99.007504, 100], ["15:15", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774569, 99.007724, 100, 18.774495, 99.00772, 100], ["15:20", 18.774624, 99.007687, 78, "Mueang Chiang Mai District", 18.774563, 99.007638, 100, 18.774533, 99.007751, 100], ["15:25", 18.774624, 99.007687, 75, "Mueang Chiang Mai District", 18.774571, 99.007689, 100, 18.774381, 99.007534, 100], ["15:30", 18.774615, 99.007662, 72, "Mueang Chiang Mai District", 18.774563, 99.007714, 100, 18.774581, 99.007823, 100], ["15:35", 18.774624, 99.007685, 71, "Mueang Chiang Mai District", 18.774564, 99.007716, 100, 18.774316, 99.007453, 100], ["15:40", 18.774624, 99.007685, 68, "Mueang Chiang Mai District", 18.774576, 99.007742, 100, 18.774524, 99.007787, 100], ["15:45", 18.774624, 99.007685, 67, "Mueang Chiang Mai District", 18.774583, 99.007757, 100, 18.774555, 99.007758, 100], ["15:50", 18.774624, 99.007685, 67, "Mueang Chiang Mai District", 18.774583, 99.007757, 100, 18.774532, 99.007755, 100], ["15:55", 18.774624, 99.007685, 67, "Mueang Chiang Mai District", 18.774583, 99.007758, 100, 18.774549, 99.007774, 100], ["16:00", 18.774624, 99.007685, 65, "Mueang Chiang Mai District", 18.774583, 99.007758, 100, 18.774501, 99.007759, 100], ["16:05", 18.774616, 99.00768, 65, "Mueang Chiang Mai District", 18.774583, 99.007758, 100, 18.774557, 99.00763, 100], ["16:10", 18.774624, 99.007685, 64, "Mueang Chiang Mai District", 18.77458, 99.007751, 100, 18.774675, 99.007813, 100], ["16:15", 18.774624, 99.007685, 64, "Mueang Chiang Mai District", 18.774583, 99.007754, 100, 18.774601, 99.007787, 100], ["16:20", 18.774485, 99.007609, 63, "Mueang Chiang Mai District", 18.774417, 99.007635, 100, 18.774546, 99.007763, 100], ["16:25", 18.768047, 99.012267, 59, "Mueang Chiang Mai District", 18.768114, 99.012251, 100, 18.774546, 99.007763, 100], ["16:30", 18.777682, 99.017391, 58, "Mueang Chiang Mai District", 18.777617, 99.017322, 100, 18.774546, 99.007763, 0], ["16:35", 18.780165, 99.02817, 56, "Mueang Chiang Mai District", 18.780109, 99.02833, 100, 18.774546, 99.007763, 0], ["16:40", 18.780071, 99.027871, 54, "Mueang Chiang Mai District", 18.780068, 99.02764, 100, 18.774546, 99.007763, 0], ["16:45", 18.75988, 99.016398, 54, "Mueang Chiang Mai District", 18.75987, 99.016156, 100, 18.774546, 99.007763, 0], ["16:50", 18.781478, 98.97735, 53, "Mueang Chiang Mai District", 18.782227, 98.977378, 100, 18.774546, 99.007763, 0], ["16:55", 18.797202, 98.980759, 53, "Mueang Chiang Mai District", 18.797208, 98.980763, 100, 18.774546, 99.007763, 0], ["17:00", 18.796412, 98.979393, 48, "Mueang Chiang Mai District", 18.797425, 98.980863, 100, 18.797187, 98.980904, 100], ["17:05", 18.796412, 98.979393, 48, "Mueang Chiang Mai District", 18.797171, 98.980848, 100, 18.797195, 98.980887, 100], ["17:10", 18.797358, 98.981117, 48, "Mueang Chiang Mai District", 18.797173, 98.980785, 99, 18.797161, 98.980842, 98], ["17:15", 18.797358, 98.981118, 48, "Mueang Chiang Mai District", 18.797213, 98.980862, 97, 18.79717, 98.980873, 95], ["17:20", 18.79714, 98.980889, 48, "Mueang Chiang Mai District", 18.797145, 98.980907, 96, 18.797202, 98.980949, 93], ["17:25", 18.79714, 98.980889, 48, "Mueang Chiang Mai District", 18.796637, 98.980858, 94, 18.797222, 98.98076, 90], ["17:30", 18.797324, 98.980898, 48, "Mueang Chiang Mai District", 18.796979, 98.980887, 93, 18.797161, 98.98092, 88], ["17:35", 18.79731, 98.980752, 48, "Mueang Chiang Mai District", 18.797172, 98.980872, 92, 18.797151, 98.980899, 85], ["17:40", 18.797172, 98.980649, 48, "Mueang Chiang Mai District", 18.797164, 98.980902, 91, 18.797146, 98.980882, 84], ["17:45", 18.797319, 98.980958, 48, "Mueang Chiang Mai District", 18.7972, 98.980841, 89, 18.797164, 98.980811, 84], ["17:50", 18.797183, 98.981125, 48, "Mueang Chiang Mai District", 18.797179, 98.980884, 88, 18.797157, 98.980834, 83], ["17:55", 18.797351, 98.980658, 48, "Mueang Chiang Mai District", 18.79714, 98.980918, 87, 18.797147, 98.980881, 83], ["18:00", 18.797303, 98.980676, 48, "Mueang Chiang Mai District", 18.797152, 98.980913, 86, 18.797147, 98.980881, 83], ["18:05", 18.797235, 98.9806, 48, "Mueang Chiang Mai District", 18.797157, 98.980913, 86, 18.797147, 98.980881, 0], ["18:10", 18.797327, 98.980951, 48, "Mueang Chiang Mai District", 18.797178, 98.980877, 84, 18.797147, 98.980881, 0], ["18:15", 18.797327, 98.980951, 48, "Mueang Chiang Mai District", 18.797211, 98.980866, 82, 18.797147, 98.980881, 0], ["18:20", 18.797344, 98.980964, 48, "Mueang Chiang Mai District", 18.797196, 98.980863, 82, 18.797147, 98.980881, 0], ["18:25", 18.797344, 98.980964, 48, "Mueang Chiang Mai District", 18.79715, 98.980944, 79, 18.797197, 98.980936, 80], ["18:30", 18.797226, 98.980923, 48, "Mueang Chiang Mai District", 18.797155, 98.980913, 78, 18.797167, 98.980916, 79], ["18:35", 18.796764, 98.981359, 48, "Mueang Chiang Mai District", 18.795833, 98.983469, 76, 18.797043, 98.980897, 77], ["18:40", 18.784023, 98.98185, 48, "Mueang Chiang Mai District", 18.784085, 98.981832, 75, 18.788293, 98.98253, 77], ["18:45", 18.772775, 98.980043, 48, "Mueang Chiang Mai District", 18.772764, 98.980053, 73, 18.775582, 98.980859, 76], ["18:50", 18.762635, 98.973066, 48, "CNX Airport", 18.762265, 98.972796, 70, 18.767464, 98.976302, 76], ["18:55", 18.743613, 98.959853, 48, "Mueang Chiang Mai District", 18.743624, 98.959878, 68, 18.751366, 98.965243, 76], ["19:00", 18.732499, 98.952245, 48, "Hang Dong District", 18.732575, 98.952353, 67, 18.751366, 98.965243, 76], ["19:05", 18.717361, 98.953138, 48, "Hang Dong District", 18.716789, 98.952665, 65, 18.751366, 98.965243, 0], ["19:10", 18.707732, 98.949672, 48, "Hang Dong District", 18.707798, 98.949677, 64, 18.751366, 98.965243, 0], ["19:15", 18.707673, 98.949714, 48, "Hang Dong District", 18.707665, 98.949782, 63, 18.751366, 98.965243, 0], ["19:20", 18.707673, 98.949714, 48, "Hang Dong District", 18.707698, 98.94959, 62, 18.751366, 98.965243, 0], ["19:25", 18.70765, 98.949692, 48, "Hang Dong District", 18.707685, 98.949656, 61, 18.751366, 98.965243, 0], ["19:30", 18.70765, 98.949693, 48, "Hang Dong District", 18.707718, 98.949641, 60, 18.751366, 98.965243, 0], ["19:35", 18.707709, 98.949688, 48, "Hang Dong District", 18.707608, 98.949575, 59, 18.751366, 98.965243, 0], ["19:40", 18.707753, 98.949597, 48, "Hang Dong District", 18.707613, 98.949622, 59, 18.751366, 98.965243, 0], ["19:45", 18.707789, 98.949594, 48, "Hang Dong District", 18.707646, 98.949559, 58, 18.751366, 98.965243, 0], ["19:50", 18.707773, 98.949604, 48, "Hang Dong District", 18.707676, 98.949641, 58, 18.751366, 98.965243, 0], ["19:55", 18.707773, 98.949604, 48, "Hang Dong District", 18.707799, 98.949663, 57, 18.751366, 98.965243, 0], ["20:00", 18.707818, 98.949563, 48, "Hang Dong District", 18.707863, 98.949564, 57, 18.751366, 98.965243, 0], ["20:05", 18.707817, 98.949564, 48, "Hang Dong District", 18.707747, 98.949502, 56, 18.751366, 98.965243, 0], ["20:10", 18.707727, 98.949608, 48, "Hang Dong District", 18.707835, 98.949473, 55, 18.751366, 98.965243, 0], ["20:15", 18.70778, 98.949762, 47, "Hang Dong District", 18.707777, 98.949538, 55, 18.751366, 98.965243, 0], ["20:20", 18.70778, 98.949763, 47, "Hang Dong District", 18.707733, 98.949578, 54, 18.751366, 98.965243, 0], ["20:25", 18.707739, 98.949693, 47, "Hang Dong District", 18.707676, 98.94963, 54, 18.751366, 98.965243, 0], ["20:30", 18.707739, 98.949693, 46, "Hang Dong District", 18.707789, 98.949631, 54, 18.751366, 98.965243, 0], ["20:35", 18.707734, 98.949734, 46, "Hang Dong District", 18.707701, 98.949644, 53, 18.751366, 98.965243, 0], ["20:40", 18.708757, 98.950491, 46, "Hang Dong District", 18.707615, 98.949493, 53, 18.751366, 98.965243, 0], ["20:45", 18.707786, 98.949615, 46, "Hang Dong District", 18.707727, 98.949698, 52, 18.751366, 98.965243, 0], ["20:50", 18.707785, 98.949615, 46, "Hang Dong District", 18.707774, 98.949561, 51, 18.751366, 98.965243, 0], ["20:55", 18.707788, 98.949616, 46, "Hang Dong District", 18.707777, 98.949632, 50, 18.751366, 98.965243, 0], ["21:00", 18.707788, 98.949617, 45, "Hang Dong District", 18.707668, 98.949731, 50, 18.751366, 98.965243, 0], ["21:05", 18.707786, 98.949616, 45, "Hang Dong District", 18.707737, 98.949641, 49, 18.751366, 98.965243, 0], ["21:10", 18.707785, 98.949616, 45, "Hang Dong District", 18.707767, 98.94957, 49, 18.751366, 98.965243, 0], ["21:15", 18.707786, 98.949726, 45, "Hang Dong District", 18.707685, 98.949674, 48, 18.751366, 98.965243, 0], ["21:20", 18.707788, 98.949727, 45, "Hang Dong District", 18.70769, 98.949644, 47, 18.751366, 98.965243, 0], ["21:25", 18.707788, 98.949727, 44, "Hang Dong District", 18.707781, 98.949593, 44, 18.751366, 98.965243, 0], ["21:30", 18.707796, 98.949711, 44, "Hang Dong District", 18.707656, 98.949617, 42, 18.751366, 98.965243, 0], ["21:35", 18.707797, 98.949712, 44, "Hang Dong District", 18.707775, 98.949621, 41, 18.751366, 98.965243, 0], ["21:40", 18.707797, 98.949712, 44, "Hang Dong District", 18.707883, 98.949621, 41, 18.751366, 98.965243, 0], ["21:45", 18.707792, 98.949697, 44, "Hang Dong District", 18.707857, 98.949583, 40, 18.751366, 98.965243, 0], ["21:50", 18.707792, 98.949697, 43, "Hang Dong District", 18.707848, 98.949619, 39, 18.751366, 98.965243, 0], ["21:55", 18.707792, 98.949698, 43, "Hang Dong District", 18.70781, 98.949626, 38, 18.751366, 98.965243, 0], ["22:00", 18.707703, 98.949577, 38, "Hang Dong District", 18.70769, 98.949642, 37, 18.751366, 98.965243, 0], ["22:05", 18.707725, 98.949678, 36, "Hang Dong District", 18.707689, 98.949611, 36, 18.751366, 98.965243, 0], ["22:10", 18.707684, 98.949655, 35, "Hang Dong District", 18.707684, 98.949631, 35, 18.751366, 98.965243, 0], ["22:15", 18.707736, 98.949629, 34, "Hang Dong District", 18.707724, 98.949632, 34, 18.751366, 98.965243, 0], ["22:20", 18.707769, 98.94967, 33, "Hang Dong District", 18.707688, 98.949641, 34, 18.751366, 98.965243, 0], ["22:25", 18.707693, 98.949608, 33, "Hang Dong District", 18.707673, 98.949641, 33, 18.751366, 98.965243, 0], ["22:30", 18.707702, 98.949634, 33, "Hang Dong District", 18.707667, 98.949667, 33, 18.751366, 98.965243, 0], ["22:35", 18.707605, 98.949726, 33, "Hang Dong District", 18.70623, 98.948943, 32, 18.751366, 98.965243, 0], ["22:40", 18.694012, 98.946135, 33, "Hang Dong District", 18.694304, 98.944926, 31, 18.751366, 98.965243, 0], ["22:45", 18.703908, 98.933144, 33, "Hang Dong District", 18.704182, 98.933064, 30, 18.751366, 98.965243, 0], ["22:50", 18.726527, 98.948016, 33, "Hang Dong District", 18.726547, 98.948032, 29, 18.751366, 98.965243, 0], ["22:55", 18.748425, 98.986224, 33, "Mueang Chiang Mai District", 18.746125, 98.981234, 28, 18.751366, 98.965243, 0], ["23:00", 18.764311, 99.002037, 33, "Mueang Chiang Mai District", 18.763134, 99.00129, 26, 18.751366, 98.965243, 0], ["23:05", 18.774485, 99.00782, 33, "Mueang Chiang Mai District", 18.774517, 99.007845, 22, 18.751366, 98.965243, 0], ["23:10", 18.787644, 99.005569, 33, "Mueang Chiang Mai District", 18.787649, 99.005223, 19, 18.751366, 98.965243, 0], ["23:15", 18.784485, 99.021828, 33, "Mueang Chiang Mai District", 18.78457, 99.021442, 17, 18.751366, 98.965243, 0], ["23:20", 18.779105, 99.047724, 33, "San Kamphaeng District", 18.779192, 99.047556, 15, 18.751366, 98.965243, 0]];
const map=L.map('map',{zoomControl:false,attributionControl:false}).setView([18.76,99.01],13);
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',{maxZoom:19}).addTo(map);
L.polyline(D.map(p=>[p[1],p[2]]),{color:'rgba(224,192,151,0.1)',weight:2,dashArray:'4,6'}).addTo(map);
const trail=L.polyline([],{color:'#e0c097',weight:3,opacity:.5}).addTo(map);
const glow=L.polyline([],{color:'rgba(224,192,151,0.12)',weight:12}).addTo(map);
const mk=L.marker([D[0][1],D[0][2]],{icon:L.divIcon({className:'',html:'<div class="dot"></div>',iconSize:[14,14],iconAnchor:[7,7]})}).addTo(map);
let prev='';
function go(i){
const p=D[i];
document.getElementById('tm').textContent=p[0];
document.getElementById('sl').value=i;
mk.setLatLng([p[1],p[2]]);
const t=D.slice(0,i+1).map(q=>[q[1],q[2]]);
trail.setLatLngs(t);glow.setLatLngs(t);
if(p[4]!==prev){const e=document.getElementById('place');e.style.opacity=0;
setTimeout(()=>{e.textContent=p[4]||'—';e.style.opacity=1},200);prev=p[4]}
if(i%10===0)map.panTo([p[1],p[2]],{animate:true,duration:.8})
}
let on=false,sp=1,iv;
function toggle(){on=!on;document.getElementById('pb').textContent=on?'⏸':'▶';
document.getElementById('pb').classList.toggle('on',on);
if(on)iv=setInterval(()=>{let v=+document.getElementById('sl').value+1;
if(v>=D.length)v=0;go(v)},200/sp);else clearInterval(iv)}
function spd(s){sp=s;document.querySelectorAll('.spd').forEach(b=>b.classList.remove('on'));
document.getElementById('s'+s).classList.add('on');
if(on){clearInterval(iv);on=false;toggle()}}
go(0);
setTimeout(()=>map.flyTo([D[0][1],D[0][2]],13,{duration:1.5}),300);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment