Merge pull request #60 from OCA-UFCG/feat/search

Create a Search Feature

Author: abraaovalentim

package-lock.json

@@ -2,8 +2,9 @@
 
 import { useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useContext, useEffect, useState } from "react";
-import { IEEInfo, IMapInfo } from "@/utils/interfaces";
+import { IEEInfo, IMapInfo, ILocationData } from "@/utils/interfaces";
 import MapTiff from "@/components/MapTiff/MapTiff";
+import Search from "@/components/Search/Search";
 import MapTemplate from "@/templates/mapTemplate";
 import MapsMenu from "@/components/MapsMenu/MapsMenu";
 import { defaultEEInfo } from "@/utils/constants";
@@ -35,6 +36,7 @@ const DEFAULT_TIFF = "spei";
 const MapPage = () => {
   const searchParams = useSearchParams();
 
+  const [boundingBox, setBoundingBox] = useState<number[]>([]);
   const [loadingMap, setLoadingMap] = useState<boolean>(false);
   const [imageData, setImageData] = useState<IMapInfo>({
     name: "",
@@ -97,6 +99,14 @@ const MapPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mapsData]);
 
+  const getBoundingBox = (searchResults: ILocationData) => {
+    const boundingBox = searchResults.boundingbox;
+    const [south, north, west, east] = boundingBox.map((coordinate: string) =>
+      parseFloat(coordinate),
+    );
+    setBoundingBox([west, north, east, south]);
+  };
+
   return (
     <MapTemplate>
       <MapContainer>
@@ -105,6 +115,7 @@ const MapPage = () => {
           onClick={handleMapClick}
           loading={loadingMap}
           setLoading={setLoadingMap}
+          boundingBox={boundingBox}
         />
       </MapContainer>
       <MapDescription
@@ -125,6 +136,7 @@ const MapPage = () => {
           <Link href="/">
             <HomeImage id="home" size={16} />
           </Link>
+          <Search onClick={getBoundingBox} />
         </MenuWrapper>
         {imageData.name && (
           <NameContainer>

public/close-icon.svg

@@ -43,7 +43,7 @@ export const NameContainer = styled.div`
   display: flex;
   pointer-events: auto;
   gap: 1rem;
-  z-index: 1;
+  z-index: 0;
 
   max-width: 18rem;
   border-radius: 4px;

public/follow-icon.svg

@@ -1,6 +1,6 @@
 "use client";
 
-import maplibregl from "maplibre-gl";
+import maplibregl, { LngLatBoundsLike } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { MapContainer, Loading, LoadingText } from "./MapTiff.styles";
@@ -18,13 +18,15 @@ const MapTiff = ({
   data,
   loading,
   setLoading,
+  boundingBox,
   onClick,
   ...props
 }: {
   data: IMapInfo;
   loading: boolean;
   setLoading: (e: boolean) => void;
   onClick?: (e: any) => void;
+  boundingBox: number[];
 }) => {
   const { name, year } = data;
   const mapContainer = useRef<HTMLDivElement>(null);
@@ -151,6 +153,12 @@ const MapTiff = ({
     }
   }, [name, year, map, loadLayer, loadMap]);
 
+  useEffect(() => {
+    if (map && boundingBox.length > 0) {
+      map.fitBounds(boundingBox as LngLatBoundsLike);
+    }
+  }, [map, boundingBox]);
+
   return (
     <MapContainer
       loading={loading.toString()}