119 lines
2.6 KiB
Markdown
119 lines
2.6 KiB
Markdown
# MapSift
|
|
|
|
Explore OpenStreetMap data without writing queries.
|
|
|
|
MapSift is an interactive OpenStreetMap data explorer powered by the Overpass API. It lets users choose what they want to find on a map, refine the search with tags, add nearby conditions, and inspect the generated Overpass QL when needed.
|
|
|
|
## Features
|
|
|
|
- Interactive Leaflet map as the main workspace.
|
|
- Large categorized preset catalog for OSM tags.
|
|
- Search by the current map viewport or a named area.
|
|
- Optional refinement filters for selected presets.
|
|
- Custom tag search for advanced OSM exploration.
|
|
- Nearby search conditions, such as benches near shops.
|
|
- Generated Overpass QL preview.
|
|
- Copy query and open it in Overpass Turbo.
|
|
- Results shown as map markers and a linked result list.
|
|
- List result selection centers the matching marker on the map.
|
|
|
|
## Tech Stack
|
|
|
|
- Vite
|
|
- React
|
|
- TypeScript
|
|
- Leaflet and React Leaflet
|
|
- Vitest
|
|
- Plain CSS
|
|
|
|
MapSift is a frontend-only SPA. It does not include a backend, database, authentication, user accounts, or saved projects.
|
|
|
|
## Project Structure
|
|
|
|
```text
|
|
src/
|
|
app/
|
|
App.tsx
|
|
features/
|
|
map/
|
|
MapView.tsx
|
|
results/
|
|
ResultsList.tsx
|
|
search/
|
|
buildOverpassQuery.ts
|
|
overpassClient.ts
|
|
parseOverpassResponse.ts
|
|
presets.ts
|
|
types.ts
|
|
shared/
|
|
types.ts
|
|
```
|
|
|
|
## Overpass Architecture
|
|
|
|
Overpass-specific logic is intentionally kept outside React components:
|
|
|
|
- `buildOverpassQuery(state)` generates Overpass QL from a typed search state.
|
|
- `fetchOverpass(query)` sends the request to the Overpass API.
|
|
- `parseOverpassResponse(response)` converts Overpass elements into map/list results.
|
|
|
|
React components handle user interaction and display, not manual query string assembly.
|
|
|
|
## Getting Started
|
|
|
|
Install dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
Start the development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Run tests:
|
|
|
|
```bash
|
|
npm test
|
|
```
|
|
|
|
Run static checks:
|
|
|
|
```bash
|
|
npm run lint
|
|
```
|
|
|
|
Build for production:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Run the production static server:
|
|
|
|
```bash
|
|
npm run start
|
|
```
|
|
|
|
This serves the generated `dist/` directory on `0.0.0.0:4173` with SPA fallback enabled.
|
|
|
|
Preview the production build with Vite:
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
You can override the production server host or port when needed:
|
|
|
|
```bash
|
|
HOST=127.0.0.1 PORT=8080 npm run start
|
|
```
|
|
|
|
For deployment, serve the generated `dist/` directory with any static web server.
|
|
|
|
## Notes
|
|
|
|
MapSift uses the public Overpass API. Large viewport searches are blocked in the UI to avoid irresponsible requests. If a query returns too much data or the API is busy, zoom in, reduce filters, or try again later.
|