@kalisio/kdk 2.6.3 → 2.7.0

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

@@ -112,13 +112,13 @@ L.GeoJSON.geometryToLayer = function (geojson, options) {
   if (geometry && properties && properties.geodesic) {
     if (geometry.type === 'LineString') {
       return new L.Geodesic([L.GeoJSON.coordsToLatLngs(geometry.coordinates, 0)],
-        Object.assign({ steps: 4 }, options.style(geojson)))
+        Object.assign({ steps: properties.steps || 4, wrap: properties.wrap }, options.style(geojson)))
     } else if (geometry.type === 'MultiLineString') {
       const coords = geometry.coordinates.map((lineString) => L.GeoJSON.coordsToLatLngs(lineString, 0))
-      return new L.Geodesic(coords, Object.assign({ steps: 4 }, options.style(geojson)))
+      return new L.Geodesic(coords, Object.assign({ steps: properties.steps || 4, wrap: properties.wrap }, options.style(geojson)))
     } else if (geometry.type === 'Point') {
       const layer = new L.GeodesicCircle(L.GeoJSON.coordsToLatLng(geometry.coordinates),
-        Object.assign({ fill: true, steps: 360, radius: properties.radius }, options.style(geojson)))
+        Object.assign({ fill: true, steps: properties.steps || 360, wrap: properties.wrap, radius: properties.radius }, options.style(geojson)))
       return layer
     }
   }

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

@@ -318,7 +318,7 @@ export const baseGlobe = {
       this.$emit('layer-added', layer)
       this.$engineEvents.emit('layer-added', layer)
     },
-    async addGeoJsonLayer (layerSpec, geoJson, zoom) {
+    async addGeoJsonLayer (layerSpec, geoJson, zoom = true) {
       if (!generateLayerDefinition(layerSpec, geoJson)) return
       // Create an empty layer
       await this.addLayer(layerSpec)
@@ -379,12 +379,11 @@ export const baseGlobe = {
     },
     zoomIn () {
       const center = this.getCenter()
-      this.center(center.longitude, center.latitude, center.altitude * 0.5)
+      this.center(center.longitude, center.latitude, center.altitude * 0.8)
     },
     zoomOut () {
-      const inertiaZoom = this.viewer.scene.screenSpaceCameraController.inertiaZoom
       const center = this.getCenter()
-      this.center(center.longitude, center.latitude, center.altitude / 2.0)
+      this.center(center.longitude, center.latitude, center.altitude / 0.8)
     },
     zoomToBounds (bounds, heading = 0, pitch = -90, roll = 0, duration = 0) {
       this.viewer.camera.flyTo({
@@ -863,16 +862,26 @@ export const baseGlobe = {
             const fs = `
     uniform sampler2D colorTexture;
     in vec2 v_textureCoordinates;
+
+    uniform float desaturation;
+    uniform float brightness;
+
     void main() {
         vec4 color = texture(colorTexture, v_textureCoordinates);
         if (czm_selected()) {
             out_FragColor = color;
         } else {
-            out_FragColor = vec4(czm_saturation(color.rgb, 0.0), color.a);
+            out_FragColor = vec4(czm_saturation(color.rgb, desaturation) * brightness, color.a);
         }
     }
     `
-            stage = this.viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({ fragmentShader: fs }))
+            stage = this.viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
+              fragmentShader: fs,
+              uniforms: {
+                desaturation: _.get(options, 'desaturation', 1.0),
+                brightness: _.get(options, 'brightness', 1.0)
+              }
+            }))
             stage.selected = [] // Initialize empty selected set for postprocess.
             this.cesiumPostProcessStages[effect] = stage
           }

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

@@ -1,9 +1,8 @@
-import { GeoJsonDataSource, ColorMaterialProperty, ConstantProperty, Math as CesiumMath, HeadingPitchRoll, Quaternion } from 'cesium'
+import { GeoJsonDataSource, ColorMaterialProperty, ConstantProperty, Math as CesiumMath, HeadingPitchRoll, Quaternion, Cartographic, EllipsoidRhumbLine } from 'cesium'
 import _ from 'lodash'
 import logger from 'loglevel'
 import sift from 'sift'
 import { uid } from 'quasar'
-import { point, rhumbDistance, rhumbBearing, rhumbDestination } from '@turf/turf'
 import { Time, Units, Events } from '../../../../core.client.js'
 import { fetchGeoJson, getFeatureId, processFeatures, getFeatureStyleType, isInMemoryLayer, getGeoJsonFeatures } from '../../utils.js'
 import { convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle } from '../../utils/utils.style.js'
@@ -95,7 +94,10 @@ export const geojsonLayers = {
       entities.forEach(entity => {
         // Find matching feature if any and keep track of it as Cesium only keeps properties
         entity.feature = features.find(feature => getFeatureId(feature, options) === entity.id)
-        const previousEntity = dataSource.entities.getById(entity.id)
+        let previousEntity = dataSource.entities.getById(entity.id)
+        CustomTypes.forEach(type => {
+          previousEntity = previousEntity || dataSource.entities.getById(getCustomEntityId(entity.id, type))
+        })
         if (previousEntity) {
           const isAnimatedLayer = _.get(updateOptions, 'duration') && _.get(entity, 'feature') && _.get(previousEntity, 'feature')
           if (isAnimatedLayer) {
@@ -328,7 +330,7 @@ export const geojsonLayers = {
         } else if (options.service) { // Check for feature service layers only, in this case update in place
           // If no probe reference, nothing to be initialized
           // Get original layer options to ensure we have the latest ones while getting features (e.g. filters toggle)
-          await this.loadGeoJson(dataSource, this.getFeatures(Object.assign({}, options, this.getLayerByName(options.name))), options, updateOptions)
+          await this.loadGeoJson(dataSource, await this.getFeatures(Object.assign({}, options, this.getLayerByName(options.name))), options, updateOptions)
         } else if (sourceTemplate) {
           const sourceToFetch = dataSource.sourceCompiler({ time: Time.getCurrentTime() })
           if (!dataSource.lastFetchedSource || (dataSource.lastFetchedSource !== sourceToFetch)) {
@@ -641,32 +643,39 @@ export const geojsonLayers = {
             // Store animation information in properties so that we don't need to recompute it for next steps
             if (!currFeature.properties.animation || !currFeature.properties.animation.geometry) {
               if (!currFeature.properties.animation) currFeature.properties.animation = {}
-              const startCoordinates = { lon: prevFeature.geometry.coordinates[0], lat: prevFeature.geometry.coordinates[1] }
-              const endCoordinates = { lon: currFeature.geometry.coordinates[0], lat: currFeature.geometry.coordinates[1] }
+              const startCoordinates = { lon: prevFeature.geometry.coordinates[0], lat: prevFeature.geometry.coordinates[1], alt: prevFeature.geometry.coordinates[2] || null }
+              const endCoordinates = { lon: currFeature.geometry.coordinates[0], lat: currFeature.geometry.coordinates[1], alt: currFeature.geometry.coordinates[2] || null }
               currFeature.properties.animation.geometry = {
                 startCoordinates,
                 endCoordinates
               }
               if (animateProperty.rhumb) {
-                const start = point([startCoordinates.lon, startCoordinates.lat])
-                const end = point([endCoordinates.lon, endCoordinates.lat])
-                currFeature.properties.animation.geometry.rhumb = {
-                  start,
-                  distance: rhumbDistance(start, end),
-                  bearing: rhumbBearing(start, end)
+                try {
+                  const start = new Cartographic(startCoordinates.lon, startCoordinates.lat, startCoordinates.alt || 0)
+                  const end = new Cartographic(endCoordinates.lon, endCoordinates.lat, endCoordinates.alt || 0)
+                  currFeature.properties.animation.geometry.rhumbLine = new EllipsoidRhumbLine(start, end)
+                } catch (e) {
+                  // Fallback to null if we cannot compute rhumb line (e.g. start = end)
+                  currFeature.properties.animation.geometry.rhumbLine = null
                 }
               }
             }
             // Interpolate position
-            if (animateProperty.rhumb) {
-              const rhumbData = currFeature.properties.animation.geometry.rhumb
-              const destination = rhumbDestination(rhumbData.start, rhumbData.distance * tEasing, rhumbData.bearing)
-              animatedFeature.geometry.coordinates[0] = destination.geometry.coordinates[0]
-              animatedFeature.geometry.coordinates[1] = destination.geometry.coordinates[1]
+            const geometryData = currFeature.properties.animation.geometry
+            if (animateProperty.rhumb && currFeature.properties.animation.geometry.rhumbLine) {
+              const rhumbLine = currFeature.properties.animation.geometry.rhumbLine
+              const destination = rhumbLine.interpolateUsingFraction(tEasing, new Cartographic())
+              animatedFeature.geometry.coordinates[0] = destination.longitude
+              animatedFeature.geometry.coordinates[1] = destination.latitude
+              if (geometryData.startCoordinates.alt !== null && geometryData.endCoordinates.alt !== null) {
+                animatedFeature.geometry.coordinates[2] = destination.height
+              }
             } else {
-              const geometryData = currFeature.properties.animation.geometry
               animatedFeature.geometry.coordinates[0] = lerp(geometryData.startCoordinates.lon, geometryData.endCoordinates.lon, tEasing)
               animatedFeature.geometry.coordinates[1] = lerp(geometryData.startCoordinates.lat, geometryData.endCoordinates.lat, tEasing)
+              if (geometryData.startCoordinates.alt !== null && geometryData.endCoordinates.alt !== null) {
+                animatedFeature.geometry.coordinates[2] = lerp(geometryData.startCoordinates.alt, geometryData.endCoordinates.alt, tEasing)
+              }
             }
           } else if (property === 'orientation') {
             // Store animation information in properties so that we don't need to recompute it for next steps

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

@@ -1,8 +1,10 @@
 import _ from 'lodash'
 import L from 'leaflet'
+import logger from 'loglevel'
 import bearing from '@turf/bearing'
 import { getType, getCoords, getGeom } from '@turf/invariant'
 import { uid } from 'quasar'
+import { Context } from '../../../../core/client/context.js'
 import { Store } from '../../../../core/client/store.js'
 import { Units } from '../../../../core/client/units.js'
 import { api } from '../../../../core/client/api.js'
@@ -98,6 +100,12 @@ export const editLayers = {
             if (!_.isEmpty(geometryTypes) && !geometryTypes.includes('Polygon') && !geometryTypes.includes('MultiPolygon')) return style(feature)
             else return getDefaultPolygonStyle(feature, layerStyle, _.get(this, 'activityOptions.engine.style.edition.polygon'))
           }
+          const isPoint = ((feature.geometry.type === 'Point') || (feature.geometry.type === 'MultiPoint'))
+          if (isPoint) {
+            // Skip point editing style if not editing points
+            if (!_.isEmpty(geometryTypes) && !geometryTypes.includes('Point') && !geometryTypes.includes('MultiPoint')) return style(feature)
+            else return getDefaultPointStyle(feature, layerStyle, _.get(this, 'activityOptions.engine.style.edition.point'))
+          }
           logger.warn(`[KDK] the geometry of type of ${feature.geometry.type} is not supported`)
         },
         pointToLayer: (feature, latlng) => {
@@ -400,7 +408,7 @@ export const editLayers = {
           layerId: this.editedLayer._id,
           layerName: this.editedLayer.name,
           featureId: feature._id,
-          contextId: Store.get('context')
+          contextId: Context.get()
         })
       })
     },

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

@@ -4,39 +4,74 @@ import moment from 'moment'
 import sift from 'sift'
 import L from 'leaflet'
 import * as protomaps from 'protomaps-leaflet'
-import { mapbox_style } from '@kalisio/leaflet-pmtiles'
+import { mapbox_style, kdk_style } from '@kalisio/leaflet-pmtiles'
 import { api, Time, Units, Events, TemplateContext } from '../../../../core/client/index.js'
+import * as time from '../../../../core/client/utils/utils.time.js'
+import * as layers from '../../utils/utils.layers.js'
+
+function detectStyleType (style) {
+  // `style` field on pmtile layer definition can be one of:
+  // - string => in this case we assume this is a mapbox json style
+  // - kdk style object
+  // - protomaps style object
+
+  if (typeof style === 'string') return 'mapbox'
+  // Look for 'symbolizer' keys in the object, if we find one, this is a protomaps style
+  if (_.some(style, (rule) => rule.symbolizer !== undefined)) return 'protomaps'
+  // Otherwise we assume this is a kdk style object
+  return style ? 'kdk' : 'empty'
+}
 
 export const pmtilesLayers = {
   methods: {
-    async createLeafletPMTilesLayer (options) {
+    async processLeafletPMTilesLayer (options, properties = ['urlTemplate', 'styleTemplate', 'template']) {
       const leafletOptions = options.leaflet || options
-      // Check for valid types
-      if (leafletOptions.type !== 'pmtiles') return
-
+      
       // Token required by templating
       const planetApi = (typeof options.getPlanetApi === 'function' ? options.getPlanetApi() : api)
       const apiJwt = (planetApi.hasConfig('apiJwt') ? await planetApi.get('storage').getItem(planetApi.getConfig('apiJwt')) : null)
       const gatewayJwt = (planetApi.hasConfig('gatewayJwt') ? await planetApi.get('storage').getItem(planetApi.getConfig('gatewayJwt')) : null)
       
-      const urlTemplate = _.get(leafletOptions, 'urlTemplate')
-      if (urlTemplate) leafletOptions.url = _.template(urlTemplate)({ apiJwt, gatewayJwt })
-      const styleTemplate = _.get(leafletOptions, 'styleTemplate')
-      if (styleTemplate) leafletOptions.style = _.template(styleTemplate)({ apiJwt, gatewayJwt })
-      
-      // Optimize templating by creating compilers up-front
-      const layerStyleTemplate = _.get(leafletOptions, 'template')
-      if (layerStyleTemplate) {
-        // We allow to template style properties according to feature, because it can be slow you have to specify a subset of properties
-        leafletOptions.template = layerStyleTemplate.map(property => ({
-          property, compiler: _.template(_.get(leafletOptions, property))
-        }))
+      if (properties.includes('urlTemplate')) {
+        const urlTemplate = _.get(leafletOptions, 'urlTemplate')
+        if (urlTemplate) {
+          const context = Object.assign({
+            apiJwt, gatewayJwt, moment, Units, Time, level: this.selectedLevel, ...time
+          }, TemplateContext.get())
+          leafletOptions.url = _.template(urlTemplate)(context)
+        }
       }
-
+      if (properties.includes('styleTemplate')) {
+        const styleTemplate = _.get(leafletOptions, 'styleTemplate')
+        if (styleTemplate) {
+          const context = Object.assign({
+            apiJwt, gatewayJwt, moment, Units, Time, level: this.selectedLevel, ...time
+          }, TemplateContext.get())
+          leafletOptions.style = _.template(styleTemplate)(context)
+        }
+      }
+      if (properties.includes('template')) {
+        // Optimize templating by creating compilers up-front
+        const layerStyleTemplate = _.get(leafletOptions, 'template')
+        if (layerStyleTemplate) {
+          // We allow to template style properties according to feature, because it can be slow you have to specify a subset of properties
+          leafletOptions.template = layerStyleTemplate.map(property => ({
+            property, compiler: _.template(_.get(leafletOptions, property))
+          }))
+        }
+      }
+    },
+    async createLeafletPMTilesLayer (options) {
+      const leafletOptions = options.leaflet || options
+      // Check for valid types
+      if (leafletOptions.type !== 'pmtiles') return
+      // Process main options
+      await this.processLeafletPMTilesLayer(options)
+      // Then create rendering rules
       let rules = {}
-      // Check for style information given as object or URL
       let style = _.get(leafletOptions, 'style')
-      if (typeof style === 'string') {
+      const styleType = detectStyleType(style)
+      if (styleType === 'mapbox') {
         const response = await fetch(style)
         if (response.status !== 200) {
           throw new Error(`Impossible to fetch style ${style}: ` + response.status)
@@ -48,24 +83,49 @@ export const pmtilesLayers = {
         rules = mapbox_style(style, {})
       } else {
         // Manage templating
-        _.get(leafletOptions, 'template', []).forEach(entry => {
-          // protomaps allows property functions with zomm/feature as input
+        const templates = _.get(leafletOptions, 'template', [])
+        templates.forEach(entry => {
+          // protomaps allows property functions with zoom/feature as input
           const f = (zoom, feature) => {
             const context = Object.assign({ properties: feature.props, feature, chroma, moment, Units, Time, level: this.selectedLevel }, TemplateContext.get())
-            return entry.property.endsWith('filter') ? (entry.compiler(context) === 'true'): entry.compiler(context)
+            if (entry.property.endsWith('filter')) {
+              const result = entry.compiler(context)
+              return (result === 'true')
+            } else {
+              return entry.compiler(context)
+            }
           }
           _.set(leafletOptions, entry.property, f)
         })
-        if (style) {
+        if (styleType === 'protomaps') {
           const styleRules = _.map(style, rule => Object.assign(_.omit(rule, ['symbolizer']), {
-              symbolizer: new protomaps[rule.symbolizer.type](rule.symbolizer)
-            })
+            symbolizer: new protomaps[rule.symbolizer.type](rule.symbolizer)
+          })
           )
           const isLabelSymbolizer = (rule) => typeof rule.symbolizer.place === 'function'
           const isNotLabelSymbolizer = (rule) => !isLabelSymbolizer(rule)
           // Support v1.x as well as v2.x
           rules.paint_rules = rules.paintRules = _.filter(styleRules, isNotLabelSymbolizer)
           rules.label_rules = rules.labelRules = _.filter(styleRules, isLabelSymbolizer)
+        } else if (styleType === 'kdk') {
+          // Translate kdk style to protomap rules
+          rules = kdk_style(style, leafletOptions.dataLayer)
+        }
+        if (options.filters) {
+          // Translate layer filters to filter function
+          const filterFn = layers.getFilterFunctionFromLayerFilters(options)
+          rules.paintRules.forEach(rule => {
+            // kdkFilter member may not be present, this is added by kdk_style when translating kdk style
+            // to leaflet-protomaps rules
+            if (rule.kdkFilter) {
+              rule.filter = (zoom, feature) => {
+                // Final filter = kdk style filter + updated filter
+                return rule.kdkFilter(zoom, feature) && filterFn({ zoom, feature, properties: feature.props })
+              }
+            } else {
+              rule.filter = (zoom, feature) => filterFn({ zoom, feature, properties: feature.props })
+            }
+          })
         }
       }
       
@@ -82,9 +142,16 @@ export const pmtilesLayers = {
         // Skip invisible layers
         isVisible: true
       }))
-      pmtileslayers.forEach(async pmtileslayer => {
+      pmtileslayers.forEach(async pmtilesLayer => {
         // Retrieve the layer
-        const layer = this.getLeafletLayerByName(pmtileslayer.name)
+        const layer = this.getLeafletLayerByName(pmtilesLayer.name)
+        const leafletOptions = pmtilesLayer.leaflet || pmtilesLayer
+        const urlTemplate = _.get(leafletOptions, 'urlTemplate')
+        if (urlTemplate) {
+          await this.processLeafletPMTilesLayer(pmtilesLayer, ['urlTemplate'])
+          // Need to update underlying PMTiles source
+          layer.views = protomaps.sourcesToViews(leafletOptions)
+        }
         layer.redraw()
       })
     },
@@ -100,20 +167,42 @@ export const pmtilesLayers = {
           layer.redraw()
         }
       }
+    },
+    onLayerFilterToggledPMTilesLayers (layer, filter) {
+      // Filtering is managed by mongodb query syntax, we need to update the filter function
+      const filterFn = layers.getFilterFunctionFromLayerFilters(layer)
+      // Retrieve the engine layer and update the filter function directly
+      layer = this.getLeafletLayerByName(layer. name)
+      if (!layer) return
+      layer.paintRules.forEach(rule => {
+        // kdkFilter member may not be present, this is added by kdk_style when translating kdk style
+        // to leaflet-protomaps rules
+        if (rule.kdkFilter) {
+          rule.filter = (zoom, feature) => {
+            // Final filter = kdk style filter + updated filter
+            return rule.kdkFilter(zoom, feature) && filterFn({ zoom, feature, properties: feature.props })
+          }
+        } else {
+          rule.filter = (zoom, feature) => filterFn({ zoom, feature, properties: feature.props })
+        }
+      })
+      layer.redraw()
     }
   },
   created () {
     this.registerLeafletConstructor(this.createLeafletPMTilesLayer)
     Events.on('time-current-time-changed', this.onCurrentTimeChangedPMTilesLayers)
     this.$engineEvents.on('selected-level-changed', this.onCurrentLevelChangedPMTilesLayers)
+    this.$engineEvents.on('layer-filter-toggled', this.onLayerFilterToggledPMTilesLayers)
   },
   beforeUnmount () {
     Events.off('time-current-time-changed', this.onCurrentTimeChangedPMTilesLayers)
     this.$engineEvents.off('selected-level-changed', this.onCurrentLevelChangedPMTilesLayers)
+    this.$engineEvents.off('layer-filter-toggled', this.onLayerFilterToggledPMTilesLayers)
   }
 }
 
 // Not automatically declared by leaflet plugin
 L.pmtiles = function (options) {
   return protomaps.leafletLayer(options)
-}
+}

package/map/client/mixins/map/mixin.tiled-mesh-layers.js

@@ -1,6 +1,8 @@
 import _ from 'lodash'
+import moment from 'moment'
 import { Time } from '../../../../core/client/time.js'
 import { Events } from '../../../../core/client/events.js'
+import * as time from '../../../../core/client/utils/utils.time.js'
 import { makeGridSource, extractGridSourceConfig } from '../../../common/grid.js'
 import { TiledMeshLayer } from '../../leaflet/TiledMeshLayer.js'
 
@@ -18,14 +20,19 @@ export const tiledMeshLayers = {
 
       // Build grid source
       const [gridKey, gridConf] = extractGridSourceConfig(options)
-      const weacastApi = (typeof options.getPlanetApi === 'function' ? options.getPlanetApi() : this.getWeacastApi())
-      const apiToken = (weacastApi.hasConfig('gatewayJwt') ? await weacastApi.get('storage').getItem(weacastApi.getConfig('gatewayJwt')) : null)
-      const gridSource = makeGridSource(gridKey, { weacastApi, apiToken })
+      const planetApi = (typeof options.getPlanetApi === 'function' ? options.getPlanetApi() : this.getWeacastApi())
+      const apiJwt = (planetApi.hasConfig('apiJwt') ? await planetApi.get('storage').getItem(planetApi.getConfig('apiJwt')) : null)
+      const gatewayJwt = (planetApi.hasConfig('gatewayJwt') ? await planetApi.get('storage').getItem(planetApi.getConfig('gatewayJwt')) : null)
+      const gridSource = makeGridSource(gridKey, { planetApi })
       gridSource.setup(gridConf)
       if (gridSource.updateCtx) {
         // define variables for source's dynamic properties
-        if (apiToken) gridSource.updateCtx.jwtToken = apiToken
-        gridSource.updateCtx.meteoElements = _.get(options, 'meteoElements')
+        Object.assign(gridSource.updateCtx, {
+          apiJwt, gatewayJwt, moment, Time, ...time,
+          // This one is for backward compatibility
+          jwtToken: gatewayJwt,
+          meteoElements: _.get(options, 'meteoElements')
+        })
       }
 
       return new TiledMeshLayer(layerOptions, gridSource)

package/map/client/mixins/map/mixin.tiled-wind-layers.js

@@ -1,7 +1,9 @@
 import _ from 'lodash'
+import moment from 'moment'
 import 'leaflet-velocity'
 import { Time } from '../../../../core/client/time.js'
 import { Events } from '../../../../core/client/events.js'
+import * as time from '../../../../core/client/utils/utils.time.js'
 import { makeGridSource, extractGridSourceConfig } from '../../../common/grid.js'
 import { TiledWindLayer } from '../../leaflet/TiledWindLayer.js'
 
@@ -20,20 +22,27 @@ export const tiledWindLayers = {
       // Build u & v grid sources
       const [gridKey, gridConf] = extractGridSourceConfig(options)
       // Check API to be used in case the layer is coming from a remote "planet"
-      const weacastApi = (typeof options.getPlanetApi === 'function' ? options.getPlanetApi() : this.getWeacastApi())
-      const uSource = makeGridSource(gridKey, { weacastApi })
-      const vSource = makeGridSource(gridKey, { weacastApi })
+      const planetApi = (typeof options.getPlanetApi === 'function' ? options.getPlanetApi() : this.getWeacastApi())
+      const uSource = makeGridSource(gridKey, { planetApi })
+      const vSource = makeGridSource(gridKey, { planetApi })
       uSource.setup(gridConf)
       vSource.setup(gridConf)
       if (uSource.updateCtx) {
         // define variables for source's dynamic properties
-        const gatewayToken = (weacastApi.hasConfig('gatewayJwt') ? await weacastApi.get('storage').getItem(weacastApi.getConfig('gatewayJwt')) : null)
-        if (gatewayToken) {
-          uSource.updateCtx.jwtToken = gatewayToken
-          vSource.updateCtx.jwtToken = gatewayToken
-        }
-        uSource.updateCtx.windComponent = _.get(options, 'meteoElements[0]')
-        vSource.updateCtx.windComponent = _.get(options, 'meteoElements[1]')
+        const apiJwt = (planetApi.hasConfig('apiJwt') ? await planetApi.get('storage').getItem(planetApi.getConfig('apiJwt')) : null)
+        const gatewayJwt = (planetApi.hasConfig('gatewayJwt') ? await planetApi.get('storage').getItem(planetApi.getConfig('gatewayJwt')) : null)
+        Object.assign(uSource.updateCtx, {
+          apiJwt, gatewayJwt, moment, Time, ...time,
+          // This one is for backward compatibility
+          jwtToken: gatewayJwt,
+          windComponent: _.get(options, 'meteoElements[0]')
+        })
+        Object.assign(vSource.updateCtx, {
+          apiJwt, gatewayJwt, ...time,
+          // This one is for backward compatibility
+          jwtToken: gatewayJwt,
+          windComponent: _.get(options, 'meteoElements[1]')
+        })
       }
 
       return new TiledWindLayer(layerOptions, uSource, vSource)

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

@@ -2,7 +2,7 @@ import config from 'config'
 import _ from 'lodash'
 import logger from 'loglevel'
 import sift from 'sift'
-import { Store } from '../../../core/client/store.js'
+import { Context } from '../../../core/client/context.js'
 import { Events } from '../../../core/client/events.js'
 import { api } from '../../../core/client/api.js'
 import { isDataOperation } from '../../../core/client/utils/utils.services.js'
@@ -50,19 +50,11 @@ export const activity = {
       return []
     },
     async getCatalogLayers () {
-      const query = {}
-      // Do we get layers coming from project ?
-      if (this.project) {
-        Object.assign(query, this.catalogProjectQuery ? this.catalogProjectQuery : getCatalogProjectQuery(this.project))
-      } else {
-        this.project = null
-      }
-
+      const context = Context.get()
       // We get layers coming from global catalog first if any
-      let layers = await getLayers({ query })
+      let layers = await getLayers({ context: 'global', project: this.project })
       // Then we get layers coming from contextual catalog if any
-      const context = Store.get('context')
-      if (context) layers = layers.concat(await getLayers({ query, context }))
+      if (context) layers = layers.concat(await getLayers({ context, project: this.project }))
       return layers
     },
     async addCatalogLayer (layer) {
@@ -86,18 +78,18 @@ export const activity = {
     },
     async getCatalogCategories () {
       // We get categories coming from global catalog first if any
-      let categories = await getCategories()
+      let categories = await getCategories({ context: 'global', project: this.project })
       // Then we get categories coming from contextual catalog if any
-      const context = Store.get('context')
-      if (context) categories = categories.concat(await getCategories({ context }))
+      const context = Context.get()
+      if (context) categories = categories.concat(await getCategories({ context, project: this.project }))
       return categories
     },
     async getCatalogSublegends () {
       // We get sublegends coming from global catalog first if any
-      let sublegends = await getSublegends()
+      let sublegends = await getSublegends({ context: 'global', project: this.project })
       // Then we get categories coming from contextual catalog if any
-      const context = Store.get('context')
-      if (context) sublegends = sublegends.concat(await getSublegends({ context }))
+      const context = Context.get()
+      if (context) sublegends = sublegends.concat(await getSublegends({ context, project: this.project }))
       return sublegends
     },
     async addCatalogCategory (category) {
@@ -110,7 +102,8 @@ export const activity = {
       for (let i = 0; i < layerCategories.length; i++) {
         this.addCatalogCategory(layerCategories[i])
       }
-      await this.refreshOrphanLayers()
+      // Update orphan layers list (ie layers without any category) based on current loaded categories/layers
+      this.orphanLayers = await this.getOrphanLayers()
       this.reorderLayers()
     },
     getOrphanLayerByName (name) {
@@ -162,7 +155,8 @@ export const activity = {
       for (let i = 0; i < catalogLayers.length; i++) {
         await this.addCatalogLayer(catalogLayers[i])
       }
-      await this.refreshOrphanLayers()
+      // Update orphan layers list (ie layers without any category) based on current loaded categories/layers
+      this.orphanLayers = await this.getOrphanLayers()
       // We need at least an active background
       const hasVisibleBaseLayer = catalogLayers.find((layer) => (layer.type === 'BaseLayer') && layer.isVisible)
       if (!hasVisibleBaseLayer) {
@@ -171,10 +165,9 @@ export const activity = {
       }
       this.reorderLayers()
     },
-    // Update orphan layers list (ie layers without any category) based on current loaded categories/layers
-    async refreshOrphanLayers () {
+    async getOrphanLayers () {
       const layersByCategory = getLayersByCategory(this.layers, this.layerCategories)
-      this.orphanLayers = getOrphanLayers(this.layers, layersByCategory)
+      return getOrphanLayers(this.layers, layersByCategory)
     },
     isInMemoryLayer: layers.isInMemoryLayer,
     isUserLayer: layers.isUserLayer,
@@ -322,9 +315,6 @@ export const activity = {
         await this.resetLayer(layer)
       }
     },
-    async onRemoveCategory (category) {
-      // virtual method
-    },
     async onRemoveLayer (layer) {
       // Stop any running edition
       if ((typeof this.isLayerEdited === 'function') && this.isLayerEdited(layer)) await this.stopEditLayer('reject')
@@ -336,11 +326,10 @@ export const activity = {
       // Removing the layer should automatically update all projects
     },
     async onAddOrphanLayer (layer) {
-      if (!this.isOrphanLayer(layer)) {
-        await this.refreshOrphanLayers()
-      }
+      // FIXME: Not easy to detect if the new layer will be orphan except by recomputing everything
+      this.orphanLayers = await this.getOrphanLayers()
     },
-    onRemoveOrphanLayer (layer) {
+    async onRemoveOrphanLayer (layer) {
       if (this.isOrphanLayer(layer)) {
         _.remove(this.orphanLayers, orphanLayer => layer._id ? orphanLayer._id === layer._id : orphanLayer.name === layer.name)
       }
@@ -420,6 +409,8 @@ export const activity = {
       if (layer && (typeof layer.getPlanetApi === 'function')) {
         planetApi = layer.getPlanetApi()
       }
+      // Check if layer was visible before refreshing it
+      const isVisibleBeforeRefresh = this.isLayerVisible(layer.name)
       if (layer) {
         // Stop any running edition
         if ((typeof this.isLayerEdited === 'function') && this.isLayerEdited(layer)) await this.stopEditLayer('reject')
@@ -439,6 +430,8 @@ export const activity = {
         await setEngineJwt([layer], planetApi)
         processTranslations(layer)
         await this.addCatalogLayer(layer)
+        // Check if not already visible, because addCatalogLayer might have shown it in some cases
+        if (isVisibleBeforeRefresh && !this.isLayerVisible(layer.name)) await this.showLayer(layer.name)
       }
     },
     requestRefreshLayer (layer, event) {