Merge pull request #14 from JMarques1196/dev

Feat: Added the Map with a placeholder track

Author: JMarques1196

index.html

@@ -5,6 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
     <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil:opsz,[email protected],100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

package-lock.json

@@ -57,6 +57,7 @@
     "@testing-library/user-event": "^14.6.0",
     "@types/jest": "^29.5.14",
     "@types/leaflet": "^1.9.18",
+    "@types/leaflet-gpx": "^1.3.7",
     "@types/node": "^22.10.2",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",

package.json

@@ -0,0 +1,4 @@
+.map-container{
+    width: 500px;
+    height: 300px;
+}

src/components/Map/map.css

@@ -1 +1,94 @@
 //Component to display gpx tracks
+import React, { useEffect, useRef } from "react";
+import L from "leaflet";
+import "./map.css";
+
+delete (L.Icon.Default.prototype as any)._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
+  iconUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
+  shadowUrl:
+    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+});
+
+interface TrackPoint {
+  lat: number;
+  lng: number;
+}
+
+const Map: React.FC = () => {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapInstanceRef = useRef<L.Map | null>(null);
+
+  // Placeholder track, to be replace with data from Firebase
+  const trackData: TrackPoint[] = [
+    { lat: 41.1579, lng: -8.6291 }, // Porto, Portugal
+    { lat: 41.1621, lng: -8.622 },
+    { lat: 41.165, lng: -8.615 },
+    { lat: 41.168, lng: -8.608 },
+    { lat: 41.171, lng: -8.601 },
+    { lat: 41.174, lng: -8.594 },
+    { lat: 41.177, lng: -8.587 },
+    { lat: 41.18, lng: -8.58 },
+  ];
+
+  useEffect(() => {
+    if (!mapRef.current) return;
+
+    // Initialize the map
+    const map = L.map(mapRef.current).setView([41.1579, -8.6291], 13);
+    mapInstanceRef.current = map;
+
+    // Add tile layer
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(map);
+
+    // Create polyline for the track
+    const polyline = L.polyline(
+      trackData.map((point) => [point.lat, point.lng]),
+      {
+        color: "#3388ff",
+        weight: 4,
+        opacity: 0.8,
+      }
+    ).addTo(map);
+
+    // Add markers for start and end points
+    const startMarker = L.marker([trackData[0].lat, trackData[0].lng])
+      .addTo(map)
+      .bindPopup("Start Point");
+
+    const endMarker = L.marker([
+      trackData[trackData.length - 1].lat,
+      trackData[trackData.length - 1].lng,
+    ])
+      .addTo(map)
+      .bindPopup("End Point");
+
+    // Fit map to track bounds
+    map.fitBounds(polyline.getBounds(), { padding: [20, 20] });
+
+    // Cleanup function
+    return () => {
+      if (mapInstanceRef.current) {
+        mapInstanceRef.current.remove();
+        mapInstanceRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div className="map-container">
+      <div className="">
+        <h1 className="">Track Map</h1>
+      </div>
+      <div ref={mapRef} className="" style={{ height: "500px" }} />
+    </div>
+  );
+};
+
+export default Map;

src/components/Map/map.tsx

@@ -13,6 +13,62 @@ global.ResizeObserver = vi.fn().mockImplementation(() => {
     unobserve: vi.fn(),
   };
 });
+// Leaflet
+vi.mock("leaflet", () => ({
+  default: {
+    map: vi.fn(() => ({
+      setView: vi.fn().mockReturnThis(),
+      remove: vi.fn(),
+      fitBounds: vi.fn(),
+      addTo: vi.fn().mockReturnThis(),
+    })),
+    tileLayer: vi.fn(() => ({
+      addTo: vi.fn().mockReturnThis(),
+    })),
+    polyline: vi.fn(() => ({
+      addTo: vi.fn().mockReturnThis(),
+      getBounds: vi.fn(() => [[0, 0], [1, 1]]),
+    })),
+    marker: vi.fn(() => ({
+      addTo: vi.fn().mockReturnThis(),
+      bindPopup: vi.fn().mockReturnThis(),
+    })),
+    Icon: {
+      Default: {
+        prototype: {
+          _getIconUrl: vi.fn(),
+        },
+        mergeOptions: vi.fn(),
+      },
+    },
+  },
+  map: vi.fn(() => ({
+    setView: vi.fn().mockReturnThis(),
+    remove: vi.fn(),
+    fitBounds: vi.fn(),
+    addTo: vi.fn().mockReturnThis(),
+  })),
+  tileLayer: vi.fn(() => ({
+    addTo: vi.fn().mockReturnThis(),
+  })),
+  polyline: vi.fn(() => ({
+    addTo: vi.fn().mockReturnThis(),
+    getBounds: vi.fn(() => [[0, 0], [1, 1]]),
+  })),
+  marker: vi.fn(() => ({
+    addTo: vi.fn().mockReturnThis(),
+    bindPopup: vi.fn().mockReturnThis(),
+  })),
+  Icon: {
+    Default: {
+      prototype: {
+        _getIconUrl: vi.fn(),
+      },
+      mergeOptions: vi.fn(),
+    },
+  },
+}));
+
 // Firebase
 vi.mock("firebase/firestore", () => ({
   collection: vi.fn(),

src/components/Menu/activity-menu.test.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import "./activity.css";
 import Graph from "../Graph/graph";
+import Map from "../Map/map";
 import { collection, getDocs, QuerySnapshot } from "firebase/firestore";
 import { db } from "src/firebase.js";
 import { seedDatabase } from "src/helper/seed";
@@ -94,6 +95,9 @@ const Menu = () => {
         </div>
         <Graph name={metric} data={filteredContent} />
       </section>
+      <section className="map">
+        <Map />
+      </section>
     </>
   );
 };