From e96d0e33dcda7e553ad2b67c82ebe00342ab4f6a Mon Sep 17 00:00:00 2001
From: Hanka8 <hanka.maruskevicova@gmail.com>
Date: Mon, 4 Nov 2024 18:58:29 +0100
Subject: [PATCH] Add bird icon to map

---
 src/components/FormGeolocation.tsx |  2 +-
 src/components/Index.tsx           |  2 +-
 src/components/InteractiveMap.tsx  | 14 ++++++++++++--
 src/types.tsx                      |  2 ++
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/FormGeolocation.tsx b/src/components/FormGeolocation.tsx
index 1ee772c..12459bf 100644
--- a/src/components/FormGeolocation.tsx
+++ b/src/components/FormGeolocation.tsx
@@ -96,7 +96,7 @@ const LocationForm: React.FC<LocationFormProps> = ({
           />
           <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600 flex-shrink-0"></div>
           <span className="ms-3 text-sm font-medium text-gray-700">
-            Insert manually
+            {geolocationManually ? "Get your location" : "Set adress manually" }
           </span>
         </label>
         <div className="m-2 flex flex-col relative">
diff --git a/src/components/Index.tsx b/src/components/Index.tsx
index d61a273..b12d3ea 100644
--- a/src/components/Index.tsx
+++ b/src/components/Index.tsx
@@ -74,7 +74,7 @@ const Index: React.FC = () => {
   return (
     <div className="text-gray-800 bg-green-50 flex flex-col items-center min-h-screen">
       <h3 className="text-5xl m-8 text-green-700">Birds around you</h3>
-      {data && <InteractiveMap latitude={latitude} longitude={longitude} data={data}/>}
+      {data && <InteractiveMap latitude={latitude} longitude={longitude} setLatitude={setLatitude} setLongitude={setLongitude} data={data}/>}
       <div className="m-2 p-4 pb-8 bg-green-100">
         <FormGeolocation
           latitude={latitude}
diff --git a/src/components/InteractiveMap.tsx b/src/components/InteractiveMap.tsx
index c0438f0..40118e4 100644
--- a/src/components/InteractiveMap.tsx
+++ b/src/components/InteractiveMap.tsx
@@ -10,6 +10,7 @@ import Feature from "ol/Feature";
 import Point from "ol/geom/Point";
 import Circle from "ol/geom/Circle";
 import { Icon, Style, Stroke, Fill } from "ol/style";
+import { toLonLat } from "ol/proj";
 import { InteractiveMapProps } from "../types";
 import { radius } from "../constants";
 import birdIcon from "../assets/bird-ico.svg";
@@ -17,6 +18,8 @@ import birdIcon from "../assets/bird-ico.svg";
 const InteractiveMap: React.FC<InteractiveMapProps> = ({
   latitude,
   longitude,
+  setLatitude,
+  setLongitude,
   data,
 }) => {
   const mapRef = useRef<HTMLDivElement | null>(null);
@@ -92,7 +95,7 @@ const InteractiveMap: React.FC<InteractiveMapProps> = ({
         })
       );
 
-      vectorSource.addFeature(birdMarker); 
+      vectorSource.addFeature(birdMarker);
     });
 
     const markerLayer = new VectorLayer({
@@ -101,8 +104,15 @@ const InteractiveMap: React.FC<InteractiveMapProps> = ({
 
     map.addLayer(markerLayer);
 
+    // Add click event listener to the map
+    map.on("singleclick", (event) => {
+      const clickedCoordinate = toLonLat(event.coordinate); // Convert to longitude/latitude
+      setLatitude(clickedCoordinate[1].toFixed(2));
+      setLongitude(clickedCoordinate[0].toFixed(2));
+    });
+
     return () => map.setTarget(undefined);
-  }, [latitude, longitude, data]);
+  }, [latitude, longitude, data, setLatitude, setLongitude]);
 
   return <div ref={mapRef} className="w-full h-32rem"></div>;
 };
diff --git a/src/types.tsx b/src/types.tsx
index bfa987f..a5e3c5a 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -93,5 +93,7 @@ export type ErrorProps = {
 export type InteractiveMapProps = {
   latitude: string;
   longitude: string;
+  setLatitude: (value: string) => void;
+  setLongitude: (value: string) => void;
   data: Bird[] | undefined;
 };
\ No newline at end of file