From e3d9d486a73937cc5b4442645b0999654c5fa227 Mon Sep 17 00:00:00 2001
From: Dennis Heinrich <der@dennis-heinri.ch>
Date: Sat, 21 Jun 2025 18:50:52 +0000
Subject: [PATCH] Created basic application

---
 index.html | 199 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 199 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..113f25b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Einsatzradius mit Export</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚒</text></svg>">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      font-family: system-ui, sans-serif;
+      background: #f0f0f0;
+    }
+    #map {
+      height: 100vh;
+      width: 100vw;
+      z-index: 1;
+    }
+    .control-panel {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      z-index: 1000;
+      background: white;
+      padding: 16px;
+      border-radius: 12px;
+      margin-left: 3em;
+      box-shadow: 0 6px 20px rgba(0,0,0,0.2);
+      width: 260px;
+      box-sizing: border-box;
+    }
+    .control-panel h2 {
+      font-size: 18px;
+      margin: 0 0 10px;
+    }
+    .control-panel label {
+      display: block;
+      margin-top: 10px;
+      font-size: 14px;
+    }
+    .control-panel input {
+      width: calc(100% - 2px);
+      box-sizing: border-box;
+      padding: 8px;
+      font-size: 14px;
+      margin-top: 5px;
+      border: 1px solid #ccc;
+      border-radius: 6px;
+    }
+    .control-panel button {
+      margin-top: 16px;
+      width: 100%;
+      padding: 10px;
+      font-size: 16px;
+      cursor: pointer;
+      border: none;
+      background: #4CAF50;
+      color: white;
+      border-radius: 6px;
+      transition: background 0.3s;
+    }
+    .control-panel button:hover {
+      background: #45a049;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <div class="control-panel">
+    <h2>Adressensuche & Export</h2>
+    <p>Auf der Karte klicken um einen Radius festzulegen</p>
+    <label for="radiusInput">Radius (Meter)</label>
+    <input type="number" id="radiusInput" value="500" min="50" step="50">
+    <button id="exportBtn">Adressen exportieren (CSV)</button>
+  </div>
+
+  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
+  <script>
+    class MapApp {
+      constructor(mapId, radiusInputId, exportButtonId) {
+        this.map = L.map(mapId).setView([52.9664, 10.5611], 14);
+        this.radiusInput = document.getElementById(radiusInputId);
+        this.exportButton = document.getElementById(exportButtonId);
+        this.marker = null;
+        this.circle = null;
+
+        this.initMap();
+        this.initEvents();
+      }
+
+      initMap() {
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          maxZoom: 19,
+          attribution: '&copy; OpenStreetMap-Mitwirkende'
+        }).addTo(this.map);
+
+        L.Control.geocoder({
+          defaultMarkGeocode: false
+        })
+        .on('markgeocode', (e) => {
+          const { bbox, center } = e.geocode;
+          this.map.fitBounds(bbox);
+          this.placeMarker(center);
+        })
+        .addTo(this.map);
+      }
+
+      initEvents() {
+        this.map.on('click', (e) => this.placeMarker(e.latlng));
+        this.radiusInput.addEventListener('input', () => this.updateCircleRadius());
+        this.exportButton.addEventListener('click', () => this.exportCSV());
+      }
+
+      getRadius() {
+        return parseInt(this.radiusInput.value) || 500;
+      }
+
+      placeMarker(latlng) {
+        const radius = this.getRadius();
+
+        if (this.marker) {
+          this.map.removeLayer(this.marker);
+          this.map.removeLayer(this.circle);
+        }
+
+        this.marker = L.marker(latlng).addTo(this.map);
+        this.circle = L.circle(latlng, {
+          radius,
+          color: '#3388ff',
+          fillColor: '#3388ff33',
+          fillOpacity: 0.5
+        }).addTo(this.map);
+      }
+
+      updateCircleRadius() {
+        if (this.marker && this.circle) {
+          this.circle.setRadius(this.getRadius());
+        }
+      }
+
+      async exportCSV() {
+        if (!this.marker) {
+          alert("Bitte zuerst einen Marker setzen.");
+          return;
+        }
+
+        const radius = this.getRadius();
+        const { lat, lng } = this.marker.getLatLng();
+        const query = `
+          [out:json];
+          (
+            node["addr:housenumber"](around:${radius},${lat},${lng});
+            way["addr:housenumber"](around:${radius},${lat},${lng});
+            relation["addr:housenumber"](around:${radius},${lat},${lng});
+          );
+          out center;
+        `;
+
+        try {
+          const response = await fetch("https://overpass-api.de/api/interpreter", {
+            method: "POST",
+            body: query
+          });
+
+          const data = await response.json();
+          const addresses = data.elements.map(el => {
+            const tags = el.tags || {};
+            return `${tags["addr:street"] || ''} ${tags["addr:housenumber"] || ''},${tags["addr:postcode"] || ''},${tags["addr:city"] || ''}`;
+          }).filter(addr => addr.trim() !== ',,');
+
+          const csvRows = ["Adresse", ...addresses];
+          const blob = new Blob(["\uFEFF" + csvRows.join("\n")], { type: "text/csv;charset=utf-8;" });
+          const url = URL.createObjectURL(blob);
+
+          const link = document.createElement("a");
+          link.setAttribute("href", url);
+          link.setAttribute("download", "adressen.csv");
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          URL.revokeObjectURL(url);
+
+        } catch (err) {
+          alert("Fehler beim Abrufen der Adressen.");
+          console.error(err);
+        }
+      }
+    }
+
+    // Initialize the app
+    new MapApp('map', 'radiusInput', 'exportBtn');
+  </script>
+</body>
+</html>
\ No newline at end of file
