Skip to content

Commit

Permalink
Merge pull request #2403 from Plant-for-the-Planet-org/hotfix/single-…
Browse files Browse the repository at this point in the history
…trees-data-explorer

Show single tree plant locations on map and hide irrelevant data in data explorer
  • Loading branch information
mariahosfeld authored Feb 18, 2025
2 parents 6801bdb + bd50415 commit 446878e
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -136,8 +136,11 @@
.individualSpeciesContainer {
display: flex;

.speciesName {
> *:not(:last-child) {
border-right: 1px solid #68b03066;
}

.speciesName {
width: 120px;
white-space: nowrap;
overflow: hidden;
Expand All @@ -147,7 +150,6 @@
}

.count {
border-right: 1px solid #68b03066;
display: flex;
justify-content: center;
align-items: center;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,16 @@ const ListOfSpeciesPlanted = ({
<div className={styles.count}>
{getFormattedNumber(locale, species.treeCount)}
</div>
<div className={styles.totalPercentage}>
{(
(species.treeCount / plantLocationDetails.totalPlantedTrees) *
100
).toFixed(2)}
%
</div>
{plantLocationDetails.totalPlantedTrees > 1 && (
<div className={styles.totalPercentage}>
{(
(species.treeCount /
plantLocationDetails.totalPlantedTrees) *
100
).toFixed(2)}
%
</div>
)}
</div>
);
})}
Expand Down
34 changes: 31 additions & 3 deletions src/features/user/TreeMapper/Analytics/components/Map/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import type {
} from '../../../../../common/types/dataExplorer';
import type { ProjectType } from '../ProjectTypeSelector';
import type { ChangeEvent, MutableRefObject } from 'react';
import type { ViewportProps } from 'react-map-gl';
import type { ViewportProps, MapRef, MapEvent } from 'react-map-gl';

import { useContext, useEffect, useRef, useState } from 'react';
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { TextField } from '@mui/material';
import { useTranslations } from 'next-intl';
import { Search } from '@mui/icons-material';
Expand Down Expand Up @@ -91,7 +91,7 @@ export const MapContainer = () => {
const { setErrors } = useContext(ErrorHandlingContext);
const t = useTranslations('TreemapperAnalytics');

const mapRef: MutableRefObject<null> = useRef(null);
const mapRef: MutableRefObject<MapRef | null> = useRef(null);
const [mapState, setMapState] = useState({
mapStyle: EMPTY_STYLE,
dragPan: true,
Expand Down Expand Up @@ -340,6 +340,22 @@ export const MapContainer = () => {
}
};

const onMouseEnter = useCallback((event: MapEvent) => {
if (event.features && event.features.length > 0) {
if (mapRef.current) {
const map = mapRef.current.getMap();
map.getCanvas().style.cursor = 'pointer';
}
}
}, []);

const onMouseLeave = useCallback(() => {
if (mapRef.current) {
const map = mapRef.current.getMap();
map.getCanvas().style.cursor = '';
}
}, []);

// Handle search input change
// This will be used to filter the plant locations on the map based on the search input
// The search input can be either a HID or a Date
Expand Down Expand Up @@ -432,8 +448,20 @@ export const MapContainer = () => {
onViewStateChange={_handleViewport}
onViewportChange={(viewport) => setViewport(viewport)}
onClick={handleMapClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
interactiveLayerIds={['point-layer', 'plant-locations-fill']}
>
<Source type="geojson" data={plantLocations}>
<Layer
id={`point-layer`}
type="circle"
paint={{
'circle-color': '#007A49',
'circle-opacity': 0.5,
}}
filter={['==', ['geometry-type'], 'Point']}
/>
<Layer
id="plant-locations-fill"
type="fill"
Expand Down

0 comments on commit 446878e

Please sign in to comment.