@kalisio/kdk 2.4.0 → 2.5.1

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

@@ -2,100 +2,18 @@ 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 { point, rhumbDistance, rhumbBearing, rhumbDestination } from '@turf/turf'
 import { Time, Units, utils as kdkCoreUtils } from '../../../../core.client.js'
-import { GradientPath } from '../../leaflet/GradientPath.js'
+import { getUpdateFeatureFunction, hasUnitInLeafletLayerTemplate, GeoJsonLeafletLayerFilters } from '../../leaflet/utils/utils.geojson.js'
 import { MaskLayer } from '../../leaflet/MaskLayer.js'
 import { TiledFeatureLayer } from '../../leaflet/TiledFeatureLayer.js'
 import { 
   fetchGeoJson, LeafletEvents, bindLeafletEvents, unbindLeafletEvents, getFeatureId, isInMemoryLayer, getFeatureStyleType,
   convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle, createMarkerFromPointStyle
 } from '../../utils.map.js'
+import * as maths from '../../../../core/client/utils/utils.math.js'
 import * as wfs from '../../../common/wfs-utils.js'
 
-// Override default remove handler for leaflet-realtime due to
-// https://github.com/perliedman/leaflet-realtime/issues/177
-const Realtime = L.Realtime.extend({
-  remove: function (geojson) {
-    if (typeof geojson === 'undefined') {
-      return L.Layer.prototype.remove.call(this)
-    } else {
-      return L.Realtime.prototype.remove.call(this, geojson)
-    }
-  }
-})
-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
-L.GeoJSON.geometryToLayer = function (geojson, options) {
-  const geometry = geojson.geometry
-  const properties = geojson.properties
-  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)))
-    } 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)))
-    } 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)))
-      return layer
-    }
-  }
-  if (geometry && properties && properties.gradient) {
-    if (geometry.type === 'LineString') {
-      return new GradientPath(geojson, options.style(geojson))
-    }
-  }
-  if (geometry && properties && properties.mask) {
-    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 (geometry && (options.arrowheads || (properties && properties.arrowheads))) {
-    if (layer instanceof L.Polyline) layer.arrowheads(options.arrowheads || properties.arrowheads)
-  }
-  
-  return layer
-}
-
 export const geojsonLayers = {
   emits: [
     'layer-updated'
@@ -116,75 +34,7 @@ export const geojsonLayers = {
       }
       // Custom update function to ensure dynamic styling works as expected
       if (!_.has(leafletOptions, 'updateFeature')) {
-        leafletOptions.updateFeature = function (feature, oldLayer) {
-          // A new feature is coming, create it
-          if (!oldLayer) return
-          const staticGeometry = _.get(leafletOptions, 'staticGeometry', false)
-          // Keep track of previous geometry if we don't want to update it
-          // Indeed, styling might depend on it
-          if (staticGeometry) feature.geometry = _.get(oldLayer, 'feature.geometry')
-
-          // An existing one is found, simply update styling, properties, etc.
-          leafletOptions.onEachFeature(feature, oldLayer)
-          if (oldLayer.setStyle) {
-            // Some vector layers can be used for points, eg circleMarker,
-            // in this case we use marker styling instead of lines/polygons styling
-            if (feature.geometry.type === 'Point') {
-              // FIXME: updating style in place does not seem to work, so for now we recreate the whole marker
-              // oldLayer.setStyle(leafletOptions.pointToLayer(feature))
-              return
-            } else {
-              oldLayer.setStyle(leafletOptions.style(feature))
-            }
-          }
-          // We want to restore values that were there till now but are missing from the input feature.
-          // Deep for time and runtime that might contain objects with variables
-          _.defaultsDeep(feature, _.pick(oldLayer.feature, ['time', 'runTime']))
-          // _NOT_ deep for properties, otherwise it'll merge array and object properties between the two
-          const oldProps = _.get(oldLayer.feature, 'properties')
-          if (oldProps) {
-            if (!feature.properties) feature.properties = {}
-            _.defaults(feature.properties, oldProps)
-          }
-          if (oldLayer.setIcon) {
-            // FIXME: updating icon in place requires to recreate it anyway, so for now we recreate the whole marker
-            // oldLayer.setIcon(_.get(leafletOptions.pointToLayer(feature, oldLayer.getLatLng()), 'options.icon'))
-            return
-          }
-          // Now update coordinates if not static geometry
-          if (staticGeometry) return oldLayer
-          // The feature is changing its geometry type, recreate it
-          const oldType = _.get(oldLayer, 'feature.geometry.type')
-          const type = _.get(feature, 'geometry.type')
-          if (type !== oldType) return
-          const coordinates = feature.geometry.coordinates
-          // FIXME: support others geometry types ?
-          switch (type) {
-            case 'Point':
-              oldLayer.setLatLng(L.GeoJSON.coordsToLatLngs(coordinates))
-              break
-            case 'LineString':
-            case 'MultiLineString':
-              if (typeof oldLayer.setData === 'function') {
-                // Support Gradient Path
-                oldLayer.setData(feature)
-              } else if (feature.properties.geodesic) {
-                // Support geodesic line & linestrings
-                const latlngs = type === 'LineString'
-                  ? [L.GeoJSON.coordsToLatLngs(coordinates, 0)]
-                  : coordinates.map((linestring) => L.GeoJSON.coordsToLatLngs(linestring, 0))
-                oldLayer.setLatLngs(latlngs)
-              } else {
-                oldLayer.setLatLngs(L.GeoJSON.coordsToLatLngs(coordinates, type === 'LineString' ? 0 : 1))
-              }
-              break
-            case 'Polygon':
-            case 'MultiPolygon':
-              oldLayer.setLatLngs(L.GeoJSON.coordsToLatLngs(coordinates, type === 'Polygon' ? 1 : 2))
-              break
-          }
-          return oldLayer
-        }
+        leafletOptions.updateFeature = getUpdateFeatureFunction(leafletOptions)
       }
       // Check for feature service layers
       if (options.service) {
@@ -198,7 +48,8 @@ export const geojsonLayers = {
           leafletOptions.removeMissing = false
           // Fetching is managed by tiles but even for manual update leaflet realtime require a src
           _.set(leafletOptions, 'source', async (successCallback, errorCallback) => {})
-          // Generate fetch function for tiled feature layer
+          // Generate fetch functions for tiled feature layer
+          leafletOptions.probeSource = (baseQuery) => this.getProbeFeatures(_.merge({ baseQuery }, options))
           leafletOptions.featureSource = (baseQuery) => this.getFeatures(_.merge({ baseQuery }, options))
         } else {
           leafletOptions.removeMissing = !options.probeService
@@ -208,7 +59,11 @@ export const geojsonLayers = {
             if (!initialized) {
               try {
                 // Use probes as reference
-                successCallback(await this.getProbeFeatures(options))
+                const geoJson = await this.getProbeFeatures(options)
+                // When probes are fetched, we flag them with a 'measureRequestIssued' property that we may use in dynamic styling
+                const features = (geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson])
+                features.forEach(feature => { feature.measureRequestIssued = true })
+                successCallback(geoJson)
                 initialized = true
               } catch (error) {
                 errorCallback(error)
@@ -216,7 +71,8 @@ export const geojsonLayers = {
             }
             try {
               // Then update features
-              successCallback(await this.getFeatures(options))
+              const geoJson = await this.getFeatures(options)
+              successCallback(geoJson)
             } catch (error) {
               errorCallback(error)
             }
@@ -236,7 +92,7 @@ export const geojsonLayers = {
               SRSNAME: 'EPSG:4326', // result in 4326
               BBOX: `${query.south},${query.west},${query.north},${query.east},urn:ogc:def:crs:EPSG::4326` // request bbox
             }, options.wfs.searchParams)
-            return wfs.GetFeature(options.wfs.url, options.wfs.version, options.wfs.layer, searchParams, { xml2json: false })
+            return wfs.GetFeature(options.wfs.url, options.wfs.version, options.wfs.layer, searchParams, options.wfs.headers, { xml2json: false })
           }
         }
       } else if (_.has(leafletOptions, 'sourceTemplate')) {
@@ -395,7 +251,9 @@ export const geojsonLayers = {
           // Add FeatureGroup interface so that layer edition works as well
           layer.toGeoJSON = () => ({ type: 'FeatureCollection', features: _.values(layer._features) })
           layer.clearLayers = () => layer._onNewData(true, { type: 'FeatureCollection', features: [] })
-          layer.addLayer = (geoJsonLayer) => layer._onNewData(true, geoJsonLayer.toGeoJSON())
+          layer.getLayers = () => _.values(layer._featureLayers)
+          layer.addLayer = (geoJsonLayer) => layer._onNewData(false, geoJsonLayer.toGeoJSON())
+          layer.removeLayer = (geoJsonLayer) => layer.remove(geoJsonLayer.toGeoJSON())
           // We launch a first update to initialize data
           layer.update()
         } else {
@@ -464,6 +322,93 @@ export const geojsonLayers = {
       }
       return geojsonOptions
     },
+    getUpdateAnimation(name, layer, options, geoJson) {
+      const { duration, removeMissing, animate } = options
+      const animatedProperties = _.keys(animate)
+      const features = (Array.isArray(geoJson) ? geoJson : (geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson]))
+      features.forEach(feature => {
+        const previousLayer = layer.getLayer(layer.options.getFeatureId(feature))
+        const previousFeature = (previousLayer ? previousLayer.feature : null)
+        if (previousFeature) {
+          Object.assign(feature, { previousFeature })
+          const startLongitude = _.get(feature.previousFeature, 'geometry.coordinates[0]')
+          const startLatitude = _.get(feature.previousFeature, 'geometry.coordinates[1]')
+          const endLongitude = _.get(feature, 'geometry.coordinates[0]')
+          const endLatitude = _.get(feature, 'geometry.coordinates[1]')
+          const rhumbStart = point([startLongitude, startLatitude])
+          const rhumbEnd = point([endLongitude, endLatitude])
+          Object.assign(feature, {
+            rhumbStart,
+            rhumbEnd,
+            rhumbBearing: rhumbBearing(rhumbStart, rhumbEnd),
+            rhumbDistance: rhumbDistance(rhumbStart, rhumbEnd)
+          })
+        }
+      })
+      return (timestamp) => {
+        // Initialize animation time origin
+        if (!options.startTime) options.startTime = timestamp
+        const { id, startTime } = options
+        const elapsed = timestamp - startTime
+        const percent = Math.abs(elapsed / (1000 * duration))
+        if (percent <= 1) {
+          const animatedFeatures = []
+          features.forEach(feature => {
+            if (!feature.previousFeature) {
+              animatedFeatures.push(feature)
+              return
+            }
+            const endLongitude = _.get(feature, 'geometry.coordinates[0]')
+            const endLatitude = _.get(feature, 'geometry.coordinates[1]')
+            let dLongitude = endLongitude, dLatitude = endLatitude
+            if (animate.geometry) {
+              const easingGeometryFunction = _.get(animate.geometry, 'easing.function')
+              const easingGeometryParameters = _.get(animate.geometry, 'easing.parameters', [])
+              const percentGeometry = maths[easingGeometryFunction](percent, ...easingGeometryParameters)
+              if (animate.geometry.rhumb) {
+                const destination = rhumbDestination(feature.rhumbStart, percentGeometry * feature.rhumbDistance, feature.rhumbBearing)
+                dLongitude = _.get(destination, 'geometry.coordinates[0]')
+                dLatitude = _.get(destination, 'geometry.coordinates[1]')
+              } else {
+                const startLongitude = _.get(feature.previousFeature, 'geometry.coordinates[0]')
+                const startLatitude = _.get(feature.previousFeature, 'geometry.coordinates[1]')
+                const dLongitude = startLongitude + percentGeometry * (endLongitude - startLongitude)
+                const dLatitude = startLatitude + percentGeometry * (endLatitude - startLatitude)
+              }
+            }
+            const properties = {}
+            animatedProperties.forEach(property => {
+              // Skip geometry as specifically managed above
+              if (property === 'geometry') return
+              const easingPropertyFunction = _.get(animate, `${property}.easing.function`, 'cubicBezier')
+              const easingPropertyParameters = _.get(animate, `${property}.easing.parameters`, [])
+              const percentProperty = maths[easingPropertyFunction](percent, ...easingPropertyParameters)
+              const startValue = _.get(feature.previousFeature, `properties.${property}`)
+              const endValue = _.get(feature, `properties.${property}`)
+              let dValue = startValue + percentProperty * (endValue - startValue)
+              if (_.get(animate, `${property}.bearing`, false)) {
+                // Take care to animate using the shortest "path", eg from 355° to 5° avoid running counterclockwise
+                // First computes the smallest angle difference, either clockwise or counterclockwise.
+                const bearingDifference = (endValue - startValue + 540) % 360 - 180
+                // Then normalize the final result to be between 0 and 360
+                dValue = (startValue + percentProperty * bearingDifference + 360) % 360
+              }
+              _.set(properties, property, dValue)
+            })
+            animatedFeatures.push(_.defaultsDeep({
+              geometry: {
+                coordinates: [dLongitude, dLatitude]
+              },
+              properties
+            }, feature))
+          })
+          layer._onNewData(_.isNil(removeMissing) ? layer.options.removeMissing : removeMissing, animatedFeatures)
+          options.id = requestAnimationFrame(options.step)
+        } else {
+          options.id = null
+        }
+      }
+    },
     updateLayer (name, geoJson, options = {}) {
       // Retrieve the layer
       let layer = this.getLeafletLayerByName(name)
@@ -484,7 +429,7 @@ export const geojsonLayers = {
         const removeMissing = _.get(options, 'removeMissing', layer.options.removeMissing)
         // Check if clustering on top of a realtime layer, in this case we have a top-level container
         let container
-        if (typeof layer.getLayers === 'function') {
+        if (layer instanceof L.MarkerClusterGroup) {
           container = layer
           layer = container.getLayers().find(layer => layer._container === container)
         }
@@ -500,7 +445,23 @@ export const geojsonLayers = {
           features = features.filter(feature => layer.getLayer(layer.options.getFeatureId(feature)))
           layer.remove(features)
         } else if (geoJson) {
-          if (typeof layer._onNewData === 'function') layer._onNewData(removeMissing, geoJson)
+          if (typeof layer._onNewData === 'function') {
+            const duration = _.get(options, 'duration', 0)
+            if (duration) {
+              _.defaultsDeep(options, {
+                animate: {
+                  geometry: { easing: { function: 'cubicBezier' }, rhumb: true }
+                }
+              })
+              // Stop any scheduled animation on the same layer
+              if (_.has(this.updateAnimations, `${name}.id`)) cancelAnimationFrame(_.get(this.updateAnimations, `${name}.id`))
+              options.step = this.getUpdateAnimation(name, layer, options, geoJson)
+              options.id = requestAnimationFrame(options.step)
+              _.set(this.updateAnimations, name, options)
+            } else {
+              layer._onNewData(removeMissing, geoJson)
+            }
+          }
         } else { // Fetch new data or update in place
           if (layer.tiledLayer) layer.tiledLayer.redraw()
           else if (typeof layer.update === 'function') layer.update()
@@ -523,19 +484,7 @@ export const geojsonLayers = {
     },
     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 service
-          { 'leaflet.sourceTemplate': { $exists: true } },
-          { service: { $exists: true } }
-        ],
-        // Skip layers powered by realtime service events
-        serviceEvents: { $ne: true },
-        // Skip invisible layers
-        isVisible: true
-      }))
+      const geoJsonlayers = _.values(this.layers).filter(sift(GeoJsonLeafletLayerFilters.TimeUpdate))
       geoJsonlayers.forEach(async geoJsonlayer => {
         // Retrieve the layer
         const layer = this.getLeafletLayerByName(geoJsonlayer.name)
@@ -572,27 +521,10 @@ export const geojsonLayers = {
         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 }
-        }))
+        let geoJsonlayers = _.values(this.layers).filter(sift(GeoJsonLeafletLayerFilters.UnitUpdate))
         // 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
+          return hasUnitInLeafletLayerTemplate(units, layer)
         })
         // Then retrieve the engine layers and update
         geoJsonlayers.forEach(layer => {
@@ -608,17 +540,7 @@ export const geojsonLayers = {
     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
-      const geoJsonlayers = _.values(this.layers).filter(sift({
-        'leaflet.type': 'geoJson',
-        'leaflet.realtime': true,
-        isVisible: true,
-        // Supported by permanent tooltips only
-        'leaflet.tooltip.options.permanent': true,
-        $or: [
-          { 'leaflet.tooltip.minZoom': { $exists: true } },
-          { 'leaflet.tooltip.maxZoom': { $exists: true } }
-        ]
-      }))
+      const geoJsonlayers = _.values(this.layers).filter(sift(GeoJsonLeafletLayerFilters.TooltipUpdate))
       geoJsonlayers.forEach(async geoJsonlayer => {
         // Retrieve the layer
         const layer = this.getLeafletLayerByName(geoJsonlayer.name)
@@ -644,7 +566,7 @@ export const geojsonLayers = {
           // Restore geojson data for in-memory layers that was hidden
           // 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') {
+          if (engineLayer instanceof L.MarkerClusterGroup) {
             const container = engineLayer
             engineLayer = container.getLayers().find(layer => layer._container === container)
           }
@@ -671,6 +593,8 @@ export const geojsonLayers = {
     this.$engineEvents.on('layer-shown', this.onLayerShownGeoJsonLayers)
     this.$engineEvents.on('layer-removed', this.onLayerRemovedGeoJsonLayers)
 
+    // Used to store animation options when animating a layer
+    this.updateAnimations = {}
     // Cache where we'll store geojson data for in memory layers we'll hide
     this.geojsonCache = {}
   },

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

@@ -5,7 +5,7 @@ import sift from 'sift'
 import L from 'leaflet'
 import * as protomaps from 'protomaps-leaflet'
 import { mapbox_style } from '@kalisio/leaflet-pmtiles'
-import { Time, Units, TemplateContext } from '../../../../core/client/index.js'
+import { api, Time, Units, TemplateContext } from '../../../../core/client/index.js'
 
 export const pmtilesLayers = {
   methods: {
@@ -13,6 +13,17 @@ export const pmtilesLayers = {
       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) {
@@ -37,7 +48,7 @@ export const pmtilesLayers = {
         rules = mapbox_style(style, {})
       } else {
         // Manage templating
-        leafletOptions.template.forEach(entry => {
+        _.get(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())
@@ -45,15 +56,17 @@ export const pmtilesLayers = {
           }
           _.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)
+        if (style) {
+          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({

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

@@ -15,11 +15,10 @@ export const tiledMeshLayers = {
       const colorMap = _.get(options, 'variables[0].chromajs', null)
       if (colorMap) Object.assign(layerOptions, { chromajs: colorMap })
 
-      const apiToken = await this.$api.get('storage').getItem(this.$config('gatewayJwt'))
-
       // 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 })
       gridSource.setup(gridConf)
       if (gridSource.updateCtx) {

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

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import 'leaflet-velocity'
 import { Time } from '../../../../core/client/time.js'
 import { makeGridSource, extractGridSourceConfig } from '../../../common/grid.js'
 import { TiledWindLayer } from '../../leaflet/TiledWindLayer.js'
@@ -25,7 +26,7 @@ export const tiledWindLayers = {
       vSource.setup(gridConf)
       if (uSource.updateCtx) {
         // define variables for source's dynamic properties
-        const gatewayToken = await this.$api.get('storage').getItem(this.$config('gatewayJwt'))
+        const gatewayToken = (weacastApi.hasConfig('gatewayJwt') ? await weacastApi.get('storage').getItem(weacastApi.getConfig('gatewayJwt')) : null)
         if (gatewayToken) {
           uSource.updateCtx.jwtToken = gatewayToken
           vSource.updateCtx.jwtToken = gatewayToken