@kalisio/kdk 2.5.3 → 2.6.0

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

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import moment from 'moment'
+import { Entity } from 'cesium'
 import { Time, Units } from '../../../../core/client/index.js'
 
 export const tooltip = {
@@ -7,15 +8,26 @@ export const tooltip = {
     applyTooltips (entities, options) {
       for (let i = 0; i < entities.values.length; i++) {
         const entity = entities.values[i]
+        // Get any previous tooltip entity
+        const previousTooltipEntity = this.getChildForEntity(entity)
         const tooltip = this.generateStyle('tooltip', entity, options)
         if (tooltip) {
           // Default tooltip position (can change in sticky mode)
           const position = this.getPositionForEntity(entity)
           if (position) {
-            const tooltipEntity = this.viewer.entities.add({ parent: entity, position, label: tooltip })
+            const tooltipEntity = new Entity({ parent: entity, position, label: tooltip })
             // This option is not cesium specific so we have to manage it manually
-            if (tooltip.sticky) tooltipEntity.sticky = true
+            tooltipEntity.sticky = true
+            if (!previousTooltipEntity) {
+              this.viewer.entities.add(tooltipEntity)
+            } else {
+              previousTooltipEntity.position = tooltipEntity.position
+              previousTooltipEntity.label = tooltipEntity.label
+              tooltipEntity.parent = null
+            }
           }
+        } else if (previousTooltipEntity) {
+          this.viewer.entities.remove(previousTooltipEntity)
         }
       }
     },

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

@@ -2,16 +2,13 @@ import _ from 'lodash'
 import sift from 'sift'
 import logger from 'loglevel'
 import moment from 'moment'
-import L from 'leaflet'
-import Emitter from 'tiny-emitter'
+import { EventBus } from 'quasar'
 import { point, rhumbDistance, rhumbBearing, rhumbDestination } from '@turf/turf'
+import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 // This ensure we have all required plugins
 import 'leaflet-fullscreen'
 import 'leaflet-fullscreen/dist/leaflet.fullscreen.css'
-import 'leaflet.markercluster/dist/MarkerCluster.css'
-import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
-import 'leaflet.markercluster'
 import '@kalisio/leaflet.donutcluster/src/Leaflet.DonutCluster.css'
 import '@kalisio/leaflet.donutcluster'
 import 'leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.js'
@@ -27,12 +24,14 @@ import 'leaflet-timedimension/dist/leaflet.timedimension.control.css'
 import '@geoman-io/leaflet-geoman-free'
 import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
 import 'leaflet-rotate/dist/leaflet-rotate-src.js'
+
 import { Time } from '../../../../core/client/time.js'
-import { getAppLocale } from '../../../../core/client/utils/index.js'
+import { Events } from '../../../../core/client/events.js'
+import { getLocale } from '../../../../core/client/utils/index.js'
 import '../../leaflet/BoxSelection.js'
 import '../../leaflet/WindBarb.js'
 import { Geolocation } from '../../geolocation.js'
-import { LeafletEvents, TouchEvents, bindLeafletEvents } from '../../utils.map.js' // https://github.com/socib/Leaflet.TimeDimension/issues/124
+import { LeafletEvents, TouchEvents, bindLeafletEvents, getNearestTime } from '../../utils.map.js' // https://github.com/socib/Leaflet.TimeDimension/issues/124
 import { generateLayerDefinition } from '../../utils/utils.layers.js'
 import * as maths from '../../../../core/client/utils/utils.math.js'
 
@@ -117,7 +116,7 @@ export const baseMap = {
       if (this.map.pm === undefined) {
         this.map.options.pmIgnore = false
         L.PM.reInitLayer(this.map)
-        this.map.pm.setLang(getAppLocale())
+        this.map.pm.setLang(getLocale())
       }
       // Leaflet does not really manage touch events, it provides compatibility mapping with mouse events
       // but it will not really trigger touch event from the map object, as a consequence we manage this by ourselves
@@ -331,30 +330,35 @@ export const baseMap = {
       })
     },
     createLeafletLayer (options) {
+      const name = options.name
       const leafletOptions = options.leaflet || options
-      // Manage panes to make z-index work for all types of layers
+      // Manage panes to make z-index work for all types of layers.
       // Indeed, although DOM-based layers can use setZIndex() to manage rendering order
-      // SVG/Canvas-based layers provide no mean to manage render order except using bringToFront() or bringToBack()
+      // SVG/Canvas-based layers provide no mean to manage render order except using bringToFront() or bringToBack().
       // This is why Leaflet 1.0 introduced panes: https://leafletjs.com/reference.html#map-pane & https://leafletjs.com/examples/map-panes/
-      // By implicitely create a pane for each provided z-index makes this transparent for the user
-      let zIndex = _.has(leafletOptions, 'zIndex')
-      let pane = _.has(leafletOptions, 'pane')
-      // Avoid erasing any existing pane, if so the pane should have been created taken into account the layer zIndex up-front
-      if (zIndex && !pane) {
-        zIndex = _.get(leafletOptions, 'zIndex')
-        this.createLeafletPane(zIndex)
-        // Set layer to use target pane
-        _.set(leafletOptions, 'pane', zIndex.toString())
+      // By implicitely create a pane for each provided z-index makes this transparent for the user.
+      const layerPane = { name }
+      const hasMinZoom = !!_.get(leafletOptions, 'minZoom')
+      const hasMaxZoom = !!_.get(leafletOptions, 'maxZoom')
+      const hasZIndex = !!_.get(leafletOptions, 'zIndex')
+      if (hasMinZoom) layerPane.minZoom = _.get(leafletOptions, 'minZoom')
+      if (hasMaxZoom) layerPane.maxZoom = _.get(leafletOptions, 'maxZoom')
+      if (hasZIndex) layerPane.zIndex = _.get(leafletOptions, 'zIndex')
+      if (hasZIndex) {
+        this.createLeafletPane(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')) _.set(leafletOptions, 'pane', layerPane.name)
       }
       // Different panes inside a layer can be used to manage visibility according to zoom level
-      const panes = _.get(leafletOptions, 'panes')
+      const panes = _.get(leafletOptions, 'panes', [])
       if (panes) {
         panes.forEach(paneOptions => {
           const pane = this.createLeafletPane(paneOptions)
           Object.assign(pane, paneOptions)
         })
-        this.updateLeafletPanesVisibility()
       }
+      this.updateLeafletPanesVisibility()
 
       // Some Leaflet constructors can have additional arguments given as options
       let args = _.get(leafletOptions, 'options', [])
@@ -402,7 +406,14 @@ export const baseMap = {
         _.set(timeDimension, 'period', 'P1D')
         const timeRange = _.get(timeDimension, 'times')
         const timeRangeComponents = (typeof timeRange === 'string' ? timeRange.split('/') : [])
-        if (timeRangeComponents.length === 2) {
+        const timeList = (typeof timeRange === 'string' ? timeRange.split(',') : [])
+        let times = [] // Time list as moment objects to ease search
+        if (!_.isEmpty(timeList)) {
+          // In this case there is no period as time list should be ISO
+          _.unset(timeDimension, 'period')
+          // Convert to moment objects
+          times = _.sortBy(timeList.map(time => moment.utc(time)), (time) => time.valueOf())
+        } else if (timeRangeComponents.length === 2) {
           _.set(timeDimension, 'times', `${timeRange}/P1D`)
         } else if (timeRangeComponents.length === 3) {
           _.set(timeDimension, 'period', timeRangeComponents[2])
@@ -417,16 +428,30 @@ export const baseMap = {
           currentTime: Time.getCurrentTime().toDate().getTime()
         })
         // This allow the layer to conform our internal time interface
-        layer.setCurrentTime = (datetime) => { layer._timeDimension.setCurrentTime(datetime.toDate().getTime()) }
+        layer.setCurrentTime = (datetime) => {
+          layer._timeDimension.setCurrentTime(datetime.toDate().getTime())
+        }
         // Default implementation always generate ISO datetime that might break some servers with eg day period only
         layer._createLayerForTime = (time) => {
+          time = moment.utc(time)
           // Remove some internals to avoid polluting request
           const wmsParams = _.omit(layer._baseLayer.options, ['timeDimension', 'isVisible', 'type'])
           // Format time according to period
-          if (periodAsDuration.years() > 0) wmsParams.time = moment.utc(time).format('YYYY').toISOString()
-          else if (periodAsDuration.months() > 0) wmsParams.time = moment.utc(time).format('YYYY-MM')
-          else if (periodAsDuration.days() > 0) wmsParams.time = moment.utc(time).format('YYYY-MM-DD')
-          else wmsParams.time = moment.utc(time).toISOString()
+          if (periodAsDuration.years() > 0) {
+            wmsParams.time = time.format('YYYY').toISOString()
+          } else if (periodAsDuration.months() > 0) {
+            wmsParams.time = time.format('YYYY-MM')
+          } else if (periodAsDuration.days() > 0) {
+            wmsParams.time = time.format('YYYY-MM-DD')
+          } else if (!_.isEmpty(times)) {
+            // Find nearest available time, as we keep the list ordered it could use a faster algorithm in utility function
+            const { index, difference } = getNearestTime(time, times, true)
+            // Keep original time format in any case it is not ISO
+            if (index >= 0) wmsParams.time = timeList[index]
+            else wmsParams.time = time.toISOString()
+          } else {
+            wmsParams.time = time.toISOString()
+          }
           // Some Leaflet constructors can have additional arguments given as options
           let args = _.get(leafletOptions, 'options', [])
           // Can be an array or a single object for a single additonnal argument
@@ -506,8 +531,6 @@ export const baseMap = {
       this.map.addLayer(leafletLayer)
       layer.isVisible = true
 
-      // Ensure base layer will not pop on top of others
-      if (layer.type === 'BaseLayer') leafletLayer.bringToBack()
       // Apply the current time if needed
       if (typeof leafletLayer.setCurrentTime === 'function') leafletLayer.setCurrentTime(Time.getCurrentTime())
       this.onLayerShown(layer, leafletLayer)
@@ -551,15 +574,17 @@ export const baseMap = {
       this.$emit('layer-added', layer)
       this.$engineEvents.emit('layer-added', layer)
     },
-    async addGeoJsonLayer (layerSpec, geoJson) {
+    async addGeoJsonLayer (layerSpec, geoJson, zoom = true) {
       if (!generateLayerDefinition(layerSpec, geoJson)) return
       // Create an empty layer used as a container
       await this.addLayer(layerSpec)
       // Set the content
       await this.updateLayer(layerSpec.name, geoJson)
-      // Zoom to it
-      if (geoJson.bbox) this.zoomToBBox(geoJson.bbox)
-      else this.zoomToLayer(layerSpec.name)
+      // Zoom to the layer
+      if (zoom) {
+        if (geoJson.bbox) this.zoomToBBox(geoJson.bbox)
+        else this.zoomToLayer(layerSpec.name)
+      }
     },
     renameLayer (previousName, newName) {
       const layer = this.getLayerByName(previousName)
@@ -637,41 +662,98 @@ export const baseMap = {
     zoomToBBox (bbox) {
       this.zoomToBounds([[bbox[1], bbox[0]], [bbox[3], bbox[2]]])
     },
+    bringLayerToFront (name) {
+      let leafletLayer = this.getLeafletLayerByName(name)
+      if (!leafletLayer) return
+      // If panes are declared on this layer push it front to make it on top of others should be sufficient.
+      const panes = _.get(leafletLayer, 'options.panes')
+      if (panes) {
+        panes.forEach(paneOptions => {
+          const pane = this.getLeafletPaneByName(this.getLeafletPaneName(paneOptions))
+          if (pane) L.DomUtil.toFront(pane)
+        })
+        return
+      }
+      // Handle case where there's clustering on top (cf. updateLayer)
+      if (leafletLayer instanceof L.MarkerClusterGroup) {
+        const container = leafletLayer
+        leafletLayer = leafletLayer.getLayers().find(layer => layer._container === container)
+      }
+      if (leafletLayer && (typeof leafletLayer.bringToFront === 'function')) leafletLayer.bringToFront()
+    },
+    bringLayerToBack (name) {
+      let leafletLayer = this.getLeafletLayerByName(name)
+      if (!leafletLayer) return
+      // If panes are declared on this layer push it back to make it under others should be sufficient.
+      const panes = _.get(leafletLayer, 'options.panes')
+      if (panes) {
+        panes.forEach(paneOptions => {
+          const pane = this.getLeafletPaneByName(this.getLeafletPaneName(paneOptions))
+          if (pane) L.DomUtil.toBack(pane)
+        })
+        return
+      }
+      // Handle case where there's clustering on top (cf. updateLayer)
+      if (leafletLayer instanceof L.MarkerClusterGroup) {
+        const container = leafletLayer
+        leafletLayer = leafletLayer.getLayers().find(layer => layer._container === container)
+      }
+      if (leafletLayer && (typeof leafletLayer.bringToBack === 'function')) leafletLayer.bringToBack()
+    },
     animateCenter (timestamp) {
+      // Note: as this callback is called frequently by the animation system
+      // we don't use lodash utility functions like _.get/_.set to improve performances
+      
       // Initialize animation time origin
       if (!this.centerAnimation.startTime) this.centerAnimation.startTime = timestamp
-      const { id, duration, startTime,
+      const { id, duration, startTime, fps,
         animate: { center, zoom, bearing },
         startLongitude, endLatitude, startLatitude, startZoom, startBearing,
         endLongitude, endZoom, endBearing } = this.centerAnimation
-      const elapsed = timestamp - startTime
-      const percent = Math.abs(elapsed / (1000 * duration))
+      const elapsedSinceStart = timestamp - startTime
+      // If we target a specific frame rate check if we need to update or not
+      if (fps && this.centerAnimation.lastTime) {
+        const elapsedSinceLastFrame = timestamp - this.centerAnimation.lastTime
+        const fpsInterval = 1000 / fps
+        if (elapsedSinceLastFrame < fpsInterval) {
+          this.centerAnimation.id = requestAnimationFrame(this.animateCenter)
+          // For debug purpose only, avoid flooding the browser
+          //logger.debug('[KDK] Skipping center animation frame')
+          return
+        } else {
+          // For debug purpose only, avoid flooding the browser
+          //logger.debug('[KDK] Drawing center animation frame')
+        }
+      }
+      // Else animate if animation not yet finished
+      const percent = Math.abs(elapsedSinceStart / (1000 * duration))
       let percentCenter, percentZoom, percentBearing
       if (percent <= 1) {
         const currentCenter = this.getCenter()
         if (center) {
-          const easingCenterFunction = _.get(center, 'easing.function')
-          const easingCenterParameters = _.get(center, 'easing.parameters', [])
+          const easingCenterFunction = center.easing.function
+          const easingCenterParameters = center.easing.parameters || []
           percentCenter = maths[easingCenterFunction](percent, ...easingCenterParameters)
         }
         if (zoom) {
-          const easingZoomFunction = _.get(zoom, 'easing.function')
-          const easingZoomParameters = _.get(zoom, 'easing.parameters', [])
+          const easingZoomFunction = zoom.easing.function
+          const easingZoomParameters = zoom.easing.parameters || []
           percentZoom = maths[easingZoomFunction](percent, ...easingZoomParameters)
         }
         if (bearing) {
-          const easingBearingFunction = _.get(bearing, 'easing.function')
-          const easingBearingParameters = _.get(bearing, 'easing.parameters', [])
+          const easingBearingFunction = bearing.easing.function
+          const easingBearingParameters = bearing.easing.parameters || []
           percentBearing = maths[easingBearingFunction](percent, ...easingBearingParameters)
         }
-        const dx = (center ? percentCenter * _.get(this.centerAnimation, 'offset.x', 0) : 0)
-        const dy = (center ? percentCenter * _.get(this.centerAnimation, 'offset.y', 0) : 0)
+        const offset = this.centerAnimation.offset
+        const dx = (center && offset ? percentCenter * offset.x || 0 : 0)
+        const dy = (center && offset ? percentCenter * offset.y || 0 : 0)
         let dLongitude = currentCenter.longitude, dLatitude = currentCenter.latitude
         if (center) {
           if (center.rhumb) {
             const destination = rhumbDestination(this.centerAnimation.rhumbStart, percentCenter * this.centerAnimation.rhumbDistance, this.centerAnimation.rhumbBearing)
-            dLongitude = _.get(destination, 'geometry.coordinates[0]')
-            dLatitude = _.get(destination, 'geometry.coordinates[1]')
+            dLongitude = destination.geometry.coordinates[0]
+            dLatitude = destination.geometry.coordinates[1]
           } else {
             dLongitude = startLongitude + percentCenter * (endLongitude - startLongitude)
             dLatitude = startLatitude + percentCenter * (endLatitude - startLatitude)
@@ -686,7 +768,8 @@ export const baseMap = {
           // Then normalize the final result to be between 0 and 360
           dBearing = (bearing ? (startBearing + percentBearing * bearingDifference + 360) % 360 : null)
         }
-        this.center(dLongitude, dLatitude, dZoom, dBearing, { offset: { x: Math.round(dx), y: Math.round(dy) } })
+        this.center(dLongitude, dLatitude, dZoom, dBearing, { offset: { x: Math.round(dx), y: Math.round(dy) }, bearingTolerance: this.centerAnimation.bearingTolerance })
+        this.centerAnimation.lastTime = timestamp
         this.centerAnimation.id = requestAnimationFrame(this.animateCenter)
       } else {
         this.centerAnimation.id = null
@@ -698,14 +781,15 @@ export const baseMap = {
       if (_.isNil(bearing)) bearing = this.map.getBearing()
       // Keep bearing positive, required for interpolation to work correctly
       if (bearing < 0) bearing += 360
-      
       const duration = _.get(options, 'duration', 0)
       if (duration) {
+        // For debug purpose only, avoid flooding the browser
+        //logger.debug('Calling center() with', longitude, latitude, options)
         _.defaultsDeep(options, {
           animate: {
-            center: { easing: { function: 'cubicBezier' }, rhumb: true },
-            zoom: { easing: { function: 'cubicBezier' } },
-            bearing: { easing: { function: 'cubicBezier' } }
+            center: { easing: { function: 'linear' }, rhumb: false },
+            zoom: { easing: { function: 'linear' } },
+            bearing: { easing: { function: 'linear' } }
           }
         })
         // Leaflet rotate does not manage animation so that we cannot rely on Leaflet built-in animation
@@ -729,13 +813,13 @@ export const baseMap = {
         }
         if (typeof this.map.getBearing === 'function') {
           Object.assign(this.centerAnimation, {
-            startBearing: this.getBearing(),
+            startBearing: this.map.getBearing(),
             endBearing: bearing
           })
         }
       } else {
-        if (typeof this.map.getBearing === 'function') {
-          this.setBearing(bearing, offset)
+        if (typeof this.map.setBearing === 'function') {
+          this.setBearing(bearing, options)
         }
         this.map.setView(new L.LatLng(latitude, longitude), zoomLevel, { animate: false, duration: 0 })
         this.map.panBy(offset, { animate: false, duration: 0 })
@@ -756,7 +840,11 @@ export const baseMap = {
         return
       }
       const offset = L.point(_.get(options, 'offset.x', 0), _.get(options, 'offset.y', 0))
-      this.map.setBearing(bearing, offset)
+      // As rotating is costly by default we don't really rotate unless the human eye is able to perceive it
+      const tolerance = _.get(options, 'bearingTolerance', 0.1)
+      if (Math.abs(this.map.getBearing() - bearing) >= tolerance) {
+        this.map.setBearing(bearing, offset)
+      }
     },
     getBearing () {
       if (typeof this.map.getBearing !== 'function') {
@@ -843,15 +931,15 @@ export const baseMap = {
     // Register support for WMS-T
     this.registerLeafletConstructor(this.createLeafletTimedWmsLayer)
     // Internal event bus
-    this.$engineEvents = new Emitter()
+    this.$engineEvents = new EventBus()
     this.$engineEvents.on('zoomend', this.onMapZoomChanged)
-    this.$events.on('time-current-time-changed', this.onCurrentMapTimeChanged)
+    Events.on('time-current-time-changed', this.onCurrentMapTimeChanged)
   },
   beforeUnmount () {
     this.clearLayers()
     L.DomEvent.off(this.map._container, TouchEvents.join(' '), this.onTouchEvent, this)
     this.$engineEvents.off('zoomend', this.onMapZoomChanged)
-    this.$events.off('time-current-time-changed', this.onCurrentMapTimeChanged)
+    Events.off('time-current-time-changed', this.onCurrentMapTimeChanged)
   },
   unmounted () {
     if (this.map) {

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

@@ -5,8 +5,9 @@ import { getType, getCoords, getGeom } from '@turf/invariant'
 import { uid } from 'quasar'
 import { Store } from '../../../../core/client/store.js'
 import { Units } from '../../../../core/client/units.js'
+import { api } from '../../../../core/client/api.js'
 import { 
-  bindLeafletEvents, unbindLeafletEvents, 
+  getGeoJsonFeatures, bindLeafletEvents, unbindLeafletEvents, 
   getDefaultPointStyle, getDefaultLineStyle, getDefaultPolygonStyle, createMarkerFromPointStyle,
   convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle,
   formatUserCoordinates, getFeatureId, listenToFeaturesServiceEventsForLayer, unlistenToFeaturesServiceEventsForLayer
@@ -46,7 +47,7 @@ export const editLayers = {
         if (this.editedPopup) this.editedFeature.bindPopup(this.editedPopup)
         // Update feature after edition from DB or memory
         const service = (this.editedLayer._id ? _.get(this.editedLayer, 'service', 'features') : 'features-edition')
-        const feature = await this.$api.getService(service).get(this.editedFeature.feature._id)
+        const feature = await api.getService(service).get(this.editedFeature.feature._id)
         this.editableLayer.removeLayer(this.editedFeature)
         this.editableLayer.addData(feature)
         this.editedPopup = null
@@ -56,7 +57,9 @@ export const editLayers = {
   },
   methods: {
     isLayerEdited (layer) {
-      return this.editedLayer && (this.editedLayer.name === layer.name)
+      if (!this.editedLayer) return false
+      if (this.editedLayer._id && layer._id) return (this.editedLayer._id === layer._id)
+      else return (this.editedLayer.name === layer.name)
     },
     getGeoJsonEditOptions (options, geometryTypes) {
       let filteredOptions = options
@@ -87,20 +90,20 @@ export const editLayers = {
           if (isLine) {
             // Skip line editing style if not editing lines
             if (!_.isEmpty(geometryTypes) && !geometryTypes.includes('LineString') && !geometryTypes.includes('MultiLineString')) return style(feature)
-            else return getDefaultLineStyle(feature, layerStyle,  _.get(this, 'activityOptions.engine'), 'style.edition.line')
+            else return getDefaultLineStyle(feature, layerStyle, _.get(this, 'activityOptions.engine.style.edition.line'))
           }
           const isPolygon = ((feature.geometry.type === 'Polygon') || (feature.geometry.type === 'MultiPolygon'))
           if (isPolygon) {
             // Skip polygon editing style if not editing polygons
             if (!_.isEmpty(geometryTypes) && !geometryTypes.includes('Polygon') && !geometryTypes.includes('MultiPolygon')) return style(feature)
-            else return getDefaultPolygonStyle(feature, layerStyle, _.get(this, 'activityOptions.engine'), 'style.edition.polygon')
+            else return getDefaultPolygonStyle(feature, layerStyle, _.get(this, 'activityOptions.engine.style.edition.polygon'))
           }
           logger.warn(`[KDK] the geometry of type of ${feature.geometry.type} is not supported`)
         },
         pointToLayer: (feature, latlng) => {
           // Skip point editing style if not editing points
           if (!_.isEmpty(geometryTypes) && !geometryTypes.includes('Point') && !geometryTypes.includes('MultiPoint')) return pointToLayer(feature, layer)
-          const style = getDefaultPointStyle(feature, layerStyle, _.get(this, 'activityOptions.engine'), 'style.edition.point')
+          const style = getDefaultPointStyle(feature, layerStyle, _.get(this, 'activityOptions.engine.style.edition.point'))
           style.options = { pmIgnore: false } // Allow geoman edition
           return createMarkerFromPointStyle(latlng, style)
         }
@@ -194,7 +197,7 @@ export const editLayers = {
       // Move source layers to edition layers, required as eg clusters are not supported
       // and also to manage partial edition of large datasets
       const geoJson = leafletLayer.toGeoJSON()
-      let editedFeatures = geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson]
+      let editedFeatures = getGeoJsonFeatures(geoJson)
       if (_.isEmpty(features) && _.isEmpty(geometryTypes)) {
         leafletLayer.clearLayers()
       } else if (!_.isEmpty(features)) {
@@ -218,7 +221,7 @@ export const editLayers = {
           // Generate in memory service _id as string to match what's done with mongo
           feature._id = uid().toString()
           // Service will use the provided _id as object key
-          await this.$api.getService('features-edition').create(feature)
+          await api.getService('features-edition').create(feature)
         }
       } else {
         // Listen to layer changes
@@ -290,8 +293,8 @@ export const editLayers = {
       // for in memory edition, clear service
       if (this.editedLayer._id === undefined) {
         const geoJson = this.editableLayer.toGeoJSON()
-        const features = geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson]
-        const service = this.$api.getService('features-edition')
+        const features = getGeoJsonFeatures(geoJson)
+        const service = api.getService('features-edition')
         await Promise.all(features.map((f) => service.remove(f._id)))
       } else {
         // Clear listeners to layer changes
@@ -424,7 +427,7 @@ export const editLayers = {
         // Generate in memory service _id as string to match what's done with mongo
         geoJson._id = idValue
         // Service will use the provided _id as object key
-        await this.$api.getService('features-edition').create(geoJson)
+        await api.getService('features-edition').create(geoJson)
       }
       this.editableLayer.removeLayer(leafletLayer)
       this.editableLayer.addData(geoJson)
@@ -443,8 +446,8 @@ export const editLayers = {
       if (this.editedLayer._id) {
         await this.editFeaturesGeometry(geoJson, this.editedLayer)
       } else {
-        const features = geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson]
-        const service = this.$api.getService('features-edition')
+        const features = getGeoJsonFeatures(geoJson)
+        const service = api.getService('features-edition')
         // Remember those operations because we need to make sure we wait for completion
         // before clearing the in memory edition service in stopEditLayer
         const operations = Promise.all(features.map((f) => service.patch(f._id, { geometry: f.geometry })))
@@ -471,8 +474,8 @@ export const editLayers = {
       if (this.editedLayer._id) {
         await this.removeFeatures(geoJson, this.editedLayer)
       } else {
-        const features = geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson]
-        const service = this.$api.getService('features-edition')
+        const features = getGeoJsonFeatures(geoJson)
+        const service = api.getService('features-edition')
         await Promise.all(features.map((f) => service.remove(f._id)))
       }
     },