@kalisio/kdk 2.1.9 → 2.2.1

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

@@ -3,11 +3,14 @@ import _ from 'lodash'
 import sift from 'sift'
 import logger from 'loglevel'
 import 'leaflet-realtime'
-import { Time } from '../../../../core/client/time.js'
+import { Time, 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'
-import { fetchGeoJson, LeafletEvents, bindLeafletEvents, unbindLeafletEvents, getFeatureId } from '../../utils.map.js'
+import { 
+  fetchGeoJson, LeafletEvents, bindLeafletEvents, unbindLeafletEvents, getFeatureId, isInMemoryLayer, getFeatureStyleType,
+  convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle, createMarkerFromPointStyle
+} from '../../utils.map.js'
 import * as wfs from '../../../common/wfs-utils.js'
 
 // Override default remove handler for leaflet-realtime due to
@@ -79,6 +82,11 @@ export const geojsonLayers = {
         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) {
@@ -92,9 +100,8 @@ export const geojsonLayers = {
               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
+          // 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')
@@ -107,8 +114,7 @@ export const geojsonLayers = {
             // oldLayer.setIcon(_.get(leafletOptions.pointToLayer(feature, oldLayer.getLatLng()), 'options.icon'))
             return
           }
-          // And coordinates if not static
-          const staticGeometry = _.get(leafletOptions, 'staticGeometry', false)
+          // 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')
@@ -145,6 +151,9 @@ export const geojsonLayers = {
       }
       // Check for feature service layers
       if (options.service) {
+        // FIXME: need to retrieve original layer options as here we get processed options by the underlying engine
+        // and eg filtering depends on changing the state of the layer definition object at run time
+        options = this.getLayerByName(options.name)
         // We perform manual update
         _.set(leafletOptions, 'start', false)
         // Tell realtime plugin how to update/load data
@@ -158,9 +167,6 @@ export const geojsonLayers = {
           leafletOptions.removeMissing = !options.probeService
           let initialized = !options.probeService // If no probe reference, nothing to be initialized
           _.set(leafletOptions, 'source', async (successCallback, errorCallback) => {
-            // FIXME: need to retrieve original layer options as here we get processed options by the underlying engine
-            // and eg filtering depends on changing the state of the layer definition object at run time
-            options = this.getLayerByName(options.name)
             // If the probe location is given by another service use it on initialization
             if (!initialized) {
               try {
@@ -261,6 +267,13 @@ export const geojsonLayers = {
           leafletOptions.panes = [pane]
           leafletOptions.pane = options.name
           leafletOptions.shadowPane = options.name
+          // Make pane available to styles as well as eg shape markers are created from here
+          for (const type in ['point', 'line', 'polygon']) {
+            if (_.has(leafletOptions, `style.${type}`)) {
+              _.set(leafletOptions, `style.${type}.pane`, options.name)
+              _.set(leafletOptions, `style.${type}.shadowPane`, options.name)
+            }
+          }
         }
         // If not explicitely disable use defaults for clustering
         if (!_.has(leafletOptions, 'cluster') && _.get(this, 'activityOptions.engine.cluster')) {
@@ -294,15 +307,32 @@ export const geojsonLayers = {
         if (tooltipTemplate) {
           leafletOptions.tooltip.compiler = _.template(tooltipTemplate)
         }
+        // Optimize styling by creating color scales up-front
+        const variables = _.get(options, 'variables', [])
+        variables.forEach(variable => {
+          if (_.has(variable, 'chromajs')) {
+            variable.colorScale = kdkCoreUtils.buildColorScale(_.get(variable, 'chromajs'))
+          }
+        })
+        // Convert and store the style
+        if (leafletOptions.style) {
+          leafletOptions.layerPointStyle = _.get(leafletOptions.style, 'point')
+          leafletOptions.layerLineStyle = _.get(leafletOptions.style, 'line')
+          leafletOptions.layerPolygonStyle = _.get(leafletOptions.style, 'polygon')
+        } else {
+          leafletOptions.layerPointStyle = convertSimpleStyleToPointStyle(leafletOptions)
+          leafletOptions.layerLineStyle = convertSimpleStyleToLineStyle(leafletOptions)
+          leafletOptions.layerPolygonStyle = convertSimpleStyleToPolygonStyle(leafletOptions)
+        }
         // 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(leafletOptions, key)) _.set(leafletOptions, key, _.get(geoJsonOptions, key))
+          // If layer provided do not override execpt for the style 
+          // Indeed the style property must be overriden to install the Leaflet function style
+          if (!_.has(leafletOptions, key) || (key === 'style')) _.set(leafletOptions, key, _.get(geoJsonOptions, key))
         })
-        leafletOptions.layerStyle = this.convertFromSimpleStyleSpec(leafletOptions)
+        // Create the layer*/
         let layer = this.createLeafletLayer(options)
-
         // Specific case of realtime layer where the underlying container also need to be added to map
         if (leafletOptions.realtime) {
           // Build associated tile layer and bind required events
@@ -377,13 +407,22 @@ export const geojsonLayers = {
           bindLeafletEvents(layer, LeafletEvents.Feature, this, options)
         },
         style: (feature) => {
-          return this.generateStyle('featureStyle', feature, options)
+          const styleType = getFeatureStyleType(feature)
+          if (!styleType) {
+            logger.warn(`[KDK] cannot get a style type from the feature of geometry type ${feature.geometry.type}`)
+            return
+          }
+          return this.generateStyle(styleType, feature, options, _.get(this, 'activityOptions.engine'))
         },
         pointToLayer: (feature, latlng) => {
-          return this.generateStyle('markerStyle', feature, latlng, options)
+          const style = this.generateStyle('point', feature, options, _.get(this, 'activityOptions.engine'))
+          if (!style) {
+            logger.warn('[KDK] cannot generate point style from a feature')
+            return
+          }
+          return createMarkerFromPointStyle(latlng, style)
         }
       }
-
       return geojsonOptions
     },
     updateLayer (name, geoJson, options = {}) {
@@ -424,7 +463,8 @@ export const geojsonLayers = {
         } else if (geoJson) {
           if (typeof layer._onNewData === 'function') layer._onNewData(removeMissing, geoJson)
         } else { // Fetch new data or update in place
-          if (typeof layer.update === 'function') layer.update()
+          if (layer.tiledLayer) layer.tiledLayer.redraw()
+          else if (typeof layer.update === 'function') layer.update()
           else if (typeof layer._onNewData === 'function') layer._onNewData(removeMissing, this.toGeoJson(name))
         }
 
@@ -432,7 +472,7 @@ export const geojsonLayers = {
         // 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)) {
           const geojson = layer.toGeoJSON(false)
           this.geojsonCache[name] = geojson
         }
@@ -518,7 +558,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 {

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

@@ -2,10 +2,9 @@ import _ from 'lodash'
 import L from 'leaflet'
 import parseGeoraster from 'georaster'
 import moment from 'moment'
-import chroma from 'chroma-js'
 import { GridRenderer } from '@weacast/leaflet'
 import { Grid } from '@weacast/core/client.js'
-import { buildColorMap } from '../../utils.js'
+import { utils as kdkCoreUtils } from '../../../../core.client.js'
 
 const GeorasterLayer = L.Layer.extend({
 
@@ -32,13 +31,7 @@ const GeorasterLayer = L.Layer.extend({
       return
     }
     // Setup the colormap
-    this.colorMap = buildColorMap(this)
-    const scale = this.scale ? this.scale : ''
-    if (this.classes) {
-      this.colorMap = chroma.scale(scale).classes(this.classes)
-    } else if (this.domain) {
-      this.colorMap = chroma.scale(scale).domain(this.domain)
-    }
+    this.colorMap = kdkCoreUtils.buildColorScale(this)
 
     // Setup the grid
     const grid = new Grid({
@@ -96,8 +89,8 @@ export const georasterLayers = {
       if (leafletOptions.type !== 'georaster') return
 
       // Copy options
-      const colorMap = _.get(options, 'variables[0].chromajs', null)
-      if (colorMap) Object.assign(leafletOptions, colorMap)
+      const colorScale = _.get(options, 'variables[0].chromajs', null)
+      if (colorScale) Object.assign(leafletOptions, colorScale)
       const band = _.get(options, 'variables[0].band', 0)
       Object.assign(leafletOptions, { band })
       const nodata = _.get(options, 'variables[0].nodata', null)

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

@@ -4,7 +4,7 @@ import sift from 'sift'
 import centroid from '@turf/centroid'
 import HeatmapOverlay from 'leaflet-heatmap'
 import { Time } from '../../../../core/client/time.js'
-import { fetchGeoJson } from '../../utils.js'
+import { fetchGeoJson } from '../../utils/utils.features.js'
 
 export const heatmapLayers = {
   methods: {

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

@@ -1,5 +1,6 @@
 import L from 'leaflet'
 import _ from 'lodash'
+import moment from 'moment'
 import { Time, Units } from '../../../../core/client/index.js'
 import { getHtmlTable } from '../../utils.map.js'
 
@@ -22,7 +23,7 @@ export const popup = {
         if (!html) {
           if (popupStyle.template) {
             const compiler = popupStyle.compiler
-            html = compiler({ properties, feature, $t: this.$t, Units, Time })
+            html = compiler({ properties, feature, $t: this.$t, Units, Time, moment })
           } else if (popupStyle.pick) {
             properties = _.pick(properties, popupStyle.pick)
           } else if (popupStyle.omit) {

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

@@ -1,73 +1,10 @@
-import L from 'leaflet'
 import _ from 'lodash'
-import chroma from 'chroma-js'
-import { createLeafletMarkerFromStyle, convertToLeafletFromSimpleStyleSpec, LeafletStyleMappings } from '../../utils.map.js'
+import { getDefaultPointStyle, getDefaultLineStyle, getDefaultPolygonStyle } from '../../utils.map.js'
 
 export const style = {
-  methods: {
-    // Alias to ease development
-    createMarkerFromStyle (latlng, markerStyle, feature) {
-      return createLeafletMarkerFromStyle(latlng, markerStyle, feature)
-    },
-    // Alias to ease development
-    convertFromSimpleStyleSpec (style, inPlace) {
-      return convertToLeafletFromSimpleStyleSpec(style, inPlace)
-    },
-    getDefaultMarker (feature, latlng, options) {
-      const properties = feature.properties
-      const leafletOptions = options.leaflet || options
-      const style = Object.assign({},
-        _.get(this, 'activityOptions.engine.pointStyle'),
-        leafletOptions.layerStyle,
-        this.convertFromSimpleStyleSpec(feature.style || feature.properties))
-
-      // We allow to template style properties according to feature,
-      // because it can be slow you have to specify a subset of properties
-      if (leafletOptions.template) {
-        leafletOptions.template.forEach(entry => {
-          // Perform templating, set using simple spec mapping first then raw if property not found
-          _.set(style, _.get(LeafletStyleMappings, entry.property, entry.property), entry.compiler({ properties, feature, chroma }))
-        })
-      }
-      // We manage panes for z-index, so we need to forward it to marker options (only if not already defined)
-      if (leafletOptions.pane && !style.pane) style.pane = leafletOptions.pane
-      if (leafletOptions.shadowPane && !style.shadowPane) style.shadowPane = leafletOptions.shadowPane
-      return (latlng ? this.createMarkerFromStyle(latlng, style) : style)
-    },
-    getDefaultStyle (feature, options) {
-      const properties = feature.properties
-      const leafletOptions = options.leaflet || options
-      const style = Object.assign({},
-        _.get(this, 'activityOptions.engine.featureStyle'),
-        leafletOptions.layerStyle,
-        this.convertFromSimpleStyleSpec(feature.style || feature.properties))
-
-      // We allow to template style properties according to feature,
-      // because it can be slow you have to specify a subset of properties
-      if (leafletOptions.template) {
-        leafletOptions.template.forEach(entry => {
-          // Perform templating, set using simple spec mapping first then raw if property not found
-          _.set(style, _.get(LeafletStyleMappings, entry.property, entry.property), entry.compiler({ properties, feature, chroma }))
-        })
-      }
-      // We manage panes for z-index, so we need to forward it to marker options (only if not already defined)
-      if (leafletOptions.pane && !style.pane) style.pane = leafletOptions.pane
-      if (leafletOptions.shadowPane && !style.shadowPane) style.shadowPane = leafletOptions.shadowPane
-      return style
-    }
-  },
   created () {
-    this.registerStyle('markerStyle', this.getDefaultMarker)
-    this.registerStyle('featureStyle', this.getDefaultStyle)
-  },
-  // 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.featureStyle')) {
-      this.convertFromSimpleStyleSpec(_.get(this, 'activityOptions.engine.featureStyle'), 'update-in-place')
-    }
-    if (_.has(this, 'activityOptions.engine.pointStyle')) {
-      this.convertFromSimpleStyleSpec(_.get(this, 'activityOptions.engine.pointStyle'), 'update-in-place')
-    }
+    this.registerStyle('point', getDefaultPointStyle)
+    this.registerStyle('line', getDefaultLineStyle)
+    this.registerStyle('polygon', getDefaultPolygonStyle)
   }
 }

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

@@ -19,7 +19,8 @@ export const tiledMeshLayers = {
 
       // Build grid source
       const [gridKey, gridConf] = extractGridSourceConfig(options)
-      const gridSource = makeGridSource(gridKey, { weacastApi: this.weacastApi, apiToken })
+      const weacastApi = (typeof options.getPlanetApi === 'function' ? options.getPlanetApi() : this.getWeacastApi())
+      const gridSource = makeGridSource(gridKey, { weacastApi, apiToken })
       gridSource.setup(gridConf)
       if (gridSource.updateCtx) {
         // define variables for source's dynamic properties

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

@@ -17,8 +17,10 @@ export const tiledWindLayers = {
 
       // Build u & v grid sources
       const [gridKey, gridConf] = extractGridSourceConfig(options)
-      const uSource = makeGridSource(gridKey, { weacastApi: this.weacastApi })
-      const vSource = makeGridSource(gridKey, { weacastApi: this.weacastApi })
+      // 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())
+      const uSource = makeGridSource(gridKey, { weacastApi })
+      const vSource = makeGridSource(gridKey, { weacastApi })
       uSource.setup(gridConf)
       vSource.setup(gridConf)
       if (uSource.updateCtx) {

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

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import L from 'leaflet'
+import moment from 'moment'
 import { Time, Units } from '../../../../core/client/index.js'
 
 export const tooltip = {
@@ -30,7 +31,7 @@ export const tooltip = {
             if (html && (typeof html.toString === 'function')) html = html.toString()
           } else if (tooltipStyle.template) {
             const compiler = tooltipStyle.compiler
-            html = compiler({ properties, feature, $t: this.$t, Units, Time })
+            html = compiler({ properties, feature, $t: this.$t, Units, Time, moment })
           }
         }
         if (html) {