From 8022ae5e45678d35850c92a2e32de4f5ac4d1866 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Famibelle-Pronzola?= <c.pronzola@tuta.io>
Date: Fri, 3 Mar 2023 16:04:47 +0400
Subject: [PATCH] feat: add legend to map

---
 components/map/index.js  |  6 ++-
 components/map/legend.js | 87 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 components/map/legend.js

diff --git a/components/map/index.js b/components/map/index.js
index 5a0a949..fc8b115 100644
--- a/components/map/index.js
+++ b/components/map/index.js
@@ -4,6 +4,7 @@ import maplibregl from 'maplibre-gl'
 
 import {sources} from '@/components/map/sources.js'
 import {layers} from '@/components/map/layers.js'
+import Legend from '@/components/map/legend.js'
 import colors from '@/styles/colors.js'
 
 const itineraireLayer = {
@@ -278,7 +279,10 @@ const Map = ({selectedAdresse, collegeFeature, collegeItineraire, isMobileDevice
   }, [map, handleCollegeClick, selectedCollegeFeatureRef])
 
   return (
-    <div ref={mapContainer} style={{width: '100%', height: '100%'}} />
+    <>
+      <Legend />
+      <div ref={mapContainer} style={{width: '100%', height: '100%'}} />
+    </>
   )
 }
 
diff --git a/components/map/legend.js b/components/map/legend.js
new file mode 100644
index 0000000..8307aab
--- /dev/null
+++ b/components/map/legend.js
@@ -0,0 +1,87 @@
+import {useState} from 'react'
+import {uniqueId} from 'lodash-es'
+
+import colors from '@/styles/colors.js'
+
+const legend = [
+  {
+    circle: true,
+    color: colors.green,
+    libelle: 'Autre collège'
+  },
+  {
+    circle: true,
+    color: colors.blue,
+    libelle: 'Autre collège sélectionné'
+  },
+  {
+    circle: false,
+    color: 'rgba(0, 83, 179, 0.1)',
+    libelle: 'Zones de rattachement'
+  },
+  {
+    circle: false,
+    color: 'rgba(0, 83, 179, 0.5)',
+    libelle: 'Zones de rattachement du collège sélectionné'
+  }
+]
+
+const Legend = () => {
+  const [isWrap, setIsWrap] = useState(true)
+
+  return (
+    <div className='legend'
+      onMouseEnter={() => setIsWrap(false)}
+      onMouseLeave={() => setIsWrap(true)}
+    >
+      <div>Légende</div>
+
+      {!isWrap && (
+        <div className='legend-wrapper'>
+          {legend.map(({libelle, color, circle}) => (
+            <div key={uniqueId()}>
+              <div key={libelle} className='legend-container'>
+                <div className='legend-color' style={{backgroundColor: `${color}`, borderRadius: `${circle ? '25px' : ''}`}} />
+                <div>{libelle}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <style jsx>{`
+          .legend {
+            position: absolute;
+            margin-top: 1em;
+            margin-left: 1em;
+            box-shadow: none;
+            border: 2px solid #dcd8d5;
+            border-radius: 4px;
+            z-index: 1;
+            padding: 0.5em;
+            background-color: rgba(255, 255, 255, 0.8);
+            max-width: 1000px;
+          }
+
+          .legend-wrapper {
+            margin-top: 1em;
+          }
+
+          .legend-container {
+            margin: .5em 0;
+            display: flex;
+            align-items: center;
+          }
+
+          .legend-color {
+            width: 15px;
+            height: 15px;
+            margin-right: 0.5em;
+          }
+        `}</style>
+    </div>
+
+  )
+}
+
+export default Legend