Skip to content

Commit e0c3ae7

Browse files
sunilsabatpsunilsabatp
committed
feat(map-settings): add MapSettings component with forest, soil, and project layer configurations
-Implemented LayerSwitchContainer component for reusable layer switch functionality. -Added MapLayerControlPanel for structured display of layer categories and configurations. -Created ExploreDropdownHeaderMobile for mobile-specific dropdown header functionality. -Added MapSettings component with forest, soil, and project layer configurations. -Integrated reusable layer configurations with translations and custom styles. -Refactored existing layer toggle components for improved modularity and reusability. -Incorporated conditional rendering for mobile and desktop layouts.
1 parent 60ab7d6 commit e0c3ae7

File tree

7 files changed

+259
-35
lines changed

7 files changed

+259
-35
lines changed

‎public/static/locales/en/maps.json

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,35 @@
4747
"showProjectDetails": "Show Project Details",
4848
"hideProjectList": "Hide Project List",
4949
"hideProjectDetails": "Hide Project Details",
50-
"countries": "Countries"
50+
"countries": "Countries",
51+
"layers": {
52+
"forests": "Forests",
53+
"soil": "Soil",
54+
"biodiversity": "Biodiversity",
55+
"risks": "Risks",
56+
"forestLayers": {
57+
"forestCover": "Forest Cover",
58+
"forestBiomass": "Forest Biomass",
59+
"potentialAdditionalForestBiomass": "Potential Additional Forest Biomass",
60+
"deforestation": "Deforestation",
61+
"canopyHeight": "Canopy Height"
62+
},
63+
"soilLayers": {
64+
"soilNitrogen": "Soil Nitrogen",
65+
"soilPH": "Soil pH",
66+
"soilOrganicCarbon": "Soil Organic Carbon",
67+
"soilBulkDensity": "Soil Bulk Density"
68+
},
69+
"biodiversityLayers": {
70+
"treeSpeciesDensity": "Tree Species Density",
71+
"birdsDensity": "Birds Density",
72+
"mammalsDensity": "Mammals Density",
73+
"amphibiansDensity": "Amphibians Density"
74+
},
75+
"risksLayers": {
76+
"fireRisk": "Fire Risk",
77+
"deforestationRisk": "Deforestation Risk"
78+
}
79+
}
5180
}
5281
}

‎src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,35 @@
4545
}
4646
}
4747

48+
.exploreItemSection {
49+
background: rgba(0, 122, 73, 0.05);
50+
border-radius: 8px;
51+
padding: 8px 9px;
52+
font-size: 12px;
53+
margin-bottom: 10px;
54+
55+
h2 {
56+
font-weight: 600;
57+
margin-bottom: 14px;
58+
}
59+
}
60+
61+
.layerSwitchContainer {
62+
display: flex;
63+
justify-content: space-between;
64+
align-items: center;
65+
66+
.mapLayer {
67+
cursor: pointer;
68+
}
69+
70+
hr {
71+
border-top: 1px dashed rgba(189, 189, 189, 1);
72+
margin-top: 0px;
73+
margin-bottom: 0px;
74+
}
75+
}
76+
4877
.toggleMainContainer {
4978
padding: 15px 9px;
5079
height: 14px;
@@ -112,7 +141,7 @@
112141
.exploreDescription {
113142
height: fit-content;
114143
margin-top: 8px;
115-
font-size: $fontXXXSmallNew;
144+
font-size: var(--font-xx-extra-small);
116145
border-radius: 6px;
117146
}
118147

‎src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx

Lines changed: 88 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import type { ChangeEvent, FC } from 'react';
1+
import type { FC } from 'react';
22
import type { MapOptions } from '../../ProjectsMapContext';
33
import type { SetState } from '../../../common/types/common';
44

55
import styles from './MapFeatureExplorer.module.scss';
6-
import { MapLayerToggle } from '.';
6+
// // import { MapLayerToggle } from '.';
77
// import InfoIcon from '../../../../../public/assets/images/icons/projectV2/InfoIcon';
8-
import { StyledSwitch } from './CustomSwitch';
8+
// import { StyledSwitch } from './CustomSwitch';
99
// import { YearRangeSlider } from '.';
1010
import { useTranslations } from 'next-intl';
11-
import { ExploreIcon } from '../../../../../public/assets/images/icons/projectV2/ExploreIcon';
12-
import CrossIcon from '../../../../../public/assets/images/icons/projectV2/CrossIcon';
13-
// import themeProperties from '../../../../theme/themeProperties';
11+
import themeProperties from '../../../../theme/themeProperties';
12+
import MapLayerControlPanel from './microComponents/MapLayerControlPanel';
13+
import ExploreDropdownHeaderMobile from './microComponents/ExploreDropdownHeaderMobile';
1414

1515
type MapSettingsProps = {
1616
mapOptions: MapOptions;
@@ -27,24 +27,78 @@ const MapSettings: FC<MapSettingsProps> = ({
2727
}) => {
2828
const tAllProjects = useTranslations('AllProjects');
2929
const tMaps = useTranslations('Maps');
30-
/* const {
31-
primaryColorNew,
32-
restorationToggleColorNew,
33-
deforestrationToggleColorNew,
34-
} = themeProperties; */
35-
30+
const { primaryColorNew } = themeProperties;
31+
const forestConfig = [
32+
{
33+
label: tMaps('layers.forestLayers.canopyHeight'),
34+
color: undefined,
35+
showDivider: true,
36+
shouldRender: true,
37+
},
38+
{
39+
label: tMaps('layers.forestLayers.deforestation'),
40+
color: primaryColorNew,
41+
showDivider: true,
42+
shouldRender: true,
43+
},
44+
{
45+
label: tMaps('layers.forestLayers.forestBiomass'),
46+
color: primaryColorNew,
47+
showDivider: true,
48+
shouldRender: true,
49+
},
50+
{
51+
label: tMaps('layers.forestLayers.forestCover'),
52+
color: primaryColorNew,
53+
showDivider: true,
54+
shouldRender: true,
55+
},
56+
];
57+
const soilConfig = [
58+
{
59+
label: tMaps('layers.soilLayers.soilBulkDensity'),
60+
color: undefined,
61+
showDivider: true,
62+
shouldRender: true,
63+
},
64+
{
65+
label: tMaps('layers.soilLayers.soilNitrogen'),
66+
color: undefined,
67+
showDivider: true,
68+
shouldRender: true,
69+
},
70+
{
71+
label: tMaps('layers.soilLayers.soilOrganicCarbon'),
72+
color: undefined,
73+
showDivider: true,
74+
shouldRender: true,
75+
},
76+
{
77+
label: tMaps('layers.soilLayers.soilPH'),
78+
color: undefined,
79+
showDivider: true,
80+
shouldRender: true,
81+
},
82+
];
83+
const projectConfig = [
84+
{
85+
label: tAllProjects('projects'),
86+
color: undefined,
87+
showDivider: false,
88+
shouldRender: true,
89+
},
90+
];
3691
return (
3792
<div className={styles.exploreMainContainer}>
3893
<div>
3994
<div>
4095
{/* <MapLayerToggle
41-
infoIcon={<InfoIcon width={'10px'} />}
4296
label={tAllProjects('currentForests')}
4397
switchComponent={
4498
<StyledSwitch customColor={`${primaryColorNew}`} />
4599
}
46-
/>
47-
<div className={styles.hrLine} />
100+
/> */}
101+
{/* <div className={styles.hrLine} />
48102
<MapLayerToggle
49103
infoIcon={<InfoIcon width={'10px'} />}
50104
label={tAllProjects('restorationPotential')}
@@ -59,21 +113,9 @@ const MapSettings: FC<MapSettingsProps> = ({
59113
switchComponent={
60114
<StyledSwitch customColor={`${deforestrationToggleColorNew}`} />
61115
}
62-
/>
63-
<div className={styles.hrLine} /> */}
64-
{isMobile && setIsOpen && (
65-
<div className={styles.exploreFeatureMobileHeader}>
66-
<div className={styles.exploreLabel}>
67-
<ExploreIcon />
68-
<p>{tMaps('explore')}</p>
69-
</div>
70-
<button onClick={() => setIsOpen(false)}>
71-
<CrossIcon />
72-
</button>
73-
</div>
74-
)}
75-
<MapLayerToggle
76-
infoIcon={undefined}
116+
/> */}
117+
{/* <div className={styles.hrLine} /> */}
118+
{/* <MapLayerToggle
77119
label={tAllProjects('projects')}
78120
switchComponent={
79121
<StyledSwitch
@@ -84,6 +126,22 @@ const MapSettings: FC<MapSettingsProps> = ({
84126
) => updateMapOption('showProjects', checked)}
85127
/>
86128
}
129+
/> */}
130+
{isMobile && setIsOpen && (
131+
<ExploreDropdownHeaderMobile setIsOpen={setIsOpen} />
132+
)}
133+
<MapLayerControlPanel
134+
exploreConfig={projectConfig}
135+
updateMapOption={updateMapOption}
136+
mapOptions={mapOptions}
137+
/>
138+
<MapLayerControlPanel
139+
category={tMaps('layers.forests')}
140+
exploreConfig={forestConfig}
141+
/>
142+
<MapLayerControlPanel
143+
category={tMaps('layers.soil')}
144+
exploreConfig={soilConfig}
87145
/>
88146
</div>
89147
<div className={styles.exploreDescription}>

‎src/features/projectsV2/ProjectsMap/MapFeatureExplorer/index.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import { Modal } from '@mui/material';
1818
} */
1919

2020
interface EcosystemOptionProps {
21-
infoIcon: React.ReactNode;
2221
label: string;
2322
switchComponent: React.ReactNode;
2423
}
@@ -29,15 +28,13 @@ export interface YearRangeSliderProps {
2928
}
3029

3130
export const MapLayerToggle = ({
32-
infoIcon,
3331
label,
3432
switchComponent,
3533
}: EcosystemOptionProps) => {
3634
return (
3735
<>
3836
<div className={styles.toggleMainContainer}>
3937
<div className={styles.toggleContainer}>
40-
<div className={styles.infoIconContainer}>{infoIcon}</div>
4138
<div>{label}</div>
4239
</div>
4340
<div className={styles.switchContainer}>{switchComponent}</div>

‎src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/ExploreDropdownHeaderMobile.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { SetState } from '../../../../common/types/common';
2+
3+
import { useTranslations } from 'next-intl';
4+
import { ExploreIcon } from '../../../../../../public/assets/images/icons/projectV2/ExploreIcon';
5+
import CrossIcon from '../../../../../../public/assets/images/icons/projectV2/CrossIcon';
6+
import styles from '../MapFeatureExplorer.module.scss';
7+
8+
interface Props {
9+
setIsOpen: SetState<boolean>;
10+
}
11+
12+
const ExploreDropdownHeaderMobile = ({ setIsOpen }: Props) => {
13+
const tMaps = useTranslations('Maps');
14+
return (
15+
<div className={styles.exploreFeatureMobileHeader}>
16+
<div className={styles.exploreLabel}>
17+
<ExploreIcon />
18+
<p>{tMaps('explore')}</p>
19+
</div>
20+
<button onClick={() => setIsOpen(false)}>
21+
<CrossIcon />
22+
</button>
23+
</div>
24+
);
25+
};
26+
27+
export default ExploreDropdownHeaderMobile;

‎src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerSwitchContainer.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import type { ReactNode } from 'react';
2+
import styles from '../MapFeatureExplorer.module.scss';
3+
4+
interface Props {
5+
label: string;
6+
switchComponent: ReactNode;
7+
showDivider: boolean;
8+
}
9+
10+
const LayerSwitchContainer = ({
11+
label,
12+
switchComponent,
13+
showDivider,
14+
}: Props) => {
15+
return (
16+
<>
17+
<div className={styles.layerSwitchContainer}>
18+
<div className={styles.mapLayer}>
19+
<p>{label}</p>
20+
{showDivider && <hr />}
21+
</div>
22+
<div className={styles.switchContainer}>{switchComponent}</div>
23+
</div>
24+
{showDivider && <hr />}
25+
</>
26+
);
27+
};
28+
29+
export default LayerSwitchContainer;

‎src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/MapLayerControlPanel.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import type { ChangeEvent } from 'react';
2+
import type { MapOptions } from '../../../ProjectsMapContext';
3+
4+
import { StyledSwitch } from '../CustomSwitch';
5+
import styles from '../MapFeatureExplorer.module.scss';
6+
import LayerSwitchContainer from './LayerSwitchContainer';
7+
8+
interface Props {
9+
category?: string;
10+
exploreConfig: {
11+
label: string;
12+
color: string | undefined;
13+
showDivider: boolean;
14+
}[];
15+
mapOptions?: MapOptions;
16+
updateMapOption?: (option: keyof MapOptions, value: boolean) => void;
17+
}
18+
19+
const MapLayerControlPanel = ({
20+
category,
21+
exploreConfig,
22+
mapOptions,
23+
updateMapOption,
24+
}: Props) => {
25+
return (
26+
<section className={styles.exploreItemSection}>
27+
{category && <h2>{category}</h2>}
28+
<div>
29+
{exploreConfig.map((item) => (
30+
<LayerSwitchContainer
31+
key={item.label}
32+
showDivider={item.showDivider}
33+
switchComponent={
34+
<StyledSwitch
35+
checked={mapOptions?.['showProjects'] || false}
36+
customColor={item.color}
37+
onChange={(
38+
_event: ChangeEvent<HTMLInputElement>,
39+
checked: boolean
40+
) => {
41+
if (updateMapOption) {
42+
updateMapOption('showProjects', checked);
43+
}
44+
}}
45+
/>
46+
}
47+
label={item.label}
48+
/>
49+
))}
50+
</div>
51+
</section>
52+
);
53+
};
54+
55+
export default MapLayerControlPanel;

0 commit comments

Comments
 (0)