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

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

Build for production:

npm run build

Preview the production build:

npm run preview

You can also use the start alias after building:

npm run start

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.

2.3 KiB Raw Blame History