md/osm-treewarden
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
Bäume in OSM kuratieren. https://treewarden.osm.23.nu/
114 commits 17 branches 0 tags 46 MiB
Find a file
Exact
Maximillian Dornseif de56585504 fix: Beim Initialisieren der App Hintergrundkarte laden.
2025-12-30 20:59:25 +01:00
.github/workflows Improve type safety, test setup, and CI configuration for Playwright 2025-08-24 22:01:33 +00:00
.playwright-mcp feat: add NRW i-Orthophoto and vorläufiges Orthophoto layers 2025-08-23 12:22:32 +02:00
src fix: Beim Initialisieren der App Hintergrundkarte laden. 2025-12-30 20:59:25 +01:00
tests Add test IDs and update WebKit configuration in Playwright 2025-08-30 06:37:10 +00:00
.gitignore chore: add .vite/ to .gitignore 2025-08-01 08:07:57 +02:00
eslint.config.js fix: resolve linting errors and test failures 2025-08-26 07:35:21 +02:00
example-urls.md Implement URL-based map state persistence and sharing features 2025-08-30 06:51:54 +00:00
index.html fix: Beim Initialisieren der App Hintergrundkarte laden. 2025-12-30 20:59:25 +01:00
package-lock.json fix: update dependencies and ESLint configuration 2025-08-22 23:57:56 +02:00
package.json fix: Beim Initialisieren der App Hintergrundkarte laden. 2025-12-30 20:59:25 +01:00
playwright.config.ts Add test IDs and update WebKit configuration in Playwright 2025-08-30 06:37:10 +00:00
README.md feat: add tree addition functionality with apple and pear selection 2025-08-23 01:04:52 +02:00
styles.css Add separate store for changes (#2) 2025-07-31 19:01:10 +02:00
test_changes_store.html Add separate store for changes (#2) 2025-07-31 19:01:10 +02:00
tsconfig.json fix: update dependencies and ESLint configuration 2025-08-22 23:57:56 +02:00
vite.config.ts fix: Beim Initialisieren der App Hintergrundkarte laden. 2025-12-30 20:59:25 +01:00
vitest.config.ts Fix async store updates in Settings test with act() wrapper 2025-08-24 21:21:45 +00:00

README.md

OSM Tree Warden

A web application for managing and visualizing trees in OpenStreetMap data.

Features

Tree Management

  • View Trees: Display trees from OpenStreetMap data on an interactive map
  • Tree Details: View detailed information about individual trees including species, genus, and metadata
  • Tree Validation: Automatic validation of tree data with warnings and suggestions
  • Tree Addition: Add new trees to the map with species selection

Map Features

  • Interactive Map: Built with React Leaflet for smooth navigation
  • Background Layers: Switch between OpenStreetMap and NRW Orthophoto layers
  • Real-time Loading: Trees are loaded automatically as you navigate the map
  • Tree Markers: Visual markers for trees with different states (selected, has errors, etc.)

Data Management

  • Patch System: Make local changes to tree data before uploading to OSM
  • Validation: Real-time validation of tree properties
  • Export: Generate OSM-compatible XML for uploading changes

Tree Addition Feature

How to Add Trees

  1. Click the Plus Button: Look for the green ➕ button in the top-right corner of the map
  2. Select Tree Type: Choose between:
    • 🍎 Apple (Malus domestica)
    • 🍐 Pear (Pyrus communis)
  3. Place the Tree: Click anywhere on the map to place your selected tree
  4. Tree Added: The new tree will appear on the map with the appropriate species information

Tree Types Available

  • Apple Tree (Malus domestica): Common apple tree species
  • Pear Tree (Pyrus communis): Common pear tree species

More tree types can be easily added by extending the tree addition functionality.

Development

Prerequisites

  • Node.js (v16 or higher)
  • npm

Installation

npm install

Running the Application

npm run dev

The application will be available at http://localhost:3000 (or the next available port).

Testing

npm run test

Building for Production

npm run build

Technical Details

Architecture

  • Frontend: React with TypeScript
  • State Management: Nanostores for reactive state
  • Maps: React Leaflet with OpenStreetMap tiles
  • Styling: CSS Modules for component-scoped styles
  • Testing: Vitest with React Testing Library

Key Components

  • Map: Main map component with tree layer and controls
  • TreeLayer: Renders tree markers on the map
  • TreeList: Displays list of trees with details
  • Settings: Application settings and store management
  • MapControls: Map control buttons including tree addition
  • TreeTypeSelector: Modal for selecting tree types

Data Flow

  1. Map bounds change → Load trees from Overpass API
  2. Trees loaded → Display on map and in tree list
  3. User interactions → Update local state
  4. Changes made → Store in patch system
  5. Export → Generate OSM-compatible XML

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests for new functionality
  5. Submit a pull request

License

This project is licensed under the MIT License.