edward/openstreetmap-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fit route bounds to visible map area above open mobile panel

Browse source 
fitBounds was fitting to the full viewport height, placing half the route
behind the panel. Add panel-aware padding (65vh at bottom) on mobile so
the entire route is visible in the uncovered portion of the map.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Edward Betts 2026-02-28 11:16:08 +00:00
parent 13beaf21ed
commit 977008d6bd
1 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
web/static/app.js
View file

@ -34,6 +34,14 @@ let selectedTo = null; // stop name string or null
function isMobile() { return window.innerWidth < 768; }
/** fitBounds padding that accounts for the open panel covering the bottom of the map. */
function fitPadding() {
if (!isMobile()) return { padding: [20, 20] };
// Panel is 65vh; leave 20px margin above it and normal padding elsewhere.
const panelH = Math.round(window.innerHeight * 0.65);
return { paddingTopLeft: [20, 20], paddingBottomRight: [20, panelH + 20] };
}
function openPanel() {
document.getElementById('sidebar').classList.add('panel-open');
const fab = document.getElementById('panel-fab');
@ -397,7 +405,7 @@ async function loadRoute(relationId) {
filter: f => f.geometry.type === 'LineString',
}).addTo(map);
map.fitBounds(fullRouteLayer.getBounds(), { padding: [20, 20] });
map.fitBounds(fullRouteLayer.getBounds(), fitPadding());
renderStopList();
updateMarkers();
@ -516,7 +524,7 @@ async function loadRouteMaster(relationId) {
if (routeMasterLayers.length > 0) {
let bounds = routeMasterLayers[0].getBounds();
for (const l of routeMasterLayers.slice(1)) bounds = bounds.extend(l.getBounds());
map.fitBounds(bounds, { padding: [20, 20] });
map.fitBounds(bounds, fitPadding());
}
} catch (e) {
showError('Network error loading route master.');