diff --git a/public/images/ndvi.png b/public/images/ndvi.png new file mode 100644 index 000000000..1d54aa032 Binary files /dev/null and b/public/images/ndvi.png differ diff --git a/src/components/map/layers/earthEngine/EarthEnginePopup.js b/src/components/map/layers/earthEngine/EarthEnginePopup.js index 6c39d1c70..b65b62532 100644 --- a/src/components/map/layers/earthEngine/EarthEnginePopup.js +++ b/src/components/map/layers/earthEngine/EarthEnginePopup.js @@ -89,7 +89,9 @@ const EarthEnginePopup = (props) => { const header = ( - {title} {period} + {title} +
+ {period} {!onlySum &&
{unit}
} ) diff --git a/src/components/map/layers/earthEngine/styles/EarthEnginePopup.module.css b/src/components/map/layers/earthEngine/styles/EarthEnginePopup.module.css index b4fd6f059..bb73a2dd5 100644 --- a/src/components/map/layers/earthEngine/styles/EarthEnginePopup.module.css +++ b/src/components/map/layers/earthEngine/styles/EarthEnginePopup.module.css @@ -1,5 +1,6 @@ .popup { color: var(--colors-grey900); + min-width: 150px; max-height: 240px; overflow-y: auto; padding-right: var(--spacers-dp8); diff --git a/src/constants/earthEngineLayers/index.js b/src/constants/earthEngineLayers/index.js index 5ef679e21..dd868222a 100644 --- a/src/constants/earthEngineLayers/index.js +++ b/src/constants/earthEngineLayers/index.js @@ -11,6 +11,7 @@ import populationAgeSex from './population_age_sex_WorldPop.js' import populationTotal from './population_total_WorldPop.js' import precipitationMonthly from './precipitation_monthly_ERA5-Land.js' import temperatureMonthly from './temperature_monthly_ERA5-Land.js' +import ndviModis250m from './ndvi_MOD13Q1.js' const earthEngineLayers = [ populationTotal, @@ -20,6 +21,7 @@ const earthEngineLayers = [ precipitationMonthly, temperatureMonthly, landcover, + ndviModis250m, legacyBuildings, legacyNighttime, legacyPopulation100m, diff --git a/src/constants/earthEngineLayers/ndvi_MOD13Q1.js b/src/constants/earthEngineLayers/ndvi_MOD13Q1.js new file mode 100644 index 000000000..a9b3b3a29 --- /dev/null +++ b/src/constants/earthEngineLayers/ndvi_MOD13Q1.js @@ -0,0 +1,52 @@ +import i18n from '@dhis2/d2-i18n' +import { EARTH_ENGINE_LAYER } from '../layers.js' +import { BY_YEAR } from '../periods.js' + +export default { + layer: EARTH_ENGINE_LAYER, + layerId: 'MODIS/061/MOD13Q1/NDVI', + datasetId: 'MODIS/061/MOD13Q1', + format: 'ImageCollection', + img: 'images/ndvi.png', + name: i18n.t('Vegetation index (NDVI)'), + description: i18n.t( + 'Normalized difference vegetation index (NDVI) is used to quantify vegetation greenness and is useful in understanding vegetation density and assessing changes in plant health.' + ), + source: 'NASA LP DAAC / Google Earth Engine', + sourceUrl: + 'https://developers.google.com/earth-engine/datasets/catalog/MODIS_061_MOD13Q1', + unit: i18n.t('NDVI'), + resolution: { + spatial: i18n.t('250 meter'), + temporal: i18n.t('16-day'), + temporalCoverage: i18n.t('Febuary 2000 - One month ago'), + }, + aggregations: ['min', 'max', 'mean', 'median', 'sum', 'stdDev', 'variance'], + defaultAggregations: ['mean'], + periodType: BY_YEAR, + filters: [ + { + type: 'eq', + arguments: ['system:index', '$1'], + }, + ], + band: 'NDVI', + style: { + min: 0, + max: 8000, + palette: [ + '#ffffe5', + '#f7fcb9', + '#d9f0a3', + '#addd8e', + '#78c679', + '#41ab5d', + '#238443', + '#006837', + '#004529', + ], // YlGn (ColorBrewer) + }, + popup: '{name}: {value}', + maskOperator: 'gte', + opacity: 0.9, +} diff --git a/src/util/earthEngine.js b/src/util/earthEngine.js index 5310b9e3d..bb2e5b211 100644 --- a/src/util/earthEngine.js +++ b/src/util/earthEngine.js @@ -5,17 +5,22 @@ import { EE_MONTHLY } from '../constants/periods.js' import { apiFetch } from './api.js' import { formatStartEndDate } from './time.js' +const oneDayInMs = 24 * 60 * 60 * 1000 + export const classAggregation = ['percentage', 'hectares', 'acres'] export const hasClasses = (type) => classAggregation.includes(type) -export const getStartEndDate = (data) => - formatStartEndDate( +export const getStartEndDate = (data) => { + const year = new Date(data['system:time_end']).getFullYear() + const period = formatStartEndDate( data['system:time_start'], - data['system:time_end'], // - 7200001, // Minus 2 hrs to end the day before + data['system:time_end'] - oneDayInMs, // Subtract one day to make it inclusive null, false ) + return `${period} ${year}` +} const getStaticFiltersFromDynamic = (filters, ...args) => filters.map((filter) => ({