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: '© OpenStreetMap 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,