The page had two stacked 100vh containers (.app and .wrap) which made the
page taller than the viewport and forced scrolling. Fixes:
- .wrap now fills its grid cell (height:100%, min-height:0, overflow:hidden)
instead of a second 100vh
- .app uses 100dvh + overflow:hidden; html/body/#svelte get height:100%,
body overflow:hidden
- Directions panel is now viewport-anchored (top:64px/bottom:14px) with a
max-height and internal overflow-y so it can't exceed the screen
- DirectionsPanel itself scrolls internally when content is tall
- scripts/custom-layers.mjs: hand-authored, self-documenting config for
custom zones (polygons) and points of interest, shipped with example
Tulsa POIs and district zones plus a copy-paste template
- osm-data.mjs: merges custom layers into static/data/custom/<id>.geojson
and includes them in the _index.json manifest with category, layerType,
and color metadata
- MapView.svelte: renders each manifest entry as an independent toggleable
Leaflet layer with per-layer styling and an on-map legend panel
- +page.svelte: loads all data sources (OSM + custom) from the manifest
- SvelteKit project with @sveltejs/adapter-static (runs fully static)
- scripts/osm-data.mjs: pulls OSM data from Overpass API and converts to
static GeoJSON under static/data/ with per-area manifest
- Leaflet map frontend that loads the static data and renders features
with popups and area selection dropdown
- npm run build fetches data then produces a self-contained static site
