nolan/macker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on overhead imagery and not osm defaults

Browse Source
This commit is contained in:
beans
2026-10-28 14:14:38 -05:00
parent 9e660ac26e
commit 6e1a9e19cf
5 changed files with 102 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/index.html
+41 -2
View File
@@ -10,12 +10,51 @@
</head>
<body>
<header><div><h1>Macker</h1><p>Work car · Live location</p></div><button id="follow" type="button">Follow car: on</button></header>
<main><div class="stats"><section class="card"><span class="label">Current speed</span><strong class="value" id="speed">—</strong><small id="metric">Waiting for GPS</small></section><section class="card"><span class="label">Last update</span><strong class="value" id="age">—</strong><small id="time">No location received yet</small></section><section class="card"><span class="label">Nearby address</span><strong class="value" id="address">—</strong><small id="address-distance">Waiting for GPS</small><br><small id="address-source"></small></section></div><p id="status" role="status">Waiting for the car’s first GPS fix…</p><p id="uncertainty"><small>GPS uncertainty unavailable</small></p><div id="map" aria-label="Car location map with GPS uncertainty circle"></div></main>
<main><div class="stats"><section class="card"><span class="label">Current speed</span><strong class="value" id="speed">—</strong><small id="metric">Waiting for GPS</small></section><section class="card"><span class="label">Last update</span><strong class="value" id="age">—</strong><small id="time">No location received yet</small></section><section class="card"><span class="label">Nearby address</span><strong class="value" id="address">—</strong><small id="address-distance">Waiting for GPS</small><br><small id="address-source"></small></section></div><p id="status" role="status">Waiting for the car’s first GPS fix…</p><p id="uncertainty"><small>GPS uncertainty unavailable</small></p><p id="imagery-info" role="status"><small>Street map · OpenStreetMap</small></p><div id="map" aria-label="Street or aerial car location map with GPS uncertainty circle"></div></main>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const el=id=>document.getElementById(id);
let map, marker, uncertaintyCircle, latest, follow=true, failed=false;
if(window.L){map=L.map('map').setView([20,0],2);L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19,attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);}
// USGS exports Web Mercator images; its ImageServer is not an XYZ tile cache.
// Match each Leaflet tile's projected bounds explicitly to keep fixes aligned.
function aerialTileURL(coords){
const halfWorld=20037508.342789244;
const span=2*halfWorld/2**coords.z;
const west=-halfWorld+coords.x*span,north=halfWorld-coords.y*span;
const query=new URLSearchParams({
f:'image',bbox:[west,north-span,west+span,north].join(','),
bboxSR:'3857',imageSR:'3857',size:'256,256',format:'jpg',
interpolation:'RSP_BilinearInterpolation',
renderingRule:JSON.stringify({rasterFunction:'NaturalColor'})
});
return `https://imagery.nationalmap.gov/arcgis/rest/services/USGSNAIPImagery/ImageServer/exportImage?${query}`;
}
if(window.L){
map=L.map('map').setView([31.4,-89.7],7);
const street=L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',{
maxZoom:19,attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const AerialLayer=L.TileLayer.extend({getTileUrl:aerialTileURL});
const aerial=new AerialLayer('',{
maxZoom:19,bounds:[[30.1,-91.7],[35.1,-88.0]],
updateWhenIdle:true,keepBuffer:1,
attribution:'Aerial imagery: USDA NAIP / <a href="https://www.usgs.gov/programs/national-geospatial-program/national-map">USGS, The National Map</a>'
});
L.control.layers({Street:street,Aerial:aerial},null,{collapsed:false}).addTo(map);
map.on('layeradd',event=>{
if(event.layer===aerial)el('imagery-info').textContent='Loading aerial imagery · USDA NAIP / USGS · Photography dates vary; imagery is not live';
else if(event.layer===street)el('imagery-info').textContent='Street map · OpenStreetMap';
});
aerial.on('load',()=>{
if(map.hasLayer(aerial))el('imagery-info').textContent='Aerial imagery · USDA NAIP / USGS · Photography dates vary; imagery is not live';
});
aerial.on('tileerror',()=>{
if(!map.hasLayer(aerial))return;
map.removeLayer(aerial);
street.addTo(map);
el('imagery-info').textContent='Aerial imagery could not load. Showing street map; select Aerial to retry.';
});
}
el('follow').onclick=()=>{follow=!follow;el('follow').textContent=`Follow car: ${follow?'on':'off'}`;if(follow&&marker)map.panTo(marker.getLatLng());};
// gpsd axis errors are already in metres. Enclose their horizontal error box.
// Zero also represents an omitted estimate in the client's gpsd dependency.