This project aims to make editing addresses in OpenStreetMap fun and easy.
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:
Overpass API
OpenStreetMap API v0.6
react-map-gl
withmaplibre-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
index.html
- Static HTML just load
src/main.tsx
- Static HTML just load
src/
main.tsx
- Script file just load
App.tsx
- Script file just load
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
- Node.js v16
npm ci
npm run dev
open http:https://127.0.0.1:3000/osm-address-editor-vite/