style(map): updated map interface

AkekoChan · Mar 12, 2024 · eca5efd · eca5efd
1 parent fe10444
commit eca5efd
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 18 deletions.
diff --git a/client/src/assets/img/pin-ghost.svg b/client/src/assets/img/pin-ghost.svg
diff --git a/client/src/assets/img/pin.svg b/client/src/assets/img/pin.svg
diff --git a/client/src/assets/styles/main.css b/client/src/assets/styles/main.css
@@ -74,6 +74,27 @@
   height: 100% !important;
 }
 
+main .leaflet-popup-content p {
+  margin: 4px 0 !important;
+  color: #fafafa !important;
+}
+
+main .leaflet-popup-tip {
+  background-color: #656565 !important;
+}
+
+main .leaflet-popup-content-wrapper {
+  background-color: #656565 !important;
+}
+
+main .leaflet-container a.leaflet-popup-close-button {
+  color: #fafafa !important;
+}
+
+main .leaflet-popup {
+  border-radius: 8px !important;
+}
+
 .badge-display {
   transition: .21s ease-out;
   transform: rotate(0deg);

diff --git a/client/src/components/map/Map.tsx b/client/src/components/map/Map.tsx
@@ -4,14 +4,18 @@ import {
   Polyline,
   Popup,
   TileLayer,
+  useMap,
 } from "react-leaflet";
-import { Icon } from "leaflet";
+import { Icon, LatLng } from "leaflet";
 import { Step } from "../../interfaces/step.interface";
+import { useEffect } from "react";
 
 const Map = ({
+  currentStep,
   steps,
   polylinePath,
 }: {
+  currentStep: Step | undefined;
   steps: Step[];
   polylinePath: [number, number][];
 }) => {
@@ -22,14 +26,32 @@ const Map = ({
     iconSize: [40, 40],
   });
 
+  const customIconGhost = new Icon({
+    iconUrl: "/src/assets/img/pin-ghost.svg",
+    iconSize: [40, 40],
+  });
+
+  const geolocalisation = currentStep ? new LatLng(currentStep.geolocalisation.latitude, currentStep.geolocalisation.longitude) : new LatLng(43.282, 5.405);
+
+  const MapRecenter= ({ lat, lng, zoomLevel }: { lat: number; lng: number; zoomLevel: number }) => {
+    const map = useMap();
+
+    useEffect(() => {
+      map.flyTo([lat, lng], zoomLevel );
+    }, [lat, lng]);
+    return null;
+  };
+
   return (
     <div className="h-96 rounded-2xl overflow-hidden">
       <MapContainer
-        center={[46, 2]}
-        zoom={5}
+        center={geolocalisation}
+        zoom={12}
+        maxZoom={12}
         scrollWheelZoom={false}
         attributionControl={false}
       >
+        <MapRecenter lat={geolocalisation.lat} lng={geolocalisation.lng} zoomLevel={12} />
         <TileLayer url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png" />
 
         {steps &&
@@ -39,11 +61,11 @@ const Map = ({
                 marker.geolocalisation.latitude,
                 marker.geolocalisation.longitude,
               ]}
-              icon={customIcon}
+              icon={!currentStep ? customIconGhost : (currentStep.etape_numero < marker.etape_numero ? customIconGhost : customIcon)}
               key={index}
             >
               <Popup>
-                <p>Étape n°{marker.etape}</p>
+                <b className="text-alabaster-50">Étape n°{marker.etape}</b>
                 <p>{marker.date}</p>
                 <p>{marker.ville}</p>
               </Popup>

diff --git a/client/src/interfaces/step.interface.ts b/client/src/interfaces/step.interface.ts
@@ -16,5 +16,5 @@ export interface Step {
     y: number;
   };
   population: number;
-  code_postal: "04100";
-}
+  code_postal: string;
+}
diff --git a/client/src/pages/map/MapPage.tsx b/client/src/pages/map/MapPage.tsx
@@ -28,30 +28,35 @@ const MapPage = () => {
     });
   };
 
-  const handleCurrentStep = useCallback(() => {
+  const handleCurrentStep = () => {
     APIHandler<Step>(`/etape/actuelle`, true).then((res) => {
       setCurrentFlameLocation(res.data);
       handleNextStep(res.data.etape_numero);
     });
-  }, []);
+  }
 
   useEffect(() => {
     handleSteps();
     handleCurrentStep();
-  }, [handleCurrentStep]);
+  }, []);
+
+  if(currentFlameLocation) {
+    steps.forEach((step) => {
+      if(currentFlameLocation && step.etape_numero > currentFlameLocation.etape_numero) return;
+      polylinePath.push([
+        step.geolocalisation.latitude,
+        step.geolocalisation.longitude,
+      ]);
+    });
+  }
 
-  steps.forEach((step) => {
-    polylinePath.push([
-      step.geolocalisation.latitude,
-      step.geolocalisation.longitude,
-    ]);
-  });
+  console.log(currentFlameLocation);
 
   return (
     <div className="map-page flex flex-col gap-8">
       <h1 className="font-roboto text-xl font-bold">Parcours de la flamme</h1>
       <div className="flex flex-col gap-8">
-        <Map steps={steps} polylinePath={polylinePath} />
+        <Map currentStep={currentFlameLocation} steps={steps} polylinePath={polylinePath} />
         <div className="flex flex-col gap-8">
           <div className="flex flex-col gap-4">
             <h2 className="text-2xl font-bold">Où est la flamme</h2>