New EE layers: NDVI and heat stress [DRAFT]

src/components/map/layers/earthEngine/EarthEnginePopup.js

@@ -89,7 +89,9 @@ const EarthEnginePopup = (props) => {
 
             const header = (
                 <caption>
-                    {title} {period}
+                    {title}
+                    <br />
+                    {period}
                     {!onlySum && <div className={styles.unit}>{unit}</div>}
                 </caption>
             )

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

src/constants/earthEngineLayers/index.js

@@ -11,6 +11,7 @@
 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 @@
     precipitationMonthly,
     temperatureMonthly,
     landcover,
+    ndviModis250m,
     legacyBuildings,
     legacyNighttime,
     legacyPopulation100m,

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,
+}

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