Map feature: GPS, request/offer filtering, radius slider

components/map/mockData.ts

@@ -0,0 +1,36 @@
+export type MapItem = {
+  id: number;
+  title: string;
+  lat: number;
+  lng: number;
+};
+
+export const requests: MapItem[] = [
+  {
+    id: 1,
+    title: "Food Assistance – Petaling Jaya",
+    lat: 3.1073,
+    lng: 101.6067,
+  },
+  {
+    id: 2,
+    title: "Medical Help – Cheras",
+    lat: 3.0800,
+    lng: 101.7350,
+  },
+];
+
+export const offers: MapItem[] = [
+  {
+    id: 3,
+    title: "Free Meals – Bangsar",
+    lat: 3.1303,
+    lng: 101.6640,
+  },
+  {
+    id: 4,
+    title: "Clothes Donation – Setapak",
+    lat: 3.2100,
+    lng: 101.7200,
+  },
+];

src/components/map/MapPin.tsx

@@ -0,0 +1,38 @@
+import { Marker, Popup } from "react-leaflet";
+import "../../styles/map.css";
+import type { MapItem } from "./mockData";
+
+type Props = {
+  item: MapItem;
+};
+
+export default function MapPin({ item }: Props) {
+
+  // 🔹 Simulated logged-in user role
+  // Change to "user" to test restriction
+  const userRole: "user" | "volunteer" = "volunteer";
+
+  return (
+    <Marker position={[item.lat, item.lng]}>
+      <Popup>
+        <div className="popup-container">
+          <h3>{item.title}</h3>
+
+          {item.pickup_allowed ? (
+            <button className="pickup-btn">
+              I’ll collect it
+            </button>
+          ) : userRole === "volunteer" ? (
+            <button className="deliver-btn">
+              I can help deliver
+            </button>
+          ) : (
+            <p className="volunteer-note">
+              Delivery assistance available for volunteers only
+            </p>
+          )}
+        </div>
+      </Popup>
+    </Marker>
+  );
+}

src/components/map/RadiusControl.tsx

@@ -0,0 +1,30 @@
+type Props = {
+  radius: number;
+  setRadius: (r: number) => void;
+};
+
+export default function RadiusControl({ radius, setRadius }: Props) {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        bottom: 20,
+        left: 20,
+        background: "white",
+        padding: "10px",
+        borderRadius: "8px",
+        zIndex: 1000,
+      }}
+    >
+      <strong>Radius: {radius} km</strong>
+      <input
+        type="range"
+        min={5}
+        max={10}
+        step={1}
+        value={radius}
+        onChange={(e) => setRadius(Number(e.target.value))}
+      />
+    </div>
+  );
+}

src/components/map/UserLocation.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+import { Marker, Popup, useMap } from "react-leaflet";
+
+type Props = {
+  setUserPos: (pos: [number, number]) => void;
+};
+
+export default function UserLocation({ setUserPos }: Props) {
+  const map = useMap();
+
+  useEffect(() => {
+    if (!navigator.geolocation) return;
+
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        const coords: [number, number] = [
+          pos.coords.latitude,
+          pos.coords.longitude,
+        ];
+        setUserPos(coords);
+        map.setView(coords, 14);
+      },
+      (err) => {
+        console.error("GPS error:", err);
+      }
+    );
+  }, [map, setUserPos]);
+
+  return null;
+}

src/components/map/distance.ts

@@ -0,0 +1,18 @@
+export const getDistanceKm = (
+  lat1: number,
+  lon1: number,
+  lat2: number,
+  lon2: number
+) => {
+  const R = 6371;
+  const dLat = ((lat2 - lat1) * Math.PI) / 180;
+  const dLon = ((lon2 - lon1) * Math.PI) / 180;
+
+  const a =
+    Math.sin(dLat / 2) ** 2 +
+    Math.cos((lat1 * Math.PI) / 180) *
+      Math.cos((lat2 * Math.PI) / 180) *
+      Math.sin(dLon / 2) ** 2;
+
+  return R * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)));
+};

src/components/map/mapIcons.ts

@@ -0,0 +1,22 @@
+import L from "leaflet";
+
+const baseStyle = `
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 3px solid white;
+`;
+
+export const requestIcon = L.divIcon({
+  className: "",
+  html: `<div style="${baseStyle} background: red;"></div>`,
+  iconSize: [16, 16],
+  iconAnchor: [8, 8],
+});
+
+export const offerIcon = L.divIcon({
+  className: "",
+  html: `<div style="${baseStyle} background: blue;"></div>`,
+  iconSize: [16, 16],
+  iconAnchor: [8, 8],
+});

src/components/map/mockData.ts

@@ -0,0 +1,18 @@
+export type MapItem = {
+  id: number;
+  title: string;
+  lat: number;
+  lng: number;
+  pickup_allowed: boolean;
+};
+
+
+export const requests: MapItem[] = [
+  { id: 1, title: "Food Assistance", lat: 3.1405, lng: 101.6877, pickup_allowed: true },
+  { id: 2, title: "Medical Supplies", lat: 3.1302, lng: 101.6953, pickup_allowed: false },
+];
+
+export const offers: MapItem[] = [
+  { id: 3, title: "Free Meals", lat: 3.1501, lng: 101.6823, pickup_allowed: true },
+  { id: 4, title: "Clothes Donation", lat: 3.1358, lng: 101.6754, pickup_allowed: false },
+];

src/index.css

@@ -0,0 +1,17 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.leaflet-container {
+  height: 100%;
+  width: 100%;
+}

src/main.tsx

@@ -1,9 +1,12 @@
-import { StrictMode } from "react"
-import { createRoot } from "react-dom/client"
-import Map from "./pages/Map/index.tsx";
+import "./index.css";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import MapPage from "./pages/MapPage";
+import "leaflet/dist/leaflet.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <MapPage />
+  </React.StrictMode>
+);
 
-createRoot(document.getElementById("root")!).render(
-    <StrictMode>
-        <Map />
-    </StrictMode>,
-)