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

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:

npm install

Start the development server:

npm run dev

Run tests:

npm test

Run static checks:

npm run lint

Build for production:

npm run build

Run the production static server:

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:

npm run preview

You can override the production server host or port when needed:

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.