Add bird icon to map

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">

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}

src/components/InteractiveMap.tsx

@@ -10,13 +10,16 @@ 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";
 
 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>;
 };

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