extent fix

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;
 }

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<SetStateAction<boolean>>;
   filters: { [key: string]: string[] | number[] };
-  data: DataSites[];
+  data: DataDitesProperties[];
   setFilters: Dispatch<SetStateAction<{ [key: string]: string[] | number[] }>>;
   isFetching: boolean;
   isFetched: boolean;

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: {

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;
 };