https://github.com/yuiseki/osm-address-editor-vite

🗺🙌 Web app that makes editing OpenStreetMap building addresses fun and easy
https://github.com/yuiseki/osm-address-editor-vite

map openstreetmap osm react vite vitejs

Last synced: 2 days ago
JSON representation

🗺🙌 Web app that makes editing OpenStreetMap building addresses fun and easy

• Host: GitHub
• URL: https://github.com/yuiseki/osm-address-editor-vite
• Owner: yuiseki
• License: wtfpl
• Created: 2022-02-27T10:56:00.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-22T23:10:05.000Z (7 months ago)
• Last Synced: 2024-05-23T01:31:29.857Z (7 months ago)
• Topics: map, openstreetmap, osm, react, vite, vitejs
• Language: TypeScript
• Homepage: https://yuiseki.github.io/osm-address-editor-vite/
• Size: 12.1 MB
• Stars: 11
• Watchers: 2
• Forks: 4
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# osm-address-editor-vite

## What is this

This project aims to make editing addresses in OpenStreetMap fun and easy.

## How it works

The map is displayed in `react-map-gl` and `maplibre-gl-js`.  

When you move and zoom the map, fetch buildings information via the `Overpass API`.  

Then fetch the information of the user who last edited the building via `OpenStreetMap API v0.6`.

This project uses following apis and npm packages:

### API

- `Overpass API`

  - https://wiki.openstreetmap.org/wiki/Overpass_API

- `OpenStreetMap API v0.6`

  - https://wiki.openstreetmap.org/wiki/API_v0.6

### Library

- `react-map-gl` with `maplibre-gl-js`

  - https://github.com/visgl/react-map-gl

  - https://github.com/maplibre/maplibre-gl-js

- `osm-api-js`

  - https://github.com/k-yle/osm-api-js

  - A complete package for interacting with the OpenStreetMap API

- `osmtogeojson`

  - https://github.com/tyrasd/osmtogeojson

  - This package can convert responses from the Overpass API to GeoJson

- `turf`

  - https://github.com/Turfjs/turf

  - A powerful package that allows you to perform geospatial processing in Javascript

## Structure

- `index.html`

  - Static HTML just load `src/main.tsx`

- `src/`

  - `main.tsx`

    - Script file just load `App.tsx`

  - `App.tsx`

    - Main entrypoint of this project

  - `components/`

    - Separable, Reusable UI components

    - `Feature/address/countries.ts`

      - Most important code to localize fields of form of to edit address in many country

  - `lib/`

    - Separable, Reusable libraries

## Development

### Requirements

- Node.js v16

### Launch dev server

```bash

npm ci

npm run dev

```

open `http://127.0.0.1:3000/osm-address-editor-vite/`