2025-03-06 00:59:38 -05:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
2025-04-04 00:13:38 -04:00
< title > TARC Routes< / title >
< meta name = "description" content = "Watch the live locations of TARC vehicles and stops around Louisville" >
2025-03-26 23:19:04 -04:00
< meta name = "viewport" content = "width=device-width,initial-scale=1" >
2025-05-06 04:47:47 -04:00
< link rel = "shortcut icon" href = "static/bus.ico" >
2025-04-27 23:04:14 -04:00
< script src = "/static/leaflet/leaflet.js" > < / script >
< link rel = "stylesheet" href = "/static/leaflet/leaflet.css" >
2025-04-17 09:55:52 -04:00
< base target = "_blank" >
2025-05-27 19:30:18 -04:00
< style > html , body { height : 100 % ; margin : 0 ; } # map { height : 100 vh ; } table { white-space : nowrap ; } . leaflet-popup-content { width : auto !important ; } < / style >
2025-03-06 00:59:38 -05:00
< / head >
< body >
< div id = "map" > < / div >
< script >
2025-05-09 21:52:42 -04:00
let map=L.map("map",{center:[38.22,-85.7],zoom:12,layers:[L.tileLayer("https://tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=cf957cde4a7b40bbb49479c8fa4d60f7")]});
2025-05-11 00:01:05 -04:00
let stops={{stops|safe}};
2025-05-27 19:30:18 -04:00
for(let stop in stops){
stops[stop][0]=L.circle(stops[stop][0]).bindPopup(`${stops[stop][1]} (< a href = ${stop}.csv > #${stop}< / a > )`).on('click',()=>fetchStop(stop)).addTo(map)
2025-04-17 00:35:17 -04:00
}
2025-05-27 19:30:18 -04:00
let busIcon=L.icon({iconUrl:"static/bus.ico",iconSize:[32,32]})
2025-03-25 20:24:28 -04:00
let layerControl=L.control.layers().addTo(map);
2025-03-26 23:19:04 -04:00
let busLayers={},busMarkers={};
2025-05-09 21:52:47 -04:00
function filterRoutes(wanted){
for(r in busLayers){
2025-05-27 19:30:18 -04:00
!wanted||wanted==r?map.addLayer(busLayers[r]):map.removeLayer(busLayers[r])
2025-05-09 21:52:47 -04:00
}
}
2025-05-27 19:30:18 -04:00
function fetchStop(s){
fetch(s+".csv").then(response=>response.text()).then(csv=>{
const table=document.createElement('table');
const rows=csv.split('\n');
const headerRow=document.createElement('tr');
const header=rows[0].split(',');
header.forEach(header=>{
const th=document.createElement('th');
th.textContent=header;
headerRow.appendChild(th);
});
table.appendChild(headerRow);
for(let i=1;i< rows.length ; i + + ) {
const row=rows[i].split(',');
const tr=document.createElement('tr');
row.forEach(value=>{
const td=document.createElement('td');
td.textContent=value;
tr.appendChild(td);
});
table.appendChild(tr);
}
stops[s][0].setPopupContent(`${stops[s][1]} (< a href = ${s}.csv > #${s}< / a > )${table.outerHTML}`).addTo(map)
})
}
2025-03-25 17:18:11 -04:00
function updateMap(){
2025-03-26 23:19:04 -04:00
let routes={};
2025-04-10 21:11:54 -04:00
fetch("tarc.csv").then(response=>response.text()).then(csv=>{
csv.split("\n").forEach(line=>{
2025-05-18 16:07:23 -04:00
let [lat,lng,r,id,dest,h,s,dir,t]=line.split(",");
2025-04-07 02:34:22 -04:00
t=new Date(t*1000).toLocaleTimeString("en-US",{hour12:false});
2025-03-26 23:19:04 -04:00
if(!busLayers[r]){busLayers[r]=L.layerGroup().addTo(map)}
2025-05-09 21:52:47 -04:00
if(!busMarkers[id]){busMarkers[id]=L.marker([0,0],{icon:busIcon}).on('click',()=>filterRoutes(r)).addTo(busLayers[r])}
2025-05-18 15:15:22 -04:00
if(!routes[r]){routes[r]=0}
routes[r]++;
2025-05-18 16:07:23 -04:00
busMarkers[id].setLatLng([lat,lng]).bindPopup(`< b > Route ${r}< / b > (#${id})< br > ${dest}< br > < span style = "transform:rotate(${h}deg);display:inline-block;" > < img src = "/static/fontawesome/svgs/solid/arrow-up.svg" width = 16 height = 16 > < / span > ${s}mph< br > ${dir}< br > ${t}`)
2025-03-06 00:59:38 -05:00
})
2025-03-26 23:19:04 -04:00
let overlayLayers={};
for(let r in routes){
2025-05-18 15:15:22 -04:00
overlayLayers[`${r.padStart(2,0)} | ${String(routes[r]).padStart(2,0)} vehicle(s)`]=busLayers[r]
2025-03-25 20:24:28 -04:00
}
2025-05-27 19:30:18 -04:00
layerControl.remove();layerControl=L.control.layers(null,overlayLayers).addTo(map)
2025-03-06 00:59:38 -05:00
})
}
2025-05-27 19:30:18 -04:00
updateMap();setInterval(updateMap,5000);
2025-05-09 21:52:47 -04:00
map.on('click',()=>filterRoutes())
2025-03-06 00:59:38 -05:00
2025-03-26 23:19:04 -04:00
let locationMarker=L.marker([0,0]).addTo(map);
let locationRadius=L.circle([0,0]).addTo(map).bringToBack();
2025-03-06 00:59:38 -05:00
map.locate({watch:true});
map.on("locationfound",e=>{
locationMarker.setLatLng(e.latlng).bindPopup("< b > You< / b > at< br > "+new Date().toLocaleTimeString());
2025-05-09 12:38:42 -04:00
if(e.accuracy< 100 ) locationRadius . setLatLng ( e . latlng ) . setRadius ( e . accuracy / 2 )
2025-03-06 00:59:38 -05:00
});
< / script >
< / body >
< / html >
