From 5582db2b3d91d6ed0a610c94638d440b5675fc0f Mon Sep 17 00:00:00 2001
From: Lucas Nandico <lucas.nandico@fau.de>
Date: Tue, 28 May 2024 12:20:25 +0200
Subject: [PATCH] added search flyto to fixed coords in berlin

Signed-off-by: Lucas Nandico <lucas.nandico@fau.de>
---
 frontend/src/components/MapView/MapView.tsx   | 11 +++++++++--
 frontend/src/components/PopUp/SearchPopUp.tsx | 12 ++++++++++++
 frontend/src/contexts/MapContext.tsx          |  2 ++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/MapView/MapView.tsx b/frontend/src/components/MapView/MapView.tsx
index 3b33bb56..1ba6aa9e 100644
--- a/frontend/src/components/MapView/MapView.tsx
+++ b/frontend/src/components/MapView/MapView.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { MapContainer } from "react-leaflet/MapContainer";
 import { Marker } from "react-leaflet/Marker";
 import { Popup } from "react-leaflet/Popup";
@@ -51,7 +51,7 @@ interface MapViewProps {
 
 const MapView: React.FC<MapViewProps> = ({ datasetId }) => {
   const { currentTabsCache, setCurrentTabsCache } = useContext(TabsContext);
-
+  const [map, setMap] = useState<L.Map | null>(null);
   const { currentMapCache, setCurrentMapCache } = useContext(MapContext);
   const [showSatellite, setShowSatellite] = useState<boolean>(false);
   const toggleShowSatellite = () => {
@@ -90,6 +90,12 @@ const MapView: React.FC<MapViewProps> = ({ datasetId }) => {
     updateDatasetData
   );
 
+  useEffect(() => {
+    if (map) {
+      setCurrentMapCache((prev) => ({ ...prev, mapInstance: map }));
+    }
+  }, [map, setCurrentMapCache]);
+
   const MapEventsHandler = () => {
     const map = useMap();
     useMapEvents({
@@ -167,6 +173,7 @@ const MapView: React.FC<MapViewProps> = ({ datasetId }) => {
         center={currentMapCache.mapCenter}
         zoom={currentMapCache.zoom}
         className="map"
+        ref={setMap}
       >
         {pinnedFeatureCollections.map((dataset: Dataset, index: number) => (
           <GeoJSON
diff --git a/frontend/src/components/PopUp/SearchPopUp.tsx b/frontend/src/components/PopUp/SearchPopUp.tsx
index 53dead7e..e7d7e921 100644
--- a/frontend/src/components/PopUp/SearchPopUp.tsx
+++ b/frontend/src/components/PopUp/SearchPopUp.tsx
@@ -18,6 +18,8 @@ import PopUp from "./PopUp";
 
 import { OpenStreetMapProvider } from "leaflet-geosearch";
 import { LatLng } from "leaflet";
+import { MapContext } from "../../contexts/MapContext";
+import L from "leaflet";
 
 interface SearchPopUpProps {
   onToggleIfOpenedDialog: () => void;
@@ -41,6 +43,15 @@ const SearchPopUp: React.FC<SearchPopUpProps> = ({
   const [latitudeError, setLatitudeError] = useState(false);
   const [longitudeError, setLongitudeError] = useState(false);
   const [suggestions, setSuggestions] = useState<Array<GeoSearchResult>>([]);
+  const { currentMapCache } = useContext(MapContext);
+
+  const flyToLocation = () => {
+    const { mapInstance } = currentMapCache;
+    if (mapInstance) {
+      const targetPosition = new L.LatLng(52.4799, 13.3821); // Replace with your target position
+      mapInstance.flyTo(targetPosition, 13, { animate: true, duration: 10 });
+    } else console.log("no map instance");
+  };
 
   const handleSearchSuggestions = async (input: string) => {
     console.log(input);
@@ -169,6 +180,7 @@ const SearchPopUp: React.FC<SearchPopUpProps> = ({
     onToggleIfOpenedDialog();
     setTimeout(() => {
       alert(item.displayName);
+      flyToLocation();
     }, 400);
   };
 
diff --git a/frontend/src/contexts/MapContext.tsx b/frontend/src/contexts/MapContext.tsx
index 0908c45e..9e46b677 100644
--- a/frontend/src/contexts/MapContext.tsx
+++ b/frontend/src/contexts/MapContext.tsx
@@ -5,6 +5,7 @@ import React, { createContext, useState, ReactNode } from "react";
 
 // Map Cache Type
 export type MapCacheProps = {
+  mapInstance: L.Map | null;
   selectedCoordinates: LatLng;
   mapCenter: LatLng;
   mapBounds: LatLngBounds;
@@ -26,6 +27,7 @@ type MapContextProviderProps = {
 
 // Default Map Cache
 const defaultMapCache: MapCacheProps = {
+  mapInstance: null,
   selectedCoordinates: L.latLng([49.5732, 11.0288]),
   mapCenter: L.latLng([49.5732, 11.0288]),
   mapBounds: L.latLngBounds([49.5732, 11.0288], [49.5732, 11.0288]),