@kalisio/kdk 2.6.4 → 2.7.0

package/map/client/leaflet/TiledFeatureLayer.js

@@ -10,6 +10,8 @@ import { getFeatureId } from '../utils.js'
 const TiledFeatureLayer = L.GridLayer.extend({
   initialize (options) {
     this.enableDebug = _.get(options, 'enableDebug', false)
+    this.enableMergeRequests = _.get(options, 'enableMergeRequests', true)
+
     // this.enableDebug = true
     L.GridLayer.prototype.initialize.call(this, options)
 
@@ -168,98 +170,99 @@ const TiledFeatureLayer = L.GridLayer.extend({
   mergeRequests (tiles) {
     const requests = []
 
-    // Try to merge tiles vertically, then horizontally
-    const sortedTiles = tiles.sort((a, b) => {
-      if (a.coords.x === b.coords.x) {
-        return a.coords.y < b.coords.y ? -1 : a.coords.y !== b.coords.y ? 1 : 0
-      }
-      return a.coords.x < b.coords.x ? -1 : 1
-    })
+    if (this.enableMergeRequests) {
+      // Try to merge tiles vertically, then horizontally
+      const sortedTiles = tiles.sort((a, b) => {
+        if (a.coords.x === b.coords.x) {
+          return a.coords.y < b.coords.y ? -1 : a.coords.y !== b.coords.y ? 1 : 0
+        }
+        return a.coords.x < b.coords.x ? -1 : 1
+      })
 
-    if (sortedTiles.length) {
-      const z = sortedTiles[0].coords.z
-      const vrequests = []
-      sortedTiles.forEach((tile) => {
-        let newRequest = true
-        if (vrequests.length) {
-          const r = vrequests[vrequests.length - 1]
-          if (tile.coords.x === r.x) {
-            if (tile.coords.y === r.maxy + 1) {
-              r.tiles.push(tile)
-              r.maxy = tile.coords.y
-              newRequest = false
+      if (sortedTiles.length) {
+        const z = sortedTiles[0].coords.z
+        const vrequests = []
+        sortedTiles.forEach((tile) => {
+          let newRequest = true
+          if (vrequests.length) {
+            const r = vrequests[vrequests.length - 1]
+            if (tile.coords.x === r.x) {
+              if (tile.coords.y === r.maxy + 1) {
+                r.tiles.push(tile)
+                r.maxy = tile.coords.y
+                newRequest = false
+              }
             }
           }
-        }
-        if (newRequest) {
-          vrequests.push({
-            x: tile.coords.x,
-            miny: tile.coords.y,
-            maxy: tile.coords.y,
-            tiles: [tile]
-          })
-        }
-      })
+          if (newRequest) {
+            vrequests.push({
+              x: tile.coords.x,
+              miny: tile.coords.y,
+              maxy: tile.coords.y,
+              tiles: [tile]
+            })
+          }
+        })
 
-      // Now try to merge horizontally adjacent vertical requests
-      vrequests.forEach((v) => {
-        let newRequest = true
-        if (requests.length) {
-          const h = requests[requests.length - 1]
-          if (v.miny === h.miny && v.maxy === h.maxy && v.x === h.maxx + 1) {
-            h.tiles.push(...v.tiles)
-            h.maxx = v.x
-            newRequest = false
+        // Now try to merge horizontally adjacent vertical requests
+        vrequests.forEach((v) => {
+          let newRequest = true
+          if (requests.length) {
+            const h = requests[requests.length - 1]
+            if (v.miny === h.miny && v.maxy === h.maxy && v.x === h.maxx + 1) {
+              h.tiles.push(...v.tiles)
+              h.maxx = v.x
+              newRequest = false
+            }
           }
-        }
-        if (newRequest) {
-          requests.push({
-            minx: v.x,
-            maxx: v.x,
-            miny: v.miny,
-            maxy: v.maxy,
-            tiles: [].concat(v.tiles)
-          })
-        }
-      })
+          if (newRequest) {
+            requests.push({
+              minx: v.x,
+              maxx: v.x,
+              miny: v.miny,
+              maxy: v.maxy,
+              tiles: [].concat(v.tiles)
+            })
+          }
+        })
 
-      // Compute final query
-      requests.forEach((r) => {
-        const minp = L.point(r.minx, r.miny); const maxp = L.point(r.maxx, r.maxy)
-        minp.z = maxp.z = z
-        const bounds = this._tileCoordsToBounds(minp)
-        bounds.extend(this._tileCoordsToBounds(maxp))
-        r.query = {
-          south: bounds.getSouth(),
-          north: bounds.getNorth(),
-          west: bounds.getWest(),
-          east: bounds.getEast()
-        }
-      })
+        // Compute final query
+        requests.forEach((r) => {
+          const minp = L.point(r.minx, r.miny); const maxp = L.point(r.maxx, r.maxy)
+          minp.z = maxp.z = z
+          const bounds = this._tileCoordsToBounds(minp)
+          bounds.extend(this._tileCoordsToBounds(maxp))
+          r.query = {
+            south: bounds.getSouth(),
+            north: bounds.getNorth(),
+            west: bounds.getWest(),
+            east: bounds.getEast()
+          }
+        })
 
-      if (this.enableDebug) {
-        let numTilesR = 0
-        requests.forEach((r) => { numTilesR += r.tiles.length })
-        if (numTilesR !== tiles.length) {
-          logger.debug('TiledFeatureLayer: less requested tiles than expected !')
+        if (this.enableDebug) {
+          let numTilesR = 0
+          requests.forEach((r) => { numTilesR += r.tiles.length })
+          if (numTilesR !== tiles.length) {
+            logger.debug('TiledFeatureLayer: less requested tiles than expected !')
+          }
         }
       }
-    }
-
-    /* One request per tile
-    tiles.forEach((tile) => {
-      const r = {
-        tiles: [tile],
-        query: {
-          south: tile.bbox.getSouth(),
-          north: tile.bbox.getNorth(),
-          west: tile.bbox.getWest(),
-          east: tile.bbox.getEast()
+    } else {
+      // Request merging disabled => one request per tile
+      tiles.forEach((tile) => {
+        const r = {
+          tiles: [tile],
+          query: {
+            south: tile.bbox.getSouth(),
+            north: tile.bbox.getNorth(),
+            west: tile.bbox.getWest(),
+            east: tile.bbox.getEast()
+          }
         }
-      }
-      requests.push(r)
-    })
-    */
+        requests.push(r)
+      })
+    }
 
     if (this.enableDebug && tiles.length) {
       logger.debug(`TiledFeatureLayer: ${tiles.length} requests reduced to ${requests.length}`)

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

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

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

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

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

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

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

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

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

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

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

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