@kalisio/kdk 2.1.5 → 2.1.6

package/core/client/components/account/KSendResetPassword.vue

@@ -89,7 +89,7 @@ async function apply () {
       }
     }
   } else {
-    $q.notify({ type: 'negative', message: i18n.t('KSendResetPassword.ERROR_INVALID_EMAIL') })  
+    $q.notify({ type: 'negative', message: i18n.t('KSendResetPassword.ERROR_INVALID_EMAIL') })
   }
   send.value = true
   processing.value = false

package/core/client/components/screen/KLoginScreen.vue

@@ -75,9 +75,8 @@ async function onLogin () {
       } catch (error) {
         $q.notify({ type: 'negative', message: i18n.t('KLoginScreen.LOGIN_ERROR') })
       }
-    }
-    else {
-      $q.notify({ type: 'negative', message: i18n.t('KLoginScreen.INVALID_EMAIL') })    
+    } else {
+      $q.notify({ type: 'negative', message: i18n.t('KLoginScreen.INVALID_EMAIL') })
     }
     loading.value = false
   }

package/map/client/components/catalog/KLayersSelector.vue

@@ -3,11 +3,11 @@
     <slot name="header" />
     <div v-if="layers.length > 0">
       <template v-for="layer in layers">
-        <component 
-          :is="layerRenderer.component" 
-          v-bind="layerRenderer.options" 
+        <component
+          :is="layerRenderer.component"
+          v-bind="layerRenderer.options"
           :layer="layer"
-          @toggled="onLayerToggled" 
+          @toggled="onLayerToggled"
           @filter-toggled="onLayerFilterToggled"
         />
       </template>

package/map/client/components/catalog/KViewsPanel.vue

@@ -1,10 +1,10 @@
 <template>
   <q-list dense bordered>
     <div class="no-padding" :style="panelStyle">
-      <KPanel 
-        id="favorite-views-toolbar" 
-        :content="toolbar" 
-        class="no-wrap q-pl-sm q-pr-md" 
+      <KPanel
+        id="favorite-views-toolbar"
+        :content="toolbar"
+        class="no-wrap q-pl-sm q-pr-md"
       />
       <KColumn
         class="q-pl-sm"

package/map/client/components/location/KLocationMap.vue

@@ -29,7 +29,7 @@ import { Geolocation } from '../../geolocation'
 import {
   setEngineJwt, coordinatesToGeoJSON, formatUserCoordinates,
   bindLeafletEvents, unbindLeafletEvents, createLeafletMarkerFromStyle, convertToLeafletFromSimpleStyleSpec
-} from '../../utils'
+} from '../../utils.map.js'
 
 export default {
   components: {

package/map/client/globe.js

@@ -1,6 +1,6 @@
 import * as commonMixins from './mixins/index.js'
 import * as globeMixins from './mixins/globe/index.js'
-import * as utils from './utils.js'
+import * as utils from './utils.globe.js'
 import init from './init.js'
 
 const mixins = Object.assign({}, commonMixins, { globe: globeMixins })

package/map/client/index.js

@@ -2,7 +2,7 @@ import * as composables from './composables/index.js'
 import * as commonMixins from './mixins/index.js'
 import * as mapMixins from './mixins/map/index.js'
 import * as globeMixins from './mixins/globe/index.js'
-import * as utils from './utils.js'
+import * as utils from './utils.all.js'
 import * as elevationUtils from './elevation-utils.js'
 import init from './init.js'
 const mixins = Object.assign({}, commonMixins, { map: mapMixins, globe: globeMixins })

package/map/client/map.js

@@ -1,7 +1,7 @@
 import * as composables from './composables/index.js'
 import * as commonMixins from './mixins/index.js'
 import * as mapMixins from './mixins/map/index.js'
-import * as utils from './utils.js'
+import * as utils from './utils.map.js'
 import init from './init.js'
 
 const mixins = Object.assign({}, commonMixins, { map: mapMixins })

package/map/client/mixins/globe/mixin.base-globe.js

@@ -8,7 +8,7 @@ import Cesium from 'cesium/Source/Cesium.js'
 import 'cesium/Source/Widgets/widgets.css'
 import BuildModuleUrl from 'cesium/Source/Core/buildModuleUrl.js'
 import { Geolocation } from '../../geolocation.js'
-import { convertCesiumHandlerEvent } from '../../utils.js'
+import { convertCesiumHandlerEvent } from '../../utils.globe.js'
 // Cesium has its own dynamic module loader requiring to be configured
 // Cesium files need to be also added as static assets of the applciation
 BuildModuleUrl.setBaseUrl('/Cesium/')

package/map/client/mixins/globe/mixin.popup.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import { Time, Units } from '../../../../core/client/index.js'
-import { getTextTable } from '../../utils.js'
+import { getTextTable } from '../../utils.globe.js'
 
 export const popup = {
   methods: {

package/map/client/mixins/globe/mixin.style.js

@@ -1,7 +1,7 @@
 import Cesium from 'cesium/Source/Cesium.js'
 import _ from 'lodash'
 import chroma from 'chroma-js'
-import { convertToCesiumFromSimpleStyleSpec, convertToCesiumObjects, CesiumStyleMappings, CesiumEntityTypes } from '../../utils.js'
+import { convertToCesiumFromSimpleStyleSpec, convertToCesiumObjects, CesiumStyleMappings, CesiumEntityTypes } from '../../utils.globe.js'
 
 export const style = {
   methods: {

package/map/client/mixins/map/mixin.base-map.js

@@ -28,7 +28,7 @@ import { getAppLocale } from '../../../../core/client/utils/index.js'
 import { uid } from 'quasar'
 import '../../leaflet/BoxSelection.js'
 import { Geolocation } from '../../geolocation.js'
-import { LeafletEvents, bindLeafletEvents, generatePropertiesSchema } from '../../utils.js' // https://github.com/socib/Leaflet.TimeDimension/issues/124
+import { LeafletEvents, bindLeafletEvents, generatePropertiesSchema } from '../../utils.map.js' // https://github.com/socib/Leaflet.TimeDimension/issues/124
 
 import markerIcon from 'leaflet/dist/images/marker-icon.png'
 import retinaIcon from 'leaflet/dist/images/marker-icon-2x.png'

package/map/client/mixins/map/mixin.canvas-layers.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import { CanvasDrawContext } from '../../canvas-draw-context.js'
-import { bindLeafletEvents } from '../../utils.js'
+import { bindLeafletEvents } from '../../utils.map.js'
 import L from 'leaflet'
 
 // Helper function to forward events when click through is enabled

package/map/client/mixins/map/mixin.edit-layers.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import L from 'leaflet'
 import { getType, getGeom } from '@turf/invariant'
 import { Dialog, uid } from 'quasar'
-import { bindLeafletEvents, unbindLeafletEvents } from '../../utils.js'
+import { bindLeafletEvents, unbindLeafletEvents } from '../../utils.map.js'
 
 // Events we listen while layer is in edition mode
 const mapEditEvents = ['pm:create']

package/map/client/mixins/map/mixin.geojson-layers.js

@@ -7,7 +7,7 @@ import { Time } from '../../../../core/client/time.js'
 import { GradientPath } from '../../leaflet/GradientPath.js'
 import { MaskLayer } from '../../leaflet/MaskLayer.js'
 import { TiledFeatureLayer } from '../../leaflet/TiledFeatureLayer.js'
-import { fetchGeoJson, LeafletEvents, bindLeafletEvents, unbindLeafletEvents, getFeatureId } from '../../utils.js'
+import { fetchGeoJson, LeafletEvents, bindLeafletEvents, unbindLeafletEvents, getFeatureId } from '../../utils.map.js'
 import * as wfs from '../../../common/wfs-utils.js'
 
 // Override default remove handler for leaflet-realtime due to

package/map/client/mixins/map/mixin.mapillary-layers.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import logger from 'loglevel'
-import { LeafletEvents, bindLeafletEvents } from '../../utils.js'
+import { LeafletEvents, bindLeafletEvents } from '../../utils.map.js'
 
 export const mapillaryLayers = {
   methods: {

package/map/client/mixins/map/mixin.popup.js

@@ -1,7 +1,7 @@
 import L from 'leaflet'
 import _ from 'lodash'
 import { Time, Units } from '../../../../core/client/index.js'
-import { getHtmlTable } from '../../utils.js'
+import { getHtmlTable } from '../../utils.map.js'
 
 export const popup = {
   methods: {

package/map/client/mixins/map/mixin.style.js

@@ -1,7 +1,7 @@
 import L from 'leaflet'
 import _ from 'lodash'
 import chroma from 'chroma-js'
-import { createLeafletMarkerFromStyle, convertToLeafletFromSimpleStyleSpec, LeafletStyleMappings } from '../../utils.js'
+import { createLeafletMarkerFromStyle, convertToLeafletFromSimpleStyleSpec, LeafletStyleMappings } from '../../utils.map.js'
 
 export const style = {
   methods: {

package/map/client/utils/index.js

@@ -0,0 +1,3 @@
+export * from './utils.js'
+export * from './utils.location.js'
+export * from './utils.schema.js'

package/map/client/utils/utils.js

@@ -0,0 +1,228 @@
+import _ from 'lodash'
+import rhumbBearing from '@turf/rhumb-bearing'
+import rhumbDistance from '@turf/rhumb-distance'
+import rotate from '@turf/transform-rotate'
+import scale from '@turf/transform-scale'
+import translate from '@turf/transform-translate'
+import chroma from 'chroma-js'
+import config from 'config'
+import formatcoords from 'formatcoords'
+import { buildUrl } from '../../../core/common/index.js'
+import { api, Store } from '../../../core/client/index.js'
+
+// Build a color map from a JS object specification
+export function buildColorMap (options) {
+  let colorMap
+  const classes = _.get(options, 'classes')
+  const domain = _.get(options, 'domain')
+  const scale = _.get(options, 'scale')
+  const invert = _.get(options, 'invertScale')
+  if (scale) {
+    if (classes) {
+      colorMap = chroma.scale(scale).classes(invert ? classes.slice().reverse() : classes)
+    } else if (domain) {
+      colorMap = chroma.scale(scale).domain(invert ? domain.slice().reverse() : domain)
+    }
+  }
+  return colorMap
+}
+
+export function transformFeatures (features, transform) {
+  features.forEach(feature => {
+    const scaling = _.get(transform, 'scale')
+    const rotation = _.get(transform, 'rotate')
+    const translation = _.get(transform, 'translate')
+    if (scaling) {
+      scale(feature, scaling.factor,
+        Object.assign(_.omit(scaling, ['factor']), { mutate: true }))
+    }
+    if (rotation) {
+      rotate(feature, rotation.angle,
+        Object.assign(_.omit(rotation, ['angle']), { mutate: true }))
+    }
+    if (translation) {
+      // Could be expressed as direction/distance or target point
+      // Take care that turfjs uses a rhumb line
+      if (translation.point) {
+        translation.distance = rhumbDistance(translation.pivot || [0, 0], translation.point)
+        translation.direction = rhumbBearing(translation.pivot || [0, 0], translation.point)
+        delete translation.pivot
+        delete translation.point
+      }
+      translate(feature, translation.distance, translation.direction,
+        Object.assign(_.omit(translation, ['direction', 'distance']), { mutate: true }))
+    }
+  })
+}
+
+export async function fetchGeoJson (dataSource, options = {}) {
+  const response = await fetch(dataSource)
+  if (response.status !== 200) {
+    throw new Error(`Impossible to fetch ${dataSource}: ` + response.status)
+  }
+  const data = await response.json()
+  const features = (data.type === 'FeatureCollection' ? data.features : [data])
+  if (typeof options.processor === 'function') {
+    features.forEach(feature => options.processor(feature))
+  } else if (typeof options.processor === 'string') {
+    const compiler = _.template(options.processor)
+    features.forEach(feature => compiler({ feature, properties: feature.properties }))
+  }
+  if (options.transform) {
+    transformFeatures(features, options.transform)
+  }
+  return data
+}
+
+// Find the nearest time of a given one in a given moment time list
+export function getNearestTime (time, times) {
+  // Look for the nearest time
+  let timeIndex = -1
+  let minDiff = Infinity
+  times.forEach((currentTime, index) => {
+    const diff = Math.abs(time.diff(currentTime))
+    if (diff < minDiff) {
+      minDiff = diff
+      timeIndex = index
+    }
+  })
+  return { index: timeIndex, difference: minDiff }
+}
+
+// Find the minimum or maximum time interval in a given moment time list
+export function getTimeInterval (times, mode = 'minimum') {
+  // Look for the nearest time
+  let interval = (mode === 'minimum' ? Infinity : 0)
+  times.forEach((currentTime, index) => {
+    if (index < (times.length - 1)) {
+      const diff = Math.abs(currentTime.diff(times[index + 1]))
+      if (mode === 'minimum') {
+        if (diff < interval) interval = diff
+      } else {
+        if (diff > interval) interval = diff
+      }
+    }
+  })
+  return interval
+}
+
+// Format (reverse) geocoding output
+export function formatGeocodingResult (element) {
+  let label = element.formattedAddress || ''
+  if (!label) {
+    if (element.streetNumber) label += (element.streetNumber + ', ')
+    if (element.streetName) label += (element.streetName + ' ')
+    if (element.city) label += (element.city + ' ')
+    if (element.zipcode) label += (' (' + element.zipcode + ')')
+  }
+  return label
+}
+
+// Helper to set a JWT as query param in a target URL
+export function setUrlJwt (item, path, baseUrl, jwtField, jwt) {
+  const url = _.get(item, path)
+  if (!url) return
+  // Check it conforms to required base URL
+  if (!url.startsWith(baseUrl)) return
+  // FIXME: specific case of Cesium OpenStreetMap provider
+  // Because Cesium generates the final url as base url + tile scheme + extension
+  // updating the base url property breaks it, for now we modify the extension
+  if ((path === 'cesium.url') && _.get(item, 'cesium.type') === 'OpenStreetMap') {
+    const ext = _.get(item, 'cesium.fileExtension', 'png')
+    _.set(item, 'cesium.fileExtension', ext + `?${jwtField}=${jwt}`)
+  } else {
+    _.set(item, path, buildUrl(url, { [jwtField]: jwt }))
+  }
+}
+
+// Helper to set required JWT as query param in a given set of layers for underlying engine
+export async function setEngineJwt (layers) {
+  // If we need to use API gateway forward token as query parameter
+  // (Leaflet does not support anything else by default as it mainly uses raw <img> tags)
+  let jwt = (config.gatewayJwt ? await api.get('storage').getItem(config.gatewayJwt) : null)
+  let jwtField = config.gatewayJwtField
+  // Check both the default built-in config or the server provided one if any (eg mobile apps)
+  const gatewayUrl = Store.get('capabilities.api.gateway', config.gateway)
+  if (jwt) {
+    layers.forEach(layer => {
+      setUrlJwt(layer, 'iconUrl', gatewayUrl, jwtField, jwt)
+      setUrlJwt(layer, 'leaflet.source', gatewayUrl, jwtField, jwt)
+      setUrlJwt(layer, 'opendap.url', gatewayUrl, jwtField, jwt)
+      setUrlJwt(layer, 'geotiff.url', gatewayUrl, jwtField, jwt)
+      setUrlJwt(layer, 'wfs.url', gatewayUrl, jwtField, jwt)
+      setUrlJwt(layer, 'wcs.url', gatewayUrl, jwtField, jwt)
+      setUrlJwt(layer, 'cesium.url', gatewayUrl, jwtField, jwt)
+      setUrlJwt(layer, 'cesium.source', gatewayUrl, jwtField, jwt)
+    })
+  }
+  // We might also proxy some data directly from the app when using object storage
+  // This is only for raw raster data not OGC protocols
+  jwt = (config.apiJwt ? await api.get('storage').getItem(config.apiJwt) : null)
+  jwtField = 'jwt'
+  const apiUrl = api.getBaseUrl()
+  if (jwt) {
+    layers.forEach(layer => {
+      setUrlJwt(layer, 'geotiff.url', apiUrl, jwtField, jwt)
+    })
+    // We also allow absolute URLs for app like /api/storage/xxx
+    layers.forEach(layer => {
+      setUrlJwt(layer, 'geotiff.url', '/', jwtField, jwt)
+    })
+  }
+  return layers
+}
+
+export function getFeatureId (feature, layer) {
+  let featureId = _.get(layer, 'featureId')
+  // We need at least an internal ID to uniquely identify features for updates
+  if (!featureId) featureId = '_id'
+  // Support compound index
+  featureId = (Array.isArray(featureId) ? featureId : [featureId])
+  return featureId.map(id => _.get(feature, 'properties.' + id, _.get(feature, id))).join('-')
+}
+
+export function formatUserCoordinates (lat, lon, format, options) {
+  if (format === 'aeronautical') {
+    const coords = formatcoords(lat, lon)
+    // longitude group: DDMMML where DD is degree (2 digits mandatory)
+    // MMM unit is in 0.1 minutes (trailing 0 optional)
+    // L is N/S
+    const latDeg = coords.latValues.degreesInt.toString().padStart(2, '0')
+    const latMin = Math.floor(coords.latValues.secondsTotal / 6).toString().padStart(3, '0')
+    const latDir = coords.north ? 'N' : 'S'
+    // longitude group: DDDMMML where DDD is degree (3 digits mandatory)
+    // MMM unit is in 0.1 minutes (trailing 0 optional)
+    // L is W/E
+    const lonDeg = coords.lonValues.degreesInt.toString().padStart(3, '0')
+    const lonMin = Math.floor(coords.lonValues.secondsTotal / 6).toString().padStart(3, '0')
+    const lonDir = coords.east ? 'E' : 'W'
+    return `${latDeg}${latMin}${latDir} ${lonDeg}${lonMin}${lonDir}`
+  }
+  return formatcoords(lat, lon).format(format, options)
+}
+
+export function coordinatesToGeoJSON (lat, lon, format, options) {
+  return {
+    type: 'Feature',
+    geometry: {
+      type: 'Point',
+      coordinates: [lon, lat]
+    },
+    properties: {
+      name: formatcoords(lat, lon).format(format, options)
+    }
+  }
+}
+
+export function parseCoordinates (str) {
+  const coords = _.split(_.trim(str), ',')
+  if (coords.length !== 2) return
+  const latitude = Number(coords[0])
+  if (_.isNaN(latitude)) return
+  const longitude = Number(coords[1])
+  if (_.isNaN(longitude)) return
+  return {
+    latitude,
+    longitude
+  }
+}

package/map/client/utils/utils.location.js

@@ -1,5 +1,5 @@
 import { Store, api } from '../../../core.client.js'
-import { formatGeocodingResult, parseCoordinates, formatUserCoordinates } from '../utils.js'
+import { formatGeocodingResult, parseCoordinates, formatUserCoordinates } from './utils.js'
 
 export async function searchLocation (pattern, options) {
   const locations = []

package/map/client/utils/utils.schema.js

@@ -0,0 +1,75 @@
+import _ from 'lodash'
+import { utils as kCoreUtils } from '../../../core/client/index.js'
+
+// Get JSON schema from GeoJson feature' properties
+export function generatePropertiesSchema (geoJson, name) {
+  const schema = {
+    $id: `http://www.kalisio.xyz/schemas/${_.kebabCase(name)}#`,
+    title: name,
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    type: 'object',
+    properties: {
+    }
+  }
+  // Enumerate all available properties/values in all features
+  const features = (geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson])
+  features.forEach(feature => {
+    // FIXME: we don't yet support nested objects in schema
+    const properties = (feature.properties ? kCoreUtils.dotify(feature.properties) : {})
+    _.forOwn(properties, (value, key) => {
+      // Property already registered ?
+      if (schema.properties['{key}']) {
+        const property = schema.properties[`${key}`]
+        // Try to find first non void value to select appropriate type
+        if (_.isNil(property)) schema.properties[`${key}`] = value
+      } else {
+        schema.properties[`${key}`] = value
+      }
+    })
+  })
+  _.forOwn(schema.properties, (value, key) => {
+    let type = (typeof value)
+    // For null/undefined value we will assume string by default
+    if ((type === 'object') || (type === 'undefined')) type = 'string'
+    schema.properties[`${key}`] = {
+      type,
+      nullable: true,
+      field: {
+        component: (type === 'number'
+          ? 'form/KNumberField'
+          : (type === 'boolean' ? 'form/KToggleField' : 'form/KTextField')),
+        helper: key,
+        label: key
+      }
+    }
+  })
+  return schema
+}
+
+export function updatePropertiesSchema (schema) {
+  const props = schema.properties
+  if (!props) return
+
+  const bestGuesses = {
+    undefined: 'form/KTextField',
+    object: 'form/KTextField',
+    string: 'form/KTextField',
+    number: 'form/KNumberField',
+    boolean: 'form/KToggleField'
+  }
+
+  // Loop over declared props and add best guesses to field components based on property type
+  for (const prop in props) {
+    const propEntry = props[prop]
+    // Field already here, skip entry
+    if (propEntry.field && propEntry.field.component) continue
+
+    propEntry.field = {
+      component: bestGuesses[propEntry.type],
+      label: prop,
+      helper: propEntry.description
+    }
+  }
+
+  return schema
+}

package/map/client/utils.all.js

@@ -0,0 +1,3 @@
+export * from './utils/index.js'
+export * from './leaflet/utils.js'
+export * from './cesium/utils.js'

package/map/client/utils.globe.js

@@ -0,0 +1,2 @@
+export * from './utils/index.js'
+export * from './cesium/utils.js'

package/map/client/utils.js

@@ -1,303 +1,4 @@
-import _ from 'lodash'
-import rhumbBearing from '@turf/rhumb-bearing'
-import rhumbDistance from '@turf/rhumb-distance'
-import rotate from '@turf/transform-rotate'
-import scale from '@turf/transform-scale'
-import translate from '@turf/transform-translate'
-import chroma from 'chroma-js'
-import config from 'config'
-import formatcoords from 'formatcoords'
-import { buildUrl } from '../../core/common/index.js'
-import { api, Store, utils as kCoreUtils } from '../../core/client/index.js'
-export * from './leaflet/utils.js'
-export * from './cesium/utils.js'
-
-// Build a color map from a JS object specification
-export function buildColorMap (options) {
-  let colorMap
-  const classes = _.get(options, 'classes')
-  const domain = _.get(options, 'domain')
-  const scale = _.get(options, 'scale')
-  const invert = _.get(options, 'invertScale')
-  if (scale) {
-    if (classes) {
-      colorMap = chroma.scale(scale).classes(invert ? classes.slice().reverse() : classes)
-    } else if (domain) {
-      colorMap = chroma.scale(scale).domain(invert ? domain.slice().reverse() : domain)
-    }
-  }
-  return colorMap
-}
-
-export function transformFeatures (features, transform) {
-  features.forEach(feature => {
-    const scaling = _.get(transform, 'scale')
-    const rotation = _.get(transform, 'rotate')
-    const translation = _.get(transform, 'translate')
-    if (scaling) {
-      scale(feature, scaling.factor,
-        Object.assign(_.omit(scaling, ['factor']), { mutate: true }))
-    }
-    if (rotation) {
-      rotate(feature, rotation.angle,
-        Object.assign(_.omit(rotation, ['angle']), { mutate: true }))
-    }
-    if (translation) {
-      // Could be expressed as direction/distance or target point
-      // Take care that turfjs uses a rhumb line
-      if (translation.point) {
-        translation.distance = rhumbDistance(translation.pivot || [0, 0], translation.point)
-        translation.direction = rhumbBearing(translation.pivot || [0, 0], translation.point)
-        delete translation.pivot
-        delete translation.point
-      }
-      translate(feature, translation.distance, translation.direction,
-        Object.assign(_.omit(translation, ['direction', 'distance']), { mutate: true }))
-    }
-  })
-}
-
-export async function fetchGeoJson (dataSource, options = {}) {
-  const response = await fetch(dataSource)
-  if (response.status !== 200) {
-    throw new Error(`Impossible to fetch ${dataSource}: ` + response.status)
-  }
-  const data = await response.json()
-  const features = (data.type === 'FeatureCollection' ? data.features : [data])
-  if (typeof options.processor === 'function') {
-    features.forEach(feature => options.processor(feature))
-  } else if (typeof options.processor === 'string') {
-    const compiler = _.template(options.processor)
-    features.forEach(feature => compiler({ feature, properties: feature.properties }))
-  }
-  if (options.transform) {
-    transformFeatures(features, options.transform)
-  }
-  return data
-}
-
-// Find the nearest time of a given one in a given moment time list
-export function getNearestTime (time, times) {
-  // Look for the nearest time
-  let timeIndex = -1
-  let minDiff = Infinity
-  times.forEach((currentTime, index) => {
-    const diff = Math.abs(time.diff(currentTime))
-    if (diff < minDiff) {
-      minDiff = diff
-      timeIndex = index
-    }
-  })
-  return { index: timeIndex, difference: minDiff }
-}
-
-// Find the minimum or maximum time interval in a given moment time list
-export function getTimeInterval (times, mode = 'minimum') {
-  // Look for the nearest time
-  let interval = (mode === 'minimum' ? Infinity : 0)
-  times.forEach((currentTime, index) => {
-    if (index < (times.length - 1)) {
-      const diff = Math.abs(currentTime.diff(times[index + 1]))
-      if (mode === 'minimum') {
-        if (diff < interval) interval = diff
-      } else {
-        if (diff > interval) interval = diff
-      }
-    }
-  })
-  return interval
-}
-
-// Format (reverse) geocoding output
-export function formatGeocodingResult (element) {
-  let label = element.formattedAddress || ''
-  if (!label) {
-    if (element.streetNumber) label += (element.streetNumber + ', ')
-    if (element.streetName) label += (element.streetName + ' ')
-    if (element.city) label += (element.city + ' ')
-    if (element.zipcode) label += (' (' + element.zipcode + ')')
-  }
-  return label
-}
-
-// Helper to set a JWT as query param in a target URL
-export function setUrlJwt (item, path, baseUrl, jwtField, jwt) {
-  const url = _.get(item, path)
-  if (!url) return
-  // Check it conforms to required base URL
-  if (!url.startsWith(baseUrl)) return
-  // FIXME: specific case of Cesium OpenStreetMap provider
-  // Because Cesium generates the final url as base url + tile scheme + extension
-  // updating the base url property breaks it, for now we modify the extension
-  if ((path === 'cesium.url') && _.get(item, 'cesium.type') === 'OpenStreetMap') {
-    const ext = _.get(item, 'cesium.fileExtension', 'png')
-    _.set(item, 'cesium.fileExtension', ext + `?${jwtField}=${jwt}`)
-  } else {
-    _.set(item, path, buildUrl(url, { [jwtField]: jwt }))
-  }
-}
-
-// Helper to set required JWT as query param in a given set of layers for underlying engine
-export async function setEngineJwt (layers) {
-  // If we need to use API gateway forward token as query parameter
-  // (Leaflet does not support anything else by default as it mainly uses raw <img> tags)
-  let jwt = (config.gatewayJwt ? await api.get('storage').getItem(config.gatewayJwt) : null)
-  let jwtField = config.gatewayJwtField
-  // Check both the default built-in config or the server provided one if any (eg mobile apps)
-  const gatewayUrl = Store.get('capabilities.api.gateway', config.gateway)
-  if (jwt) {
-    layers.forEach(layer => {
-      setUrlJwt(layer, 'iconUrl', gatewayUrl, jwtField, jwt)
-      setUrlJwt(layer, 'leaflet.source', gatewayUrl, jwtField, jwt)
-      setUrlJwt(layer, 'opendap.url', gatewayUrl, jwtField, jwt)
-      setUrlJwt(layer, 'geotiff.url', gatewayUrl, jwtField, jwt)
-      setUrlJwt(layer, 'wfs.url', gatewayUrl, jwtField, jwt)
-      setUrlJwt(layer, 'wcs.url', gatewayUrl, jwtField, jwt)
-      setUrlJwt(layer, 'cesium.url', gatewayUrl, jwtField, jwt)
-      setUrlJwt(layer, 'cesium.source', gatewayUrl, jwtField, jwt)
-    })
-  }
-  // We might also proxy some data directly from the app when using object storage
-  // This is only for raw raster data not OGC protocols
-  jwt = (config.apiJwt ? await api.get('storage').getItem(config.apiJwt) : null)
-  jwtField = 'jwt'
-  const apiUrl = api.getBaseUrl()
-  if (jwt) {
-    layers.forEach(layer => {
-      setUrlJwt(layer, 'geotiff.url', apiUrl, jwtField, jwt)
-    })
-    // We also allow absolute URLs for app like /api/storage/xxx
-    layers.forEach(layer => {
-      setUrlJwt(layer, 'geotiff.url', '/', jwtField, jwt)
-    })
-  }
-  return layers
-}
-
-export function getFeatureId (feature, layer) {
-  let featureId = _.get(layer, 'featureId')
-  // We need at least an internal ID to uniquely identify features for updates
-  if (!featureId) featureId = '_id'
-  // Support compound index
-  featureId = (Array.isArray(featureId) ? featureId : [featureId])
-  return featureId.map(id => _.get(feature, 'properties.' + id, _.get(feature, id))).join('-')
-}
-
-// Get JSON schema from GeoJson feature' properties
-export function generatePropertiesSchema (geoJson, name) {
-  const schema = {
-    $id: `http://www.kalisio.xyz/schemas/${_.kebabCase(name)}#`,
-    title: name,
-    $schema: 'http://json-schema.org/draft-07/schema#',
-    type: 'object',
-    properties: {
-    }
-  }
-  // Enumerate all available properties/values in all features
-  const features = (geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson])
-  features.forEach(feature => {
-    // FIXME: we don't yet support nested objects in schema
-    const properties = (feature.properties ? kCoreUtils.dotify(feature.properties) : {})
-    _.forOwn(properties, (value, key) => {
-      // Property already registered ?
-      if (schema.properties['{key}']) {
-        const property = schema.properties[`${key}`]
-        // Try to find first non void value to select appropriate type
-        if (_.isNil(property)) schema.properties[`${key}`] = value
-      } else {
-        schema.properties[`${key}`] = value
-      }
-    })
-  })
-  _.forOwn(schema.properties, (value, key) => {
-    let type = (typeof value)
-    // For null/undefined value we will assume string by default
-    if ((type === 'object') || (type === 'undefined')) type = 'string'
-    schema.properties[`${key}`] = {
-      type,
-      nullable: true,
-      field: {
-        component: (type === 'number'
-          ? 'form/KNumberField'
-          : (type === 'boolean' ? 'form/KToggleField' : 'form/KTextField')),
-        helper: key,
-        label: key
-      }
-    }
-  })
-  return schema
-}
-
-export function updatePropertiesSchema (schema) {
-  const props = schema.properties
-  if (!props) return
-
-  const bestGuesses = {
-    undefined: 'form/KTextField',
-    object: 'form/KTextField',
-    string: 'form/KTextField',
-    number: 'form/KNumberField',
-    boolean: 'form/KToggleField'
-  }
-
-  // Loop over declared props and add best guesses to field components based on property type
-  for (const prop in props) {
-    const propEntry = props[prop]
-    // Field already here, skip entry
-    if (propEntry.field && propEntry.field.component) continue
-
-    propEntry.field = {
-      component: bestGuesses[propEntry.type],
-      label: prop,
-      helper: propEntry.description
-    }
-  }
-
-  return schema
-}
-
-export function formatUserCoordinates (lat, lon, format, options) {
-  if (format === 'aeronautical') {
-    const coords = formatcoords(lat, lon)
-    // longitude group: DDMMML where DD is degree (2 digits mandatory)
-    // MMM unit is in 0.1 minutes (trailing 0 optional)
-    // L is N/S
-    const latDeg = coords.latValues.degreesInt.toString().padStart(2, '0')
-    const latMin = Math.floor(coords.latValues.secondsTotal / 6).toString().padStart(3, '0')
-    const latDir = coords.north ? 'N' : 'S'
-    // longitude group: DDDMMML where DDD is degree (3 digits mandatory)
-    // MMM unit is in 0.1 minutes (trailing 0 optional)
-    // L is W/E
-    const lonDeg = coords.lonValues.degreesInt.toString().padStart(3, '0')
-    const lonMin = Math.floor(coords.lonValues.secondsTotal / 6).toString().padStart(3, '0')
-    const lonDir = coords.east ? 'E' : 'W'
-    return `${latDeg}${latMin}${latDir} ${lonDeg}${lonMin}${lonDir}`
-  }
-  return formatcoords(lat, lon).format(format, options)
-}
-
-export function coordinatesToGeoJSON (lat, lon, format, options) {
-  return {
-    type: 'Feature',
-    geometry: {
-      type: 'Point',
-      coordinates: [lon, lat]
-    },
-    properties: {
-      name: formatcoords(lat, lon).format(format, options)
-    }
-  }
-}
-
-export function parseCoordinates (str) {
-  const coords = _.split(_.trim(str), ',')
-  if (coords.length !== 2) return
-  const latitude = Number(coords[0])
-  if (_.isNaN(latitude)) return
-  const longitude = Number(coords[1])
-  if (_.isNaN(longitude)) return
-  return {
-    latitude,
-    longitude
-  }
-}
+export * from './utils/index.js'
+// Now in separated files to avoid mixin Leaflet/Cesium elements
+// export * from './leaflet/utils.js'
+// export * from './cesium/utils.js'

package/map/client/utils.map.js

@@ -0,0 +1,2 @@
+export * from './utils/index.js'
+export * from './leaflet/utils.js'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kalisio/kdk",
   "description": "Kalisio Development Kit",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "homepage": "https://github.com/kalisio/kdk",
   "type": "module",
   "keywords": [

package/test/client/map/catalog.js

@@ -52,6 +52,24 @@ export async function clickLayer (page, tabId, layer, wait = 1000) {
   await page.waitForTimeout(wait)
 }
 
+export async function zoomToLayer (page, tabId, layer, wait = 1000) {
+  const isCatalogOpened = await clickCatalogTab(page, tabId)
+  const layerId = getLayerId(layer)
+  const categoryId = await getLayerCategoryId(page, layerId)
+  let isCategoryOpened
+  if (categoryId) {
+    isCategoryOpened = await isLayerCategoryOpened(page, categoryId)
+    if (!isCategoryOpened) await core.clickPaneAction(page, 'right', categoryId, 1000)
+  }
+  await core.click(page, `#${layer}-actions`)
+  await core.clickAction(page, 'zoom-to-layer')
+  if (categoryId) {
+    if (!isCategoryOpened) await core.clickPaneAction(page, 'right', categoryId, 500)
+  }
+  if (!isCatalogOpened) await core.clickOpener(page, 'right')
+  await page.waitForTimeout(wait)
+}
+
 export async function saveLayer (page, tabId, layer, wait = 1000) {
   const isCatalogOpened = await clickCatalogTab(page, tabId)
   const layerId = getLayerId(layer)