# 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.