hermes-explorigin
3413b7053f
- 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
101 lines
3.2 KiB
Markdown
101 lines
3.2 KiB
Markdown
# Navigator
|
|
|
|
A custom web application that serves **OpenStreetMap (OSM) data**. It has a build
|
|
process that:
|
|
|
|
1. **Pulls** OSM data from the [Overpass API](https://overpass-api.de/) for
|
|
configurable geographic areas and feature types.
|
|
2. **Converts** it to static **GeoJSON** files.
|
|
3. **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](https://svelte.dev/kit) (Svelte 5, runes mode)
|
|
- [@sveltejs/adapter-static](https://kit.svelte.dev/docs/adapter-static) — outputs a static site
|
|
- [Leaflet](https://leafletjs.com/) — interactive map on the frontend
|
|
- [Overpass API](https://overpass-api.de/) — OSM data source
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
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:
|
|
|
|
```js
|
|
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:
|
|
|
|
```bash
|
|
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 |