Basic click event listener added

frontend/src/App.js

@@ -1,33 +1,22 @@
 // import logo from './logo.svg';
 import './App.css';
 import Map from './components/Map';
+// import { MapContainer, TileLayer, useMapEvents } from 'react-leaflet';
+
 
 function App() {
-  // return (
-  //   <div className="App">
-  //     <header className="App-header">
-  //       <img src={logo} className="App-logo" alt="logo" />
-  //       <p>
-  //         Edit <code>src/App.js</code> and save to reload.
-  //       </p>
-  //       <a
-  //         className="App-link"
-  //         href="https://reactjs.org"
-  //         target="_blank"
-  //         rel="noopener noreferrer"
-  //       >
-  //         Learn React
-  //       </a>
-  //     </header>
-  //   </div>
-  // );
+  const handleMapClick = (lat, lng) => {
+    console.log(`Map clicked at latitude: ${lat}, longitude: ${lng}`);
+  }
 
   return (
     <div className="App">
-      <Map />
+      <Map onMapClick={handleMapClick}/>
     </div>
   );
 
 }
 
+
+
 export default App;

frontend/src/components/Map.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { MapContainer, TileLayer, 
+        useMapEvents,
         // Marker, 
         // Popup 
     } from 'react-leaflet';
@@ -14,7 +15,17 @@ L.Icon.Default.mergeOptions({
     shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
 });
 
-const Map = () => {
+const ClickHandler = ({ onMapClick }) => {
+    useMapEvents({
+      click(e) {
+        const { lat, lng } = e.latlng;
+        onMapClick(lat, lng);
+      },
+    });
+    return null;
+  };
+
+const Map = ( { onMapClick } ) => {
     return (
         <MapContainer
             center={[0, 0]}
@@ -26,10 +37,8 @@ const Map = () => {
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
             />
             
-            <TileLayer
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
+            <ClickHandler onMapClick={onMapClick}/>
+
         </MapContainer>
     );
 };