feat: map in lab form and dynamic map zoom and center

rebecamurillo · rebecamurillo · commit 203cf51fbccf · 2025-09-05T13:23:01.000+02:00
diff --git a/src/components/react/LivingLabsMapSection.tsx b/src/components/react/LivingLabsMapSection.tsx
@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { RButton } from "./ui";
 import { getUrl } from "../../lib/helpers";
+import { MapViewer, type MarkerData } from "./MapViewer";
 
 type LivingLab = {
   id: string;
@@ -21,30 +22,19 @@ type Props = {
 
 export function LivingLabsMapSection({ labs }: Props) {
   const [selectedLab, setSelectedLab] = useState<LivingLab | null>(null);
-
-  // state to hold dynamically imported components
-  const [leafletComponents, setLeafletComponents] = useState<any | null>(null);
-
+  const [mapCenter, setMapCenter] = useState<[number, number]>([50, 10]);
+  const [mapZoom, setMapZoom] = useState<number>(4);
+  const mapKey = mapCenter ? `${mapCenter[0]},${mapCenter[1]}` : "no-center";
   useEffect(() => {
-    let mounted = true;
-    // load react-leaflet components and CSS on the client only
-    async function loadLeaflet() {
-      if (typeof window === "undefined") return;
-      try {
-        const comps = await import("react-leaflet");
-        // dynamically load css so server doesn't try to process it at build time
-        await import("leaflet/dist/leaflet.css");
-        if (mounted) setLeafletComponents(comps);
-      } catch (e) {
-        // optional: handle or log load failure
-        if (mounted) setLeafletComponents(null);
-      }
+    if (
+      selectedLab &&
+      selectedLab.coordinates?.lat &&
+      selectedLab.coordinates?.lng
+    ) {
+      setMapCenter([selectedLab.coordinates.lat, selectedLab.coordinates.lng]);
+      setMapZoom(6);
     }
-    loadLeaflet();
-    return () => {
-      mounted = false;
-    };
-  }, []);
+  }, [selectedLab]);
 
   const getStatusColor = (status: LivingLab["status"]) => {
     switch (status) {
@@ -57,8 +47,17 @@ export function LivingLabsMapSection({ labs }: Props) {
     }
   };
 
+  // convert labs to MarkerData for MapViewer
+  const markers: MarkerData[] = labs.map((lab) => ({
+    id: lab.id,
+    name: lab.name,
+    coordinates: lab.coordinates,
+    radius: lab.radius * 1000, // convert km to meters
+    meta: { lab },
+  }));
+
   return (
-    <section className="bg-light py-12 px-4 sm:px-8">
+    <section className="py-12 px-4 sm:px-8">
       <div className="max-w-7xl mx-auto">
         {/* Section Title */}
         <div className="mb-8">
@@ -75,49 +74,22 @@ export function LivingLabsMapSection({ labs }: Props) {
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
           {/* Map */}
           <div className="lg:col-span-2 h-[600px] rounded shadow overflow-hidden">
-            {/* <div className=""> */}
-            {!leafletComponents && (
-              <div className="flex items-center justify-center h-full w-full bg-gray-100 text-gray-600">
-                Loading map...
-              </div>
-            )}
-
-            {leafletComponents &&
-              (() => {
-                const { MapContainer, TileLayer, Marker, Popup, Circle } =
-                  leafletComponents as any;
-                return (
-                  <MapContainer
-                    center={[48.85, 2.35]}
-                    zoom={5}
-                    scrollWheelZoom={false}
-                    className="h-full w-full z-0"
-                  >
-                    <TileLayer
-                      attribution='&copy; <a href="https://osm.org">OpenStreetMap</a>'
-                      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                    />
+            <MapViewer
+              key={mapKey}
+              markers={markers}
+              center={mapCenter}
+              zoom={mapZoom}
+              className="h-full w-full z-0"
+              onMarkerClick={(m) => {
+                // prefer passing the original lab if available in meta
+                if (m.meta && m.meta.lab) setSelectedLab(m.meta.lab);
+                else {
+                  const found = labs.find((l) => l.id === m.id);
+                  if (found) setSelectedLab(found);
+                }
+              }}
+            />
 
-                    {labs.map((lab) => (
-                      <>
-                        <Marker
-                          key={lab.id}
-                          position={[lab.coordinates.lat, lab.coordinates.lng]}
-                          eventHandlers={{
-                            click: () => setSelectedLab(lab),
-                          }}
-                        />
-                        <Circle
-                          center={[lab.coordinates.lat, lab.coordinates.lng]}
-                          radius={lab.radius}
-                          pathOptions={{ color: "#2563eb", fillOpacity: 0.2 }}
-                        />
-                      </>
-                    ))}
-                  </MapContainer>
-                );
-              })()}
-            {/* </div> */}
             {/* Slide-up Detail Panel */}
             {selectedLab && (
               <div className=" lg:mr-80 bg-white rounded-lg p-3 shadow border border-primary sticky bottom-0 left-0 z-50">
@@ -177,9 +149,6 @@ export function LivingLabsMapSection({ labs }: Props) {
                   >
                     🔍 Explore {selectedLab.name} Living Lab
                   </RButton>
-                  {/* <button className="bg-secondary text-white px-4 py-2 rounded hover:bg-dark transition">
-                    ➕ More About This Lab
-                  </button> */}
                 </div>
               </div>
             )}
diff --git a/src/components/react/MapViewer.tsx b/src/components/react/MapViewer.tsx
@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+import { COLOR_WARNING } from "../../types";
+
+export type MarkerData = {
+  id: string;
+  name?: string;
+  coordinates: { lat: number; lng: number };
+  radius?: number;
+  // allow attaching any payload if needed
+  meta?: Record<string, any>;
+};
+
+type Props = {
+  center?: [number, number];
+  zoom?: number;
+  markers: MarkerData[];
+  className?: string;
+  scrollWheelZoom?: boolean;
+  onMarkerClick?: (m: MarkerData) => void;
+};
+
+export function MapViewer({
+  center = [50, 10],
+  zoom = 5,
+  markers,
+  className = "h-full w-full",
+  scrollWheelZoom = false,
+  onMarkerClick,
+}: Props) {
+  const [leafletComponents, setLeafletComponents] = useState<any | null>(null);
+  const [markersState, setMarkersState] = useState<MarkerData[]>(markers);
+
+  useEffect(() => {
+    let mounted = true;
+    async function loadLeaflet() {
+      if (typeof window === "undefined") return;
+      try {
+        const comps = await import("react-leaflet");
+        await import("leaflet/dist/leaflet.css");
+        if (mounted) setLeafletComponents(comps);
+      } catch (e) {
+        if (mounted) setLeafletComponents(null);
+      }
+    }
+    loadLeaflet();
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  // respond to markers changes: fit bounds when markers present
+  useEffect(() => {
+    setMarkersState(markers);
+  }, [markers]);
+
+  if (!leafletComponents) {
+    return (
+      <div className="flex items-center justify-center h-full w-full bg-gray-100 text-gray-600">
+        Loading map...
+      </div>
+    );
+  }
+
+  const { MapContainer, TileLayer, Marker, Circle, Popup } =
+    leafletComponents as any;
+
+  return (
+    <MapContainer
+      center={center}
+      zoom={zoom}
+      scrollWheelZoom={scrollWheelZoom}
+      className={className}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://osm.org">OpenStreetMap</a>'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+
+      {markersState?.map((m) => (
+        <React.Fragment key={m.id}>
+          <Marker
+            position={[m.coordinates.lat, m.coordinates.lng]}
+            eventHandlers={{
+              click: () => onMarkerClick && onMarkerClick(m),
+            }}
+          >
+            {m.name && (
+              <Popup>
+                <strong>{m.name}</strong>
+              </Popup>
+            )}
+          </Marker>
+
+          {typeof m.radius === "number" && (
+            <Circle
+              center={[m.coordinates.lat, m.coordinates.lng]}
+              radius={m.radius}
+              pathOptions={{ color: COLOR_WARNING, fillOpacity: 0.2 }}
+            />
+          )}
+        </React.Fragment>
+      ))}
+    </MapContainer>
+  );
+}
diff --git a/src/components/react/form/LivingLabForm.tsx b/src/components/react/form/LivingLabForm.tsx
@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Input } from "../../react-catalyst-ui-kit/typescript/input";
 import { Label } from "../../react-catalyst-ui-kit/typescript/fieldset";
 import { RButton } from "../ui/RButton";
 import { getUrl } from "../../../lib/helpers";
+import { MapViewer, type MarkerData } from "../MapViewer";
 
 export default function LivingLabForm() {
   const [name, setName] = useState("");
@@ -12,6 +13,13 @@ export default function LivingLabForm() {
   const [area, setArea] = useState("");
   const [population, setPopulation] = useState("");
 
+  const [mapMarker, setMapMarker] = useState<MarkerData | null>(null);
+  const [mapCenter, setMapCenter] = useState<[number, number]>([50, 10]);
+  const [mapZoom, setMapZoom] = useState<number>(4);
+
+  // derive a key from center so MapViewer remounts whenever center changes
+  const mapKey = mapCenter ? `${mapCenter[0]},${mapCenter[1]}` : "no-center";
+
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     const payload = {
@@ -26,10 +34,22 @@ export default function LivingLabForm() {
     // For now we just log the captured values. Replace with real API call later.
     // Keep output minimal so it's easy to replace with fetch/axios when needed.
     // eslint-disable-next-line no-console
-    console.log("Living Lab payload:", payload);
     window.location.href = getUrl("/lab");
   }
 
+  useEffect(() => {
+    if (latitude && longitude) {
+      setMapMarker({
+        id: "lab-marker",
+        name,
+        coordinates: { lat: parseFloat(latitude), lng: parseFloat(longitude) },
+        radius: radius ? parseFloat(radius) * 1000 : undefined, // convert km to meters
+      });
+      setMapCenter([parseFloat(latitude), parseFloat(longitude)]);
+      setMapZoom(8);
+    }
+  }, [latitude, longitude, radius]);
+
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
       <div>
@@ -101,6 +121,16 @@ export default function LivingLabForm() {
         </div>
       </div>
 
+      <div className="h-[400px] rounded shadow ">
+        <MapViewer
+          key={mapKey}
+          markers={mapMarker ? [mapMarker] : []}
+          center={mapCenter}
+          zoom={mapZoom ?? 8}
+          className="h-full w-full z-0"
+        />
+      </div>
+
       <div className="flex gap-4">
         <RButton
           type="submit"
diff --git a/src/components/react/index.ts b/src/components/react/index.ts
@@ -11,3 +11,4 @@ export * from "./LivingLabKPIs";
 export * from "./KpiTypeBadge";
 export * from "./TransportTypeBadge";
 export * from "./LivingLabsMapSection";
+export * from "./MapViewer";
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -24,7 +24,7 @@ const labs = livingLabsData.map((lab) => ({
   id: lab.id,
   name: lab.name,
   coordinates: { lat: lab.lat, lng: lab.lng },
-  radius: lab.radius ?? 100,
+  radius: lab.radius ?? 50,
   status: lab.status,
   totalMeasures: lab.measures.length,
   kpisBefore: lab.kpi_results.filter((kpi) => kpi.result_before).length,
@@ -59,7 +59,6 @@ const labs = livingLabsData.map((lab) => ({
       <TransportBadge type="scooter" size="lg" color="warning" />
     </div>
 
-    <LivingLabsMapSection labs={labs} client:only="react" />
     <StatsSection
       titleHighlight="SEAMLESS"
       title="Shared Urban Mobility"
@@ -83,6 +82,8 @@ const labs = livingLabsData.map((lab) => ({
         },
       ]}
     />
+    <LivingLabsMapSection labs={labs} client:only="react" />
+
     <CTASection
       title="Monitoring measures around New Shared Mobility"
       description="From pre-implementation surveys to real-world impact analysis, here's how data flows through the SUM project."
diff --git a/src/types/Constants.ts b/src/types/Constants.ts
@@ -1,5 +1,7 @@
 export const COLOR_PRIMARY = "#004494";
+export const COLOR_SECONDARY = "#98c33a";
 export const COLOR_SUCCESS = "#98c33a";
+export const COLOR_WARNING = "#ff632f";
 export const COLOR_DANGER = "#ff442f";
 export const COLOR_SUCCESS_OPACITY_50 = "#98c33a80"; // 50% opacity
 export const COLOR_DANGER_OPACITY_50 = "#ff442f80"; // 50% opacity
