Plant-for-the-Planet-org · mohitb35 · Aug 27, 2024
diff --git a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/DeforestationSlider.tsx b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/DeforestationSlider.tsx
@@ -0,0 +1,112 @@
+import {
+  Icons,
+  Legend,
+  LegendListItem,
+  LegendItemTimeStep,
+} from 'vizzuality-components';
+import treeCoverLoss from '../../../../../public/data/layers/tree-cover-loss';
+import { getParams } from '../../../../utils/LayerManagerUtils';
+import styles from './MapFeatureExplorer.module.scss';
+import { useProjectsMap } from '../../ProjectsMapContext';
+
+type LayerType = {
+  id: string;
+  decodeConfig: boolean;
+};
+
+const DeforestationSlider = () => {
+  const { layerSettings, setLayerSettings } = useProjectsMap();
+
+  // LEGEND
+  const layerLegend = treeCoverLoss.map((l) => {
+    const { id, decodeConfig, timelineConfig } = l;
+    const lSettings = layerSettings[id] || {};
+
+    const decodeParams =
+      !!decodeConfig &&
+      getParams(decodeConfig, { ...timelineConfig, ...lSettings.decodeParams });
+    const timelineParams = !!timelineConfig && {
+      ...timelineConfig,
+      ...getParams(decodeConfig, lSettings.decodeParams),
+    };
+
+    return {
+      id,
+      slug: id,
+      dataset: id,
+      layers: [
+        {
+          active: true,
+          ...l,
+          ...lSettings,
+          decodeParams,
+          timelineParams,
+        },
+      ],
+      ...lSettings,
+    };
+  });
+
+  const onChangeLayerDate = (dates: string[], layer: LayerType) => {
+    const { id, decodeConfig } = layer;
+
+    setLayerSettings({
+      ...layerSettings,
+      [id]: {
+        ...layerSettings[id],
+        ...(decodeConfig && {
+          decodeParams: {
+            startDate: dates[0],
+            endDate: dates[1],
+            trimEndDate: dates[2],
+          },
+        }),
+        ...(!decodeConfig && {
+          params: {
+            startDate: dates[0],
+            endDate: dates[1],
+          },
+        }),
+      },
+    });
+  };
+
+  return (
+    <div className={styles.deforestationSlider}>
+      <Icons />
+      <Legend collapsable={false} sortable={false}>
+        {layerLegend.map((layerGroup, i) => {
+          return (
+            <LegendListItem
+              index={i}
+              key={layerGroup.slug}
+              layerGroup={layerGroup}
+              className={styles.layerLegend}
+            >
+              {/* <LegendItemTypes /> */}
+              <LegendItemTimeStep
+                defaultStyles={{
+                  handleStyle: {
+                    backgroundColor: 'white',
+                    borderRadius: '50%',
+                    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.29)',
+                    border: '0px',
+                    zIndex: 2,
+                  },
+                  railStyle: { backgroundColor: '#d6d6d9' },
+                  dotStyle: {
+                    visibility: 'hidden',
+                    border: '0px',
+                  },
+                }}
+                handleChange={onChangeLayerDate}
+              />
+            </LegendListItem>
+          );
+        })}
+      </Legend>
+    </div>
+  );
+};
+
+export default DeforestationSlider;
diff --git a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss
@@ -39,31 +39,31 @@
   margin-top: 2px;
 }
 
-.rangeMainContainer {
+/* .rangeMainContainer {
   width: 150px;
   height: 30px;
   background-color: rgba(var(--deforestration-range-background-new), 0.1);
   margin-top: 6px;
   border-radius: 6px;
-}
-.rangeContainer {
+} */
+/* .rangeContainer {
   padding-left: 8px;
   display: flex;
   gap: 12px;
-}
+} */
 
-.playIconContainer {
+/* .playIconContainer {
   display: flex;
   margin-top: 8px;
-}
+} */
 
-.sliderContainer {
+/* .sliderContainer {
   width: 107px;
   display: flex;
   margin-top: 10px;
-}
+} */
 
-.yearRangeContainer {
+/* .yearRangeContainer {
   display: flex;
   padding-left: 22px;
   padding-right: 8px;
@@ -74,7 +74,7 @@
 .startYear {
   font-size: $fontXXXXSmallNew;
   font-weight: 400;
-}
+} */
 
 .exploreDescription {
   padding: 8px;
@@ -92,3 +92,31 @@
   margin-bottom: 6px;
   background: $horizontalLineColor;
 }
+
+.deforestationSlider > div {
+  border: none;
+}
+
+.deforestationSlider > div > div > ul > li > div > div > header {
+  display: none !important;
+}
+
+.deforestationSlider > div > div {
+  width: 100%;
+}
+
+.deforestationSlider > div > div > ul > li {
+  width: 100%;
+}
+
+.deforestationSlider > div > div > ul > li > div {
+  padding: 0px 4px 10px !important;
+}
+
+.deforestationSlider > div > div > ul > li > div > div > div > div > button {
+  background-color: transparent;
+}
+
+.layerLegend {
+  width: 200px;
+}
diff --git a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx
@@ -3,10 +3,10 @@ import styles from './MapFeatureExplorer.module.scss';
 import { MapLayerToggle } from '.';
 import InfoIcon from '../../../../../public/assets/images/icons/projectV2/InfoIcon';
 import { StyledSwitch } from './CustomSwitch';
-import { YearRangeSlider } from '.';
 import { useTranslations } from 'next-intl';
 import themeProperties from '../../../../theme/themeProperties';
 import { useProjectsMap } from '../../ProjectsMapContext';
+import DeforestationSlider from './DeforestationSlider';
 
 const MapSettings: FC = () => {
   const tAllProjects = useTranslations('AllProjects');
@@ -45,9 +45,15 @@ const MapSettings: FC = () => {
             switchComponent={
               <StyledSwitch
                 customColor={`${deforestrationToggleColorNew}`}
+                checked={mapOptions['showDeforestation']}
+                onChange={(
+                  _event: ChangeEvent<HTMLInputElement>,
+                  checked: boolean
+                ) => updateMapOption('showDeforestation', checked)}
               />
             }
           />
+          {mapOptions['showDeforestation'] && <DeforestationSlider />}
           <div className={styles.hrLine} />
           <MapLayerToggle
             infoIcon={undefined}

diff --git a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/index.tsx b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/index.tsx
@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
 import { ExploreIcon } from '../../../../../public/assets/images/icons/projectV2/ExploreIcon';
 import styles from './MapFeatureExplorer.module.scss';
-import { SmallSlider } from './CustomSlider';
-import PlayIcon from '../../../../../public/assets/images/icons/projectV2/PlayIcon';
+/* import { SmallSlider } from './CustomSlider';
+import PlayIcon from '../../../../../public/assets/images/icons/projectV2/PlayIcon'; */
 import CustomButton from './CustomButton';
 import MapSettings from './MapSettings';
 import { useTranslations } from 'next-intl';
 
-interface ExploreProjectProps {
+/* interface ExploreProjectProps {
   label: string | string[];
   isOpen: boolean;
   startYear: number;
   endYear: number;
-}
+} */
 
 interface EcosystemOptionProps {
   infoIcon: React.ReactNode;
@@ -43,7 +43,8 @@ export const MapLayerToggle = ({
   );
 };
 
-export const YearRangeSlider = () => {
+// TODO - Remove this
+/* export const YearRangeSlider = () => {
   const minDistance = 10;
   const [value1, setValue1] = useState<number[]>([20, 37]);
 
@@ -89,7 +90,7 @@ export const YearRangeSlider = () => {
       </div>
     </div>
   );
-};
+}; */
 
 const MapFeatureExplorer = () => {
   const t = useTranslations('Maps');

diff --git a/src/features/projectsV2/ProjectsMap/MapLayers/DeforestationLayers.tsx b/src/features/projectsV2/ProjectsMap/MapLayers/DeforestationLayers.tsx
@@ -0,0 +1,42 @@
+import { useProjectsMap } from '../../ProjectsMapContext';
+import { LayerManager, Layer as LayerM } from 'layer-manager/dist/components';
+import { PluginMapboxGl } from 'layer-manager';
+import treeCoverLoss from '../../../../../public/data/layers/tree-cover-loss';
+import { type MapRef } from 'react-map-gl-v7/maplibre';
+import { getParams } from '../../../../utils/LayerManagerUtils';
+import { RefObject } from 'react';
+
+type Props = {
+  mapRef: RefObject<MapRef>;
+};
+
+const DeforestationLayers = ({ mapRef }: Props) => {
+  const { isMapLoaded, mapOptions, layerSettings } = useProjectsMap();
+
+  return isMapLoaded && mapOptions.showDeforestation ? (
+    <LayerManager map={mapRef?.current?.getMap()} plugin={PluginMapboxGl}>
+      {treeCoverLoss.map((layer) => {
+        const { id, decodeConfig, timelineConfig, decodeFunction } = layer;
+
+        const lSettings = layerSettings[id] || {};
+
+        const l = {
+          ...layer,
+          ...layer.config,
+          ...lSettings,
+          ...(!!decodeConfig && {
+            decodeParams: getParams(decodeConfig, {
+              ...timelineConfig,
+              ...lSettings.decodeParams,
+            }),
+            decodeFunction,
+          }),
+        };
+
+        return <LayerM key={layer.id} {...l} />;
+      })}
+    </LayerManager>
+  ) : null;
+};
+
+export default DeforestationLayers;
diff --git a/src/features/projectsV2/ProjectsMap/index.tsx b/src/features/projectsV2/ProjectsMap/index.tsx
@@ -1,14 +1,15 @@
-import Map from 'react-map-gl-v7/maplibre';
+import Map, { MapRef } from 'react-map-gl-v7/maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { NavigationControl } from 'react-map-gl-v7/maplibre';
-import { useRef, MutableRefObject } from 'react';
+import { useRef } from 'react';
 import { useProjectsMap } from '../ProjectsMapContext';
 import MultipleProjectsView from './MultipleProjectsView';
 import { useProjects } from '../ProjectsContext';
 import ProjectListControlForMobile from '../ProjectListControls/ProjectListControlForMobile';
 import { SetState } from '../../common/types/common';
 import styles from './ProjectsMap.module.scss';
 import { ViewMode } from '../../common/Layout/ProjectsLayout/MobileProjectsLayout';
+import DeforestationLayers from './MapLayers/DeforestationLayers';
 
 type ProjectsMapMobileProps = {
   selectedMode: ViewMode;
@@ -23,8 +24,9 @@ type ProjectsMapDesktopProps = {
 type ProjectsMapProps = ProjectsMapMobileProps | ProjectsMapDesktopProps;
 
 function ProjectsMap(props: ProjectsMapProps) {
-  const mapRef: MutableRefObject<null> = useRef(null);
-  const { viewState, setViewState, mapState, mapOptions } = useProjectsMap();
+  const mapRef = useRef<MapRef>(null);
+  const { viewState, setViewState, mapState, mapOptions, setIsMapLoaded } =
+    useProjectsMap();
   const {
     projects,
     topProjects,
@@ -67,8 +69,12 @@ function ProjectsMap(props: ProjectsMapProps) {
         onMove={(e) => setViewState(e.viewState)}
         attributionControl={false}
         ref={mapRef}
+        onLoad={() => setIsMapLoaded(true)}
       >
         {mapOptions.showProjects && projects && <MultipleProjectsView />}
+        {mapOptions.showDeforestation === true && (
+          <DeforestationLayers mapRef={mapRef} />
+        )}
         <NavigationControl position="bottom-right" showCompass={false} />
       </Map>
     </>