feat(Map): Add Legend

frontend/src/components/map/BaseMap.jsx

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import ReactMapboxGl, { Feature, Layer, Popup } from "react-mapbox-gl";
 import { makeStyles, useTheme } from "@material-ui/styles";
 import UnivMapPopup from "./UnivMapPopup";
+import Legend from "./Legend";
 
 const Map = ReactMapboxGl({
   dragRotate: false,
@@ -21,6 +22,13 @@ const useStyles = makeStyles(theme => ({
     [theme.breakpoints.down("md")]: {
       height: "60vh"
     }
+  },
+  legend: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    zIndex: 9999999999,
+    padding: theme.spacing(0.5)
   }
 }));
 
@@ -112,25 +120,30 @@ function BaseMap({ id, campuses }) {
   }
 
   return (
-    <Map
-      style={`/map-server/styles/${style}/style.json`}
-      className={classes.mapContainer}
-      zoom={mapStatus.zoom}
-      center={mapStatus.center}
-      onMoveEnd={saveStatus}
-    >
-      {campuses && (
-        <>
-          {renderLayer(true)}
-          {renderLayer(false)}
-        </>
-      )}
-      {popup && (
-        <Popup key={popup.univId} coordinates={[popup.lon, popup.lat]}>
-          <UnivMapPopup {...popup} handleClose={closePopup} />
-        </Popup>
-      )}
-    </Map>
+    <div style={{ position: "relative" }}>
+      <Map
+        style={`/map-server/styles/${style}/style.json`}
+        className={classes.mapContainer}
+        zoom={mapStatus.zoom}
+        center={mapStatus.center}
+        onMoveEnd={saveStatus}
+      >
+        {campuses && (
+          <>
+            {renderLayer(true)}
+            {renderLayer(false)}
+          </>
+        )}
+        {popup && (
+          <Popup key={popup.univId} coordinates={[popup.lon, popup.lat]}>
+            <UnivMapPopup {...popup} handleClose={closePopup} />
+          </Popup>
+        )}
+      </Map>
+      <div className={classes.legend}>
+        <Legend />
+      </div>
+    </div>
   );
 }
 

frontend/src/components/map/Legend.jsx

+import React from "react";
+import PropTypes from "prop-types";
+import withStyles from "@material-ui/core/styles/withStyles";
+import Card from "@material-ui/core/Card";
+import CardActionArea from "@material-ui/core/CardActionArea";
+import CardActions from "@material-ui/core/CardActions";
+import CardContent from "@material-ui/core/CardContent";
+import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
+import Divider from "@material-ui/core/Divider";
+import IconAdd from "@material-ui/icons/Add";
+import IconClose from "@material-ui/icons/Close";
+import { Link } from "react-router-dom";
+
+import { makeStyles, useTheme } from "@material-ui/styles";
+
+import MyCardMedia from "./MyCardMedia";
+import APP_ROUTES from "../../config/appRoutes";
+
+function LegendItem({ color, opacity, label }) {
+  const theme = useTheme();
+  const size = theme.typography.caption.fontSize;
+
+  return (
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div
+        style={{
+          backgroundColor: color,
+          borderRadius: size,
+          width: size,
+          height: size,
+          marginRight: theme.spacing(0.5)
+        }}
+      />
+      <Typography variant="caption">{label}</Typography>
+    </div>
+  );
+}
+
+LegendItem.propTypes = {
+  color: PropTypes.string.isRequired,
+  opacity: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired
+};
+
+LegendItem.defaultProps = {
+  opacity: 1,
+  label: "toto"
+};
+
+/**
+ * Custom component to create the legend on the map
+ */
+function Legend({}) {
+  const theme = useTheme();
+  const color = theme.palette.primary.main;
+  const color2 = theme.palette.action.disabled;
+
+  return (
+    <div style={{ padding: theme.spacing(1), backgroundColor: "white" }}>
+      <LegendItem color={color} label="actif" />
+      <LegendItem color={color2} label="inactif" />
+    </div>
+  );
+}
+
+Legend.propTypes = {};
+
+Legend.defaultProps = {};
+
+const styles = {};
+
+export default Legend;