Adjust map layerl controls to be accessible and have labels

nickharb · Dec 12, 2023 · 4d06d48 · 4d06d48
1 parent e3b21dc
commit 4d06d48
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 17 deletions.
diff --git a/src/components/Map.css b/src/components/Map.css
@@ -50,22 +50,24 @@
 
 .map__legend {
   margin: 0 -10px;
-  margin-left: -20px;
-  display: flex;
-  justify-content: left;
   margin-top: 10px;
 }
 
+.map__legend .map__legend_formGroup {
+  display: flex;
+  flex-direction: row;
+}
+
 .map__legend-item {
   margin: 0 10px;
   color: #000;
   display: flex;
   align-items: center;
-  font-size: 14px;
 }
 
 .map__legend-item span {
   font-weight: bold;
+  font-size: 14px;
 }
 
 .map__legend-item:first-of-type .MuiButtonBase-root.Mui-checked {

diff --git a/src/components/Map.js b/src/components/Map.js
@@ -1,4 +1,6 @@
 import { useRef, useEffect, useState } from "react";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import mapboxgl from "!mapbox-gl"; // eslint-disable-line import/no-webpack-loader-syntax
 
@@ -121,20 +123,15 @@ const Map = (props) => {
   return (
     <div className="map">
       <div className="map__container" ref={mapContainer}></div>
-      {/* <div className="map__overlay">
-        <div className="map__statistic">
-          <span>{forestCoverLoss}</span>loss of forest cover since 2011
-        </div>
-      </div> */}
       <div className="map__legend">
-        <div className="map__legend-item">
-          <Switch checked={checked2000} onChange={handleChange2000} />
-          <span>Forest Cover as of 2000</span>
-        </div>
-        <div className="map__legend-item">
-          <Switch checked={checked2017} onChange={handleChange2017} />
-          <span>Forest Cover as of 2017</span>
-        </div>
+        <FormGroup className="map__legend_formGroup">
+            <div className="map__legend-item">
+              <FormControlLabel control={<Switch checked={checked2000} onChange={handleChange2000} />} label="Forest Cover as of 2000" />
+            </div>
+            <div className="map__legend-item">
+              <FormControlLabel control={<Switch checked={checked2017} onChange={handleChange2017} />} label="Forest Cover as of 2017" />
+            </div>
+        </FormGroup>
       </div>
     </div>
   );