hermes-explorigin 3413b7053f Initial Navigator app: SvelteKit static build + OSM Overpass data pipeline

- 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

2026-08-08 15:29:51 +00:00

3.2 KiB

Raw Blame History

Navigator

A custom web application that serves OpenStreetMap (OSM) data. It has a build process that:

Pulls OSM data from the Overpass API for configurable geographic areas and feature types.
Converts it to static GeoJSON files.
Builds a SvelteKit frontend (with the static adapter) into a plain static site that renders the data on an interactive Leaflet map.

The final output in build/ is a fully self-contained static site — no server runtime required. You can serve it with any static HTTP server (nginx, Apache, python -m http.server, S3/Cloudflare Pages, etc.).

Built With

SvelteKit (Svelte 5, runes mode)
@sveltejs/adapter-static — outputs a static site
Leaflet — interactive map on the frontend
Overpass API — OSM data source

Quick Start

npm install

# Fetch & convert OSM data into static/data/*.geojson
npm run build:data

# Full production build: (fetch data) + (static site) -> build/
npm run build

# Preview the production build locally
npm run preview

Development

npm run dev         # Vite dev server (your data in static/data is served too)
npm run check       # Type + Svelte checks

Build Process

Command	What it does
`npm run build:data`	Runs `scripts/osm-data.mjs` to fetch OSM data → `static/data/`
`npm run build`	`build:data` followed by the SvelteKit static build → `build/`
`npm run preview`	Serves the `build/` output locally

Data layout

static/data/
├── _index.json       # Manifest of all built areas (drives the UI dropdown)
└── <area>.geojson    # One FeatureCollection per configured area

The frontend loads /data/_index.json, then fetches the GeoJSON file(s) for the selected area(s) and renders them on the map with popups.

Configuring Areas & Queries

Edit scripts/osm-data.mjs — the AREAS object describes each area:

bbox — [south, west, north, east] in decimal degrees.
queries — a map of name → Overpass QL snippet. Use {{bbox}} as the placeholder for the area's bounding box.
The script falls back across multiple public Overpass mirrors if one is overloaded, and is polite to the API (short delay between queries).

Example:

parks: `
  way["leisure"="park"]({{bbox}});
  out center tags geom;
`

List configured queries with npm run data -- --queries, or build a single area with npm run data -- --area=tulsa.

Deployment

The build/ directory is entirely static. Serve it directly:

cd build
python3 -m http.server 8080
# or: nginx -s  listen 8080; root /path/to/build;  (with a fallback to index.html)

Because the site uses a static adapter with prerendering, everything can be hosted on any static file host or CDN.

Repository

Hosted on Gitea: https://gitea.thecookiejar.me/hermes-explorigin/navigator

3.2 KiB Raw Blame History