Merge pull request #10 from robertd2000/9-overview

9 overview

src/components/Map/FlightsLayer/hooks/useFlights.tsx

@@ -3,10 +3,11 @@ import { Feature } from "ol";
 import { Point } from "ol/geom";
 import { fromLonLat } from "ol/proj";
 import { useQuery } from "@tanstack/react-query";
-import { getStates } from "@/api/flights/states.api";
+// import { getStates } from "@/api/flights/states.api";
 import { useMapCoords } from "@/hooks/map/useMapCoords";
 import { FlightStates } from "@/types/flights/states.interface";
 import { toast } from "sonner";
+import { flightData } from "@/mocs/flights";
 
 export const useFlights = () => {
   const [flightFeatures, setflightFeatures] = useState<(Feature | null)[]>([]);
@@ -18,16 +19,14 @@ export const useFlights = () => {
   const { error } = useQuery({
     queryKey: ["getStates", { lat, lon }],
     queryFn: async () => {
-      const data = await getStates({
-        lamax,
-        lamin,
-        lomax,
-        lomin,
-      });
+      // const data = await getStates({
+      //   lamax,
+      //   lamin,
+      //   lomax,
+      //   lomin,
+      // });
 
-      console.log("data", data);
-
-      // const data = flightData;
+      const data = flightData;
 
       if (data && data?.states?.length) {
         setflightFeatures(

src/components/Map/FlightsLayer/hooks/useSingleFlight.tsx

@@ -3,10 +3,11 @@ import { useQuery } from "@tanstack/react-query";
 import { RMap } from "rlayers";
 import { Polygon } from "ol/geom";
 import { fromLonLat } from "ol/proj";
-import { getStateByIcao } from "@/api/flights/states.api";
+// import { getStateByIcao } from "@/api/flights/states.api";
 import { formatDateFromNow } from "@/utils/date";
 import { FlightData, FlightStates } from "@/types/flights/states.interface";
 import { toast } from "sonner";
+import { flightSingleData } from "@/mocs/flights";
 
 export const useSingleFlight = (mapRef: RefObject<RMap>) => {
   const [flightData, setflightData] = useState<FlightData | null>(null);
@@ -41,8 +42,8 @@ export const useSingleFlight = (mapRef: RefObject<RMap>) => {
   const { error, isLoading } = useQuery({
     queryKey: ["getStateByIcao"],
     queryFn: async () => {
-      // const data = flightSingleData;
-      const data = await getStateByIcao(icao as string);
+      const data = flightSingleData;
+      // const data = await getStateByIcao(icao as string);
 
       if (data && data?.states?.length) {
         const [

src/components/Map/MainMap/index.tsx

@@ -8,6 +8,7 @@ import { FlightsLayer } from "../FlightsLayer";
 import { useSelectMap } from "./hooks/useSelectMap";
 import { useMapCoords } from "../../../hooks/map/useMapCoords";
 import style from "@/styles/maps/mainMap.module.scss";
+import { MapOverview } from "../MapOverview";
 
 export const MainMap = memo(() => {
   const { view, mapRef, onSetView } = useMapCoords();
@@ -27,6 +28,8 @@ export const MainMap = memo(() => {
       {/*  */}
       <FlightsLayer mapRef={mapRef} />
       {/*  */}
+      <MapOverview />
+      {/*  */}
       <RControl.RScaleLine />
       <RControl.RZoom />
       <RControl.RZoomSlider />

src/components/Map/MapOverview/index.tsx

@@ -0,0 +1,14 @@
+import { RControl, ROSM } from "rlayers";
+import style from "@/styles/maps/mapOverview.module.scss";
+
+export const MapOverview = () => {
+  return (
+    <RControl.ROverviewMap
+      //   className="ol-overviewmap example-overview"
+      collapsed={false}
+      className={"ol-overviewmap " + style.overviewMap}
+    >
+      <ROSM />
+    </RControl.ROverviewMap>
+  );
+};

src/styles/maps/mapOverview.module.scss

@@ -0,0 +1,31 @@
+.overviewMap {
+  bottom: 2.5rem !important;
+  left: auto !important;
+  right: 0.5rem !important;
+  top: auto !important;
+
+  .ol-overviewmap-map {
+    border: none !important;
+    border-radius: 15px;
+    width: 300px !important;
+    margin: 0.1rem;
+  }
+
+  .ol-overviewmap-box {
+    border: 2px solid blue;
+  }
+
+  &.ol-uncollapsible {
+    bottom: 0.5rem !important;
+    left: auto !important;
+    right: 0.5rem !important;
+    top: auto !important;
+  }
+
+  &:not(.ol-collapsed) button {
+    bottom: 0.5rem !important;
+    left: auto !important;
+    right: 0.5rem !important;
+    top: auto !important;
+  }
+}