add datepicker

app/src/components/map/DatePickerControl.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="datePickerControls">
+    <v-tooltip v-if="!show" left>
+      <template v-slot:activator="{ on }">
+        <v-btn
+          :color="$vuetify.theme.currentTheme.background"
+          class="pa-0 elevation-2 round datePickerBtn"
+          style="min-width: 0"
+          v-on="on"
+          @click="show = true"
+        >
+          <v-icon>mdi-calendar</v-icon>
+        </v-btn>
+      </template>
+      <span>Choose date</span>
+    </v-tooltip>
+    <v-date-picker v-else elevation="2" v-model="selectedDate" />
+  </div>
+</template>
+
+<script>
+import { VDatePicker } from 'vuetify/lib';
+import { getMapInstance } from '@/components/map/map';
+
+export default {
+  props: {
+    mapId: String,
+  },
+  components: {
+    VDatePicker,
+  },
+  data() {
+    return {
+      show: false,
+      selectedDate: null,
+    };
+  },
+  watch: {
+    show(value) {
+      if (value) {
+        getMapInstance(this.mapId).map.once('click', () => {
+          this.show = false;
+        });
+      }
+    },
+    selectedDate(date) {
+      this.$store.commit('features/SET_SELECTED_DATE', date);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.datePickerControls {
+  .datePickerBtn {
+    width: 36px;
+    height: 36px !important;
+    pointer-events: initial;
+  }
+}
+</style>

app/src/components/map/Map.vue

@@ -127,6 +127,10 @@
         :key="dataLayerName  + '_customArea'"
         :drawnArea.sync="drawnArea"
       />
+      <DatePickerControl
+        class="pointerEvents"
+        :mapId="mapId"
+      />
       <div
         v-if="$route.name !== 'demo'"
         class="pointerEvents mt-auto mb-2"
@@ -180,6 +184,7 @@ import getCluster from '@/components/map/Cluster';
 import SpecialLayer from '@/components/map/SpecialLayer.vue';
 import LayerSwipe from '@/components/map/LayerSwipe.vue';
 import CustomAreaButtons from '@/components/map/CustomAreaButtons.vue';
+import DatePickerControl from '@/components/map/DatePickerControl.vue';
 import { getMapInstance } from '@/components/map/map';
 import MapOverlay from '@/components/map/MapOverlay.vue';
 import IndicatorTimeSelection from '@/components/IndicatorTimeSelection.vue';
@@ -222,6 +227,7 @@ export default {
     IndicatorTimeSelection,
     LayerSwipe,
     CustomAreaButtons,
+    DatePickerControl,
     SubaoiLayer,
     MapOverlay,
     IframeButton,

app/src/config/esa.js

@@ -1775,6 +1775,50 @@ export const globalIndicators = [
       },
     },
   },
+  {
+    properties: {
+      indicatorObject: {
+        dataLoadFinished: true,
+        country: 'all',
+        city: 'Europe',
+        siteName: 'global',
+        description: 'Number of Trucks',
+        indicator: 'E12c',
+        lastIndicatorValue: 'Regional Truck Traffic Motorways',
+        indicatorName: 'Motorways',
+        subAoi: {
+          type: 'FeatureCollection',
+          features: [],
+        },
+        lastColorCode: 'primary',
+        eoSensor: null,
+        aoiID: 'W2',
+        time: getDailyDates('2020-01-01', '2021-12-31'),
+        inputData: [''],
+        yAxis: 'Number of trucks detected',
+        display: [{
+          dateFormatFunction: (date) => `${DateTime.fromISO(date).toFormat('yyyy-MM-dd')}/${DateTime.fromISO(date).plus({ days: 1 }).toFormat('yyyy-MM-dd')}`,
+          layers: 'SENTINEL-2-L2A-TRUE-COLOR',
+          name: 'Daily Sentinel 2 L2A',
+          minZoom: 7,
+          maxZoom: 18,
+          legendUrl: 'legends/esa/AWS_E12C_NEW_MOTORWAY.png',
+          datePickerShown: true,
+          presetView: {
+            type: 'FeatureCollection',
+            features: [{
+              type: 'Feature',
+              properties: {},
+              geometry: wkt.read('POLYGON((-8 55,25 55,25 40,-8 40,-8 55))').toJson(),
+            }],
+          },
+          areaIndicator: trucksAreaIndicator,
+          features: trucksFeatures,
+          drawnAreaLimitExtent: true,
+        }],
+      },
+    },
+  },
   {
     properties: {
       indicatorObject: {

app/src/store/modules/features.js

@@ -18,6 +18,7 @@ const state = {
     custom: [],
   },
   selectedArea: null,
+  selectedDate: null,
   selectedFeatures: [],
 };
 
@@ -280,6 +281,9 @@ const mutations = {
   SET_SELECTED_AREA(state, area) {
     state.selectedArea = area;
   },
+  SET_SELECTED_DATE(state, date) {
+    state.selectedDate = date;
+  },
   SET_ADMIN_BORDER_FEATURE_SELECTED(state, feature) {
     state.adminBorderFeatureSelected = feature;
   },