🍎 OSM-Obstkarte - Interactive Fruit Tree Map v1.0

An interactive web application for discovering fruit trees using OpenStreetMap data. Built with React, TypeScript, and Leaflet for real-time exploration of public fruit trees in any area.

✨ Features

• Interactive Map: Navigate and zoom to explore different areas
• Real-time Search: Automatically loads fruit trees when you move or zoom the map
• Tree Classification: Visual categorization by tree genus with color-coded markers
• Geolocation: Find fruit trees near your current location
• Responsive Design: Works seamlessly on desktop and mobile devices
• Clustering: Smart grouping of nearby trees for better performance
• Detailed Information: Click trees for species details and OpenStreetMap links

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn package manager

Local Development

1. Clone the repository

   git clone <your-repo-url>
   cd osm-obstkarte
   

2. Install dependencies

   npm install
   

3. Start development server

   npm run dev
   

4. Open in browser

   http://localhost:5173
   

📦 Deployment Options

Option 1: Static Hosting (Recommended)

The application builds to static files and can be deployed to any static hosting service.

Netlify Deployment

1. Build the project

   npm run build
   

2. Deploy to Netlify

   • Connect your GitHub repository to Netlify
   • Set build command: npm run build
   • Set publish directory: dist
   • Deploy automatically on push to main branch

Vercel Deployment

1. Install Vercel CLI

   npm i -g vercel
   

2. Deploy

   vercel --prod
   

GitHub Pages

1. Add to package.json (if deploying to subdirectory):

   {
     "homepage": "https://yourusername.github.io/repository-name"
   }
   

2. Build and deploy

   npm run build
   # Deploy the dist/ folder to gh-pages branch
   

Option 2: Docker Deployment

1. Create Dockerfile

   FROM node:18-alpine AS builder
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   RUN npm run build
   
   FROM nginx:alpine
   COPY --from=builder /app/dist /usr/share/nginx/html
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]
   

2. Build and run

   docker build -t osm-obstkarte .
   docker run -p 80:80 osm-obstkarte
   

Option 3: Self-Hosted Server

1. Build the project

   npm run build
   

2. Serve with any web server

   # Using Python
   cd dist && python -m http.server 8000
   
   # Using Node.js serve
   npx serve dist
   
   # Using nginx - copy dist/ contents to web root
   

🛠 Build Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint
npm run test	Run unit tests with Vitest
npm run test:watch	Run unit tests in watch mode
npm run test:e2e	Run end-to-end tests with Playwright
npm run test:e2e:ui	Run Playwright tests with UI
npm run test:e2e:screenshot	Generate screenshot for README

🌍 Environment Configuration

The app works out of the box with no environment variables required. It uses:

• OpenStreetMap: Public map tiles
• Overpass API: Public OSM data query service
• Browser Geolocation: Native web API

For production deployment, consider:

• Setting up rate limiting for API calls
• Configuring custom map tile servers if needed
• Adding analytics or error tracking

📱 Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile browsers (iOS Safari, Chrome Mobile)

🔧 Technical Stack

• Frontend: React 19, TypeScript
• Mapping: Leaflet, React-Leaflet
• Styling: Tailwind CSS, shadcn/ui components
• Build: Vite
• Testing: Vitest (unit tests), Playwright (E2E tests)
• Data Source: OpenStreetMap via Overpass API

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

The Spark Template files and resources from GitHub are licensed under the terms of the MIT license, Copyright GitHub, Inc.

🐛 Troubleshooting

Map not loading?

• Check browser console for errors
• Ensure internet connection for map tiles

No trees found?

• Try a different area - not all regions have mapped fruit trees
• Zoom in closer (minimum zoom level 14 required)

Location not working?

• Enable location permissions in browser
• Use HTTPS for geolocation to work

For more issues, check the browser console or create an issue in the repository.