Eingabefeld für Koordinaten

components/CoordinateInput.js

@@ -0,0 +1,24 @@
+// components/CoordinateInput.js
+import React, { useState } from "react";
+
+const CoordinateInput = ({ onCoordinatesSubmit }) => {
+  const [coordinates, setCoordinates] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (onCoordinatesSubmit) {
+      onCoordinatesSubmit(coordinates);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="fixed top-5 left-5 z-50 bg-white shadow-lg rounded-lg p-4 w-72">
+      <input type="text" placeholder="Koordinaten eingeben (lat,lng)" value={coordinates} onChange={(e) => setCoordinates(e.target.value)} className="border p-2 rounded w-full mb-2" />
+      <button type="submit" className="bg-blue-500 text-white p-2 rounded w-full hover:bg-blue-600">
+        Zu Marker zoomen
+      </button>
+    </form>
+  );
+};
+
+export default CoordinateInput;

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">

cypress/e2e/mapInteraction.cy.js

@@ -1,3 +1,4 @@
+//TDD Test Driven Development
 // Dieser Test überprüft die Karteninteraktion: Eingabe von Koordinaten und Zentrieren der Karte
 // Schritte:
 // 1. Öffnen der Karte auf einer bestimmten Seite.
@@ -9,7 +10,7 @@
 describe("Karteninteraktion", () => {
   it("zoomt zu den eingegebenen Koordinaten", () => {
     // Öffne die Seite mit der Karte
-    cy.visit("http://192.168.10.33:3000/?m=12&u=484"); // Passe den Pfad an deine Karte an
+    cy.visit("http://127.0.0.1:3000/?m=12&u=484"); // Passe den Pfad an deine Karte an
 
     // Gebe Koordinaten in das Eingabefeld ein
     cy.get('input[placeholder="Koordinaten eingeben (lat,lng)"]').type("52.52,13.405");