@kalisio/kdk 2.1.9 → 2.2.0

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

@@ -1,25 +1,75 @@
 import Cesium from 'cesium/Source/Cesium.js'
 import _ from 'lodash'
+import logger from 'loglevel'
 import sift from 'sift'
 import { Time } from '../../../../core/client/time.js'
-import { fetchGeoJson, getFeatureId } from '../../utils.js'
+import { fetchGeoJson, getFeatureId, processFeatures, getFeatureStyleType, isInMemoryLayer } from '../../utils.js'
+import { convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle } from '../../utils/utils.style.js'
+import { convertToCesiumFromSimpleStyle, getPointSimpleStyle, getLineSimpleStyle, getPolygonSimpleStyle } from '../../cesium/utils/utils.style.js'
+
+function getWallEntityId (id) {
+  return id + '-wall'
+}
+
+function updateGeoJsonEntity(source, destination) {
+  destination.position = source.position
+  destination.orientation = source.orientation
+  destination.properties = source.properties
+  destination.description = source.description
+  // Points
+  if (source.billboard) destination.billboard = source.billboard
+  // Lines
+  if (source.polyline) destination.polyline = source.polyline
+  // Polygons
+  if (source.polygon) destination.polygon = source.polygon
+}
 
 export const geojsonLayers = {
   methods: {
-    convertFromSimpleStyleSpecOrDefaults (properties) {
-      let { stroke, strokeWidth, fill } = this.convertFromSimpleStyleSpec(properties)
+    convertFromSimpleStyleOrDefaults (properties) {
+      let { stroke, strokeWidth, fill } = convertToCesiumFromSimpleStyle(properties)
       if (!stroke) stroke = Cesium.GeoJsonDataSource.stroke
       if (!strokeWidth) strokeWidth = Cesium.GeoJsonDataSource.strokeWidth
       if (!fill) fill = Cesium.GeoJsonDataSource.fill
       return { stroke, strokeWidth, fill }
     },
-    async loadGeoJson (dataSource, geoJson, cesiumOptions) {
-      // Clean any previous data as otherwise it seems
-      // data is not correctly updated in viewer
-      dataSource.entities.removeAll()
-      await dataSource.load(geoJson, cesiumOptions)
+    async loadGeoJson (dataSource, geoJson, options, updateOptions = {}) {
+      const cesiumOptions = options.cesium
+      // Remove mode
+      if (_.get(updateOptions, 'remove', false)) {
+        let features = (geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson])
+        features.forEach(feature => {
+          const id = getFeatureId(feature, options)
+          const wallId = getWallEntityId(id)
+          if (dataSource.entities.getById(id)) dataSource.entities.removeById(id)
+          // Take care that in case of a wall entity we add it in addition to the original line
+          if (dataSource.entities.getById(wallId)) dataSource.entities.removeById(wallId)
+        })
+        return
+      }
+      // We use a separated source in order to load data otherwise Cesium will replace previous ones, causing flickering
+      const loadingDataSource = new Cesium.GeoJsonDataSource()
+      loadingDataSource.notFromDrop = true
+      await loadingDataSource.load(geoJson, cesiumOptions)
+      // Now we process loaded entities to merge with existing ones if any or add new ones
+      let entities = loadingDataSource.entities.values
+      entities.forEach(entity => {
+        const previousEntity = dataSource.entities.getById(entity.id)
+        if (previousEntity) updateGeoJsonEntity(entity, previousEntity)
+        else dataSource.entities.add(entity)
+      })
+      // Remove any entity not existing anymore
+      if (_.get(updateOptions, 'removeMissing', cesiumOptions.removeMissing)) {
+        dataSource.entities.values.forEach(entity => {
+          const id = entity.id
+          const wallId = getWallEntityId(id)
+          if (!loadingDataSource.entities.getById(id)) dataSource.entities.removeById(id)
+          // Take care that in case of a wall entity we add it in addition to the original line
+          if (dataSource.entities.getById(wallId)) dataSource.entities.removeById(wallId)
+        })
+      }
       // Process specific entities
-      const entities = dataSource.entities.values
+      entities = dataSource.entities.values
       const entitiesToAdd = []
       const entitiesToRemove = []
       for (let i = 0; i < entities.length; i++) {
@@ -29,7 +79,7 @@ export const geojsonLayers = {
         const radius = _.get(properties, 'radius')
         const geodesic = _.get(properties, 'geodesic')
         if (radius && geodesic) {
-          const { stroke, strokeWidth, fill } = this.convertFromSimpleStyleSpecOrDefaults(properties)
+          const { stroke, strokeWidth, fill } = this.convertFromSimpleStyleOrDefaults(properties)
           // This one will replace the original point
           entitiesToAdd.push({
             id: entity.id,
@@ -51,13 +101,14 @@ export const geojsonLayers = {
         // Walls
         const wall = _.get(properties, 'wall')
         if (wall && entity.polyline) {
-          const { stroke, strokeWidth, fill } = this.convertFromSimpleStyleSpecOrDefaults(properties)
+          const { stroke, strokeWidth, fill } = this.convertFromSimpleStyleOrDefaults(properties)
           // Simply push the entity, other options like font will be set using styling options
           // This one will come in addition to the original line
+          const wallId = getWallEntityId(entity.id)
           entitiesToAdd.push({
-            id: entity.id + '-wall',
+            id: wallId,
             parent: entity,
-            name: entity.name,
+            name: entity.name ? entity.name : wallId,
             description: entity.description.getValue(0),
             properties: entity.properties.getValue(0),
             wall: {
@@ -72,13 +123,13 @@ export const geojsonLayers = {
         // Labels
         const text = _.get(properties, 'icon-text')
         if (text) {
-          const { stroke, strokeWidth, fill } = this.convertFromSimpleStyleSpecOrDefaults(properties)
+          const { stroke, strokeWidth, fill } = this.convertFromSimpleStyleOrDefaults(properties)
           // Simply push the entity, other options like font will be set using styling options
           // This one will replace the original point
           entitiesToAdd.push({
             id: entity.id,
             position: entity.position.getValue(0),
-            name: entity.name,
+            name: entity.name ? entity.name : entity.id,
             description: entity.description.getValue(0),
             properties: entity.properties.getValue(0),
             label: {
@@ -94,52 +145,46 @@ export const geojsonLayers = {
       entitiesToRemove.forEach(entity => dataSource.entities.remove(entity))
       entitiesToAdd.forEach(entity => dataSource.entities.add(entity))
     },
-    async updateGeoJsonData (dataSource, options, geoJson) {
+    async updateGeoJsonData (dataSource, options, geoJson, updateOptions = {}) {
+      // As we have async operations during the whole whole loading process avoid reentrance
+      // otherwise we might have interleaved calls leading to doublon entities being created
+      //if (dataSource.updatingGeoJsonData) return
+      //dataSource.updatingGeoJsonData = true
       const cesiumOptions = options.cesium
       const source = _.get(cesiumOptions, 'source')
       const sourceTemplate = _.get(cesiumOptions, 'sourceTemplate')
-      // Update function to fetch for new data and update Cesium data source
-      if (options.probeService) {
-        // If the probe location is given by another service use it on initialization
-        if (dataSource.entities.values.length === 0) {
-          await this.loadGeoJson(dataSource, this.getProbeFeatures(options), cesiumOptions)
-        }
-        // Then get last available measures
-        const measureSource = new Cesium.GeoJsonDataSource()
-        await this.loadGeoJson(measureSource, this.getFeatures(options), cesiumOptions)
-        // Then merge with probes
-        const probes = dataSource.entities.values
-        for (let i = 0; i < probes.length; i++) {
-          const probe = probes[i]
-          const measure = measureSource.entities.getById(probe.id)
-          if (measure) {
-            probe.properties = measure.properties
-            probe.description = measure.description
+      try {
+        if (geoJson) {
+          if (options.processor) processFeatures(geoJson, options.processor)
+          await this.loadGeoJson(dataSource, geoJson, options, updateOptions)
+        } else if (options.probeService) {
+          await this.loadGeoJson(dataSource, this.getProbeFeatures(options), options, updateOptions)
+          await this.loadGeoJson(dataSource, this.getFeatures(options), options, updateOptions)
+        } else if (options.service) { // Check for feature service layers only, in this case update in place
+          // If no probe reference, nothing to be initialized
+          await this.loadGeoJson(dataSource, this.getFeatures(options), options, updateOptions)
+        } else if (sourceTemplate) {
+          const sourceToFetch = dataSource.sourceCompiler({ time: Time.getCurrentTime() })
+          if (!dataSource.lastFetchedSource || (dataSource.lastFetchedSource !== sourceToFetch)) {
+            dataSource.lastFetchedSource = sourceToFetch
+            await this.loadGeoJson(dataSource, fetchGeoJson(sourceToFetch, options), options, updateOptions)
           }
+        } else if (!_.isNil(source)) {
+          // Assume source is an URL returning GeoJson
+          await this.loadGeoJson(dataSource, fetchGeoJson(source, options), options, updateOptions)
         }
-      } else if (options.service) { // Check for feature service layers only, in this case update in place
-        // If no probe reference, nothing to be initialized
-        await this.loadGeoJson(dataSource, this.getFeatures(options), cesiumOptions)
-      } else if (geoJson) {
-        await this.loadGeoJson(dataSource, geoJson, cesiumOptions)
-      } else if (sourceTemplate) {
-        const sourceToFetch = dataSource.sourceCompiler({ time: Time.getCurrentTime() })
-        if (!dataSource.lastFetchedSource || (dataSource.lastFetchedSource !== sourceToFetch)) {
-          dataSource.lastFetchedSource = sourceToFetch
-          await this.loadGeoJson(dataSource, fetchGeoJson(sourceToFetch, options), cesiumOptions)
-        }
-      } else if (!_.isNil(source)) {
-        // Assume source is an URL returning GeoJson
-        await this.loadGeoJson(dataSource, fetchGeoJson(source, options), cesiumOptions)
+        this.applyStyle(dataSource.entities, options)
+        if (typeof this.applyTooltips === 'function') this.applyTooltips(dataSource.entities, options)
+      } catch (error) {
+        logger.error(error)
       }
-      this.applyStyle(dataSource.entities, options)
-      if (typeof this.applyTooltips === 'function') this.applyTooltips(dataSource.entities, options)
+      //delete dataSource.updatingGeoJsonData
     },
     async createCesiumRealtimeGeoJsonLayer (dataSource, options) {
       const cesiumOptions = options.cesium
       // Add update capabilities
-      dataSource.updateGeoJson = async (geoJson) => {
-        await this.updateGeoJsonData(dataSource, options, geoJson)
+      dataSource.updateGeoJson = async (geoJson, updateOptions) => {
+        await this.updateGeoJsonData(dataSource, options, geoJson, updateOptions)
       }
       // Add source compiler if required
       if (_.has(cesiumOptions, 'sourceTemplate')) {
@@ -150,22 +195,34 @@ export const geojsonLayers = {
       const cesiumOptions = options.cesium
       // Check for valid type
       if (cesiumOptions.type !== 'geoJson') return
-      // Cesium expect id to be in a 'id' property
+      const engine = _.get(this, 'activityOptions.engine')
       options.processor = (feature) => {
+        // Cesium expect id to be in a 'id' property
         feature.id = getFeatureId(feature, options)
+        // We cannot access data outside the properties object of a feature in Cesium
+        // As a consequence we copy back any style information inside
+        const styleType = getFeatureStyleType(feature)
+        // We need to convert to simple-style spec as cesium manages this only
+        let simpleStyle
+        if (styleType === 'point') simpleStyle = getPointSimpleStyle(feature, options, engine)
+        else if (styleType === 'line') simpleStyle = getLineSimpleStyle(feature, options, engine)
+        else simpleStyle = getPolygonSimpleStyle(feature, options, engine)
+        if (!feature.properties) feature.properties = simpleStyle
+        else Object.assign(feature.properties, simpleStyle)
       }
       // For activities
       if (_.has(this, 'activityOptions.engine.cluster')) {
         if (cesiumOptions.cluster) Object.assign(cesiumOptions.cluster, _.get(this, 'activityOptions.engine.cluster'))
         else cesiumOptions.cluster = Object.assign({}, _.get(this, 'activityOptions.engine.cluster'))
       }
-      // Merge generic GeoJson options and layer options
-      const geoJsonOptions = this.getGeoJsonOptions(options)
-      Object.keys(geoJsonOptions).forEach(key => {
-        // If layer provided do not override
-        if (!_.has(cesiumOptions, key)) _.set(cesiumOptions, key, geoJsonOptions[key])
-      })
       // Optimize templating by creating compilers up-front
+      const layerStyleTemplate = _.get(cesiumOptions, '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
+        cesiumOptions.template = layerStyleTemplate.map(property => ({
+          property, compiler: _.template(_.get(cesiumOptions, property))
+        }))
+      }
       const entityStyleTemplate = _.get(cesiumOptions, 'entityStyle.template')
       if (entityStyleTemplate) {
         // We allow to template style properties according to feature, because it can be slow you have to specify a subset of properties
@@ -181,7 +238,16 @@ export const geojsonLayers = {
       if (tooltipTemplate) {
         cesiumOptions.tooltip.compiler = _.template(tooltipTemplate)
       }
-      this.convertFromSimpleStyleSpec(cesiumOptions, 'update-in-place')
+      // Convert and store the style
+      if (cesiumOptions.style) {
+        cesiumOptions.layerPointStyle = _.get(cesiumOptions.style, 'point')
+        cesiumOptions.layerLineStyle = _.get(cesiumOptions.style, 'line')
+        cesiumOptions.layerPolygonStyle = _.get(cesiumOptions.style, 'polygon')
+      } else {
+        cesiumOptions.layerPointStyle = convertSimpleStyleToPointStyle(cesiumOptions)
+        cesiumOptions.layerLineStyle = convertSimpleStyleToLineStyle(cesiumOptions)
+        cesiumOptions.layerPolygonStyle = convertSimpleStyleToPolygonStyle(cesiumOptions)
+      }
       // Perform required conversion from JSON to Cesium objects
       // If templating occurs we need to wait until it is performed to convert to Cesium objects
       if (cesiumOptions.entityStyle && !entityStyleTemplate) cesiumOptions.entityStyle = this.convertToCesiumObjects(cesiumOptions.entityStyle)
@@ -236,17 +302,17 @@ export const geojsonLayers = {
     getGeoJsonOptions (options) {
       return _.get(this, 'activityOptions.engine.featureStyle', {})
     },
-    async updateLayer (name, geoJson) {
+    async updateLayer (name, geoJson, updateOptions = {}) {
       // Retrieve the layer
       const layer = this.getCesiumLayerByName(name)
       if (!layer) return // Cannot update invisible layer
-      if (typeof layer.updateGeoJson === 'function') layer.updateGeoJson(geoJson)
+      if (typeof layer.updateGeoJson === 'function') layer.updateGeoJson(geoJson, updateOptions)
 
       // We keep geojson data for in memory layer in a cache since
       // these layers will be destroyed when hidden. We need to be able to restore
       // them when they get shown again
       const baseLayer = this.getLayerByName(name)
-      if (this.isInMemoryLayer(baseLayer)) {
+      if (isInMemoryLayer(baseLayer)) {
         this.geojsonCache[name] = geoJson
       }
     },
@@ -274,7 +340,7 @@ export const geojsonLayers = {
       // Check if we have cached geojson data for this layer
       const cachedGeojson = this.geojsonCache[layer.name]
       if (cachedGeojson) {
-        if (this.isInMemoryLayer(layer)) {
+        if (isInMemoryLayer(layer)) {
           // Restore geojson data for in-memory layers that was hidden
           this.updateLayer(layer.name, cachedGeojson)
         } else {
@@ -292,15 +358,12 @@ export const geojsonLayers = {
   },
   created () {
     this.registerCesiumConstructor(this.createCesiumGeoJsonLayer)
-    // Perform required conversion from JSON to Cesium objects
-    if (_.has(this, 'activityOptions.engine.featureStyle')) {
-      Object.assign(Cesium.GeoJsonDataSource,
-        this.convertFromSimpleStyleSpec(_.get(this, 'activityOptions.engine.featureStyle'), 'update-in-place'))
-    }
     this.$events.on('time-current-time-changed', this.onCurrentTimeChangedGeoJsonLayers)
     this.$engineEvents.on('layer-shown', this.onLayerShownGeoJsonLayers)
     this.$engineEvents.on('layer-removed', this.onLayerRemovedGeoJsonLayers)
-
+    // Map of currently updated layers to avoid reentrance with real-time events as
+    // we are not able to perform in place update and required to pull the data
+    this.updatingGeoJsonData = {}
     // Cache where we'll store geojson data for in memory layers we'll hide
     this.geojsonCache = {}
   },

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

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import moment from 'moment'
 import { Time, Units } from '../../../../core/client/index.js'
 import { getTextTable } from '../../utils.globe.js'
 
@@ -23,7 +24,7 @@ export const popup = {
           if (popupStyle.template) {
             const compiler = popupStyle.compiler
             // FIXME: the whole feature is lost by Cesium so that top-level properties have disappeared
-            text = compiler({ feature: { properties }, properties, $t: this.$t, Units, Time })
+            text = compiler({ feature: { properties }, properties, $t: this.$t, Units, Time, moment })
           } else if (popupStyle.pick) {
             properties = _.pick(properties, popupStyle.pick)
           } else if (popupStyle.omit) {

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

@@ -1,7 +1,9 @@
 import Cesium from 'cesium/Source/Cesium.js'
 import _ from 'lodash'
 import chroma from 'chroma-js'
-import { convertToCesiumFromSimpleStyleSpec, convertToCesiumObjects, CesiumStyleMappings, CesiumEntityTypes } from '../../utils.globe.js'
+import moment from 'moment'
+import { Time, Units } from '../../../../core/client/index.js'
+import { convertToCesiumFromSimpleStyle, convertToCesiumObjects, CesiumEntityTypes } from '../../utils.globe.js'
 
 export const style = {
   methods: {
@@ -35,8 +37,8 @@ export const style = {
       })
     },
     // Alias to ease development
-    convertFromSimpleStyleSpec (style, inPlace) {
-      return convertToCesiumFromSimpleStyleSpec (style, inPlace)
+    convertFromSimpleStyle (style, inPlace) {
+      return convertToCesiumFromSimpleStyle(style, inPlace)
     },
     // Alias to ease development
     convertToCesiumObjects (style) {
@@ -53,7 +55,7 @@ export const style = {
         const entityStyle = _.cloneDeep(cesiumOptions.entityStyle)
         entityStyleTemplate.forEach(entry => {
           // Perform templating, set using simple spec mapping first then raw if property not found
-          let value = entry.compiler({ properties, chroma })
+          let value = entry.compiler({ properties, chroma, moment, Units, Time })
           const property = entry.property
           // Handle specific case of orientation
           if ((property === 'orientation') && entity.position) {

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

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import moment from 'moment'
 import { Time, Units } from '../../../../core/client/index.js'
 
 export const tooltip = {
@@ -36,7 +37,7 @@ export const tooltip = {
           } else if (tooltipStyle.template) {
             const compiler = tooltipStyle.compiler
             // FIXME: the whole feature is lost by Cesium so that top-level properties have disappeared
-            text = compiler({ feature: { properties }, properties, $t: this.$t, Units, Time })
+            text = compiler({ feature: { properties }, properties, $t: this.$t, Units, Time, moment })
           }
         }
         if (text) {
@@ -67,8 +68,12 @@ export const tooltip = {
       }
     },
     onTooltip (options, event) {
-      // Nothing to do in this case
-      if (options && _.get(options, 'cesium.tooltip.permanent)')) return
+      if (options) {
+        const cesiumOptions = options.cesium || options
+        const tooltipStyle = cesiumOptions.tooltip
+        // Nothing to do in this case
+        if (_.get(tooltipStyle, 'options.permanent')) return
+      }
       // FIXME: show/hide tooltip
       const entity = event.target
       if (this.overEntity) {

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

@@ -5,8 +5,6 @@ import L from 'leaflet'
 import Emitter from 'tiny-emitter'
 import 'leaflet/dist/leaflet.css'
 // This ensure we have all required plugins
-import 'leaflet-fa-markers/L.Icon.FontAwesome.css'
-import 'leaflet-fa-markers/L.Icon.FontAwesome.js'
 import 'leaflet-fullscreen'
 import 'leaflet-fullscreen/dist/leaflet.fullscreen.css'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
@@ -16,6 +14,8 @@ import '@kalisio/leaflet.donutcluster/src/Leaflet.DonutCluster.css'
 import '@kalisio/leaflet.donutcluster'
 import 'leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.js'
 import 'leaflet.geodesic'
+import '@kalisio/leaflet-graphicscale'
+import '@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css'
 import 'leaflet.locatecontrol'
 import 'leaflet.locatecontrol/dist/L.Control.Locate.css'
 import iso8601 from 'iso8601-js-period' // Required by leaflet.timedimension
@@ -46,10 +46,6 @@ L.Icon.Default.mergeOptions({
 // Do not create geoman structs everywhere
 L.PM.setOptIn(true)
 
-// FontAwesome markers do not register a createShadow() function
-// so that they are added two times to the map
-L.Icon.FontAwesome.prototype.createShadow = function () { return null }
-
 export const baseMap = {
   emits: [
     'map-ready',
@@ -91,17 +87,23 @@ export const baseMap = {
         this.map.pm.setLang(getAppLocale())
       }
       bindLeafletEvents(this.map, LeafletEvents.Map, this, viewerOptions)
-      if (_.get(viewerOptions, 'scale', true)) this.setupScaleControl()
-      if (_.get(viewerOptions, 'geolocate', true)) this.setupGeolocateControl()
+      const scale = _.get(viewerOptions, 'scale', true)
+      if (scale) this.setupScaleControl(scale)
+      const geolocate = _.get(viewerOptions, 'geolocate', true)
+      if (geolocate) this.setupGeolocateControl(geolocate)
       this.onMapReady()
     },
     onMapReady () {
       this.$emit('map-ready', 'leaflet')
       this.$engineEvents.emit('map-ready', 'leaflet')
     },
-    setupScaleControl () {
-      // Add a scale control
-      this.scaleControl = new L.control.scale()   // eslint-disable-line
+    setupScaleControl (options) {
+      // Add a basic or enhanced scale control
+      if (typeof options === 'object') {
+        this.scaleControl = new L.control.graphicScale(options)
+      } else {
+        this.scaleControl = new L.control.scale()   // eslint-disable-line
+      }
       this.scaleControl.addTo(this.map)
     },
     setupGeolocateControl () {

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

@@ -2,7 +2,10 @@ import _ from 'lodash'
 import L from 'leaflet'
 import { getType, getGeom } from '@turf/invariant'
 import { Dialog, uid } from 'quasar'
-import { bindLeafletEvents, unbindLeafletEvents } from '../../utils.map.js'
+import { 
+  bindLeafletEvents, unbindLeafletEvents, 
+  getDefaultPointStyle, getDefaultLineStyle, getDefaultPolygonStyle, createMarkerFromPointStyle 
+} from '../../utils.map.js'
 
 // Events we listen while layer is in edition mode
 const mapEditEvents = ['pm:create']
@@ -68,12 +71,19 @@ export const editLayers = {
         onEachFeature,
         // Use default styling when editing as dynamic styling can conflict
         style: (feature) => {
-          return Object.assign({},
-            _.get(this, 'activityOptions.engine.editFeatureStyle', _.get(this, 'activityOptions.engine.featureStyle')))
+          if (['LineString', 'MultiLineString'].includes(feature.geometry.type)) {
+            return getDefaultLineStyle(feature, null,  _.get(this, 'activityOptions.engine'), 'style.edition.line')
+          }
+          if (['Polygon', 'MultiPolygon'].includes(feature.geometry.type)) {
+            return getDefaultPolygonStyle(feature, null, _.get(this, 'activityOptions.engine'), 'style.edition.polygon')
+          } else {
+            logger.warn(`[KDK] the geometry of type of ${feature.geometry.type} is not supported`)
+          }
         },
         pointToLayer: (feature, latlng) => {
-          return this.createMarkerFromStyle(latlng, Object.assign({ pmIgnore: false }, // Allow geoman edition
-            _.get(this, 'activityOptions.engine.editPointStyle', _.get(this, 'activityOptions.engine.pointStyle'))))
+          const style = getDefaultPointStyle(feature, null, _.get(this, 'activityOptions.engine'), 'style.edition.point')
+          style.options = { pmIgnore: false } // Allow geoman edition
+          return createMarkerFromPointStyle(latlng, style)
         }
       }
     },
@@ -479,15 +489,5 @@ export const editLayers = {
   },
   created () {
     this.pendingOperations = []
-  },
-  // Need to be done after created as the activity mixin initializes options in it
-  beforeMount () {
-    // Perform required conversion for default feature styling
-    if (_.has(this, 'activityOptions.engine.editFeatureStyle')) {
-      this.convertFromSimpleStyleSpec(_.get(this, 'activityOptions.engine.editFeatureStyle'), 'update-in-place')
-    }
-    if (_.has(this, 'activityOptions.engine.editPointStyle')) {
-      this.convertFromSimpleStyleSpec(_.get(this, 'activityOptions.engine.editPointStyle'), 'update-in-place')
-    }
   }
 }

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

@@ -45,8 +45,10 @@ export const forecastLayers = {
       const leafletOptions = options.leaflet || options
       // Check for valid types
       if (!leafletOptions.type.startsWith('weacast')) return
+      // 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())
       // We need to add Weacast API object as argument before creating the layer
-      leafletOptions.source = this.weacastApi
+      leafletOptions.source = weacastApi
       // Copy as well color map options
       const colorMap = _.get(options, 'variables[0].chromajs')
       if (colorMap) Object.assign(leafletOptions, colorMap)