use transport tiles from thunderforest.com

This commit is contained in:
steven 2025-05-09 20:31:18 -04:00
parent dda7f39fca
commit baae37b4c9

View file

@ -14,7 +14,7 @@
<body> <body>
<div id="map"></div> <div id="map"></div>
<script> <script>
let map=L.map("map",{center:[38.2,-85.75],zoom:13,layers:[L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")]}); 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}}; let stops={{stops}};
for (stop in stops){ for (stop in stops){
L.circle(stops[stop]).bindPopup(`<iframe src="https://tarc.rideralerts.com/InfoPoint/Minimal/Departures/ForStop?stopId=${stop}">Stop #${stop}</iframe>`).addTo(map) L.circle(stops[stop]).bindPopup(`<iframe src="https://tarc.rideralerts.com/InfoPoint/Minimal/Departures/ForStop?stopId=${stop}">Stop #${stop}</iframe>`).addTo(map)
@ -29,7 +29,7 @@ function updateMap(){
p=parseInt(p); p=parseInt(p);
t=new Date(t*1000).toLocaleTimeString("en-US",{hour12:false}); t=new Date(t*1000).toLocaleTimeString("en-US",{hour12:false});
if(!busLayers[r]){busLayers[r]=L.layerGroup().addTo(map)} if(!busLayers[r]){busLayers[r]=L.layerGroup().addTo(map)}
if(!busMarkers[id]){busMarkers[id]=L.marker([0,0]).addTo(busLayers[r])} if(!busMarkers[id]){busMarkers[id]=L.marker([0,0],{icon:L.icon({iconUrl:'static/bus.ico',iconSize:[24,24]})}).addTo(busLayers[r])}
if(!routes[r]){routes[r]=[0,0]} if(!routes[r]){routes[r]=[0,0]}
routes[r][0]++; routes[r][0]++;
routes[r][1]+=p; routes[r][1]+=p;
@ -37,15 +37,15 @@ function updateMap(){
}) })
let overlayLayers={}; let overlayLayers={};
for(let r in routes){ for(let r in routes){
overlayLayers[`${r} (${routes[r][0]} vehicle(s) with ${routes[r][1]} riders)`]=busLayers[r] overlayLayers[`${r} | ${routes[r][0]} vehicle(s) with ${routes[r][1]} rider(s)`]=busLayers[r]
} }
layerControl.remove(); layerControl.remove();
layerControl=L.control.layers(null,overlayLayers,{collapsed:window.innerWidth<window.innerHeight}).addTo(map); layerControl=L.control.layers(null,overlayLayers,{collapsed:window.innerWidth<window.innerHeight}).addTo(map);
let iframe=document.querySelector("iframe");if(iframe)iframe.src=iframe.src; let iframe=document.querySelector("iframe");if(iframe)iframe.src=iframe.src
setTimeout(updateMap,5000)
}) })
} }
updateMap(); updateMap();
setInterval(updateMap,5000);
let locationMarker=L.marker([0,0]).addTo(map); let locationMarker=L.marker([0,0]).addTo(map);
let locationRadius=L.circle([0,0]).addTo(map).bringToBack(); let locationRadius=L.circle([0,0]).addTo(map).bringToBack();