68 lines
2.4 KiB
HTML
68 lines
2.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>Route {{route}}</title>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta content="Route {{route}}" property="og:title">
|
||
|
|
<meta content='https://tarc.stevenalexander.org/bus.svg' property='og:image'>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<link rel="icon" type="image/x-icon" href="/bus.svg">
|
||
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
||
|
|
<style>
|
||
|
|
html, body {
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
#map {
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
#clock {
|
||
|
|
background-color: #000;
|
||
|
|
color: #FFF;
|
||
|
|
font: 16px monospace;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="map"></div>
|
||
|
|
<script>
|
||
|
|
let map=L.map("map",{center:[38.21,-85.75],zoom:13,layers:[L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")]});
|
||
|
|
L.control.scale({"position":"topright"}).addTo(map);
|
||
|
|
document.querySelector(".leaflet-top.leaflet-right").addEventListener("click",function() {
|
||
|
|
map.getContainer().requestFullscreen()
|
||
|
|
})
|
||
|
|
let s={{stops|safe}};
|
||
|
|
for (i in s) {
|
||
|
|
L.circle([s[i][0],s[i][1]],{radius:20,color:"#0092da"}).bindPopup(`<b>${s[i][2]} (#${i})</b><br>Sequence #${s[i].slice(3)}`).addTo(map)
|
||
|
|
}
|
||
|
|
let busMarkers=L.layerGroup().addTo(map);
|
||
|
|
function updateMap() {
|
||
|
|
fetch("{{route}}.csv").then(response=>response.text()).then(data=>{
|
||
|
|
if (data == "") return;
|
||
|
|
busMarkers.clearLayers();
|
||
|
|
data.split("\n").forEach(line=>{
|
||
|
|
var [n,t,lat,lng]=line.split(",");
|
||
|
|
L.marker([lat,lng]).bindPopup("<b>"+n+"</b> at<br>"+new Date(t*1000).toLocaleTimeString()).addTo(busMarkers)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
document.querySelector(".leaflet-bottom.leaflet-right").innerHTML='<div id="clock"></div>';
|
||
|
|
let clockElement=document.querySelector("#clock");
|
||
|
|
function updateClock() {
|
||
|
|
clockElement.textContent=busMarkers.getLayers().length+" TARC(s) - "+new Date().toLocaleTimeString()
|
||
|
|
}
|
||
|
|
setInterval(updateMap,5000); // use websocket?
|
||
|
|
setInterval(updateClock,1000);
|
||
|
|
|
||
|
|
let locationMarker=L.marker([0,0]),locationRadius=L.circle([0,0]);
|
||
|
|
let locationLayer=L.layerGroup([locationMarker,locationRadius]).addTo(map);
|
||
|
|
map.locate({watch:true});
|
||
|
|
map.on("locationfound",e=>{
|
||
|
|
locationMarker.setLatLng(e.latlng).bindPopup("<b>You</b> at<br>"+new Date().toLocaleTimeString());
|
||
|
|
locationRadius.setLatLng(e.latlng).setRadius(e.accuracy/2).bringToBack()
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|