map legend

components/TournamentMap.tsx

@@ -1,76 +1,56 @@
 "use client";
 
+// Types
+import { TournamentDataProps } from "@/types";
+import { LatLngLiteral } from "leaflet";
+
+// Leaflet + icon fixes
 import "leaflet/dist/leaflet.css";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
 import L from "leaflet";
 import "leaflet-defaulticon-compatibility";
+import { MapContainer, TileLayer, LayersControl, useMap } from "react-leaflet";
 
-import {
-  MapContainer,
-  TileLayer,
-  Marker,
-  Popup,
-  LayersControl,
-  LayerGroup,
-} from "react-leaflet";
-
-import { LatLngLiteral } from "leaflet";
-import { TournamentDataProps } from "@/types";
+import { createLayerGroups } from "@/utils/layerGroups";
+import { useEffect } from "react";
 
 export default function TournamentMap({ tournamentData }: TournamentDataProps) {
   const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
 
-  // TODO consider putting in page.tsx so that it is SSR
-  // TODO  move to own hook/util
-  // TODO wrap in useEffect on initial load []
-  function layerGroups(timeControl: string, colour: string) {
-    const filteredTournaments = tournamentData.filter(
-      (t) => t.time_control === timeControl
-    );
+  const classicalMarkers = createLayerGroups("Cadence Lente", "green", {
+    tournamentData,
+  });
+  const rapidMarkers = createLayerGroups("Rapide", "blue", { tournamentData });
+  const blitzMarkers = createLayerGroups("Blitz", "yellow", { tournamentData });
+  const otherMarkers = createLayerGroups("1h KO", "red", { tournamentData });
 
-    const iconOptions = new L.Icon({
-      iconUrl: `images/leaflet/marker-icon-2x-${colour}.png`,
-      shadowUrl: "images/leaflet/marker-shadow.png",
-      iconSize: [25, 41],
-      iconAnchor: [12, 41],
-      popupAnchor: [1, -34],
-      shadowSize: [41, 41],
-    });
+  // TODO move into its own hook
+  function Legend() {
+    const map = useMap();
 
-    return (
-      <LayersControl.Overlay checked name={timeControl}>
-        <LayerGroup>
-          {filteredTournaments.map((t) => {
-            const coordinates = {
-              lat: t.coordinates[0] + Math.random() * (-0.01 - 0.01) + 0.01,
-              lng: t.coordinates[1] + Math.random() * (-0.01 - 0.01) + 0.01,
-            };
+    useEffect(() => {
+      if (map) {
+        const legend = L.control({ position: "bottomleft" });
 
-            return (
-              <Marker position={coordinates} key={t._id} icon={iconOptions}>
-                <Popup>
-                  <p>
-                    {t.date}
-                    <br />
-                    <a href={t.url} target="_blank" rel="noopener noreferrer">
-                      {t.tournament}
-                    </a>
-                  </p>
-                  géolocalisation approximative
-                </Popup>
-              </Marker>
-            );
-          })}
-        </LayerGroup>
-      </LayersControl.Overlay>
-    );
+        legend.onAdd = () => {
+          const div = L.DomUtil.create("div", "map-legend");
+          div.style =
+            "background: white; color: black; border: 2px solid grey; border-radius: 6px; padding: 10px;";
+          div.innerHTML = `<ul>
+            <li><span style='background:#00ac39; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>Cadence Lente</li>
+            <li><span style='background:#0086c7; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>Rapide</li>
+            <li><span style='background:#cec348; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>Blitz</li>
+            <li><span style='background:#d10c3e; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>1h KO</li>
+            </ul>`;
+          return div;
+        };
+
+        legend.addTo(map);
+      }
+    }, [map]);
+    return null;
   }
 
-  const classicalMarkers = layerGroups("Cadence Lente", "green");
-  const rapidMarkers = layerGroups("Rapide", "blue");
-  const blitzMarkers = layerGroups("Blitz", "yellow");
-  const otherMarkers = layerGroups("1h KO", "red");
-
   return (
     <section id="tournament-map" className="w-full lg:col-start-1 lg:col-end-2">
       <MapContainer
@@ -89,6 +69,7 @@ export default function TournamentMap({ tournamentData }: TournamentDataProps) {
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
+        <Legend />
         <LayersControl>
           {classicalMarkers}
           {rapidMarkers}