Eingabefeld für Koordinaten

components/MapComponent.js

@@ -62,6 +62,7 @@ import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleS
 //--------------------------------------------
 import { useSelector, useDispatch } from "react-redux";
 import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice";
+import CoordinateInput from "./CoordinateInput";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const dispatch = useDispatch();
@@ -856,7 +857,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //---------------------------------------
   useEffect(() => {
     if (map) {
-      initGeocoderFeature(map); // Geocoder-Feature initialisieren, kann von .env.local ausgeschaltet werden
+      // initGeocoderFeature(map); // Geocoder-Feature initialisieren, kann von .env.local ausgeschaltet werden
     }
   }, [map]);
   //--------------------------------------------
@@ -903,6 +904,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     fetchData();
   }, [dispatch]);
 
+  //--------------------------------------------
+  const handleCoordinatesSubmit = (coords) => {
+    const [lat, lng] = coords.split(",").map(Number);
+    if (map && lat && lng) {
+      map.flyTo([lat, lng], 12); // Zentriere die Karte auf die Koordinaten
+    }
+  };
   //--------------------------------------------
 
   return (
@@ -927,6 +935,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
       {isDataLoaded && <DataSheet className="z-50" />}
 
+      <CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} />
       <div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>
 
       <div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">