@kalisio/kdk 2.3.2 → 2.4.0

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

@@ -3,13 +3,16 @@ import _ from 'lodash'
 import logger from 'loglevel'
 import sift from 'sift'
 import { uid } from 'quasar'
-import { Time } from '../../../../core/client/time.js'
+import { Time, Units } from '../../../../core.client.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'
+// Custom entity types that can be created from a base entity like eg a polyline
+const CustomTypes = ['wall', 'corridor']
+// Generate an id for a custom entity type, eg 'wall'
+function getCustomEntityId (id, type) {
+  return `${id}-${type}`
 }
 
 function updateGeoJsonEntity(source, destination) {
@@ -44,10 +47,12 @@ export const geojsonLayers = {
         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)
+          CustomTypes.forEach(type => {
+            const customId = getCustomEntityId(id, type)
+            if (dataSource.entities.getById(id)) dataSource.entities.removeById(id)
+            // Take care that in case of a custom entity we add it in addition to or instead the original line
+            if (dataSource.entities.getById(customId)) dataSource.entities.removeById(customId)
+          })
         })
         return
       }
@@ -66,10 +71,12 @@ export const geojsonLayers = {
       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)
+          CustomTypes.forEach(type => {
+            const customId = getCustomEntityId(id, type)
+            if (!loadingDataSource.entities.getById(id)) dataSource.entities.removeById(id)
+            // Take care that in case of a custom entity we add it in addition to or instead the original line
+            if (dataSource.entities.getById(customId)) dataSource.entities.removeById(customId)
+          })
         })
       }
       // Process specific entities
@@ -108,7 +115,7 @@ export const geojsonLayers = {
           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)
+          const wallId = getCustomEntityId(entity.id, 'wall')
           entitiesToAdd.push({
             id: wallId,
             parent: entity,
@@ -124,6 +131,29 @@ export const geojsonLayers = {
             }
           })
         }
+        // Corridors
+        const corridor = _.get(properties, 'corridor')
+        if (corridor && entity.polyline) {
+          const { stroke, strokeWidth, fill } = this.convertFromSimpleStyleOrDefaults(properties)
+          // Simply push the entity, other options like width be set using styling options
+          // This one will come in replacement to the original line
+          const corridorId = getCustomEntityId(entity.id, 'corridor')
+          entitiesToAdd.push({
+            id: corridorId,
+            parent: entity,
+            name: entity.name ? entity.name : corridorId,
+            description: entity.description.getValue(0),
+            properties: entity.properties.getValue(0),
+            corridor: {
+              positions: entity.polyline.positions.getValue(0),
+              material: new ColorMaterialProperty(fill),
+              outlineColor: new ConstantProperty(stroke),
+              outlineWidth: strokeWidth,
+              outline: new ConstantProperty(true)
+            }
+          })
+          entitiesToRemove.push(entity)
+        }
         // Billboard with 'none' shape should be removed as Cesium creates it even if the maki icon id is unknown
         if (entity.billboard && (_.get(properties, 'marker-symbol') === 'none')) {
           entitiesToRemove.push(entity)
@@ -212,8 +242,11 @@ export const geojsonLayers = {
         // We cannot access data outside the properties object of a feature in Cesium
         // As a consequence we copy back any style information inside
         // We need to convert to simple-style spec as cesium manages this only
-        // We also need to merge all styling properties as some entities requires eg both line/polygon style (wall polylines)
+        // We also need to merge all styling properties as some entities requires eg both line/polygon style (wall polylines or corridor polygons)
         const simpleStyle = Object.assign(getPointSimpleStyle(feature, options, engine), getLineSimpleStyle(feature, options, engine), getPolygonSimpleStyle(feature, options, engine))
+        // Manage our extended simple-style spec
+        const text = _.get(feature, 'style.text.label')
+        if (text) simpleStyle['icon-text'] = text
         if (!feature.properties) feature.properties = simpleStyle
         else Object.assign(feature.properties, simpleStyle)
       }
@@ -329,13 +362,18 @@ export const geojsonLayers = {
       this.$engineEvents.emit('layer-updated', layer, cesiumLayer, data)
     },
     onCurrentTimeChangedGeoJsonLayers (time) {
+      // Need to update layers that require an update at a given frequency
       const geoJsonlayers = _.values(this.layers).filter(sift({
+        // Possible for realtime layers only
         'cesium.type': 'geoJson',
         'cesium.realtime': true,
-        $or: [ // Supported by template URL or time-based features
+        $or: [ // Supported by template URL or time-based features service
           { 'cesium.sourceTemplate': { $exists: true } },
           { service: { $exists: true } }
         ],
+        // Skip layers powered by realtime service events
+        serviceEvents: { $ne: true },
+        // Skip invisible layers
         isVisible: true
       }))
       geoJsonlayers.forEach(async geoJsonlayer => {
@@ -348,6 +386,41 @@ export const geojsonLayers = {
         }
       })
     },
+    onDefaultUnitChangedGeoJsonLayers (units) {
+      _.forOwn(units.default, (unit, quantity) => {
+        const units = _.map(Units.getUnits(quantity), 'name')
+        // Need to update layers with variables affected by the unit change,
+        // ie which style depends on it
+        let geoJsonlayers = _.values(this.layers).filter(sift({
+          'cesium.type': 'geoJson',
+          'cesium.realtime': true,
+          // Not sure why but this does not seem to work with sift
+          //'variables': { $elemMatch: { unit: { $in: units } } },
+          'variables': { $exists: true },
+          isVisible: true,
+          'cesium.style': { $exists: true },
+          'cesium.template': { $exists: true }
+        }))
+        // Check for each layer if it uses the target unit and templated style uses the unit system or not
+        geoJsonlayers = geoJsonlayers.filter(layer => {
+          const unit = _.intersection(units, _.map(layer.variables, 'unit'))
+          if (_.isEmpty(unit)) return false
+          for (const template of layer.cesium.template) {
+            if (template.startsWith('style.')) {
+              const style = _.get(layer.cesium, template)
+              if ((typeof style === 'string') && style.includes('Units')) return true
+            }
+          }
+          return false
+        })
+        // Then retrieve the engine layers and update
+        geoJsonlayers.forEach(layer => {
+          // Retrieve the layer
+          const dataSource = this.getCesiumLayerByName(geoJsonlayer.name)
+          dataSource.updateGeoJson()
+        })
+      })
+    },
     onLayerShownGeoJsonLayers (layer, engineLayer) {
       // Check if we have cached geojson data for this layer
       const cachedGeojson = this.geojsonCache[layer.name]
@@ -371,6 +444,7 @@ export const geojsonLayers = {
   created () {
     this.registerCesiumConstructor(this.createCesiumGeoJsonLayer)
     this.$events.on('time-current-time-changed', this.onCurrentTimeChangedGeoJsonLayers)
+    this.$events.on('units-changed', this.onDefaultUnitChangedGeoJsonLayers)
     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
@@ -380,7 +454,8 @@ export const geojsonLayers = {
     this.geojsonCache = {}
   },
   beforeUnmount () {
-    this.$events.off('time-current-time-changed', this.onCurrentTimeChangedHeatmapLayers)
+    this.$events.off('time-current-time-changed', this.onCurrentTimeChangedGeoJsonLayers)
+    this.$events.off('units-changed', this.onDefaultUnitChangedGeoJsonLayers)
     this.$engineEvents.off('layer-shown', this.onLayerShownGeoJsonLayers)
     this.$engineEvents.off('layer-removed', this.onLayerRemovedGeoJsonLayers)
 

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

@@ -24,6 +24,8 @@ export const style = {
         }
         // Handle specific case of orientation
         if (style.orientation) entity.orientation = style.orientation
+        // Handle specific case of visibility
+        if (_.has(style, 'visibility')) entity.show = style.visibility
       }
     },
     applyClusterStyle (entities, cluster, options) {

package/map/client/mixins/index.js

@@ -1,5 +1,4 @@
 export * from './mixin.activity.js'
-export * from './mixin.catalog-panel.js'
 export * from './mixin.context.js'
 export * from './mixin.feature-selection.js'
 export * from './mixin.feature-service.js'

package/map/client/mixins/map/index.js

@@ -14,3 +14,4 @@ export * from './mixin.heatmap-layers.js'
 export * from './mixin.mapillary-layers.js'
 export * from './mixin.gsmap-layers.js'
 export * from './mixin.canvas-layers.js'
+export * from './mixin.pmtiles-layers.js'

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

@@ -92,6 +92,9 @@ export const baseMap = {
       if (scale) this.setupScaleControl(scale)
       const geolocate = _.get(viewerOptions, 'geolocate', true)
       if (geolocate) this.setupGeolocateControl(geolocate)
+      // Add a special hidden pane, used to hide individual features
+      const hiddenPane = this.map.createPane('kdk-hidden-features')
+      hiddenPane.style.display = 'none'
       this.onMapReady()
     },
     onMapReady () {
@@ -560,11 +563,24 @@ export const baseMap = {
     },
     getBearing () {
       if (typeof this.map.getBearing !== 'function') {
-        logger.warn(`[KDK] Map not configured to handle bearing, ignoring`)
         return 0
       }
       return this.map.getBearing()
     },
+    setCompassBearingTrackingEnabled (enabled) {
+      if (enabled) {
+        if (!this.map.compassBearing.enabled()) this.map.compassBearing.enable()
+      } else if (this.map.compassBearing.enabled()) {
+        this.map.compassBearing.disable()
+      }
+    },
+    setTouchRotateEnabled (enabled) {
+      if (enabled) {
+        if (!this.map.touchRotate.enabled()) this.map.touchRotate.enable()
+      } else if (this.map.touchRotate.enabled()) {
+        this.map.touchRotate.disable()
+      }
+    },
     getBounds () {
       this.viewBounds = this.map.getBounds()
       const south = this.viewBounds.getSouth()
@@ -650,6 +666,9 @@ export const baseMap = {
     this.$events.off('time-current-time-changed', this.onCurrentMapTimeChanged)
   },
   unmounted () {
-    if (this.map) this.map.remove()
+    if (this.map) {
+      this.map.off()
+      this.map.remove()
+    }
   }
 }

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

@@ -207,8 +207,13 @@ L.KanvasLayer = (L.Layer ? L.Layer : L.Class).extend({
     }
 
     // Skip redraw when no feature hovered and we're not highlighting
-    if (!hoveringFeatures && !this.highlighting) return
-    this.needRedraw()
+    if (!hoveringFeatures && !this.highlighting) {
+      this._canvas.style.cursor = ''
+      return
+    } else {
+      this._canvas.style.cursor = 'pointer'
+      this.needRedraw()
+    }
   },
   // -------------------------------------------------------------
   getEvents: function () {

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

@@ -4,7 +4,8 @@ import { getType, getGeom } from '@turf/invariant'
 import { Dialog, uid } from 'quasar'
 import { 
   bindLeafletEvents, unbindLeafletEvents, 
-  getDefaultPointStyle, getDefaultLineStyle, getDefaultPolygonStyle, createMarkerFromPointStyle 
+  getDefaultPointStyle, getDefaultLineStyle, getDefaultPolygonStyle, createMarkerFromPointStyle,
+  convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle
 } from '../../utils.map.js'
 
 // Events we listen while layer is in edition mode
@@ -55,6 +56,13 @@ export const editLayers = {
     },
     getGeoJsonEditOptions (options) {
       let filteredOptions = options
+      // Convert and store style
+      const leafletOptions = options.leaflet || options
+      const layerStyle = {}
+      layerStyle.layerPointStyle = leafletOptions.style ? _.get(leafletOptions.style, 'point') : convertSimpleStyleToPointStyle(leafletOptions)
+      layerStyle.layerLineStyle = leafletOptions.style ? _.get(leafletOptions.style, 'line') : convertSimpleStyleToLineStyle(leafletOptions)
+      layerStyle.layerPolygonStyle = leafletOptions.style ? _.get(leafletOptions.style, 'polygon') : convertSimpleStyleToPolygonStyle(leafletOptions)
+
       if (_.has(filteredOptions, 'leaflet.tooltip') || _.has(filteredOptions, 'leaflet.popup')) {
         // Disable tooltip & popup features on edited layer
         filteredOptions = Object.assign({}, options)
@@ -72,16 +80,16 @@ export const editLayers = {
         // Use default styling when editing as dynamic styling can conflict
         style: (feature) => {
           if (['LineString', 'MultiLineString'].includes(feature.geometry.type)) {
-            return getDefaultLineStyle(feature, null,  _.get(this, 'activityOptions.engine'), 'style.edition.line')
+            return getDefaultLineStyle(feature, layerStyle,  _.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')
+            return getDefaultPolygonStyle(feature, layerStyle, _.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) => {
-          const style = getDefaultPointStyle(feature, null, _.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)
         }

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

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import logger from 'loglevel'
 import path from 'path-browserify'
 import { Reader } from '../../../../core/client/reader.js'
 
@@ -28,6 +29,7 @@ export const fileLayers = {
       dropFileInput.type = 'file'
       dropFileInput.style.display = 'none'
       dropFileInput.addEventListener('change', async (event) => {
+        logger.debug('[KDK] processing dropped files: ', event.target.files)
         await this.importFiles(event.target.files)
       })
       container.appendChild(dropFileInput)
@@ -39,6 +41,7 @@ export const fileLayers = {
         event.preventDefault()
       }, false)
       this.map._container.addEventListener('drop', async (event) => {
+        logger.debug('[KDK] processing dropped files: ', event.dataTransfer.files)
         event.stopPropagation()
         event.preventDefault()
         await this.importFiles(event.dataTransfer.files)

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

@@ -2,8 +2,9 @@ import L from 'leaflet'
 import _ from 'lodash'
 import sift from 'sift'
 import logger from 'loglevel'
+import lineOffset from '@turf/line-offset'
 import 'leaflet-realtime'
-import { Time, utils as kdkCoreUtils } from '../../../../core.client.js'
+import { Time, Units, utils as kdkCoreUtils } from '../../../../core.client.js'
 import { GradientPath } from '../../leaflet/GradientPath.js'
 import { MaskLayer } from '../../leaflet/MaskLayer.js'
 import { TiledFeatureLayer } from '../../leaflet/TiledFeatureLayer.js'
@@ -27,6 +28,31 @@ const Realtime = L.Realtime.extend({
 L.realtime = function (src, options) {
   return new Realtime(src, options)
 }
+// Override default Polyline simplify function to manage offset
+const simplifyPoints = L.Polyline.prototype._simplifyPoints
+L.Polyline.include({
+  _simplifyPoints: function () {
+    simplifyPoints.call(this)
+    // Offset simplified version 
+    if (this.options.offset) {
+      // We'd like to ensure a pixel constant offset when zooming
+      // Zoom 0 resolution is 156 543 m/pixel at equator in default map tiles,
+      // we take latitude into account to account for a convergence factor
+      const latitude = this.getBounds().getCenter().lat
+      const factor = 156543 / Math.pow(2, this._map.getZoom()) / Math.cos(latitude * Math.PI / 180)
+      const offset = Math.max(1, this.options.offset * factor)
+
+      for (let i = 0; i < this._parts.length; i++) {
+        let latLngs = this._parts[i].map(point => this._map.layerPointToLatLng(point))
+        // Ensure a large enough precision for computation (defaults to 6 in Leaflet)
+        const coords = L.GeoJSON.latLngsToCoords(latLngs, 0, false, 12)
+        const feature = lineOffset({ type: 'LineString', coordinates: coords }, offset, { units: 'meters' })
+        latLngs = L.GeoJSON.coordsToLatLngs(feature.geometry.coordinates, 0)
+        this._parts[i] = latLngs.map(latlng => this._map.latLngToLayerPoint(latlng))
+      }
+    }
+  }
+})
 
 // Override default Leaflet GeoJson utility to manage some specific use cases
 const geometryToLayer = L.GeoJSON.geometryToLayer
@@ -55,10 +81,18 @@ L.GeoJSON.geometryToLayer = function (geojson, options) {
     if (geometry.type === 'Polygon' || geometry.type === 'MultiPolygon') {
       return new MaskLayer(geojson, options.style(geojson))
     }
+  }// Automate Leaflet.PolylineOffset plugin use
+  if (geometry && properties && properties.offset) {
+    if (geometry.type === 'LineString') {
+      options = Object.assign({ offset: properties.offset }, options)
+    }
   }
   // As we do so this breaks leaflet-arrowheads plugin
   const layer = geometryToLayer(geojson, options)
-  if (options.arrowheads && (layer instanceof L.Polyline)) layer.arrowheads(options.arrowheads)
+  if (geometry && (options.arrowheads || (properties && properties.arrowheads))) {
+    if (layer instanceof L.Polyline) layer.arrowheads(options.arrowheads || properties.arrowheads)
+  }
+  
   return layer
 }
 
@@ -488,13 +522,18 @@ export const geojsonLayers = {
       this.$engineEvents.emit('layer-updated', layer, leafletLayer, data)
     },
     onCurrentTimeChangedGeoJsonLayers (time) {
+      // Need to update layers that require an update at a given frequency
       const geoJsonlayers = _.values(this.layers).filter(sift({
+        // Possible for realtime layers only
         'leaflet.type': 'geoJson',
         'leaflet.realtime': true,
-        $or: [ // Supported by template URL or time-based features
+        $or: [ // Supported by template URL or time-based features service
           { 'leaflet.sourceTemplate': { $exists: true } },
           { service: { $exists: true } }
         ],
+        // Skip layers powered by realtime service events
+        serviceEvents: { $ne: true },
+        // Skip invisible layers
         isVisible: true
       }))
       geoJsonlayers.forEach(async geoJsonlayer => {
@@ -528,6 +567,44 @@ export const geojsonLayers = {
         }
       }
     },
+    onDefaultUnitChangedGeoJsonLayers (units) {
+      _.forOwn(units.default, (unit, quantity) => {
+        const units = _.map(Units.getUnits(quantity), 'name')
+        // Need to update layers with variables affected by the unit change,
+        // ie which style depends on it
+        let geoJsonlayers = _.values(this.layers).filter(sift({
+          'leaflet.type': 'geoJson',
+          'leaflet.realtime': true,
+          // Not sure why but this does not seem to work with sift
+          //'variables': { $elemMatch: { unit: { $in: units } } },
+          'variables': { $exists: true },
+          isVisible: true,
+          'leaflet.style': { $exists: true },
+          'leaflet.template': { $exists: true }
+        }))
+        // Check for each layer if it uses the target unit and templated style uses the unit system or not
+        geoJsonlayers = geoJsonlayers.filter(layer => {
+          const unit = _.intersection(units, _.map(layer.variables, 'unit'))
+          if (_.isEmpty(unit)) return false
+          for (const template of layer.leaflet.template) {
+            if (template.startsWith('style.')) {
+              const style = _.get(layer.leaflet, template)
+              if ((typeof style === 'string') && style.includes('Units')) return true
+            }
+          }
+          return false
+        })
+        // Then retrieve the engine layers and update
+        geoJsonlayers.forEach(layer => {
+          layer = this.getLeafletLayerByName(layer.name)
+          if (layer.tiledLayer) {
+            layer.tiledLayer.redraw()
+          } else {
+            layer.update()
+          }
+        })
+      })
+    },
     onMapZoomChangedGeoJsonLayers () {
       // Need to update layers with tooltip defining a minZoom/maxZoom
       // as we cannot do that in template because tooltip needs to be recreated/destroyed dynamically
@@ -565,7 +642,13 @@ export const geojsonLayers = {
       if (cachedGeojson) {
         if (isInMemoryLayer(layer)) {
           // Restore geojson data for in-memory layers that was hidden
-          this.updateLayer(layer.name, cachedGeojson)
+          // Directly deal with the leaflet layer instead of calling updateLayer, we are just restoring data
+          // Handle case where there's clustering on top (cf. updateLayer)
+          if (typeof engineLayer.getLayers === 'function') {
+            const container = engineLayer
+            engineLayer = container.getLayers().find(layer => layer._container === container)
+          }
+          engineLayer._onNewData(false, cachedGeojson)
         } else {
           // Clear cache since layer is not in memory anymore
           delete this.geojsonCache[layer.name]
@@ -583,6 +666,7 @@ export const geojsonLayers = {
     this.registerLeafletConstructor(this.createLeafletGeoJsonLayer)
     this.$events.on('time-current-time-changed', this.onCurrentTimeChangedGeoJsonLayers)
     this.$engineEvents.on('selected-level-changed', this.onCurrentLevelChangedGeoJsonLayers)
+    this.$events.on('units-changed', this.onDefaultUnitChangedGeoJsonLayers)
     this.$engineEvents.on('zoomend', this.onMapZoomChangedGeoJsonLayers)
     this.$engineEvents.on('layer-shown', this.onLayerShownGeoJsonLayers)
     this.$engineEvents.on('layer-removed', this.onLayerRemovedGeoJsonLayers)
@@ -591,8 +675,9 @@ export const geojsonLayers = {
     this.geojsonCache = {}
   },
   beforeUnmount () {
-    this.$events.off('time-current-time-changed', this.onCurrentTimeChangedHeatmapLayers)
+    this.$events.off('time-current-time-changed', this.onCurrentTimeChangedGeoJsonLayers)
     this.$engineEvents.off('selected-level-changed', this.onCurrentLevelChangedGeoJsonLayers)
+    this.$events.off('units-changed', this.onDefaultUnitChangedGeoJsonLayers)
     this.$engineEvents.off('zoomend', this.onMapZoomChangedGeoJsonLayers)
     this.$engineEvents.off('layer-shown', this.onLayerShownGeoJsonLayers)
     this.$engineEvents.off('layer-removed', this.onLayerRemovedGeoJsonLayers)

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

@@ -0,0 +1,106 @@
+import _ from 'lodash'
+import chroma from 'chroma-js'
+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 { Time, Units, TemplateContext } from '../../../../core/client/index.js'
+
+export const pmtilesLayers = {
+  methods: {
+    async createLeafletPMTilesLayer (options) {
+      const leafletOptions = options.leaflet || options
+      // Check for valid types
+      if (leafletOptions.type !== 'pmtiles') return
+      // 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))
+        }))
+      }
+
+      let rules = {}
+      // Check for style information given as object or URL
+      let style = _.get(leafletOptions, 'style')
+      if (typeof style === 'string') {
+        const response = await fetch(style)
+        if (response.status !== 200) {
+          throw new Error(`Impossible to fetch style ${style}: ` + response.status)
+        }
+        style = await response.json()
+        const backgroundLayer = style.layers.find(layer => layer.type === 'background')
+        if (backgroundLayer) leafletOptions.backgroundColor = backgroundLayer.paint['fill-color']
+        // Convert to PMTiles plugin paint rules
+        rules = mapbox_style(style, {})
+      } else {
+        // Manage templating
+        leafletOptions.template.forEach(entry => {
+          // protomaps allows property functions with zomm/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)
+          }
+          _.set(leafletOptions, entry.property, f)
+        })
+        const styleRules = _.map(style, rule => Object.assign(_.omit(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)
+      }
+      
+      return this.createLeafletLayer({
+        ...leafletOptions,
+        ...rules,
+        //debug: true,
+        //levelDiff: 2
+      })
+    },
+    onCurrentTimeChangedPMTilesLayers (time) {
+      const pmtileslayers = _.values(this.layers).filter(sift({
+        'leaflet.type': 'pmtiles',
+        // Skip invisible layers
+        isVisible: true
+      }))
+      pmtileslayers.forEach(async pmtileslayer => {
+        // Retrieve the layer
+        const layer = this.getLeafletLayerByName(pmtileslayer.name)
+        layer.redraw()
+      })
+    },
+    onCurrentLevelChangedPMTilesLayers (level) {
+      // Retrieve the layer associated to current level sélection
+      let layer = this.selectableLevelsLayer
+      if (layer) {
+        const type = _.get(layer, `${this.engine}.type`)
+        // Check if of right type
+        if (type === 'pmtiles') {
+          // Retrieve the engine layer and update
+          layer = this.getLeafletLayerByName(layer.name)
+          layer.redraw()
+        }
+      }
+    }
+  },
+  created () {
+    this.registerLeafletConstructor(this.createLeafletPMTilesLayer)
+    this.$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)
+    this.$engineEvents.off('selected-level-changed', this.onCurrentLevelChangedPMTilesLayers)
+  }
+}
+
+// Not automatically declared by leaflet plugin
+L.pmtiles = function (options) {
+  return protomaps.leafletLayer(options)
+}

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

@@ -317,14 +317,19 @@ export const activity = {
           // (eg style edition, etc.)
           // Here we find layer by ID as renaming could have occured from another client
           const layer = this.getLayerById(object._id)
+          let planetApi
+          if (layer && (typeof layer.getPlanetApi === 'function')) {
+            planetApi = layer.getPlanetApi()
+          }
           if (layer) {
             // Stop any running edition
             if ((typeof this.isLayerEdited === 'function') && this.isLayerEdited(layer)) await this.stopEditLayer('reject')
             await this.removeCatalogLayer(layer)
           }
           if (event !== 'removed') {
-            // Do we need to inject a token ?
-            await setEngineJwt([object])
+            // Do we need to inject a token or restore planet API ?
+            if (planetApi) Object.assign(object, { getPlanetApi: () => planetApi })
+            await setEngineJwt([object], planetApi)
             await this.addCatalogLayer(object)
           }
           break
@@ -337,7 +342,7 @@ export const activity = {
     // Merge the engine options using defaults
     const defaultOptions = _.get(config, `engines.${this.engine}`)
     if (defaultOptions) {
-      logger.debug(`[KDK] ${this.engine} engine use defaults: ${JSON.stringify(defaultOptions, null, 2)}`)
+      logger.debug(`[KDK] Configuring '${this.engine}' engine with options:`, defaultOptions)
       // Take care that if we only use the default options the specific options will be undefined
       this.activityOptions.engine = _.defaultsDeep(_.get(this.activityOptions, 'engine', {}), defaultOptions)
     }