Add Navigation Page with Current Location and Map Integration

frontend/package.json

@@ -17,9 +17,11 @@
     "dotenv": "^16.4.5",
     "framer-motion": "^11.11.8",
     "jwt-decode": "^4.0.0",
+    "leaflet": "^1.9.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.26.2",
     "shadcn-ui": "^0.2.3",
     "styled-components": "^6.1.13"

frontend/src/Pages/navigation.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { FaMapMarkerAlt, FaExclamationTriangle } from 'react-icons/fa';
+import MapComponent from '../components/MapComponent';
 
 const NavigationPage = () => {
   const [from, setFrom] = useState('');
@@ -12,10 +13,7 @@ const NavigationPage = () => {
 
       {/* Map Section */}
       <div className='relative bg-gray-300 h-72 w-full rounded-2xl shadow-lg overflow-hidden mt-6'>
-        {/* Placeholder for the map */}
-        <p className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xl text-gray-500'>Map will be here</p>
-        {/* Example of adding a map image */}
-        {/* <img src='/path-to-map.png' alt='Map' className='w-full h-full object-cover' /> */}
+       <MapComponent/>
       </div>
 
       {/* Input Fields */}

frontend/src/components/MapComponent.jsx

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+
+// Fix the default icon issue in Leaflet with Webpack
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png',
+  iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
+  shadowUrl: 'https://unpkg.com/[email protected]/dist/images/marker-shadow.png'
+});
+
+const MapComponent = () => {
+  const [position, setPosition] = useState([51.505, -0.09]); // Default position (London)
+  const [locationAvailable, setLocationAvailable] = useState(false); // To track if location is found
+
+  useEffect(() => {
+    // Check if the Geolocation API is available
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const { latitude, longitude } = position.coords;
+          setPosition([latitude, longitude]); // Set user's location
+          setLocationAvailable(true); // Update to true if location is found
+        },
+        (error) => {
+          console.error("Error fetching location:", error);
+        }
+      );
+    } else {
+      console.error("Geolocation is not supported by this browser.");
+    }
+  }, []);
+
+  return (
+    <MapContainer center={position} zoom={13} style={{ height: "400px", width: "100%" }}>
+      {/* TileLayer to load the map */}
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      />
+
+      {/* Marker for current location */}
+      {locationAvailable && (
+        <Marker position={position}>
+          <Popup>You are here</Popup>
+        </Marker>
+      )}
+
+      {/* Display a message if location is not available */}
+      {!locationAvailable && (
+        <Popup position={position}>Location not available, showing default location.</Popup>
+      )}
+    </MapContainer>
+  );
+};
+
+export default MapComponent;