diff --git a/src/containers/datasets/habitat-extent/hooks.tsx b/src/containers/datasets/habitat-extent/hooks.tsx index c5b0d552e..653dc2901 100644 --- a/src/containers/datasets/habitat-extent/hooks.tsx +++ b/src/containers/datasets/habitat-extent/hooks.tsx @@ -232,34 +232,36 @@ export function useLayers({ opacity?: number; visibility?: Visibility; }): LayerProps[] { - return [ - { - id: `${id}_${year}_line`, - type: 'fill', - source: 'habitat_extent', - 'source-layer': `mng_mjr_${year}`, - paint: { - 'fill-color': '#06C4BD', - 'fill-opacity': opacity, - }, - layout: { - visibility, - }, - }, - { - id: `${id}_${year}_fill`, - type: 'line', - source: 'habitat_extent', - 'source-layer': `mng_mjr_${year}`, - paint: { - 'line-color': '#06C4BD', - 'line-opacity': opacity, - 'line-width': ['interpolate', ['exponential', 0.7], ['zoom'], 0, 8, 12, 0], - 'line-blur': ['interpolate', ['linear'], ['zoom'], 0, 20, 12, 0], - }, - layout: { - visibility, - }, - }, - ]; + return year + ? [ + { + id: `${id}_${year}_line`, + type: 'fill', + source: 'habitat_extent', + 'source-layer': `mng_mjr_${year}`, + paint: { + 'fill-color': '#06C4BD', + 'fill-opacity': opacity, + }, + layout: { + visibility, + }, + }, + { + id: `${id}_${year}_fill`, + type: 'line', + source: 'habitat_extent', + 'source-layer': `mng_mjr_${year}`, + paint: { + 'line-color': '#06C4BD', + 'line-opacity': opacity, + 'line-width': ['interpolate', ['exponential', 0.7], ['zoom'], 0, 8, 12, 0], + 'line-blur': ['interpolate', ['linear'], ['zoom'], 0, 20, 12, 0], + }, + layout: { + visibility, + }, + }, + ] + : null; } diff --git a/src/containers/datasets/restoration-sites/filter-sites/index.tsx b/src/containers/datasets/restoration-sites/filter-sites/index.tsx index 89f3c9027..7c800147b 100644 --- a/src/containers/datasets/restoration-sites/filter-sites/index.tsx +++ b/src/containers/datasets/restoration-sites/filter-sites/index.tsx @@ -11,13 +11,13 @@ import Loading from 'components/loading'; import MultiSelect from 'components/select-multi'; import { WIDGET_CARD_WRAPPER_STYLE, BUTTON_STYLES } from 'styles/widgets'; -import type { DataSites } from '../types'; +import type { DataDitesProperties } from '../types'; type FilterSitesProps = { open: boolean; onChangeModalVisibility: Dispatch>; filters: { [key: string]: string[] | number[] }; - data: DataSites[]; + data: DataDitesProperties[]; setFilters: Dispatch>; isFetching: boolean; isFetched: boolean; diff --git a/src/containers/datasets/restoration-sites/hooks.tsx b/src/containers/datasets/restoration-sites/hooks.tsx index c1d113e67..d73bccde5 100644 --- a/src/containers/datasets/restoration-sites/hooks.tsx +++ b/src/containers/datasets/restoration-sites/hooks.tsx @@ -8,6 +8,7 @@ import { } from 'store/widgets/restoration-sites'; import { useQuery, UseQueryOptions } from '@tanstack/react-query'; +import { GeoJsonProperties, GeoJsonTypes } from 'geojson'; import { Visibility } from 'mapbox-gl'; import { useRecoilValue } from 'recoil'; @@ -18,7 +19,7 @@ import type { UseParamsOptions } from 'types/widget'; import API from 'services/api'; -import type { Data, DataResponse, DataFilters } from './types'; +import type { Data, DataResponse, DataFilters, RestorationSite } from './types'; // widget data export function useMangroveRestorationSites( @@ -113,6 +114,7 @@ export function useSource(): SourceProps { }); if (!restorationSiteFeatures) return null; + return { id: 'mangrove_rest_sites', type: 'geojson', @@ -171,24 +173,6 @@ export function useLayer({ visibility, }, }, - { - id: `${id}-cluster-text`, - metadata: { - position: 'top', - }, - type: 'symbol', - filter: ['!', ['has', 'point_count']], - layout: { - 'text-field': ['get', 'site_name'], - 'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'], - 'text-size': 12, - visibility, - }, - paint: { - 'text-color': '#ffffff', - 'text-opacity': opacity, - }, - }, { id: `${id}-cluster-count`, metadata: { diff --git a/src/containers/datasets/restoration-sites/types.d.ts b/src/containers/datasets/restoration-sites/types.d.ts index 88f37375b..b2b4fa85c 100644 --- a/src/containers/datasets/restoration-sites/types.d.ts +++ b/src/containers/datasets/restoration-sites/types.d.ts @@ -1,4 +1,4 @@ -export type DataSites = { +export type DataDitesProperties = { id: number; landscape_id: number; landscape_name: string; @@ -7,9 +7,17 @@ export type DataSites = { site_name: string; organizations: string; }; +interface RestorationSite { + type: 'Feature'; + geometry: { + type: string; + coordinates: [number, number]; + }; + properties: DataDitesProperties; +} export type Data = { - data: DataSites[]; + data: RestorationSite[]; location: string; };