feat: Geocoder-Suchfeld zur Karte hinzugefügt

- 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.
This commit is contained in:
ISA
2024-12-23 12:30:45 +01:00
parent 5416e8a476
commit fdac9b6901
4 changed files with 45 additions and 4 deletions

View File

@@ -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,