From fdac9b6901d4b3d819d9f412f61123731d2a58f4 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Mon, 23 Dec 2024 12:30:45 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Geocoder-Suchfeld=20zur=20Karte=20hinzu?=
 =?UTF-8?q?gef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Leaflet-Control-Geocoder integriert, um die Suche nach Koordinaten und Adressen zu ermöglichen.
- Suchfeld in der oberen linken Ecke platziert.
- Automatische Marker-Platzierung und Popup-Anzeige bei erfolgreicher Suche implementiert.
- Layer-Gruppen initialisiert und Suchfeld nach Layer-Setup hinzugefügt.
---
 components/MapComponent.js | 12 ++++++++++++
 package-lock.json          | 20 +++++++++++++++++++-
 package.json               |  1 +
 utils/initializeMap.js     | 16 +++++++++++++---
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index 5d4cfea87..70ec7a862 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -737,6 +737,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       }
     });
 
+    // Fügt das Suchfeld (Geocoder) zur Karte hinzu
+    const geocoder = L.Control.geocoder({
+      position: "topleft", // Position des Suchfeldes
+      defaultMarkGeocode: false, // Deaktiviert den automatischen Marker
+    })
+      .on("markgeocode", function (e) {
+        const latlng = e.geocode.center;
+        map.setView(latlng, 15); // Zoom zur Position
+        L.marker(latlng).addTo(map).bindPopup(e.geocode.name).openPopup(); // Marker hinzufügen
+      })
+      .addTo(map); // Suchfeld zur Karte hinzufügen
+
     const updateMarkers = ({ ref, id, setState }) => {
       if (ref.current) {
         ref.current.clearLayers(); // Entferne alte Marker
diff --git a/package-lock.json b/package-lock.json
index 4eec2e617..fc8eb3bef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "13.12.2024 NodeMap V1.0.16.0",
+  "name": "23.12.2024 NodeMap V1.0.17.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -15,6 +15,7 @@
         "http-proxy-middleware": "^3.0.0",
         "leaflet": "^1.9.4",
         "leaflet-contextmenu": "^1.4.0",
+        "leaflet-control-geocoder": "^3.1.0",
         "leaflet.smooth_marker_bouncing": "^3.1.0",
         "mysql": "^2.18.1",
         "mysql2": "^3.11.0",
@@ -7435,6 +7436,17 @@
       "resolved": "https://registry.npmjs.org/leaflet-contextmenu/-/leaflet-contextmenu-1.4.0.tgz",
       "integrity": "sha512-BXASCmJ5bLkuJGDCpWmvGqhZi5AzeOY0IbQalfkgBcMAMfAOFSvD4y0gIQxF/XzEyLkjXaRiUpibVj4+Cf3tUA=="
     },
+    "node_modules/leaflet-control-geocoder": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leaflet-control-geocoder/-/leaflet-control-geocoder-3.1.0.tgz",
+      "integrity": "sha512-0YlcjBmVq6/9vozpjMCNhxReHaZoCfoRwxKNXQXwjdfYr3TMRQi0YFmpN/dWbqOVc0fWbY1EsoV8r11G2SZ9eA==",
+      "optionalDependencies": {
+        "open-location-code": "^1.0.3"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.6.0"
+      }
+    },
     "node_modules/leaflet.smooth_marker_bouncing": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leaflet.smooth_marker_bouncing/-/leaflet.smooth_marker_bouncing-3.1.0.tgz",
@@ -8126,6 +8138,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/open-location-code": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/open-location-code/-/open-location-code-1.0.3.tgz",
+      "integrity": "sha512-DBm14BSn40Ee241n80zIFXIT6+y8Tb0I+jTdosLJ8Sidvr2qONvymwqymVbHV2nS+1gkDZ5eTNpnOIVV0Kn2fw==",
+      "optional": true
+    },
     "node_modules/ospath": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
diff --git a/package.json b/package.json
index 18b4262b8..c7a295121 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "http-proxy-middleware": "^3.0.0",
     "leaflet": "^1.9.4",
     "leaflet-contextmenu": "^1.4.0",
+    "leaflet-control-geocoder": "^3.1.0",
     "leaflet.smooth_marker_bouncing": "^3.1.0",
     "mysql": "^2.18.1",
     "mysql2": "^3.11.0",
diff --git a/utils/initializeMap.js b/utils/initializeMap.js
index e96188983..5d7c768dc 100644
--- a/utils/initializeMap.js
+++ b/utils/initializeMap.js
@@ -1,11 +1,10 @@
 // utils/initializeMap.js
-// TODO: Add a comment
-//FIXME: Add a comment
-//BUG: Add a comment
 import L from "leaflet";
 import "leaflet-contextmenu";
 import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
+import "leaflet-control-geocoder";
+
 import * as urls from "../config/urls.js";
 import * as layers from "../config/layers.js";
 import { openInNewTab } from "./openInNewTab.js";
@@ -71,6 +70,17 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
     }).addTo(initMap);
 
+    // Suchfeld hinzufügen
+    const geocoder = L.Control.geocoder({
+      defaultMarkGeocode: false,
+    })
+      .on("markgeocode", function (e) {
+        const latlng = e.geocode.center;
+        initMap.setView(latlng, 15);
+        L.marker(latlng).addTo(initMap).bindPopup(e.geocode.name).openPopup();
+      })
+      .addTo(initMap);
+
     // Initialisiere OverlappingMarkerSpiderfier
     const overlappingMarkerSpiderfier = new OverlappingMarkerSpiderfier(initMap, {
       nearbyDistance: 20,