@kalisio/kdk 2.5.3 → 2.6.0

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

@@ -2,13 +2,13 @@ import L from 'leaflet'
 import _ from 'lodash'
 import sift from 'sift'
 import logger from 'loglevel'
-import { point, rhumbDistance, rhumbBearing, rhumbDestination } from '@turf/turf'
-import { Time, Units, utils as kdkCoreUtils } from '../../../../core.client.js'
+import { point, rhumbDistance, rhumbBearing, rhumbDestination, getType } from '@turf/turf'
+import { Time, Units, Events, utils as kdkCoreUtils } from '../../../../core.client.js'
 import { getUpdateFeatureFunction, hasUnitInLeafletLayerTemplate, GeoJsonLeafletLayerFilters } from '../../leaflet/utils/utils.geojson.js'
 import { MaskLayer } from '../../leaflet/MaskLayer.js'
 import { TiledFeatureLayer } from '../../leaflet/TiledFeatureLayer.js'
 import { 
-  fetchGeoJson, LeafletEvents, bindLeafletEvents, unbindLeafletEvents, getFeatureId, isInMemoryLayer, getFeatureStyleType,
+  fetchGeoJson, getGeoJsonFeatures, LeafletEvents, bindLeafletEvents, unbindLeafletEvents, getFeatureId, isInMemoryLayer, getFeatureStyleType,
   convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle, createMarkerFromPointStyle
 } from '../../utils.map.js'
 import * as maths from '../../../../core/client/utils/utils.math.js'
@@ -61,7 +61,7 @@ export const geojsonLayers = {
                 // Use probes as reference
                 const geoJson = await this.getProbeFeatures(options)
                 // When probes are fetched, we flag them with a 'measureRequestIssued' property that we may use in dynamic styling
-                const features = (geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson])
+                const features = getGeoJsonFeatures(geoJson)
                 features.forEach(feature => { feature.measureRequestIssued = true })
                 successCallback(geoJson)
                 initialized = true
@@ -143,33 +143,92 @@ export const geojsonLayers = {
       leafletOptions.container = this.createLeafletLayer(clusterOptions)
       bindLeafletEvents(leafletOptions.container, LeafletEvents.Cluster, this, options)
     },
+    processGeoJsonPaneOptions (options) {
+      const leafletOptions = options.leaflet || options
+      // Min/Max zoom are automatically managed on tiled layers by inheriting GridLayer
+      // but on non-tiled layers we need to use a pane to manage it.
+      // However, as we'd like to be able to easily control layer display order we create a pane for each layer by default anyway.
+      const panes = _.get(leafletOptions, 'panes', [])
+      const defaultPane = _.find(panes, { name: _.get(leafletOptions, 'pane') })
+      const hasMinZoom = !!_.get(leafletOptions, 'minZoom')
+      const hasMaxZoom = !!_.get(leafletOptions, 'maxZoom')
+      const hasZIndex = !!_.get(leafletOptions, 'zIndex')
+      const hasPaneZIndex = _.get(defaultPane, 'zIndex')
+      const name = options.name
+      // Default pane will be automatically used for Leaflet vector layers (ie polygons/lines)
+      const layerPane = defaultPane || { name }
+      if (hasMinZoom) layerPane.minZoom = _.get(leafletOptions, 'minZoom')
+      if (hasMaxZoom) layerPane.maxZoom = _.get(leafletOptions, 'maxZoom')
+      if (hasZIndex && !hasPaneZIndex) layerPane.zIndex = _.get(leafletOptions, 'zIndex')
+      if (!_.find(panes, { name: layerPane.name })) panes.push(layerPane)
+      // Set layer to use its default pane as target
+      // Avoid erasing any existing pane, if so the pane should have been created taken into account the layer zIndex up-front
+      if (!_.has(leafletOptions, 'pane')) leafletOptions.pane = layerPane.name
+      if (!_.has(leafletOptions, 'shadowPane')) leafletOptions.shadowPane = layerPane.name
+      // Make default pane available to styles as well as eg shape markers are created from here
+      for (const type of ['point', 'line', 'polygon']) {
+        _.set(leafletOptions, `style.${type}.pane`, layerPane.name)
+        _.set(leafletOptions, `style.${type}.shadowPane`, layerPane.name)
+      }
+      // If we only use this default pane all elements of a layer will be affected to this pane.
+      // We prefer the markers and their shadows to be affected to different panes than others elements like Leaflet does by default.
+      // This is notably required if we'd like to be able to control the rendering order of the elements with bringToFront/bringToBack functions.
+      // Except if a z-index is specified as in this case the user wants to control the order by himself
+      if (!hasZIndex && !hasPaneZIndex) {
+        // No z-index means that the pane will use the default for overlays in Leaflet which is 400
+        // so that we use the default for markers and shadows in Leaflet as well.
+        if (!_.find(panes, { name: `${name}-markers` })) panes.push(Object.assign({ name: `${name}-markers`, zIndex: 600 }, _.omit(layerPane, ['name'])))
+        if (!_.find(panes, { name: `${name}-shadows` })) panes.push(Object.assign({ name: `${name}-shadows`, zIndex: 500 }, _.omit(layerPane, ['name'])))
+        // Avoid erasing any existing pane, if so the pane should have been created taken into account the layer zIndex up-front
+        if (!_.has(leafletOptions, 'shadowPane')) leafletOptions.shadowPane = `${name}-shadows`
+        // Make panes available to styles as eg shape markers are created from here
+        _.set(leafletOptions, 'style.point.pane', `${name}-markers`)
+        _.set(leafletOptions, 'style.point.shadowPane', `${name}-shadows`)
+      }
+      leafletOptions.panes = panes
+    },
+    processGeoJsonStyleOptions (options) {
+      const leafletOptions = options.leaflet || options
+      // 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))
+        }))
+      }
+      const popupTemplate = _.get(leafletOptions, 'popup.template')
+      if (popupTemplate) {
+        leafletOptions.popup.compiler = _.template(popupTemplate)
+      }
+      const tooltipTemplate = _.get(leafletOptions, 'tooltip.template')
+      if (tooltipTemplate) {
+        leafletOptions.tooltip.compiler = _.template(tooltipTemplate)
+      }
+      // Optimize styling by creating color scales up-front
+      const variables = _.get(options, 'variables', [])
+      variables.forEach(variable => {
+        if (_.has(variable, 'chromajs')) {
+          variable.colorScale = kdkCoreUtils.buildColorScale(_.get(variable, 'chromajs'))
+        }
+      })
+      // Convert and store the style
+      if (leafletOptions.style) {
+        leafletOptions.layerPointStyle = _.get(leafletOptions.style, 'point')
+        leafletOptions.layerLineStyle = _.get(leafletOptions.style, 'line')
+        leafletOptions.layerPolygonStyle = _.get(leafletOptions.style, 'polygon')
+      } else {
+        leafletOptions.layerPointStyle = convertSimpleStyleToPointStyle(leafletOptions)
+        leafletOptions.layerLineStyle = convertSimpleStyleToLineStyle(leafletOptions)
+        leafletOptions.layerPolygonStyle = convertSimpleStyleToPolygonStyle(leafletOptions)
+      }
+    },
     async createLeafletGeoJsonLayer (options) {
       const leafletOptions = options.leaflet || options
       // Check for valid type
       if (leafletOptions.type !== 'geoJson') return
 
       try {
-        // min/max zoom are automatically managed on tiled layers by inheriting GridLayer
-        // on non-tiled layers we need to use a pane to manage it
-        const hasMinZoom = !!_.get(leafletOptions, 'minZoom')
-        const hasMaxZoom = !!_.get(leafletOptions, 'maxZoom')
-        const hasZIndex = !!_.get(leafletOptions, 'zIndex')
-        if (!leafletOptions.tiled && (hasMinZoom || hasMaxZoom)) {
-          const pane = { name: options.name }
-          if (hasMinZoom) pane.minZoom = _.get(leafletOptions, 'minZoom')
-          if (hasMaxZoom) pane.maxZoom = _.get(leafletOptions, 'maxZoom')
-          if (hasZIndex) pane.zIndex = _.get(leafletOptions, 'zIndex')
-          leafletOptions.panes = [pane]
-          leafletOptions.pane = options.name
-          leafletOptions.shadowPane = options.name
-          // Make pane available to styles as well as eg shape markers are created from here
-          for (const type of ['point', 'line', 'polygon']) {
-            if (_.has(leafletOptions, `style.${type}`)) {
-              _.set(leafletOptions, `style.${type}.pane`, options.name)
-              _.set(leafletOptions, `style.${type}.shadowPane`, options.name)
-            }
-          }
-        }
         // If not explicitely disable use defaults for clustering
         if (!_.has(leafletOptions, 'cluster') && _.get(this, 'activityOptions.engine.cluster')) {
           // Merge existing config or create a new one on layer
@@ -186,39 +245,9 @@ export const geojsonLayers = {
         } else {
           await this.processGeoJsonLayerOptions(options)
         }
-        // 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))
-          }))
-        }
-        const popupTemplate = _.get(leafletOptions, 'popup.template')
-        if (popupTemplate) {
-          leafletOptions.popup.compiler = _.template(popupTemplate)
-        }
-        const tooltipTemplate = _.get(leafletOptions, 'tooltip.template')
-        if (tooltipTemplate) {
-          leafletOptions.tooltip.compiler = _.template(tooltipTemplate)
-        }
-        // Optimize styling by creating color scales up-front
-        const variables = _.get(options, 'variables', [])
-        variables.forEach(variable => {
-          if (_.has(variable, 'chromajs')) {
-            variable.colorScale = kdkCoreUtils.buildColorScale(_.get(variable, 'chromajs'))
-          }
-        })
-        // Convert and store the style
-        if (leafletOptions.style) {
-          leafletOptions.layerPointStyle = _.get(leafletOptions.style, 'point')
-          leafletOptions.layerLineStyle = _.get(leafletOptions.style, 'line')
-          leafletOptions.layerPolygonStyle = _.get(leafletOptions.style, 'polygon')
-        } else {
-          leafletOptions.layerPointStyle = convertSimpleStyleToPointStyle(leafletOptions)
-          leafletOptions.layerLineStyle = convertSimpleStyleToLineStyle(leafletOptions)
-          leafletOptions.layerPolygonStyle = convertSimpleStyleToPolygonStyle(leafletOptions)
-        }
+        this.processGeoJsonStyleOptions(options)
+        // Do this after style because it may alter it
+        this.processGeoJsonPaneOptions(options)
         // Merge generic GeoJson options and layer options
         const geoJsonOptions = this.getGeoJsonOptions(options)
         Object.keys(geoJsonOptions).forEach(key => {
@@ -247,13 +276,6 @@ export const geojsonLayers = {
           }
           // Bind event
           layer.on('update', (data) => this.onLayerUpdated(options, layer, data))
-          if (leafletOptions.container) layer.once('add', () => leafletOptions.container.addTo(this.map))
-          // Add FeatureGroup interface so that layer edition works as well
-          layer.toGeoJSON = () => ({ type: 'FeatureCollection', features: _.values(layer._features) })
-          layer.clearLayers = () => layer._onNewData(true, { type: 'FeatureCollection', features: [] })
-          layer.getLayers = () => _.values(layer._featureLayers)
-          layer.addLayer = (geoJsonLayer) => layer._onNewData(false, geoJsonLayer.toGeoJSON())
-          layer.removeLayer = (geoJsonLayer) => layer.remove(geoJsonLayer.toGeoJSON())
           // We launch a first update to initialize data
           layer.update()
         } else {
@@ -309,10 +331,10 @@ export const geojsonLayers = {
             logger.warn(`[KDK] cannot get a style type from the feature of geometry type ${feature.geometry.type}`)
             return
           }
-          return this.generateStyle(styleType, feature, options, _.get(this, 'activityOptions.engine'))
+          return this.generateStyle(styleType, feature, options, _.get(this, `activityOptions.engine.style.${styleType}`), this.map.getZoom())
         },
         pointToLayer: (feature, latlng) => {
-          const style = this.generateStyle('point', feature, options, _.get(this, 'activityOptions.engine'))
+          const style = this.generateStyle('point', feature, options, _.get(this, 'activityOptions.engine.style.point'), this.map.getZoom())
           if (!style) {
             logger.warn('[KDK] cannot generate point style from a feature')
             return
@@ -325,16 +347,24 @@ export const geojsonLayers = {
     getUpdateAnimation(name, layer, options, geoJson) {
       const { duration, removeMissing, animate } = options
       const animatedProperties = _.keys(animate)
-      const features = (Array.isArray(geoJson) ? geoJson : (geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson]))
+      animatedProperties.forEach(property => {
+        _.defaultsDeep(animate, {
+          [property]: { easing: { function: 'linear' }, bearing: false }
+        })
+      })
+      const features = getGeoJsonFeatures(geoJson)
       features.forEach(feature => {
         const previousLayer = layer.getLayer(layer.options.getFeatureId(feature))
         const previousFeature = (previousLayer ? previousLayer.feature : null)
         if (previousFeature) {
-          Object.assign(feature, { previousFeature })
-          const startLongitude = _.get(feature.previousFeature, 'geometry.coordinates[0]')
-          const startLatitude = _.get(feature.previousFeature, 'geometry.coordinates[1]')
-          const endLongitude = _.get(feature, 'geometry.coordinates[0]')
-          const endLatitude = _.get(feature, 'geometry.coordinates[1]')
+          // Remove reference to previous feature otherwise it will create a reference tree that will grow as timle passes by
+          // and that will never be clear by garbage collector unless the layer is destroyed
+          delete previousFeature['previousFeature']
+          feature.previousFeature = previousFeature
+          const startLongitude = feature.previousFeature.geometry.coordinates[0]
+          const startLatitude = feature.previousFeature.geometry.coordinates[1]
+          const endLongitude = feature.geometry.coordinates[0]
+          const endLatitude = feature.geometry.coordinates[1]
           const rhumbStart = point([startLongitude, startLatitude])
           const rhumbEnd = point([endLongitude, endLatitude])
           Object.assign(feature, {
@@ -345,12 +375,29 @@ export const geojsonLayers = {
           })
         }
       })
+      // Note: as this callback is called frequently by the animation system
+      // we don't use lodash utility functions like _.get/_.set to improve performances
       return (timestamp) => {
         // Initialize animation time origin
         if (!options.startTime) options.startTime = timestamp
-        const { id, startTime } = options
-        const elapsed = timestamp - startTime
-        const percent = Math.abs(elapsed / (1000 * duration))
+        const { id, startTime, fps } = options
+        const elapsedSinceStart = timestamp - startTime
+        // If we target a specific frame rate check if we need to update or not
+        if (fps && options.lastTime) {
+          const elapsedSinceLastFrame = timestamp - options.lastTime
+          const fpsInterval = 1000 / fps
+          if (elapsedSinceLastFrame < fpsInterval) {
+            options.id = requestAnimationFrame(options.step)
+            // For debug purpose only, avoid flooding the browser
+            //logger.debug('[KDK] Skipping update layer animation frame')
+            return
+          } else {
+            // For debug purpose only, avoid floodign the browser
+            //logger.debug('[KDK] Drawing update layer animation frame')
+          }
+        }
+        // Else animate if animation not yet finished
+        const percent = Math.abs(elapsedSinceStart / (1000 * duration))
         if (percent <= 1) {
           const animatedFeatures = []
           features.forEach(feature => {
@@ -358,54 +405,61 @@ export const geojsonLayers = {
               animatedFeatures.push(feature)
               return
             }
-            const endLongitude = _.get(feature, 'geometry.coordinates[0]')
-            const endLatitude = _.get(feature, 'geometry.coordinates[1]')
+            const endLongitude = feature.geometry.coordinates[0]
+            const endLatitude = feature.geometry.coordinates[1]
             let dLongitude = endLongitude, dLatitude = endLatitude
             if (animate.geometry) {
-              const easingGeometryFunction = _.get(animate.geometry, 'easing.function')
-              const easingGeometryParameters = _.get(animate.geometry, 'easing.parameters', [])
+              const easingGeometryFunction = animate.geometry.easing.function
+              const easingGeometryParameters = animate.geometry.easing.parameters || []
               const percentGeometry = maths[easingGeometryFunction](percent, ...easingGeometryParameters)
               if (animate.geometry.rhumb) {
                 const destination = rhumbDestination(feature.rhumbStart, percentGeometry * feature.rhumbDistance, feature.rhumbBearing)
-                dLongitude = _.get(destination, 'geometry.coordinates[0]')
-                dLatitude = _.get(destination, 'geometry.coordinates[1]')
+                dLongitude = destination.geometry.coordinates[0]
+                dLatitude = destination.geometry.coordinates[1]
               } else {
-                const startLongitude = _.get(feature.previousFeature, 'geometry.coordinates[0]')
-                const startLatitude = _.get(feature.previousFeature, 'geometry.coordinates[1]')
-                const dLongitude = startLongitude + percentGeometry * (endLongitude - startLongitude)
-                const dLatitude = startLatitude + percentGeometry * (endLatitude - startLatitude)
+                const startLongitude = feature.previousFeature.geometry.coordinates[0]
+                const startLatitude = feature.previousFeature.geometry.coordinates[1]
+                dLongitude = startLongitude + percentGeometry * (endLongitude - startLongitude)
+                dLatitude = startLatitude + percentGeometry * (endLatitude - startLatitude)
               }
             }
             const properties = {}
+            const previousFeatureProperties = feature.previousFeature.properties || {}
+            const featureProperties = feature.properties || {}
             animatedProperties.forEach(property => {
               // Skip geometry as specifically managed above
               if (property === 'geometry') return
-              const easingPropertyFunction = _.get(animate, `${property}.easing.function`, 'cubicBezier')
-              const easingPropertyParameters = _.get(animate, `${property}.easing.parameters`, [])
+              const animateProperty = animate[property]
+              const easingPropertyFunction = animateProperty.easing.function
+              const easingPropertyParameters = animateProperty.easing.parameters || []
               const percentProperty = maths[easingPropertyFunction](percent, ...easingPropertyParameters)
-              const startValue = _.get(feature.previousFeature, `properties.${property}`)
-              const endValue = _.get(feature, `properties.${property}`)
+              const startValue = previousFeatureProperties[property]
+              const endValue = featureProperties[property]
               let dValue = startValue + percentProperty * (endValue - startValue)
-              if (_.get(animate, `${property}.bearing`, false)) {
+              if (animateProperty.bearing) {
                 // Take care to animate using the shortest "path", eg from 355° to 5° avoid running counterclockwise
                 // First computes the smallest angle difference, either clockwise or counterclockwise.
                 const bearingDifference = (endValue - startValue + 540) % 360 - 180
                 // Then normalize the final result to be between 0 and 360
                 dValue = (startValue + percentProperty * bearingDifference + 360) % 360
               }
-              _.set(properties, property, dValue)
+              properties[property] = dValue
             })
-            animatedFeatures.push(_.defaultsDeep({
+            animatedFeatures.push({
+              type: feature.type,
               geometry: {
+                type: feature.geometry.type,
                 coordinates: [dLongitude, dLatitude]
               },
-              properties
-            }, feature))
+              properties: Object.assign({}, featureProperties, properties),
+              style: feature.style
+            })
           })
           layer._onNewData(_.isNil(removeMissing) ? layer.options.removeMissing : removeMissing, animatedFeatures)
+          options.lastTime = timestamp
           options.id = requestAnimationFrame(options.step)
         } else {
-          options.id = null
+          delete options.id
         }
       }
     },
@@ -417,12 +471,12 @@ export const geojsonLayers = {
         logger.warn(`Impossible to update non-realtime layer ${name}`)
         return // Cannot update non-realtime layer
       }
-
       const replace = _.get(options, 'replace', false)
       if (replace) {
         // Replace given features, we first remove them to add them back afterwards
         this.updateLayer(name, geoJson, { remove: true })
-        this.updateLayer(name, geoJson)
+        // Avoid infinite regression by removing the replace option
+        this.updateLayer(name, geoJson, _.omit(options, ['replace']))
       } else {
         // Backward compatibility when third parameter was the remove flag
         const remove = (typeof options === 'boolean' ? options : options.remove)
@@ -439,26 +493,39 @@ export const geojsonLayers = {
         */
         if (remove) {
           if (typeof layer.remove !== 'function') return
-          let features = (geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson])
+          let features = getGeoJsonFeatures(geoJson)
           // Filter features to ensure some have not been already removed
           // FIXME: indeed it seems to causes a bug with clustering, see https://github.com/kalisio/kdk/issues/140
           features = features.filter(feature => layer.getLayer(layer.options.getFeatureId(feature)))
           layer.remove(features)
         } else if (geoJson) {
           if (typeof layer._onNewData === 'function') {
-            const duration = _.get(options, 'duration', 0)
+            let duration = _.get(options, 'duration', 0)
+            const features = (Array.isArray(geoJson) ? geoJson : (geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson]))
+            // Nothing to animate in this case
+            if (duration && (features.length === 0)) {
+              duration = 0
+            }
+            if (duration && _.some(features, feature => (getType(feature) !== 'Point'))) {
+              logger.warn(`Impossible to animate layer ${name} as it does not contain only point geometries`)
+              duration = 0
+            }
             if (duration) {
+              // For debug purpose only, avoid flooding the browser
+              //logger.debug(`Calling updateLayer(${name}) with`, options)
               _.defaultsDeep(options, {
                 animate: {
-                  geometry: { easing: { function: 'cubicBezier' }, rhumb: true }
+                  geometry: { easing: { function: 'linear' }, rhumb: false }
                 }
               })
               // Stop any scheduled animation on the same layer
-              if (_.has(this.updateAnimations, `${name}.id`)) cancelAnimationFrame(_.get(this.updateAnimations, `${name}.id`))
+              const frameId = _.get(this.updateAnimations, `${name}.id`)
+              if (!_.isNil(frameId)) cancelAnimationFrame(frameId)
               options.step = this.getUpdateAnimation(name, layer, options, geoJson)
               options.id = requestAnimationFrame(options.step)
               _.set(this.updateAnimations, name, options)
             } else {
+              _.unset(this.updateAnimations, name)
               layer._onNewData(removeMissing, geoJson)
             }
           }
@@ -577,6 +644,12 @@ export const geojsonLayers = {
         }
       }
     },
+    onEditStopGeoJsonLayers ({ status, layer }) {
+      // Check if we have to cache/update geojson data for this layer
+      if (isInMemoryLayer(layer)) {
+        this.geojsonCache[layer.name] = this.toGeoJson(layer.name)
+      }
+    },
     onLayerRemovedGeoJsonLayers (layer) {
       // Remove cached geojson data if any
       if (_.has(this.geojsonCache, layer.name)) {
@@ -586,11 +659,12 @@ export const geojsonLayers = {
   },
   created () {
     this.registerLeafletConstructor(this.createLeafletGeoJsonLayer)
-    this.$events.on('time-current-time-changed', this.onCurrentTimeChangedGeoJsonLayers)
+    Events.on('time-current-time-changed', this.onCurrentTimeChangedGeoJsonLayers)
     this.$engineEvents.on('selected-level-changed', this.onCurrentLevelChangedGeoJsonLayers)
-    this.$events.on('units-changed', this.onDefaultUnitChangedGeoJsonLayers)
+    Events.on('units-changed', this.onDefaultUnitChangedGeoJsonLayers)
     this.$engineEvents.on('zoomend', this.onMapZoomChangedGeoJsonLayers)
     this.$engineEvents.on('layer-shown', this.onLayerShownGeoJsonLayers)
+    this.$engineEvents.on('edit-stop', this.onEditStopGeoJsonLayers)
     this.$engineEvents.on('layer-removed', this.onLayerRemovedGeoJsonLayers)
 
     // Used to store animation options when animating a layer
@@ -599,11 +673,12 @@ export const geojsonLayers = {
     this.geojsonCache = {}
   },
   beforeUnmount () {
-    this.$events.off('time-current-time-changed', this.onCurrentTimeChangedGeoJsonLayers)
+    Events.off('time-current-time-changed', this.onCurrentTimeChangedGeoJsonLayers)
     this.$engineEvents.off('selected-level-changed', this.onCurrentLevelChangedGeoJsonLayers)
-    this.$events.off('units-changed', this.onDefaultUnitChangedGeoJsonLayers)
+    Events.off('units-changed', this.onDefaultUnitChangedGeoJsonLayers)
     this.$engineEvents.off('zoomend', this.onMapZoomChangedGeoJsonLayers)
     this.$engineEvents.off('layer-shown', this.onLayerShownGeoJsonLayers)
+    this.$engineEvents.off('edit-stop', this.onEditStopGeoJsonLayers)
     this.$engineEvents.off('layer-removed', this.onLayerRemovedGeoJsonLayers)
 
     this.geojsonCache = {}

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

@@ -4,6 +4,7 @@ import sift from 'sift'
 import centroid from '@turf/centroid'
 import HeatmapOverlay from 'leaflet-heatmap'
 import { Time } from '../../../../core/client/time.js'
+import { Events } from '../../../../core/client/events.js'
 import { fetchGeoJson } from '../../utils/utils.features.js'
 
 export const heatmapLayers = {
@@ -103,10 +104,10 @@ export const heatmapLayers = {
   },
   created () {
     this.registerLeafletConstructor(this.createLeafletHeatmapLayer)
-    this.$events.on('time-current-time-changed', this.onCurrentTimeChangedHeatmapLayers)
+    Events.on('time-current-time-changed', this.onCurrentTimeChangedHeatmapLayers)
   },
   beforeUnmount () {
-    this.$events.off('time-current-time-changed', this.onCurrentTimeChangedHeatmapLayers)
+    Events.off('time-current-time-changed', this.onCurrentTimeChangedHeatmapLayers)
   }
 }
 

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

@@ -1,3 +1,5 @@
+import _ from 'lodash'
+
 export const activity = {
   methods: {
     async initializeMap (container) {
@@ -11,7 +13,10 @@ export const activity = {
     },
     storeView () {
       // Check if the activity is using context restoration
-      if (typeof this.storeContext === 'function') this.storeContext('view')
+      if (typeof this.storeContext === 'function') {
+        // Do not store context on each animation frame to avoid too much CPU consumption
+        if (!_.get(this.centerAnimation, 'id')) this.storeContext('view')
+      }
     },
     onMapResized (size) {
       // Avoid to refresh the layout when leaving the component

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

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import logger from 'loglevel'
+import { Store } from '../../../../core/client/index.js'
 import { LeafletEvents, bindLeafletEvents } from '../../utils.map.js'
 
 export const mapillaryLayers = {
@@ -34,7 +35,7 @@ export const mapillaryLayers = {
   },
   created () {
     // Check whether the token is initialized
-    this.mapillaryToken = this.$store.get('capabilities.api.mapillary.token')
+    this.mapillaryToken = Store.get('capabilities.api.mapillary.token')
     if (!this.mapillaryToken) {
       logger.warn('You must provide a client token to use Mapillary')
       return

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

@@ -5,7 +5,7 @@ import sift from 'sift'
 import L from 'leaflet'
 import * as protomaps from 'protomaps-leaflet'
 import { mapbox_style } from '@kalisio/leaflet-pmtiles'
-import { api, Time, Units, TemplateContext } from '../../../../core/client/index.js'
+import { api, Time, Units, Events, TemplateContext } from '../../../../core/client/index.js'
 
 export const pmtilesLayers = {
   methods: {
@@ -104,11 +104,11 @@ export const pmtilesLayers = {
   },
   created () {
     this.registerLeafletConstructor(this.createLeafletPMTilesLayer)
-    this.$events.on('time-current-time-changed', this.onCurrentTimeChangedPMTilesLayers)
+    Events.on('time-current-time-changed', this.onCurrentTimeChangedPMTilesLayers)
     this.$engineEvents.on('selected-level-changed', this.onCurrentLevelChangedPMTilesLayers)
   },
   beforeUnmount () {
-    this.$events.off('time-current-time-changed', this.onCurrentTimeChangedPMTilesLayers)
+    Events.off('time-current-time-changed', this.onCurrentTimeChangedPMTilesLayers)
     this.$engineEvents.off('selected-level-changed', this.onCurrentLevelChangedPMTilesLayers)
   }
 }

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

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import { Time } from '../../../../core/client/time.js'
+import { Events } from '../../../../core/client/events.js'
 import { makeGridSource, extractGridSourceConfig } from '../../../common/grid.js'
 import { TiledMeshLayer } from '../../leaflet/TiledMeshLayer.js'
 
@@ -106,7 +107,7 @@ export const tiledMeshLayers = {
     this.$engineEvents.on('layer-hidden', this.onHideTiledMeshLayer)
     this.$engineEvents.on('selected-level-changed', this.onSelectedLevelChangedTiledMeshLayer)
     this.$engineEvents.on('forecast-model-changed', this.onForecastModelChangedTiledMeshLayer)
-    this.$events.on('time-current-time-changed', this.onCurrentTimeChangedTiledMeshLayer)
+    Events.on('time-current-time-changed', this.onCurrentTimeChangedTiledMeshLayer)
   },
 
   beforeUnmount () {
@@ -115,6 +116,6 @@ export const tiledMeshLayers = {
     this.$engineEvents.off('layer-hidden', this.onHideTiledMeshLayer)
     this.$engineEvents.off('selected-level-changed', this.onSelectedLevelChangedTiledMeshLayer)
     this.$engineEvents.off('forecast-model-changed', this.onForecastModelChangedTiledMeshLayer)
-    this.$events.off('time-current-time-changed', this.onCurrentTimeChangedTiledMeshLayer)
+    Events.off('time-current-time-changed', this.onCurrentTimeChangedTiledMeshLayer)
   }
 }

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

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import 'leaflet-velocity'
 import { Time } from '../../../../core/client/time.js'
+import { Events } from '../../../../core/client/events.js'
 import { makeGridSource, extractGridSourceConfig } from '../../../common/grid.js'
 import { TiledWindLayer } from '../../leaflet/TiledWindLayer.js'
 
@@ -115,7 +116,7 @@ export const tiledWindLayers = {
     this.$engineEvents.on('layer-hidden', this.onHideTiledWindLayer)
     this.$engineEvents.on('selected-level-changed', this.onSelectedLevelChangedTiledWindLayer)
     this.$engineEvents.on('forecast-model-changed', this.onForecastModelChangedTiledWindLayer)
-    this.$events.on('time-current-time-changed', this.onCurrentTimeChangedTiledWindLayer)
+    Events.on('time-current-time-changed', this.onCurrentTimeChangedTiledWindLayer)
   },
 
   beforeUnmount () {
@@ -124,6 +125,6 @@ export const tiledWindLayers = {
     this.$engineEvents.off('layer-hidden', this.onHideTiledWindLayer)
     this.$engineEvents.off('selected-level-changed', this.onSelectedLevelChangedTiledWindLayer)
     this.$engineEvents.off('forecast-model-changed', this.onForecastModelChangedTiledWindLayer)
-    this.$events.off('time-current-time-changed', this.onCurrentTimeChangedTiledWindLayer)
+    Events.off('time-current-time-changed', this.onCurrentTimeChangedTiledWindLayer)
   }
 }