@kalisio/kdk 2.3.2 → 2.4.0

package/map/client/composables/probe.js

@@ -35,13 +35,13 @@ export function useProbe (name, options = {}) {
     return activity && activity.isCursor('probe-cursor')
   }
   function hasProbedLayer () {
-    return isProbing() && get('item') && get('item').layer
+    return get('item') && get('item').layer
   }
   function getProbedLayer () {
     return get('item').layer
   }
   function hasProbedLocation () {
-    return isProbing() && get('item') && get('item').location
+    return get('item') && get('item').location
   }
   function getProbedLocation () {
     return get('item').location
@@ -68,7 +68,11 @@ export function useProbe (name, options = {}) {
   let lastClickedPosition
   function onClicked (layer, event) {
     if (!isProbing()) {
-      if (get('item')) clearProbe()
+      if (get('item')) {
+        const feature = _.get(event, 'target.feature')
+        // If not clicking directly on the map we don't cancel last probe, eg feature selection
+        if (!feature) clearProbe()
+      }
       return
     }
     // FIXME: For some layers, eg based on path, we get a first click with the layer as target

package/map/client/composables/weather.js

@@ -3,6 +3,7 @@ import L from 'leaflet'
 import moment from 'moment'
 import { unref, watch } from 'vue'
 import { Time } from '../../../core/client/time.js'
+import { i18n } from '../../../core/client/i18n.js'
 import { Units } from '../../../core/client/units.js'
 import * as composables from '../../../core/client/composables/index.js'
 import { getNearestTime } from '../utils.js'
@@ -24,35 +25,68 @@ export function useWeather (options = {}) {
   // data
 
   // functions
-  function getProbedLocationForecastFields () {
-    return {
+  function getProbedLocationForecastFields (variables) {
+    const fields = {
       // Only wind/temperature can be available at different levels now
-      windDirection: (activity.forecastLevel ? `properties.windDirection-${activity.forecastLevel}` : 'properties.windDirection'),
-      windSpeed: (activity.forecastLevel ? `properties.windSpeed-${activity.forecastLevel}` : 'properties.windSpeed'),
-      temperature: (activity.forecastLevel ? `properties.temperature-${activity.forecastLevel}` : 'properties.temperature'),
-      gust: 'properties.gust',
-      precipitations: 'properties.precipitations',
-      humidity: 'properties.humidity',
-      time: 'forecastTime',
-      name: 'properties.name'
+      windDirection: {
+        property: (activity.forecastLevel ? `properties.windDirection-${activity.forecastLevel}` : 'properties.windDirection')
+      },
+      windSpeed: {
+        property: (activity.forecastLevel ? `properties.windSpeed-${activity.forecastLevel}` : 'properties.windSpeed')
+      },
+      temperature: {
+        property: (activity.forecastLevel ? `properties.temperature-${activity.forecastLevel}` : 'properties.temperature')
+      },
+      gust: {
+        property: 'properties.gust',
+        label: 'max'
+      },
+      precipitations: {
+        property: 'properties.precipitations'
+      },
+      humidity: {
+        property: 'properties.humidity'
+      },
+      time: {
+        property: 'forecastTime'
+      },
+      name: {
+        property: 'properties.name'
+      }
+    }
+    // Any given variables to extract labels from ?
+    if (variables && variables.length > 0) {
+      _.forOwn(fields, (value, key) => {
+        // Take care that weather fields are prefixed by 'properties.' because they target feature
+        const variable = _.find(variables, { name: `${value.property.replace('properties.', '')}` })
+        if (variable) value.label = variable.label
+      })
     }
+    return fields
   }
   function isWeatherProbe (feature) {
     const { windDirection, windSpeed } = getProbedLocationForecastFields()
-    return (_.has(feature, windDirection) &&
-            _.has(feature, windSpeed))
+    return (_.has(feature, windDirection.property) &&
+            _.has(feature, windSpeed.property))
   }
   function getForecastAsHtml (feature, fields = {}) {
     const defaults = getProbedLocationForecastFields()
+    // Retrieve target labels
+    const windDirectionLabel = _.get(fields, 'windDirection.label', defaults.windDirection.label)
+    const windSpeedLabel = _.get(fields, 'windSpeed.label', defaults.windSpeed.label)
+    const gustLabel = _.get(fields, 'gust.label', defaults.gust.label)
+    const temperatureLabel = _.get(fields, 'temperature.label', defaults.temperature.label)
+    const precipitationsLabel = _.get(fields, 'precipitations.label', defaults.precipitations.label)
+    const humidityLabel = _.get(fields, 'humidity.label', defaults.humidity.label)
     // Retrieve target fields on feature
-    const windDirectionField = _.get(fields, 'windDirection', defaults.windDirection)
-    const windSpeedField = _.get(fields, 'windSpeed', defaults.windSpeed)
-    const gustField = _.get(fields, 'gust', defaults.gust)
-    const temperatureField = _.get(fields, 'temperature', defaults.temperature)
-    const precipitationsField = _.get(fields, 'precipitations', defaults.precipitations)
-    const humidityField = _.get(fields, 'humidity', defaults.humidity)
-    const timeField = _.get(fields, 'time', defaults.time)
-    const nameField = _.get(fields, 'name', defaults.name)
+    const windDirectionField = _.get(fields, 'windDirection.property', defaults.windDirection.property)
+    const windSpeedField = _.get(fields, 'windSpeed.property', defaults.windSpeed.property)
+    const gustField = _.get(fields, 'gust.property', defaults.gust.property)
+    const temperatureField = _.get(fields, 'temperature.property', defaults.temperature.property)
+    const precipitationsField = _.get(fields, 'precipitations.property', defaults.precipitations.property)
+    const humidityField = _.get(fields, 'humidity.property', defaults.humidity.property)
+    const timeField = _.get(fields, 'time.property', defaults.time.property)
+    const nameField = _.get(fields, 'name.property', defaults.name.property)
     // Then get values for fields
     const windDirection = _.get(feature, `${windDirectionField}`)
     const windSpeed = _.get(feature, `${windSpeedField}`)
@@ -83,36 +117,42 @@ export function useWeather (options = {}) {
     }
     let html = ''
     if (!_.isNil(windSpeed) && _.isFinite(windSpeed)) {
+      if (windSpeedLabel) html += `${i18n.tie(windSpeedLabel)}: `
       html += Units.format(windSpeed, 'm/s')
       // Add related time if any
       if (!uniqTime) html += getTimeAsHtml(_.get(time, windSpeedField.replace('properties.', '')))
       html += '</br>'
     }
     if (!_.isNil(gust) && _.isFinite(gust)) {
-      html += `max ${Units.format(gust, 'm/s')}`
+      if (gustLabel) html += `${i18n.tie(gustLabel)}: `
+      html += Units.format(gust, 'm/s')
       // Add related time if any
       if (!uniqTime) html += getTimeAsHtml(_.get(time, gustField.replace('properties.', '')))
       html += '</br>'
     }
     if (!_.isNil(windDirection) && _.isFinite(windDirection)) {
+      if (windDirectionLabel) html += `${i18n.tie(windDirectionLabel)}: `
       html += Units.format(windDirection, 'deg')
       // Add related time if any
       if (!uniqTime) html += getTimeAsHtml(_.get(time, windDirectionField.replace('properties.', '')))
       html += '</br>'
     }
     if (!_.isNil(precipitations) && _.isFinite(precipitations)) {
+      if (precipitationsLabel) html += `${i18n.tie(precipitationsLabel)}: `
       html += Units.format(precipitations, 'mm/h')
       // Add related time if any
       if (!uniqTime) html += getTimeAsHtml(_.get(time, precipitationsField.replace('properties.', '')))
       html += '</br>'
     }
     if (!_.isNil(humidity) && _.isFinite(humidity)) {
+      if (humidityLabel) html += `${i18n.tie(humidityLabel)}: `
       html += `${humidity.toFixed(0)} %`
       // Add related time if any
       if (!uniqTime) html += getTimeAsHtml(_.get(time, humidityField.replace('properties.', '')))
       html += '</br>'
     }
     if (!_.isNil(temperature) && _.isFinite(temperature)) {
+      if (temperatureLabel) html += `${i18n.tie(temperatureLabel)}: `
       html += Units.format(temperature, 'degC')
       // Add related time if any
       if (!uniqTime) html += getTimeAsHtml(_.get(time, temperatureField.replace('properties.', '')))
@@ -124,7 +164,7 @@ export function useWeather (options = {}) {
       if (!_.isNil(name)) html = `<b><u>${name}</u></b></br>` + html
       // If we get a signle time for all field add it at the end
       if (uniqTime) {
-        html += getTimeAsHtml(time)
+        html += getTimeAsHtml(time).trim().replace('(', '').replace(')', '')
       }
     }
     return html
@@ -160,8 +200,8 @@ export function useWeather (options = {}) {
   function getWindBarbOptions (feature, fields = {}) {
     const defaults = getProbedLocationForecastFields()
     // Retrieve target fields on feature
-    let windDirection = _.get(fields, 'windDirection', defaults.windDirection)
-    let windSpeed = _.get(fields, 'windSpeed', defaults.windSpeed)
+    let windDirection = _.get(fields, 'windDirection.property', defaults.windDirection.property)
+    let windSpeed = _.get(fields, 'windSpeed.property', defaults.windSpeed.property)
     // TODO: colorize according to temperature scale if ?
     // let temperature = _.get(fields, 'temperature', 'properties.temperature')
     // Then get values for fields
@@ -185,17 +225,17 @@ export function useWeather (options = {}) {
       forceDir: true
     }
   }
-  function createWindBarbIcon (feature) {
-    const options = getWindBarbOptions(feature)
-    return (options ? new L.WindBarb.Icon(getWindBarbOptions(feature)) : null)
+  function createWindBarbIcon (feature, fields = {}) {
+    const options = getWindBarbOptions(feature, fields)
+    return (options ? new L.WindBarb.Icon(options) : null)
   }
-  function getProbedLocationForecastTooltip (feature, layer, options) {
-    const html = getForecastAsHtml(feature)
+  function getProbedLocationForecastTooltip (feature, layer, options, fields = {}) {
+    const html = getForecastAsHtml(feature, fields)
     return (html ? L.tooltip({ permanent: false }, layer).setContent(`<b>${html}</b>`) : null)
   }
-  function getProbedLocationForecastMarker (feature, latlng, options) {
+  function getProbedLocationForecastMarker (feature, latlng, options, fields = {}) {
     // Use wind barbs on probed features
-    const icon = createWindBarbIcon(feature)
+    const icon = createWindBarbIcon(feature, fields)
     return (icon ? L.marker(latlng, { icon }) : null)
   }
 

package/map/client/i18n/map_en.json

@@ -233,6 +233,9 @@
     "TIMELINE_INTERVAL": "Real-time data refresh update interval",
     "TIMESERIES_SETTINGS": "Timeseries parameters",
     "TIMESERIES_SPAN": "Timeseries span (in hours)",
+    "TIMESERIES_GROUP_BY": "Timeseries grouping",
+    "TIMESERIES_GROUP_BY_VARIABLE": "Broup by variable",
+    "TIMESERIES_GROUP_BY_FEATURE": "Group by geographical feature",
     "CAPTURE_RESOLUTION_FIELD_LABEL": "Resolution setting",
     "CAPTURE_HEADER_FIELD_LABEL": "Title setting",
     "CAPTURE_FOOTER_FIELD_LABEL": "Footer setting",

package/map/client/i18n/map_fr.json

@@ -233,6 +233,9 @@
     "TIMELINE_INTERVAL": "Fréquence de rafraichissement des données en temps-réel",
     "TIMESERIES_SETTINGS": "Paramètrage des séries temporelles",
     "TIMESERIES_SPAN": "Intervalle des séries temporelles, en heures",
+    "TIMESERIES_GROUP_BY": "Regroupement des séries temporelles",
+    "TIMESERIES_GROUP_BY_VARIABLE": "Regroupement par variable",
+    "TIMESERIES_GROUP_BY_FEATURE": "Regroupement par élément géographique",
     "CAPTURE_RESOLUTION_FIELD_LABEL": "Paramétrez la résolution",
     "CAPTURE_HEADER_FIELD_LABEL": "Paramétrez le titre",
     "CAPTURE_FOOTER_FIELD_LABEL": "Paramétrez le pied de page",

package/map/client/init.js

@@ -33,7 +33,7 @@ export function setupApi (configuration) {
 export default async function init () {
   const api = this
 
-  logger.debug('[KDK] initializing map module')
+  logger.debug('[KDK] Initializing map module')
 
   // Declare the built-in services, others are optional
   api.declareService('geocoder')
@@ -83,12 +83,13 @@ export default async function init () {
   }))
   // Default timeseries parameters
   Store.set('timeseries', reactive({
-    span: 1440 // 24H
+    span: 1440, // 24H
+    groupBy: 'feature'
   }))
 
   // Register the readers
   _.forEach(_.get(config, 'readers.map', []), entry => {
-    logger.debug(`[KDK] registering mime types [${entry.mimeTypes}] to reader ${entry.reader}`)
+    logger.debug(`[KDK] Registering mime types [${entry.mimeTypes}] to reader ${entry.reader}`)
     Reader.register(entry.mimeTypes, readers[entry.reader])
   })
 

package/map/client/leaflet/ShapeMarker.js

@@ -10,7 +10,7 @@ export const ShapeMarker = L.Marker.extend({
     // Forward extra options for different purposes, i.e. clustering, panes, ...
     const markerOptions = _.get(options, 'options', {})
     // We allow to specify panes directly at root level
-    Object.assign(markerOptions, _.pick(options, ['pane', 'shadowPane']))
+    Object.assign(markerOptions, _.pick(options, ['pane', 'shadowPane', 'interactive', 'draggable']))
     if (options.icon instanceof L.Icon) { // We allow to directly provide the icon
       L.Marker.prototype.initialize.call(this, latlng, {
         icon: options.icon,

package/map/client/leaflet/utils/utils.events.js

@@ -28,7 +28,7 @@ export const LeafletEvents = {
   Map: ['baselayerchange', 'overlayadd', 'overlayremove', 'layeradd', 'layerremove', 'zoomlevelschange',
     'resize', 'unload', 'viewreset', 'load',
     'zoomstart', 'boxzoomstart', 'boxselectionstart', 'movestart',
-    'zoom', 'move',
+    'zoom', 'move', 'rotate',
     'zoomend', 'boxzoomend', 'boxselectionend', 'moveend',
     'click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'mousemove', 'contextmenu',
     'keypress', 'preclick', 'moveend', 'zoomanim', 'fullscreenchange'],

package/map/client/leaflet/utils/utils.style.js

@@ -3,7 +3,7 @@ import logger from 'loglevel'
 import chroma from 'chroma-js'
 import moment from 'moment'
 import L from 'leaflet'
-import { Time, Units, utils as kdkCoreUtils } from '../../../../core/client/index.js'
+import { Time, Units, TemplateContext, utils as kdkCoreUtils } from '../../../../core/client/index.js'
 import { getFeatureStyleType } from '../../utils/utils.features.js'
 import { convertStyle, convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle,
          PointStyleTemplateMappings, LineStyleTemplateMappings, PolygonStyleTemplateMappings } from '../../utils/utils.style.js'
@@ -151,7 +151,7 @@ function processStyle (style, feature, options, mappings) {
   const leafletOptions = options.leaflet || options
   // We allow to template style properties according to feature,
   // because it can be slow you have to specify a subset of properties
-  const context = { properties: feature.properties, feature, chroma, moment, Units, Time }
+  const context = Object.assign({ properties: feature.properties, feature, chroma, moment, Units, Time }, TemplateContext.get())
   if (leafletOptions.template) {
     // Create the map of variables
     if (options.variables) context.variables = _.reduce(options.variables,
@@ -160,10 +160,22 @@ function processStyle (style, feature, options, mappings) {
       _.set(style, _.get(mappings, _.kebabCase(entry.property), entry.property), entry.compiler(context))
     })
   }
-  // We manage panes for z-index, so we need to forward it to marker options (only if not already defined)
+
   const type = getFeatureStyleType(feature)
-  if (leafletOptions.pane && !_.has(style, `${type}.pane`)) _.set(style, `${type}.pane`, leafletOptions.pane)
-  if (leafletOptions.shadowPane && !_.has(style, `${type}.shadowPane`)) _.set(style, `${type}.shadowPane`, leafletOptions.shadowPane)
+
+  // visibility attribute can be used to hide individual features
+  // visibility is true by default but can also be a string when it's
+  // a result of a lodash steing template evaluation
+  let visibility = _.get(style, 'style.visibility', true)
+  if (typeof visibility === 'string') visibility = visibility === 'true'
+  // The 'kdk-hidden-features' pane is created when the leaflet map is initialized
+  if (!visibility) _.set(style, `style.${type}.pane`, 'kdk-hidden-features')
+
+  // We manage panes for z-index, so we need to forward it to marker options (only if not already defined)
+  if (leafletOptions.pane && !_.has(style, `style.${type}.pane`)) _.set(style, `style.${type}.pane`, leafletOptions.pane)
+  if (leafletOptions.shadowPane && !_.has(style, `style.${type}.shadowPane`)) _.set(style, `style.${type}.shadowPane`, leafletOptions.shadowPane)
+  // Similarly forward interactive option from layer if any
+  if (_.has(leafletOptions, 'interactive') && !_.has(style, `style.${type}.interactive`)) _.set(style, `style.${type}.interactive`, leafletOptions.interactive)
   return style
 }
 
@@ -171,7 +183,7 @@ export function getDefaultPointStyle (feature, options, engine, engineStylePath
   const engineStyle = _.get(engine, engineStylePath, {})
   const layerStyle = options ? _.get(options.leaflet || options, 'layerPointStyle') : {}
   const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPointStyle(feature.properties)
-  const style = Object.assign({}, engineStyle, layerStyle, featureStyle)
+  const style = _.merge({}, engineStyle, layerStyle, featureStyle)
   processStyle({ style: { point: style } }, feature, options, PointStyleTemplateMappings)
   return style
 }
@@ -180,7 +192,7 @@ export function getDefaultLineStyle (feature, options, engine, engineStylePath =
   const engineStyle = _.get(engine, engineStylePath, {})
   const layerStyle = options ? _.get(options.leaflet || options, 'layerLineStyle') : {}
   const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToLineStyle(feature.properties)
-  const style = Object.assign({}, engineStyle, layerStyle, featureStyle)
+  const style = _.merge({}, engineStyle, layerStyle, featureStyle)
   processStyle({ style: { line: style } }, feature, options, LineStyleTemplateMappings)
   return convertLineStyleToLeafletPath(style)
 }
@@ -189,7 +201,7 @@ export function getDefaultPolygonStyle (feature, options, engine, engineStylePat
   const engineStyle = _.get(engine, engineStylePath, {})
   const layerStyle = options ? _.get(options.leaflet || options, 'layerPolygonStyle') : {}
   const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPolygonStyle(feature.properties)
-  const style = Object.assign({}, engineStyle, layerStyle, featureStyle)
+  const style = _.merge({}, engineStyle, layerStyle, featureStyle)
   processStyle({ style: { polygon: style } }, feature, options, PolygonStyleTemplateMappings)
   return convertPolygonStyleToLeafletPath(style)
 }

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

@@ -5,7 +5,7 @@ import Emitter from 'tiny-emitter'
 import { getCssVar } from 'quasar'
 import { Ion, Viewer, Color, viewerCesiumInspectorMixin, Rectangle, ScreenSpaceEventType, ScreenSpaceEventHandler, buildModuleUrl,
          Cesium3DTileset, ImageryLayer, Cartesian3, PinBuilder, BoundingSphere, Ellipsoid, Cartographic, Entity, EntityCollection,
-         exportKml, VerticalOrigin, Math as CesiumMath } from 'cesium'
+         exportKml, VerticalOrigin, Transforms, Quaternion, HeadingPitchRoll, Matrix3, Matrix4, DebugCameraPrimitive, DebugModelMatrixPrimitive, Math as CesiumMath } from 'cesium'
 import 'cesium/Source/Widgets/widgets.css'
 import { Geolocation } from '../../geolocation.js'
 import { Cesium, convertCesiumHandlerEvent, isTerrainLayer, convertEntitiesToGeoJson, createCesiumObject } from '../../utils.globe.js'
@@ -30,7 +30,7 @@ export const baseGlobe = {
     refreshGlobe () {
     },
     setupGlobe (domEl, token, options) {
-      const viewerOptions = options ||
+      this.viewerOptions = options ||
         // For activities
         _.get(this, 'activityOptions.engine.viewer', {
           sceneMode: 3, // SceneMode.COLUMBUS_VIEW = 1, SceneMode.SCENE3D = 3,
@@ -50,21 +50,22 @@ export const baseGlobe = {
       // If we don't need ion
       else Ion.defaultAccessToken = ''
       // Initialize the globe
-      Object.assign(viewerOptions, {
+      Object.assign(this.viewerOptions, {
         imageryProviderViewModels: [],
         terrainProviderViewModels: []
       })
-      this.viewer = new Viewer(domEl, viewerOptions)
-      const backgroundColor = _.get(viewerOptions, 'backgroundColor')
+      this.viewer = new Viewer(domEl, this.viewerOptions)
+      const backgroundColor = _.get(this.viewerOptions, 'backgroundColor')
       this.viewer.scene.backgroundColor = (backgroundColor ? createCesiumObject('Color', ...backgroundColor) : Color.BLACK)
       if (this.viewer.scene.globe) {
-        const baseColor = _.get(viewerOptions, 'baseColor')
+        const baseColor = _.get(this.viewerOptions, 'baseColor')
         this.viewer.scene.globe.baseColor = (baseColor ? createCesiumObject('Color', ...baseColor) : Color.BLACK)
-        const undergroundColor = _.get(viewerOptions, 'undergroundColor')
+        const undergroundColor = _.get(this.viewerOptions, 'undergroundColor')
         this.viewer.scene.globe.undergroundColor = (undergroundColor ? createCesiumObject('Color', ...undergroundColor) : Color.BLACK)
       }
       // Debug mode ?
-      if (viewerOptions.debug) this.viewer.extend(viewerCesiumInspectorMixin)
+      //this.viewerOptions.debug = true
+      if (this.viewerOptions.debug) this.viewer.extend(viewerCesiumInspectorMixin)
       // Cesium always create a default provider when a globe is used
       if (this.viewer.scene.imageryLayers) this.viewer.scene.imageryLayers.removeAll()
       // Add defaults handler
@@ -229,7 +230,7 @@ export const baseGlobe = {
         this.viewer.dataSources.add(cesiumLayer)
       }
       layer.isVisible = true
-      this.onLayerShown('layer-shown', layer, cesiumLayer)
+      this.onLayerShown(layer, cesiumLayer)
     },
     onLayerShown (layer, cesiumLayer) {
       this.$emit('layer-shown', layer, cesiumLayer)
@@ -351,17 +352,71 @@ export const baseGlobe = {
     center (longitude, latitude, altitude, heading = 0, pitch = -90, roll = 0, options = {}) {
       const center = this.viewer.camera.positionCartographic
       const duration = _.get(options, 'duration', 0)
+      // This is the "base" frame, position with orientation in east north up frame at position
+      const destination = Cartesian3.fromDegrees(longitude, latitude, altitude || center.height)
+      const orientation = new HeadingPitchRoll(
+        CesiumMath.toRadians(heading),
+        CesiumMath.toRadians(pitch),
+        CesiumMath.toRadians(roll))
+      // An offset can be provided relative to the base frame as an additional translation/rotation
+      // Typically the base frame can be set to "follow" a vehicle with its GPS position + heading.
+      // Then an offset can be used to take driver's position into account relative to the GPS,
+      // and simulate the moving head of the driver with an additional rotation
+      const destinationOffset = new Cartesian3(
+        _.get(options, 'offset.x', 0),
+        _.get(options, 'offset.y', 0),
+        _.get(options, 'offset.z', 0))
+      const orientationOffset = new HeadingPitchRoll(
+        CesiumMath.toRadians(_.get(options, 'offset.heading', 0)),
+        CesiumMath.toRadians(_.get(options, 'offset.pitch', 0)),
+        CesiumMath.toRadians(_.get(options, 'offset.roll', 0)))
       const target = {
-        destination: Cartesian3.fromDegrees(longitude, latitude, altitude || center.height),
+        destination,
         orientation: {
-          heading: CesiumMath.toRadians(heading),
-          pitch: CesiumMath.toRadians(pitch),
-          roll: CesiumMath.toRadians(roll)
+          heading: orientation.heading,
+          pitch: orientation.pitch,
+          roll: orientation.roll
         },
         duration
       }
       if (duration) this.viewer.camera.flyTo(target)
       else this.viewer.camera.setView(target)
+      this.viewer.camera.move(this.viewer.camera.right, destinationOffset.x)
+      this.viewer.camera.move(this.viewer.camera.direction, destinationOffset.y)
+      this.viewer.camera.move(this.viewer.camera.up, destinationOffset.z)
+      this.viewer.camera.look(this.viewer.camera.up, orientationOffset.heading)
+      this.viewer.camera.look(this.viewer.camera.direction, orientationOffset.pitch)
+      this.viewer.camera.look(this.viewer.camera.right, orientationOffset.roll)
+      if (this.viewerOptions.debug) {
+        const baseQuaternion = Transforms.headingPitchRollQuaternion(destination, orientation, Ellipsoid.WGS84, Transforms.eastNorthUpToFixedFrame)
+        const cameraQuaternion = Transforms.headingPitchRollQuaternion(this.viewer.camera.positionWC,
+        new HeadingPitchRoll(this.viewer.camera.heading, this.viewer.camera.pitch, this.viewer.camera.roll), Ellipsoid.WGS84, Transforms.eastNorthUpToFixedFrame)
+        if (this.baseFrameDebug) {
+          this.baseFrameDebug.modelMatrix = Matrix4.fromRotationTranslation(Matrix3.fromQuaternion(baseQuaternion), destination)
+          this.finalFrameDebug.modelMatrix = Matrix4.fromRotationTranslation(Matrix3.fromQuaternion(cameraQuaternion), this.viewer.camera.positionWC)
+        } else {
+          this.baseFrameDebug = new DebugModelMatrixPrimitive({
+            modelMatrix : Matrix4.fromRotationTranslation(Matrix3.fromQuaternion(baseQuaternion), destination),
+            length : 25,
+            width : 5
+          })
+          this.viewer.scene.primitives.add(this.baseFrameDebug)
+          this.finalFrameDebug = new DebugModelMatrixPrimitive({
+            modelMatrix : Matrix4.fromRotationTranslation(Matrix3.fromQuaternion(cameraQuaternion), this.viewer.camera.positionWC),
+            length : 25,
+            width : 5
+          })
+          this.viewer.scene.primitives.add(this.finalFrameDebug)
+        }
+        // As we don't want to continue tracking the camera after we need to recreate one each time
+        if (this.cameraDebug) this.viewer.scene.primitives.remove(this.cameraDebug)
+        this.cameraDebug = new DebugCameraPrimitive({
+          camera : this.viewer.camera,
+          color : Cesium.Color.YELLOW,
+          updateOnChange: false
+        })
+        this.viewer.scene.primitives.add(this.cameraDebug)
+      }
     },
     getCenter () {
       const center = this.viewer.camera.positionCartographic
@@ -379,6 +434,49 @@ export const baseGlobe = {
       const east = CesiumMath.toDegrees(bounds.east)
       return [[south, west], [north, east]]
     },
+    onEntityTracked (time) {
+      if (this.viewerOptions.debug) {
+        if (this.trackedFrameDebug) {
+          this.trackedFrameDebug.modelMatrix = this.viewer.trackedEntity.computeModelMatrix(time)
+        } else {
+          this.trackedFrameDebug = new DebugModelMatrixPrimitive({
+            modelMatrix : this.viewer.trackedEntity.computeModelMatrix(time),
+            length : 25,
+            width : 5
+          })
+          this.viewer.scene.primitives.add(this.trackedFrameDebug)
+        }
+      }
+    },
+    trackEntity (entityId, options = {}) {
+      // Check for entities directly added to the viewer
+      this.viewer.entities.values.forEach(entity => {
+        if (entityId === entity.id) {
+          // Make the camera track this entity
+          this.viewer.trackedEntity = entity
+        }
+      })
+      // Check for external data sources
+      for (let i = 0; i < this.viewer.dataSources.length; i++) {
+        const source = this.viewer.dataSources.get(i)
+        source.entities.values.forEach(entity => {
+          if (entityId === entity.id) {
+            // Make the camera track this entity
+            this.viewer.trackedEntity = entity
+          }
+        })
+      }
+      if (this.viewer.trackedEntity) {
+        this.viewer.clock.onTick.addEventListener(this.onEntityTracked)
+      }
+    },
+    untrackEntity () {
+      if (this.viewer.trackedEntity) {
+        if (this.trackedFrameDebug) this.viewer.scene.primitives.remove(this.trackedFrameDebug)
+        this.viewer.clock.onTick.removeEventListener(this.onEntityTracked)
+      }
+      this.viewer.trackedEntity = null
+    },
     async showUserLocation () {
       if (Geolocation.hasLocation()) {
         const longitude = Geolocation.getLongitude()

package/map/client/mixins/globe/mixin.file-layers.js

@@ -1,18 +1,16 @@
 import _ from 'lodash'
-import { viewerDragDropMixin } from 'cesium'
 import logger from 'loglevel'
+import { viewerDragDropMixin } from 'cesium'
 
 export const fileLayers = {
   mounted () {
     this.$engineEvents.on('globe-ready', () => {
-      this.viewer.extend(viewerDragDropMixin,
-        // For activities
-        _.get(this, 'activityOptions.engine.fileLayers', {
-          clearOnDrop: false,
-          flyToOnDrop: true,
-          clampToGround: true
-        })
-      )
+      const fileLayersOptions = _.defaults(_.get(this, 'activityOptions.engine.fileLayers', {}), {
+        clearOnDrop: false,
+        flyToOnDrop: true,
+        clampToGround: true
+      })
+      this.viewer.extend(viewerDragDropMixin, fileLayersOptions)
       this.viewer.dropError.addEventListener((viewerArg, source, error) => {
         logger.error(error)
       })
@@ -21,6 +19,7 @@ export const fileLayers = {
         // Check if source has not been dropped, otherwise add it as layer
         if (source.notFromDrop) return
         if (!source.name) source.name = this.$t('mixins.fileLayers.IMPORTED_DATA_NAME')
+        logger.debug('[KDK] processing dropped file: ', source.name)
         // Create an empty layer used as a container
         this.addLayer({
           name: source.name,
@@ -30,7 +29,8 @@ export const fileLayers = {
           cesium: {
             type: 'geoJson',
             isVisible: true,
-            cluster: { pixelRange: 50 },
+            cluster: _.get(fileLayersOptions, 'cluster', { pixelRange: 50 }),
+            entityStyle: _.get(fileLayersOptions, 'entityStyle'),
             source: source.name // Set the data source name instead of URL in this case
           }
         })