Make the map modal a separate component

Clicking on a map marker now opens a modal with the map and a close button

src/components/InteractiveMap.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
+import MapModal from "./MapModal";
 import Map from "ol/Map.js";
 import OSM from "ol/source/OSM.js";
 import TileLayer from "ol/layer/Tile.js";
@@ -22,6 +23,10 @@ const InteractiveMap: React.FC<InteractiveMapProps> = ({
   setLongitude,
   data,
 }) => {
+
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+  const [modalContent, setModalContent] = useState<string>("");
+
   const mapRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
@@ -95,6 +100,7 @@ const InteractiveMap: React.FC<InteractiveMapProps> = ({
         })
       );
 
+      birdMarker.set("description", `Bird Name: ${bird.comName}`);
       vectorSource.addFeature(birdMarker);
     });
 
@@ -106,15 +112,39 @@ const InteractiveMap: React.FC<InteractiveMapProps> = ({
 
     // 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));
+      const clickedFeature = map.forEachFeatureAtPixel(
+        event.pixel,
+        (feature) => {
+          return feature;
+        }
+      );
+
+      if (clickedFeature) {
+        const description = clickedFeature.get("description");
+        if (description) {
+          setModalContent(description); // Set the content for the modal
+          setModalOpen(true); // Open the modal
+        }
+      } else {
+        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, setLatitude, setLongitude]);
 
-  return <div ref={mapRef} className="w-full h-32rem"></div>;
+  return (
+    <div className="w-full h-32rem">
+      <div ref={mapRef} className="w-full h-32rem"></div>
+      <MapModal
+        isOpen={modalOpen}
+        onClose={() => setModalOpen(false)}
+        content={modalContent}
+      />
+    </div>
+  );
 };
 
 export default InteractiveMap;

src/components/MapModal.tsx

@@ -0,0 +1,24 @@
+
+
+import { MapModalProps } from "../types";
+
+const MapModal: React.FC<MapModalProps> = ({ isOpen, onClose, content }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="bg-white p-4 rounded">
+        <h2 className="text-lg font-bold">Info</h2>
+        <p>{content}</p>
+        <button
+          onClick={onClose}
+          className="mt-2 p-2 bg-blue-500 text-white rounded"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default MapModal;

src/types.tsx

@@ -96,4 +96,10 @@ export type InteractiveMapProps = {
   setLatitude: (value: string) => void;
   setLongitude: (value: string) => void;
   data: Bird[] | undefined;
-};
+};
+
+export type MapModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  content: string;
+}