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) => ({