feat: project info legend (#1017)

* feat (projectInfo): map - legend added to map * fix (vectorLayer) - default style overriding setStyle if setStyle supplied stopped * fix (projectInfo): legend - legend header changed
hotosm · Dec 1, 2023 · ecc1f2a · ecc1f2a
1 parent 6cba5b7
commit ecc1f2a
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 3 deletions.
diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js
@@ -190,7 +190,7 @@ const VectorLayer = ({
   }, [map, vectorLayer, getTaskStatusStyle]);
 
   useEffect(() => {
-    if (!vectorLayer || !style.visibleOnMap) return;
+    if (!vectorLayer || !style.visibleOnMap || setStyle) return;
     vectorLayer.setStyle((feature, resolution) => [
       new Style({
         image: new CircleStyle({
@@ -207,7 +207,7 @@ const VectorLayer = ({
       }),
       getStyles({ style, feature, resolution }),
     ]);
-  }, [vectorLayer, style]);
+  }, [vectorLayer, style, setStyle]);
 
   useEffect(() => {
     if (!vectorLayer) return;

diff --git a/src/frontend/src/components/ProjectInfo/ProjectInfoMapLegend.jsx b/src/frontend/src/components/ProjectInfo/ProjectInfoMapLegend.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+const colorCodes = [
+  { color: '#0062AC', min: 130, max: 160 },
+  { color: '#4A90D9', min: 100, max: 130 },
+  { color: '#7CB2E8', min: 50, max: 100 },
+  { color: '#A9D2F3', min: 10, max: 50 },
+  { color: '#FF4538', min: 0, max: 0 },
+];
+
+const LegendListItem = ({ code }) => (
+  <div className="fmtm-flex fmtm-items-center fmtm-gap-2">
+    <div style={{ backgroundColor: code.color }} className="fmtm-w-10 fmtm-h-6 fmtm-mx-2"></div>
+    <div>
+      {code.min !== code.max ? (
+        <p>
+          {code.min} - {code.max}
+        </p>
+      ) : (
+        <p>{code.min}</p>
+      )}
+    </div>
+  </div>
+);
+
+const ProjectInfoMapLegend = () => {
+  return (
+    <div className="fmtm-py-3">
+      <div className="fmtm-flex fmtm-flex-col fmtm-gap-2 sm:fmtm-gap-4">
+        {colorCodes.map((code) => (
+          <LegendListItem key={code.color} code={code} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ProjectInfoMapLegend;
diff --git a/src/frontend/src/components/ProjectInfo/ProjectInfomap.jsx b/src/frontend/src/components/ProjectInfo/ProjectInfomap.jsx
@@ -13,6 +13,8 @@ import environment from '../../environment';
 import { getStyles } from '../MapComponent/OpenLayersComponent/helpers/styleUtils';
 import { ProjectActions } from '../../store/slices/ProjectSlice';
 import { basicGeojsonTemplate } from '../../utilities/mapUtils';
+import ProjectInfoMapLegend from './ProjectInfoMapLegend';
+import Accordion from '../common/Accordion';
 
 export const defaultStyles = {
   lineColor: '#000000',
@@ -68,7 +70,6 @@ const colorCodes = {
 function colorRange(data, noOfRange) {
   if (data?.length === 0) return [];
   const actualCodes = [{ min: 0, max: 0, color: '#605f5e' }];
-  console.log(data, 'data');
   const maxVal = Math.max(...data?.map((d) => d.count));
   const maxValue = maxVal <= noOfRange ? 10 : maxVal;
   // const minValue = Math.min(...data?.map((d) => d.count)) 0;
@@ -114,6 +115,7 @@ const ProjectInfomap = () => {
 
   const projectBuildingGeojson = CoreModules.useAppSelector((state) => state.project.projectBuildingGeojson);
   const selectedTask = CoreModules.useAppSelector((state) => state.task.selectedTask);
+  const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
   const params = CoreModules.useParams();
   const encodedId = params.projectId;
   const decodedId = environment.decode(encodedId);
@@ -272,6 +274,19 @@ const ProjectInfomap = () => {
             zIndex={5}
           />
         )}
+        <div className="fmtm-absolute fmtm-bottom-2 fmtm-left-2 sm:fmtm-bottom-5 sm:fmtm-left-5 fmtm-z-50 fmtm-rounded-lg">
+          <Accordion
+            body={<ProjectInfoMapLegend defaultTheme={defaultTheme} />}
+            header={
+              <p className="fmtm-text-lg fmtm-font-normal fmtm-my-auto fmtm-mb-[0.35rem] fmtm-ml-2">
+                No. of Submissions
+              </p>
+            }
+            onToggle={() => {}}
+            className="fmtm-py-0 !fmtm-pb-0 fmtm-rounded-lg hover:fmtm-bg-gray-50"
+            collapsed={true}
+          />
+        </div>
         {buildingGeojson && <VectorLayer key={buildingGeojson} geojson={buildingGeojson} zIndex={15} />}
       </MapComponent>
     </CoreModules.Box>