@kalisio/kdk 1.3.6 → 1.5.0

package/lib/map/client/components/widget/KTimeSeries.vue

@@ -18,7 +18,7 @@
         </div>
       </div>
       <div v-else class="absolute-center">
-        <k-label :text="$t('KTimeSeries.NO_DATA_AVAILABLE')" icon-size="48px" />
+        <k-stamp icon="las la-exclamation-circle"  icon-size="3rem" :text="$t('KTimeSeries.NO_DATA_AVAILABLE')" text-size="1rem" />
       </div>
     </div>
   </div>
@@ -32,7 +32,10 @@ import centroid from '@turf/centroid'
 import chroma from 'chroma-js'
 import Chart from 'chart.js'
 import 'chartjs-plugin-annotation'
+import Papa from 'papaparse'
 import { getTimeInterval } from '../../utils'
+import { downloadAsBlob } from '../../../../core/client/utils'
+import { Time } from '../../../../core/client/time'
 import { baseWidget } from '../../../../core/client/mixins'
 
 export default {
@@ -100,6 +103,10 @@ export default {
     hasVariable (name, properties) {
       return (properties[name] && Array.isArray(properties[name]))
     },
+    getSelectedRunTime () {
+      // Set default run as latest
+      return this.runTime || _.last(this.runTimes)
+    },
     setupTimeTicks () {
       if (!this.times || !this.graphWidth) return
       // Choose the right step size to ensure we have almost 100px between hour ticks
@@ -144,9 +151,27 @@ export default {
         this.timeRange = null
       }
     },
+    setupAvailableRunTimes () {
+      this.runTimes = []
+      // FIXME: to be used when all issues are correctly fixed in weacast
+
+      /*
+      const runTime = this.probedLocation.runTime
+
+      this.probedVariables.forEach(variable => {
+        // Check if we are targetting a specific level
+        const name = (this.kActivity.selectedLevel ? `${variable.name}-${this.kActivity.selectedLevel}` : variable.name)
+
+        if (runTime && runTime[name]) this.runTimes.push(runTime[name])
+      })
+      // Make union of all available run times
+      this.runTimes = _.union(...this.runTimes).map(time => moment.utc(time)).sort((a, b) => a - b)
+      */
+    },
     setupAvailableDatasets () {
       this.datasets = []
       const time = this.probedLocation.time || this.probedLocation.forecastTime
+      const runTime = this.probedLocation.runTime
       const properties = this.probedLocation.properties
       // Generate a color palette in case the variables does not provide it
       const colors = _.shuffle(chroma.scale('Spectral').colors(this.probedVariables.length))
@@ -157,11 +182,19 @@ export default {
         const label = this.$t(variable.label) || variable.label
         // Aggregated variable available for feature ?
         if (this.hasVariable(name, properties)) {
+          // Build data structure as expected by visualisation
+          let values = properties[name].map((value, index) => ({ x: time[name][index], y: value }))
+          // Keep only selected value if multiple are provided for the same time (eg different forecasts)
+          if (!_.isEmpty(_.get(runTime, name)) && this.getSelectedRunTime()) {
+            values = values.filter((value, index) => (runTime[name][index] === this.getSelectedRunTime().toISOString()))
+          } else values = _.uniqBy(values, 'x')
+          // Then transform to date object as expected by visualisation
+          values = values.map((value) => Object.assign(value, { x: new Date(value.x) })).filter(this.filter)
           this.datasets.push(_.merge({
             label: `${label} (${unit})`,
             borderColor: colors[index],
             backgroundColor: colors[index],
-            data: properties[name].map((value, index) => ({ x: new Date(time[name][index]), y: value })).filter(this.filter),
+            data: values,
             yAxisID: unit
           }, _.omit(variable.chartjs, 'yAxis')))
         }
@@ -275,13 +308,14 @@ export default {
           // Setup the graph
           this.setupAvailableTimes()
           this.setupTimeTicks()
+          this.setupAvailableRunTimes()
           this.setupAvailableDatasets()
           this.setupAvailableYAxes()
 
-          const date = _.get(this.kActivity.currentFormattedTime, 'date.short')
-          const time = _.get(this.kActivity.currentFormattedTime, 'time.long')
-          const dateFormat = _.get(this.kActivity.currentTimeFormat, 'date.short')
-          const timeFormat = _.get(this.kActivity.currentTimeFormat, 'time.long')
+          const date = _.get(Time.getCurrentFormattedTime(), 'date.short')
+          const time = _.get(Time.getCurrentFormattedTime(), 'time.long')
+          const dateFormat = _.get(Time.getFormat(), 'date.short')
+          const timeFormat = _.get(Time.getFormat(), 'time.long')
 
           this.config = {
             type: 'line',
@@ -333,7 +367,7 @@ export default {
             }
           }
           // Is current time visible in data time range ?
-          const currentTime = moment.utc(this.kActivity.currentFormattedTime.iso)
+          const currentTime = moment.utc(Time.getCurrentFormattedTime().iso)
           if (this.timeRange && currentTime.isBetween(...this.timeRange)) {
             this.config.options.annotation = {
               drawTime: 'afterDatasetsDraw',
@@ -380,6 +414,14 @@ export default {
     onUpdateSpan (span) {
       this.$store.set('timeseries.span', span)
     },
+    onUpdateRun (runTime) {
+      this.runTime = runTime
+      // Update tooltip action
+      const action = _.find(this.actions, { id: 'run-options' })
+      action.tooltip = this.$t('KTimeSeries.RUN') + ' (' + Time.format(this.getSelectedRunTime(), 'date.short') +
+        ' - ' + Time.format(this.getSelectedRunTime(), 'time.short') + ')'
+      this.setupGraph()
+    },
     updateProbedLocationHighlight () {
       if (!this.probedLocation) return
       const windDirection = (this.kActivity.selectedLevel ? `windDirection-${this.kActivity.selectedLevel}` : 'windDirection')
@@ -396,6 +438,20 @@ export default {
     onCenterOn () {
       this.kActivity.centerOnSelection()
     },
+    onExportSeries () {
+      const json = this.times.map(time => {
+        const row = {
+          [this.$t('KTimeSeries.TIME_LABEL')]: time.toISOString()
+        }
+        this.datasets.forEach(dataset => {
+          const value = _.find(dataset.data, item => item.x.toISOString() === time.toISOString())
+          row[dataset.label] = value ? value.y : null
+        })
+        return row
+      })
+      const csv = Papa.unparse(json)
+      downloadAsBlob(csv, this.$t('KTimeSeries.SERIES_EXPORT_FILE'), 'text/csv;charset=utf-8;')
+    },
     updateProbedLocationName () {
       this.probedLocationName = ''
       if (!this.probedLocation) return
@@ -403,6 +459,38 @@ export default {
       if (name) this.probedLocationName = name
     },
     async refresh () {
+      // Select the current span as default option in UX
+      const span = this.$store.get('timeseries.span')
+      const spanOptions = [
+        { badge: '3H', value: 180 },
+        { badge: '6H', value: 360 },
+        { badge: '12H', value: 720 },
+        { badge: '24H', value: 1440 },
+        { badge: '48H', value: 2880 },
+        { badge: '72H', value: 4320 },
+        { badge: '96H', value: 5760 }
+      ]
+      spanOptions.forEach(option => {
+        if (option.value === span) {
+          option.default = true
+        }
+      })
+      // Registers the base actions
+      this.actions = [
+        { id: 'center-view', icon: 'las la-eye', tooltip: 'KTimeSeries.CENTER_ON', handler: this.onCenterOn },
+        { id: 'export-feature', icon: 'las la-file-download', tooltip: this.$t('KTimeSeries.EXPORT_SERIES'), handler: this.onExportSeries },
+        {
+          component: 'input/KOptionsChooser',
+          id: 'timespan-options',
+          icon: 'las la-history',
+          tooltip: 'KTimeSeries.SPAN',
+          options: spanOptions,
+          on: { event: 'option-chosen', listener: this.onUpdateSpan }
+        }
+      ]
+      // Clear previous run timle setup if any
+      this.runTime = null
+      // Then manage selection
       this.kActivity.addSelectionHighlight('time-series')
       this.kActivity.centerOnSelection()
       // Update timeseries data if required
@@ -429,46 +517,46 @@ export default {
           (name ? ` (${name})` : ` (${longitude.toFixed(2)}°, ${latitude.toFixed(2)}°)`))
       }
       this.updateProbedLocationName()
-      this.setupGraph()
+      await this.setupGraph()
       this.updateProbedLocationHighlight()
+
+      // When forecast data are available allow to select wich run to use
+      if (this.runTimes && (this.runTimes.length > 1)) {
+        // Select latest runTime as default option
+        const runOptions = this.runTimes.map(runTime => ({
+          label: Time.format(runTime, 'date.short') + ' - ' + Time.format(runTime, 'time.short'),
+          value: runTime
+        }))
+        _.last(runOptions).default = true
+        // Registers the action
+        this.actions.push({
+          component: 'input/KOptionsChooser',
+          id: 'run-options',
+          icon: 'las la-clock',
+          tooltip: this.$t('KTimeSeries.RUN') + ' (' + Time.format(this.getSelectedRunTime(), 'date.short') +
+            ' - ' + Time.format(this.getSelectedRunTime(), 'time.short') + ')',
+          options: runOptions,
+          on: { event: 'option-chosen', listener: this.onUpdateRun }
+        })
+      }
     }
   },
   created () {
     // Load the required components
     this.$options.components['k-panel'] = this.$load('frame/KPanel')
-    this.$options.components['k-label'] = this.$load('frame/KLabel')
-    // Registers the actions
-    this.actions = [
-      { id: 'center-view', icon: 'las la-eye', tooltip: 'KTimeSeries.CENTER_ON', handler: this.onCenterOn },
-      {
-        component: 'input/KOptionsChooser',
-        id: 'timespan-options',
-        icon: 'las la-history',
-        tooltip: 'KTimeSeries.SPAN',
-        options: [
-          { badge: '3H', value: 180 },
-          { badge: '6H', value: 360 },
-          { badge: '12H', value: 720, default: true },
-          { badge: '24H', value: 1440 },
-          { badge: '48H', value: 2880 },
-          { badge: '72H', value: 4320 },
-          { badge: '96H', value: 5760 }
-        ],
-        on: { event: 'option-chosen', listener: this.onUpdateSpan }
-      }
-    ]
+    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
     // Refresh the component
     this.refresh()
   },
   mounted () {
-    this.kActivity.$on('current-time-changed', this.refresh)
+    this.$events.$on('time-current-time-changed', this.refresh)
     this.$events.$on('time-format-changed', this.refresh)
     this.$events.$on('timeseries-span-changed', this.refresh)
     this.kActivity.$on('forecast-model-changed', this.refresh)
     this.kActivity.$on('forecast-level-changed', this.refresh)
   },
   beforeDestroy () {
-    this.kActivity.$off('current-time-changed', this.refresh)
+    this.$events.$off('time-current-time-changed', this.refresh)
     this.$events.$off('time-format-changed', this.refresh)
     this.$events.$off('timeseries-span-changed', this.refresh)
     this.kActivity.$off('forecast-model-changed', this.refresh)

package/lib/map/client/i18n/map_en.json

@@ -11,7 +11,10 @@
     "ALERTS_LIMIT": "Too much alerts to display all of them",
     "FILE_IMPORT_ERROR": "File import has failed",
     "CANNOT_CHECK_ALERT_MISSING_SERVICE": "Last check failed due to unavailable service",
-    "CANNOT_CHECK_ALERT_MISSING_DATA": "Last check failed due to unavailable data"
+    "CANNOT_CHECK_ALERT_MISSING_DATA": "Last check failed due to unavailable data",
+    "INVALID_GEOJSON_FILE": "{{file}} is not a valid GeoJSON file",
+    "INVALID_GPX_FILE": "{{file}} is not a valid GPX file",
+    "INVALID_KML_FILE": "{{file}} is not a valid KML file"
   },
   "mixins": {
     "navigator": {
@@ -63,7 +66,10 @@
       "SEARCH_LOCATION": "Search a location",
       "ADD_FAVORITE": "Add to favorite views",      
       "SYNCHRONIZE_TIMELINE_LABEL": "Synchronize with timeline",
-      "TOOLS": "Tools"
+      "TOOLS": "Tools",
+      "SAVE_LAYER_EDITION_CHANGES": "Save edition changes",
+      "DISCARD_LAYER_EDITION_CHANGES": "Discard edition changes",
+      "CAPTURE_VIEW": "Capture the view"
     },
     "timeseries": {
       "FORECAST_PROBE": "Forecast"
@@ -199,7 +205,31 @@
     "LAYER_CATEGORY_NAME_FIELD_LABEL": "Enter the name of this category",
     "LAYER_CATEGORY_ICON_FIELD_LABEL": "Select an icon for this category",
     "LAYER_CATEGORY_LAYERS_FIELD_LABEL": "Select the layers in this category",
-    "LAYER_CATEGORY_EXCLUSIVE_FIELD_LABEL": "Make selection exclusive within this category"
+    "LAYER_CATEGORY_EXCLUSIVE_FIELD_LABEL": "Make selection exclusive within this category",
+    "UPDATE_SETTINGS_TITLE": "Your settings",
+    "TIME_FORMAT_SETTINGS": "Time/Date format",
+    "TIME_FORMAT_SHORT_TIME_FIELD_LABEL": "Short time format",
+    "TIME_FORMAT_SHORT_TIME_FIELD_HELPER": "<a target='_blank' href='https://momentjs.com/docs/#/displaying/format/'>&#x1F6C8;</a>",
+    "TIME_FORMAT_LONG_TIME_FIELD_LABEL": "Long time format",
+    "TIME_FORMAT_LONG_TIME_FIELD_HELPER": "<a target='_blank' href='https://momentjs.com/docs/#/displaying/format/'>&#x1F6C8;</a>",
+    "TIME_FORMAT_SHORT_DATE_FIELD_LABEL": "Short date format",
+    "TIME_FORMAT_SHORT_DATE_FIELD_HELPER": "<a target='_blank' href='https://momentjs.com/docs/#/displaying/format/'>&#x1F6C8;</a>",
+    "TIME_FORMAT_LONG_DATE_FIELD_LABEL": "Long date format",
+    "TIME_FORMAT_LONG_DATE_FIELD_HELPER": "<a target='_blank' href='https://momentjs.com/docs/#/displaying/format/'>&#x1F6C8;</a>",
+    "TIME_FORMAT_SHORT_YEAR_FIELD_LABEL": "Short year format",
+    "TIME_FORMAT_SHORT_YEAR_FIELD_HELPER": "<a target='_blank' href='https://momentjs.com/docs/#/displaying/format/'>&#x1F6C8;</a>",
+    "TIME_FORMAT_LONG_YEAR_FIELD_LABEL": "Long year format",
+    "TIME_FORMAT_LONG_YEAR_FIELD_HELPER": "<a target='_blank' href='https://momentjs.com/docs/#/displaying/format/'>&#x1F6C8;</a>",
+    "TIME_FORMAT_UTC_FIELD_LABEL": "UTC time display mode",
+    "MAP_SETTINGS": "Map parameters",
+    "RESTORE_VIEW_FIELD_LABEL": "Save current extent",
+    "RESTORE_LAYERS_FIELD_LABEL": "Save active layers",
+    "LOCATION_FORMAT_LABEL": "Location format",
+    "LOCATION_FORMAT_HELPER": "<a target='_blank' href='https://github.com/nerik/formatcoords#formatting'>&#x1F6C8;</a>",
+    "TIMELINE_SETTINGS": "Timeline parameters",
+    "TIMELINE_STEP": "Timeline step (in minutes)",
+    "TIMESERIES_SETTINGS": "Timeseries parameters",
+    "TIMESERIES_SPAN": "Timeseries span (in hours)"
   },
   "tours": {
     "navigation-bar": {
@@ -223,7 +253,7 @@
       "TOGGLE_CATALOG_LABEL": "Open the catalog with this button."
     },
     "favorite-views": {
-      "FAVORITE_VIEWS_LIST_LABEL": "View the list of your favorite views.",
+      "FAVORITE_VIEWS_LIST_LABEL": "When you have defined some favorite views they are listed here, otherwise you can directly create your first one.",
       "FAVORITE_VIEWS_LIST_ACTIONS_LABEL": "Sort your views by name or update time and seek for a target one.",
       "FAVORITE_VIEW_ACTIONS_LABEL": "Remove a view by using this button.",
       "ADD_FAVORITE_VIEW_LABEL": "Add a new views using this button.",
@@ -243,7 +273,7 @@
       "METEO_LAYERS_LABEL": "Each layer will then target data of a specific meteorological element from this model.",
       "MANAGE_LAYER_CATEGORIES_LABEL": "You can manage the categories of your own data layers.",
       "MANAGE_LAYER_CATEGORIES_LINK_LABEL": "How to manage the categories",
-      "CATEGORIES_LIST_LABEL": "View the list of your categories.",
+      "CATEGORIES_LIST_LABEL": "When you have defined some categories they are listed here, otherwise you can directly create your first one.",
       "CATEGORIES_LIST_ACTIONS_LABEL": "Sort your categories by name or update time and seek for a target one.",
       "CATEGORY_ACTIONS_LABEL": "Update or remove a category by using these buttons.",
       "ADD_CATEGORY_LABEL": "Add a new category using this button.",
@@ -281,9 +311,9 @@
       "SERVICE_LAYER_LABEL": "Select the target OGC service layer to connect to.",
       "LAYER_NAME_LABEL": "Enter the name of your new data layer.",
       "LAYER_DESCRIPTION_LABEL": "Then provide a description for your new data layer.",
-      "LAYER_FEATURE_ID_LABEL": "Choose an identifier to uniquely identify the features of your layer.",
+      "LAYER_FEATURE_ID_LABEL": "Last, choose an identifier to uniquely identify the features of your layer.",
       "LAYER_STYLE_LABEL": "Select the style to be used for your layer.",
-      "LAYER_SCHEMA_LABEL": "Last, select the data schema of your features (JSON schema file).",
+      "LAYER_SCHEMA_LABEL": "Select the data schema of your features (JSON schema file).",
       "IMPORT_LAYER_LABEL": "Import existing data as a new data layer.",
       "IMPORT_LAYER_LINK_LABEL": "How to import map data",
       "IMPORT_NEW_LAYER_LABEL": "Confirm the creation of your new layer and the map will be centered on your new layer.",
@@ -302,19 +332,26 @@
   },
   "KOwsLayerField": {
     "UNABLE_TO_DESCRIBE_FEATURE_TYPE": "Failed fetching layer's description.",
-    "UNSUPPORTED_LAYER_CRS": "The projection used by this layer is not supported."
+    "UNSUPPORTED_LAYER_CRS": "The projection used by this layer is not supported.",
+    "UNSUPPORTED_LAYER_FORMAT": "The data format used by this layer is not supported."
   },
   "KLocationField": {
     "SEARCH": "$t(SEARCH)",
     "NO_RESULTS": "$t(EMPTY)"
   },
   "KLocationMap": {
-    "RESTORE_BUTTON": "Restore position",
-    "RECENTER_BUTTON": "Recenter map"
+    "DRAW_LINE": "Draw a line",
+    "DRAW_POLYGON": "Draw a polygon",
+    "LOCATE_BUTTON": "Locate me",
+    "RECENTER_BUTTON": "Recenter map",
+    "CLOSE_BUTTON": "Close map"
   },
   "KLocationInput": {
-    "GEOLOCATE": "My position",
-    "LOCATION_MAP": "Location map"
+    "SEARCH_LOCATION": "Seek for an address",
+    "GEOLOCATE": "Locate me",
+    "MY_LOCATION": "My location",
+    "LOCATION_MAP": "Pick on a map",
+    "DRAW_MAP": "Draw on a map"
   },
   "KPositionIndicator": {
     "PLACEHOLDER": "Navigate the see the coordinates",
@@ -326,16 +363,23 @@
   "KTimeSeries": {
     "NO_DATA_AVAILABLE": "No data available",
     "CENTER_ON": "Center the view on the probed location",
-    "SPAN": "Timeseries span"
+    "SPAN": "Timeseries span",
+    "RUN": "Forecast run",
+    "TIME_LABEL": "Time",
+    "EXPORT_SERIES": "Export data",
+    "SERIES_EXPORT_FILE": "Series.csv"
   },
   "KCatalogPanel": {
     "BASE_LAYERS": "Base Layers",
     "TERRAIN_LAYERS": "Terrain layers",
     "OVERLAY_LAYERS": "My layers",
     "MEASURE_LAYERS": "Measure layers",
+    "INFRASTRUCTURE_LAYERS": "Infrastructures",
+    "ADMINISTRATIVE_LAYERS": "Administrative",
     "METEO_LAYERS": "Meteo forecasts",
     "BUSINESS_LAYERS": "Business layers",
-    "CAPTURED_LAYERS": "Captured views"
+    "CAPTURED_LAYERS": "Captured views",
+    "DEMOGRAPHY_LAYERS": "Demography layers"
   },
   "KFeaturesFilter": {
     "TITLE": "Data filter for layer {{layer}}",
@@ -376,9 +420,10 @@
   },
   "KLayerStyleForm": {
     "BASE": "Base properties",
-    "DEFAULT_VISIBILITY": "Visibilité par défaut",
+    "DEFAULT_VISIBILITY": "Visible by default",
     "MIN_ZOOM": "Visible from level",
     "MAX_ZOOM": "Visible until level",
+    "SELECTABLE": "Selectable",
     "LAYER_OPACITY": "Transparent layer",
     "OPACITY": "Opacity",
     "POINTS": "Markers",
@@ -452,19 +497,23 @@
   },
   "KFavoriteViews": {
     "FAVORITE_VIEWS_LABEL": "Favorite views",
-    "SORT_VIEWS": "Sort views",
+    "SORT": "Sort views",
     "CREATE_VIEW": "Create a new view",
-    "SAVE_BUTTON": "Save",
+    "ADD_BUTTON": "Add",
+    "BACK_BUTTON": "Back",
     "VIEW_LIST": "Back to list",
     "REMOVE_VIEW": "$t(REMOVE)"
   },
   "KLayerCategories": {
     "LAYER_CATEGORIES_LABEL": "Manage my categories",
+    "ADD_TITLE": "Add a new layer category",
+    "UPDATE_TITLE": "Update a layer category",
     "TITLE": "Manage layer categories",
-    "SORT_CATEGORIES": "Sort categories",
+    "SORT": "Sort categories",
     "CREATE_CATEGORY": "Create a new category",
-    "ADD_BUTTON": "OK",
-    "EDIT_BUTTON": "OK",
+    "BACK_BUTTON": "Back",
+    "ADD_BUTTON": "Add",
+    "EDIT_BUTTON": "Update",
     "CATEGORY_LIST": "Back to list",
     "EDIT_CATEGORY": "$t(EDIT)",
     "REMOVE_CATEGORY": "$t(REMOVE)"
@@ -501,5 +550,41 @@
     "FEATURE_ID_FIELD_LABEL": "$t(KAddLayer.FEATURE_ID_FIELD_LABEL)",
     "CATEGORY_FIELD_LABEL": "$t(KAddLayer.CATEGORY_FIELD_LABEL)",
     "CREATE_BUTTON": "Create"
+  },
+  "KLayerEditionToolbar": {
+    "ADD_POLYGON_FEATURES": "Add polygon features",
+    "ADD_RECTANGLE_FEATURES": "Add rectangle features",
+    "ADD_LINE_FEATURES": "Add linear features",
+    "ADD_POINT_FEATURES": "Add point features",
+    "EDIT_GEOMETRY": "Edit feature geometry",
+    "EDIT_PROPERTIES": "Edit feature properties",
+    "DRAG_FEATURES": "Move features",
+    "REMOVE_FEATURES": "Remove features"
+  },
+  "KCaptureToolbar": {
+    "SD_LABEL": "Standard Definition",
+    "SD_DESCRIPTION": "4:3, 640 x 480",
+    "HD_LABEL": "High Definition",
+    "HD_DESCRIPTION": "16:9, 1280 x 720",
+    "FHD_LABEL": "Full HD",
+    "FHD_DESCRIPTION": "16:9, 1920 x 1080",
+    "QHD_LABEL": "Quad HD",
+    "QHD_DESCRIPTION": "16:9, 2560 x 1440",
+    "2K_LABEL": "2K",
+    "2K_DESCRIPTION": "1:1.77, 2048 x 1080",
+    "4K_LABEL": "4K or Ultra HD",
+    "4K_DESCRIPTION": "1:1.9, 3840 x 2160",
+    "8K_LABEL": "8K or Full Ultra HD",
+    "8K_DESCRIPTION": "16∶9, 7680 x 4320",
+    "CAPTURE_ACTION": "Capture view",
+    "CAPTURING_VIEW": "Waiting for capturing view"
+  },
+  "KMeasureTool": {
+    "TOOL_BUTTON_LABEL": "Display the measure tool",
+    "CLEAR": "Clear all measurements",
+    "MEASURE_DISTANCE": "Measure a distance",
+    "MEASURE_AREA": "Measure an area",
+    "DISPLAY_MEASURE_VALUE": "Display measure values",
+    "CLICK_TO_CHANGE_UNIT": "Click to change unit"
   }
 }