steven/tarc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better stops (still WIP)

Browse source
This commit is contained in:
steven 2025-05-27 19:30:18 -04:00
parent 0f5f878485
commit b060960392
2 changed files with 37 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

46
templates/map.html
View file

@ -9,28 +9,49 @@
<script src="/static/leaflet/leaflet.js"></script>
<link rel="stylesheet" href="/static/leaflet/leaflet.css">
<base target="_blank">
<style>html,body{height:100%;margin:0;}#map{height:100vh;}iframe{border:none;width:444px;}</style>
<style>html,body{height:100%;margin:0;}#map{height:100vh;}table{white-space:nowrap;}.leaflet-popup-content{width:auto !important;}</style>
</head>
<body>
<div id="map"></div>
<script>
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")]});
let stops={{stops|safe}};
for (stop in stops){
L.circle(stops[stop][0]).bindPopup(`${stops[stop][1]} (<a href=${stop}>#${stop}</a>)<iframe src="${stop}"></iframe>`).addTo(map)
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)
}
let busIcon=L.icon({iconUrl:'static/bus.ico',iconSize:[32,32]})
let busIcon=L.icon({iconUrl:"static/bus.ico",iconSize:[32,32]})
let layerControl=L.control.layers().addTo(map);
let busLayers={},busMarkers={};
function filterRoutes(wanted){
for(r in busLayers){
if(!wanted||wanted==r){
map.addLayer(busLayers[r])
} else{
map.removeLayer(busLayers[r])
}
!wanted||wanted==r?map.addLayer(busLayers[r]):map.removeLayer(busLayers[r])
}
}
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)
})
}
function updateMap(){
let routes={};
fetch("tarc.csv").then(response=>response.text()).then(csv=>{
@ -47,13 +68,10 @@ function updateMap(){
for(let r in routes){
overlayLayers[`${r.padStart(2,0)} | ${String(routes[r]).padStart(2,0)} vehicle(s)`]=busLayers[r]
}
layerControl.remove();
layerControl=L.control.layers(null,overlayLayers).addTo(map);
let iframe=document.querySelector("iframe");if(iframe)iframe.src=iframe.src
layerControl.remove();layerControl=L.control.layers(null,overlayLayers).addTo(map)
})
}
updateMap();
setInterval(updateMap,5000);
updateMap();setInterval(updateMap,5000);
map.on('click',()=>filterRoutes())
let locationMarker=L.marker([0,0]).addTo(map);