added search flyto to fixed coords in berlin

Signed-off-by: Lucas Nandico <[email protected]>

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

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);
   };
 

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]),