From d55be53c4f1d5a32748ba1caae14db1dcb6bb2e3 Mon Sep 17 00:00:00 2001 From: Anthony Amaro Date: Tue, 8 Aug 2023 06:50:57 -0700 Subject: [PATCH 1/3] feat: implement ticket MAPB-157 --- .../translations/leftPanel.translations.ts | 92 +++++++++++++++++-- .../layersPanel/GenericLayerControl.tsx | 14 +++ .../sharedComponents/CanopyDensityPicker.tsx | 87 ++++++++++++++++-- .../sharedComponents/InfoContent.tsx | 2 + .../sharedComponents/canopyDensityPicker.scss | 39 ++++++++ src/js/controllers/mapController.ts | 1 + src/js/helpers/LayerFactory.ts | 7 +- src/js/helpers/layerFactoryHelpers/index.ts | 14 +++ src/js/store/appState/actions.ts | 17 ++++ src/js/store/appState/reducers.ts | 21 +++++ src/js/store/appState/types.ts | 21 ++++- 11 files changed, 294 insertions(+), 21 deletions(-) create mode 100644 src/js/components/sharedComponents/canopyDensityPicker.scss create mode 100644 src/js/helpers/layerFactoryHelpers/index.ts diff --git a/configs/translations/leftPanel.translations.ts b/configs/translations/leftPanel.translations.ts index 056f56146..089b562ea 100644 --- a/configs/translations/leftPanel.translations.ts +++ b/configs/translations/leftPanel.translations.ts @@ -591,34 +591,106 @@ export const dataTabConfig = { }; export const treesMosaicConfig = { en: { - displayLabel: ['Displaying Trees in Mosaic Landscapes with', 'tree cover.'], + displayLabel: ['', 'Displaying >40% tree extent probability at 10 meter resolution'], }, az: { - displayLabel: ['Göstərir', 'örtük sıxlığı.'], + displayLabel: ['', 'Displaying >40% tree extent probability at 10 meter resolution'], }, nl: { - displayLabel: ['Weergeven', 'luifeldichtheid.'], + displayLabel: ['', 'Displaying >40% tree extent probability at 10 meter resolution'], }, hy: { - displayLabel: ['Ցուցադրվում է ', 'Սաղարթի խտություն '], + displayLabel: ['', 'Displaying >40% tree extent probability at 10 meter resolution'], }, ka: { - displayLabel: ['წარმოდგენილია', 'ვარჯის სიმჭიდროვე.'], + displayLabel: ['', 'Displaying >40% tree extent probability at 10 meter resolution'], }, fr: { - displayLabel: ['Affichage', 'Densité de la canopée.'], + displayLabel: ['', `Affichage de >40% de probabilité d'étendue des arbres à une résolution de 10 mètres`], }, es: { - displayLabel: ['Mostrando', 'densidad de follaje.'], + displayLabel: ['', 'Mostrando >40% de probabilidad de extensión arbórea a resolución de 10 metros'], }, pt: { - displayLabel: ['Exibindo', 'densidade de dossel'], + displayLabel: ['', 'Exibindo uma probabilidade de >40% de extensão de árvores a uma resolução de 10 metros'], }, id: { - displayLabel: ['Displaying Trees in Mosaic Landscapes with', 'tree cover.'], + displayLabel: ['', 'Displaying >40% tree extent probability at 10 meter resolution'], }, zh: { - displayLabel: ['显示中', '林冠覆盖密度'], + displayLabel: ['', 'Displaying >40% tree extent probability at 10 meter resolution'], + }, +}; + +export const treesMosaicHectareConfig = { + en: { + // displayLabel: ['Displaying Trees in Mosaic Landscapes with', 'tree cover.'], + // displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover.'], + displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover'], + }, + az: { + // displayLabel: ['Göstərir', 'örtük sıxlığı.'], + displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover'], + }, + nl: { + // displayLabel: ['Weergeven', 'luifeldichtheid.'], + displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover'], + }, + hy: { + // displayLabel: ['Ցուցադրվում է ', 'Սաղարթի խտություն '], + displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover'], + }, + ka: { + // displayLabel: ['წარმოდგენილია', 'ვარჯის სიმჭიდროვე.'], + displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover'], + }, + fr: { + displayLabel: ['Affichage du couvert arboré à une résolution de 0,5 hectare et à', 'couvert arboré'], + }, + es: { + displayLabel: ['Visualización de la cubierta arbórea con una resolución de 0,5 hectáreas y en', 'cubierta arbórea'], + }, + pt: { + displayLabel: ['Exibindo a cobertura de árvores em resolução de 0,5 hectare e em', 'cobertura de árvores'], + }, + id: { + displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover'], + }, + zh: { + displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover'], + }, +}; + +export const tropicalTreeHectareBtnCongif = { + en: { + displayLabel: ['0.5 hectare', '10x10 meter'], + }, + az: { + displayLabel: ['0.5 hectare', '10x10 meter'], + }, + nl: { + displayLabel: ['0.5 hectare', '10x10 meter'], + }, + hy: { + displayLabel: ['0.5 hectare', '10x10 meter'], + }, + ka: { + displayLabel: ['0.5 hectare', '10x10 meter'], + }, + fr: { + displayLabel: ['0.5 hectare', '10×10 mètres'], + }, + es: { + displayLabel: ['0.5 hectáreas', '10x10 metros'], + }, + pt: { + displayLabel: ['0.5 hectare', '10x10 metros'], + }, + id: { + displayLabel: ['0.5 hectare', '10x10 meter'], + }, + zh: { + displayLabel: ['0.5 hectare', '10x10 meter'], }, }; diff --git a/src/js/components/leftPanel/layersPanel/GenericLayerControl.tsx b/src/js/components/leftPanel/layersPanel/GenericLayerControl.tsx index dfbd6f071..e086c4291 100644 --- a/src/js/components/leftPanel/layersPanel/GenericLayerControl.tsx +++ b/src/js/components/leftPanel/layersPanel/GenericLayerControl.tsx @@ -438,6 +438,19 @@ const GenericLayerControl = (props: LayerControlProps): React.ReactElement => { layerTitle = gfwLayerLabel; } + const t = () => { + if (layer.visible && layer.id === 'TREES_MOSAIC_LANDSCAPES') { + console.log('layer', layer); + return ( + + ); + } + }; return (
{ {layer?.visible && densityPicker && } {layer?.visible && layer.id === 'TREE_COVER_HEIGHT' && } + {/* {t()} */} {/*@TODO make this active when windspeed potential urls are available*/} {/*{layer?.visible && layer.id === 'WIND_SPEED' && }*/} diff --git a/src/js/components/sharedComponents/CanopyDensityPicker.tsx b/src/js/components/sharedComponents/CanopyDensityPicker.tsx index 345c34b32..62365a116 100644 --- a/src/js/components/sharedComponents/CanopyDensityPicker.tsx +++ b/src/js/components/sharedComponents/CanopyDensityPicker.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { RootState } from '../../store'; -import { renderModal } from '../../store/appState/actions'; +import { renderModal, setActiveTreeMosaicLayer, setTreeMosaicHectaresValue } from '../../store/appState/actions'; import { markValueMap } from '../mapWidgets/widgetContent/CanopyDensityContent'; import { treeMosaicDensityValue } from '../mapWidgets/widgetContent/TreeMosaicContent'; import { @@ -10,20 +10,30 @@ import { forestCarbonGrossRemovalConfig, forestCarbonNetFluxConfig, treesMosaicConfig, + treesMosaicHectareConfig, + tropicalTreeHectareBtnCongif, } from '../../../../configs/translations/leftPanel.translations'; import { forestCarbonRemovalValue } from '../mapWidgets/widgetContent/ForestGrossRemovalContent'; import { forestCarbonGrossEmisionValue } from '../mapWidgets/widgetContent/ForestCarbonGrossEmissionContent'; import { forestCarbonNetFluxValue } from '../mapWidgets/widgetContent/ForesCarbonNetFlux'; import { handleCustomColorTheme } from '../../../utils'; +import { mapController } from '../../controllers/mapController'; +import { LayerFactory } from '../../helpers/LayerFactory'; +import './canopyDensityPicker.scss'; interface CanopyDensityProps { type?: string; } const CanopyDensityPicker = (props: CanopyDensityProps): JSX.Element => { + const allAvailableLayers = useSelector((store: RootState) => store.mapviewState.allAvailableLayers); + const dispatch = useDispatch(); + const [selected, setSelected] = React.useState<'hectare' | 'meter'>('meter'); const customColorTheme = useSelector((store: RootState) => store.appSettings.customColorTheme); const density = useSelector((store: RootState) => store.appState.leftPanel.density); + const hectareValue = useSelector((store: RootState) => store.appState.leftPanel.treeMosaicHectaresValue); + const selectedLanguage = useSelector((store: RootState) => store.appState.selectedLanguage); let config = canopyDensityPickerConfig[selectedLanguage]; let densityValueMap = markValueMap[density]; @@ -59,15 +69,76 @@ const CanopyDensityPicker = (props: CanopyDensityProps): JSX.Element => { } } + const handleClick = async (type: 'meter' | 'hectare') => { + const layerConfig = allAvailableLayers.find((layer: any) => layer.id === 'TREES_MOSAIC_LANDSCAPES') as any; + + if (type === selected) return; + setSelected(type); + dispatch(setActiveTreeMosaicLayer(type)); + + const mapview = mapController.getMapView(); + mapController.removeMapLayer('TREES_MOSAIC_LANDSCAPES'); + const updatedUMDLayer = await LayerFactory(mapview, layerConfig); + mapController._map?.add(updatedUMDLayer); + }; + + const handleSelect = async (event: any) => { + const layerConfig = allAvailableLayers.find((layer: any) => layer.id === 'TREES_MOSAIC_LANDSCAPES') as any; + + const value = Number(event.target.value); + dispatch(setTreeMosaicHectaresValue(value)); + const mapview = mapController.getMapView(); + mapController.removeMapLayer('TREES_MOSAIC_LANDSCAPES'); + const updatedUMDLayer = await LayerFactory(mapview, layerConfig); + mapController._map?.add(updatedUMDLayer); + }; + return (
- {displayLabel[0]} - - {displayLabel[1]} + {props.type !== 'TREES_MOSAIC_LANDSCAPES' && {displayLabel[0]}} + + {props.type === 'TREES_MOSAIC_LANDSCAPES' && ( +
+
+ + +
+ {selected === 'hectare' && ( + <> + {treesMosaicHectareConfig[selectedLanguage]?.displayLabel[0]} + + + {treesMosaicHectareConfig[selectedLanguage]?.displayLabel[1]} + + )} + {selected === 'meter' && {displayLabel[1]}} +
+ )} + + {props.type !== 'TREES_MOSAIC_LANDSCAPES' && ( + <> + + {displayLabel[1]} + + )}
); }; diff --git a/src/js/components/sharedComponents/InfoContent.tsx b/src/js/components/sharedComponents/InfoContent.tsx index 56f2611dc..e91c56f2f 100644 --- a/src/js/components/sharedComponents/InfoContent.tsx +++ b/src/js/components/sharedComponents/InfoContent.tsx @@ -110,6 +110,8 @@ const getServiceGroupContent = async (technicalName: string): Promise => { const baseURL = 'https://production-api.globalforestwatch.org/v1/gfw-metadata'; const metaURL = `${baseURL}/${technicalName}`; + console.log('metaURL', { metaURL }); + return await fetch(metaURL) .then((res) => res.json()) .then((results) => { diff --git a/src/js/components/sharedComponents/canopyDensityPicker.scss b/src/js/components/sharedComponents/canopyDensityPicker.scss new file mode 100644 index 000000000..ebd7c5617 --- /dev/null +++ b/src/js/components/sharedComponents/canopyDensityPicker.scss @@ -0,0 +1,39 @@ +.tropical-tree-cover-toggle-wrapper { + .toggle-btn { + border: 1px solid #f0ab00; + margin: 0.7rem auto; + width: 70%; + border-radius: 30px; + padding: 0; + display: flex; + align-items: center; + + button { + font-size: 12px; + border: 1px solid transparent; + width: 50%; + border-radius: 30px; + background: transparent; + height: 100%; + color: black; + + &.active { + background: #f0ab00; + border: 1px solid #f0ab00; + color: white; + } + } + } + + select { + border: 1px solid #f0ab00; + border-radius: 30px; + font-size: 12px; + display: inline-block; + margin-left: 0.3rem; + } + .tree-cover-text { + display: inline-block; + margin-left: 0.5rem; + } +} diff --git a/src/js/controllers/mapController.ts b/src/js/controllers/mapController.ts index d41c9ddbb..8bab2956c 100644 --- a/src/js/controllers/mapController.ts +++ b/src/js/controllers/mapController.ts @@ -1723,6 +1723,7 @@ export class MapController { const { mapviewState } = store.getState(); const treeCoverLayerInfo: any = mapviewState.allAvailableLayers.find((l) => l.id === 'TREE_COVER'); const treeLayer: any = this._map?.findLayerById('TREE_COVER'); + if (treeLayer && treeCoverLayerInfo) { const oldLayer = treeLayer; oldLayer.urlTemplate = treeCoverLayerInfo.url.replace('30', value); diff --git a/src/js/helpers/LayerFactory.ts b/src/js/helpers/LayerFactory.ts index 91471d9e2..f31fe0d9d 100644 --- a/src/js/helpers/LayerFactory.ts +++ b/src/js/helpers/LayerFactory.ts @@ -20,6 +20,7 @@ import { forestCarbonNetFluxValue } from '../components/mapWidgets/widgetContent import { createForestCarbonNetFlux } from '../layers/ForestCarbonNetFlux'; import { umdCoverLand } from '../layers/UmdCoverLand'; import { createBaseTileLayer } from '../layers/BaseTileLayer'; +import { getUrl } from './layerFactoryHelpers'; interface LayerOptions { id: string; @@ -137,8 +138,10 @@ export async function LayerFactory(mapView: any, layerConfig: LayerProps): Promi esriLayer.refresh(); break; case 'tree-mosaic': - const treeDensityValue = treeMosaicDensityValue[appState.leftPanel.density]; - layerConfig.url = layerConfig.url.replace(/(tcd_)(?:[^/]+)/, `tcd_${treeDensityValue}`); + const activeLayerType = appState.leftPanel.activeTreeMosaicLayer; + const hectareValue = appState.leftPanel.treeMosaicHectaresValue; + layerConfig.url = getUrl({ type: activeLayerType, hectareValue }); + const constructor = await createTreeMosaicCover(); const treeMosaicLayer = new constructor({ id: layerConfig.id, diff --git a/src/js/helpers/layerFactoryHelpers/index.ts b/src/js/helpers/layerFactoryHelpers/index.ts new file mode 100644 index 000000000..cefe81695 --- /dev/null +++ b/src/js/helpers/layerFactoryHelpers/index.ts @@ -0,0 +1,14 @@ +import { TreeMosaicLayerTypes } from 'src/js/store/appState/types'; + +export interface GetUrlParams { + type: TreeMosaicLayerTypes; + hectareValue: number; +} + +export const getUrl = ({ type, hectareValue }: GetUrlParams) => { + if (type === 'hectare') { + return `https://tiles.globalforestwatch.org/wri_tropical_tree_cover/v2020/ttcd_${hectareValue}/{z}/{x}/{y}.png`; + } else { + return 'https://tiles.globalforestwatch.org/wri_trees_in_mosaic_landscapes/v20220922/tcd_40/{z}/{x}/{y}.png'; + } +}; diff --git a/src/js/store/appState/actions.ts b/src/js/store/appState/actions.ts index 2efb4c917..1877d7b95 100644 --- a/src/js/store/appState/actions.ts +++ b/src/js/store/appState/actions.ts @@ -45,6 +45,9 @@ import { SET_GLAD_2_END, SET_RADD_ALERT_START, SET_RADD_ALERT_END, + SET_TREE_MOSAIC_HECTARES_VALUE, + TreeMosaicLayerTypes, + SET_ACTIVE_TREE_MOSAIC_LAYER, } from './types'; export function setSelectedSearchWidgetLayer(payload: AppState['selectedSearchWidgetLayer']) { @@ -353,3 +356,17 @@ export function setLandCoverYearValue(payload: number[]) { payload, }; } + +export function setTreeMosaicHectaresValue(payload: number) { + return { + type: SET_TREE_MOSAIC_HECTARES_VALUE, + payload, + }; +} + +export function setActiveTreeMosaicLayer(payload: TreeMosaicLayerTypes) { + return { + type: SET_ACTIVE_TREE_MOSAIC_LAYER, + payload, + }; +} diff --git a/src/js/store/appState/reducers.ts b/src/js/store/appState/reducers.ts index 390d25118..adfbe7618 100644 --- a/src/js/store/appState/reducers.ts +++ b/src/js/store/appState/reducers.ts @@ -43,10 +43,12 @@ import { SET_VIIRS_END, SET_VIIRS_START, SET_WIND_SPEED_POTENTIAL, + SET_TREE_MOSAIC_HECTARES_VALUE, TOGGLE_TABVIEW_PANEL, SET_LAND_COVER_YEAR_VALUE, SET_RADD_ALERT_START, SET_RADD_ALERT_END, + SET_ACTIVE_TREE_MOSAIC_LAYER, } from './types'; const initialState: AppState = { @@ -89,6 +91,9 @@ const initialState: AppState = { gfwLayerLabel: 'Integrated Deforestation Alerts', gfwLayerSubtitle: '(daily, 10m, tropics, UMD/GLAD and WUR)', windSpeedPotential: 50, + + treeMosaicHectaresValue: 10, + activeTreeMosaicLayer: 'meter', }, measureContent: { activeButton: '', @@ -361,6 +366,22 @@ export function appStateReducer(state = initialState, action: AppStateTypes): Ap windSpeedPotential: action.payload, }, }; + case SET_TREE_MOSAIC_HECTARES_VALUE: + return { + ...state, + leftPanel: { + ...state.leftPanel, + treeMosaicHectaresValue: action.payload, + }, + }; + case SET_ACTIVE_TREE_MOSAIC_LAYER: + return { + ...state, + leftPanel: { + ...state.leftPanel, + activeTreeMosaicLayer: action.payload, + }, + }; case SET_VERSIONED_LAYER: { const versionedState = state.leftPanel.versionedLayer; versionedState[Object.keys(action.payload)[0]] = Object.values(action.payload)[0] as string; diff --git a/src/js/store/appState/types.ts b/src/js/store/appState/types.ts index baa04c135..34b7fae0a 100644 --- a/src/js/store/appState/types.ts +++ b/src/js/store/appState/types.ts @@ -1,5 +1,7 @@ import { LayerFeatureResult } from '../mapview/types'; +export type TreeMosaicLayerTypes = 'meter' | 'hectare'; + export interface LeftPanel { tabViewVisible: boolean; activeTab: string; @@ -30,6 +32,9 @@ export interface LeftPanel { versionedLayer: { [key: string]: string; }; + + treeMosaicHectaresValue: number; + activeTreeMosaicLayer: TreeMosaicLayerTypes; } interface SpecificAreaResults { @@ -117,6 +122,8 @@ export const SET_GFW_LAYER_SUBTITLE = 'SET_GFW_LAYER_SUBTITLE'; export const SET_IMAGE_OBJECT = 'SET_IMAGE_OBJECT'; export const SET_WIND_SPEED_POTENTIAL = 'SET_WIND_SPEED_POTENTIAL'; export const SET_MULTI_POLYGON_SELECTION_MODE = 'SET_MULTI_POLYGON_SELECTION_MODE'; +export const SET_TREE_MOSAIC_HECTARES_VALUE = 'SET_TREE_MOSAIC_HECTARES_VALUE'; +export const SET_ACTIVE_TREE_MOSAIC_LAYER = 'SET_ACTIVE_TREE_MOSAIC_LAYER'; export const SET_ACTIVE_MULTI_INPUT = 'SET_ACTIVE_MULTI_INPUT'; export const SET_ANALYSIS_FEATURE_LIST = 'SET_ANALYSIS_FEATURE_LIST'; @@ -338,6 +345,16 @@ interface SetLandCoverYearValue { payload: number[]; } +interface SetTreeMosaicHectaresValue { + type: typeof SET_TREE_MOSAIC_HECTARES_VALUE; + payload: number; +} + +interface SetActiveTreeMosaicLayer { + type: typeof SET_ACTIVE_TREE_MOSAIC_LAYER; + payload: TreeMosaicLayerTypes; +} + export type AppStateTypes = | ToggleTabviewPanelAction | RenderModalAction @@ -382,4 +399,6 @@ export type AppStateTypes = | SetMultiPolygonSelectionMode | SetActiveMultiInput | SetAnalysisFeatureList - | SetLandCoverYearValue; + | SetLandCoverYearValue + | SetTreeMosaicHectaresValue + | SetActiveTreeMosaicLayer; From 63ab9689c5d53e6a2115a6b3721d0b89d39f2035 Mon Sep 17 00:00:00 2001 From: Anthony Amaro Date: Tue, 8 Aug 2023 07:24:36 -0700 Subject: [PATCH 2/3] update: remove console logs --- .../leftPanel/layersPanel/GenericLayerControl.tsx | 14 -------------- src/js/components/sharedComponents/InfoContent.tsx | 2 -- 2 files changed, 16 deletions(-) diff --git a/src/js/components/leftPanel/layersPanel/GenericLayerControl.tsx b/src/js/components/leftPanel/layersPanel/GenericLayerControl.tsx index e086c4291..dfbd6f071 100644 --- a/src/js/components/leftPanel/layersPanel/GenericLayerControl.tsx +++ b/src/js/components/leftPanel/layersPanel/GenericLayerControl.tsx @@ -438,19 +438,6 @@ const GenericLayerControl = (props: LayerControlProps): React.ReactElement => { layerTitle = gfwLayerLabel; } - const t = () => { - if (layer.visible && layer.id === 'TREES_MOSAIC_LANDSCAPES') { - console.log('layer', layer); - return ( - - ); - } - }; return (
{ {layer?.visible && densityPicker && } {layer?.visible && layer.id === 'TREE_COVER_HEIGHT' && } - {/* {t()} */} {/*@TODO make this active when windspeed potential urls are available*/} {/*{layer?.visible && layer.id === 'WIND_SPEED' && }*/} diff --git a/src/js/components/sharedComponents/InfoContent.tsx b/src/js/components/sharedComponents/InfoContent.tsx index e91c56f2f..56f2611dc 100644 --- a/src/js/components/sharedComponents/InfoContent.tsx +++ b/src/js/components/sharedComponents/InfoContent.tsx @@ -110,8 +110,6 @@ const getServiceGroupContent = async (technicalName: string): Promise => { const baseURL = 'https://production-api.globalforestwatch.org/v1/gfw-metadata'; const metaURL = `${baseURL}/${technicalName}`; - console.log('metaURL', { metaURL }); - return await fetch(metaURL) .then((res) => res.json()) .then((results) => { From 3d52612747dd3669135b4911b7b468252bcc87a8 Mon Sep 17 00:00:00 2001 From: Anthony Amaro Date: Tue, 8 Aug 2023 07:26:33 -0700 Subject: [PATCH 3/3] update: remove console logs --- configs/translations/leftPanel.translations.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/configs/translations/leftPanel.translations.ts b/configs/translations/leftPanel.translations.ts index 089b562ea..75edf7906 100644 --- a/configs/translations/leftPanel.translations.ts +++ b/configs/translations/leftPanel.translations.ts @@ -624,24 +624,18 @@ export const treesMosaicConfig = { export const treesMosaicHectareConfig = { en: { - // displayLabel: ['Displaying Trees in Mosaic Landscapes with', 'tree cover.'], - // displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover.'], displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover'], }, az: { - // displayLabel: ['Göstərir', 'örtük sıxlığı.'], displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover'], }, nl: { - // displayLabel: ['Weergeven', 'luifeldichtheid.'], displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover'], }, hy: { - // displayLabel: ['Ցուցադրվում է ', 'Սաղարթի խտություն '], displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover'], }, ka: { - // displayLabel: ['წარმოდგენილია', 'ვარჯის სიმჭიდროვე.'], displayLabel: ['Displaying tree cover at 0.5 hectare resolution and at', 'tree cover'], }, fr: {