@kalisio/kdk 2.4.0 → 2.5.1

package/map/client/cesium/utils/utils.cesium.js

@@ -1,3 +1,5 @@
+import _ from 'lodash'
+
 // We need to dynamically import cesium to dynamically get constructors
 export let Cesium
 
@@ -6,3 +8,398 @@ async function loadCesium() {
 }
 
 loadCesium()
+
+function createWallGeometry (positions, minimumHeights = [], maximumHeights = []) {
+  if (!positions || positions.length < 2) return
+
+  minimumHeights = minimumHeights || Array(positions.length).fill(0)
+  minimumHeights = Array.isArray(minimumHeights) ? minimumHeights : Array(positions.length).fill(minimumHeights)
+  if (!maximumHeights) {
+    maximumHeights = []
+    for (let i = 0, j = positions.length; i < j; ++i) {
+      const cartographic = Cesium.Cartographic.fromCartesian(positions[i])
+      maximumHeights.push(cartographic.height)
+    }
+  }
+  maximumHeights = Array.isArray(maximumHeights) ? maximumHeights : Array(positions.length).fill(maximumHeights)
+
+  const setHeight = (cartesian, height) => {
+    const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+    cartographic.height = height
+    return Cesium.Cartographic.toCartesian(cartographic)
+  }
+
+  // Generate positions and st
+  const indices = []
+  const distances = [0]
+  const times = (positions.length - 1) * 2
+  let lineLength = 0
+  let minHeight = -1
+  for (let i = 0; i < times; i++) {
+    if (i % 2) {
+      indices.push(i + 2, i - 1, i + 1)
+    } else {
+      indices.push(i + 1, i, i + 3)
+    }
+
+    if (positions[i + 1]) {
+      const distance = Cesium.Cartesian3.distance(positions[i], positions[i + 1])
+      distances.push(distance)
+      lineLength += distance
+    }
+  }
+
+  let percent = 0
+  const st = []
+  const wallPositions = []
+  for (let i = 0; i < positions.length; i++) {
+    // St
+    percent += distances[i] / lineLength
+    if (i === positions.length - 1) percent = 1
+    st.push(1 - percent, 0, 1 - percent, 1)
+
+    // Positions
+    const position = positions[i]
+    const bottomPoint = setHeight(position, minimumHeights[i])
+    const topPoint = setHeight(position, maximumHeights[i])
+    wallPositions.push(
+      bottomPoint.x,
+      bottomPoint.y,
+      bottomPoint.z,
+      topPoint.x,
+      topPoint.y,
+      topPoint.z
+    )
+
+    // Min height
+    const currentHeight = Math.abs(maximumHeights[i] - minimumHeights[i])
+    if (minHeight === -1 || currentHeight < minHeight) minHeight = currentHeight
+  }
+
+  return {
+    geometry: new Cesium.Geometry({
+      attributes: {
+        position: new Cesium.GeometryAttribute({
+          componentDatatype: Cesium.ComponentDatatype.DOUBLE,
+          componentsPerAttribute: 3,
+          values: wallPositions
+        }),
+        st: new Cesium.GeometryAttribute({
+          componentDatatype: Cesium.ComponentDatatype.FLOAT,
+          componentsPerAttribute: 2,
+          values: new Float64Array(st)
+        })
+      },
+      indices: new Uint16Array(indices),
+      primitiveType: Cesium.PrimitiveType.TRIANGLES,
+      boundingSphere: Cesium.BoundingSphere.fromVertices(wallPositions)
+    }),
+    dimensions: {
+      minHeight,
+      lineLength
+    }
+  }
+}
+
+function createCorridorGeometry (positions, width, height) {
+  if (!positions || positions.length < 2) return
+
+  const setHeight = (cartesian, height) => {
+    const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+    cartographic.height = height
+    return Cesium.Cartographic.toCartesian(cartographic)
+  }
+
+  const angleBetweenThreePoints = (A, B, C) => {
+    const AB = Cesium.Cartesian3.subtract(B, A, new Cesium.Cartesian3())
+    const AC = Cesium.Cartesian3.subtract(C, A, new Cesium.Cartesian3())
+    const dot = Cesium.Cartesian3.dot(AB, AC)
+    const lengthAB = Cesium.Cartesian3.magnitude(AB)
+    const lengthAC = Cesium.Cartesian3.magnitude(AC)
+    return Math.acos(dot / (lengthAB * lengthAC))
+  }
+
+  const computeOffset = (current, previous, next, offset, normal) => {
+    let direction
+
+    if (!previous) {
+      // If it's the first point, use only the direction to the next
+      direction = Cesium.Cartesian3.subtract(next, current, new Cesium.Cartesian3())
+    } else if (!next) {
+      // If it's the last point, use only the direction from the previous
+      direction = Cesium.Cartesian3.subtract(current, previous, new Cesium.Cartesian3())
+    } else {
+      // Intermediate points: average of the directions before and after
+      const forward = Cesium.Cartesian3.subtract(next, current, new Cesium.Cartesian3())
+      const backward = Cesium.Cartesian3.subtract(current, previous, new Cesium.Cartesian3())
+      direction = Cesium.Cartesian3.add(forward, backward, new Cesium.Cartesian3())
+    }
+
+    Cesium.Cartesian3.normalize(direction, direction)
+
+    // Compute the perpendicular vector
+    const up = normal || Cesium.Cartesian3.UNIT_Z
+    const perpendicular = Cesium.Cartesian3.cross(direction, up, new Cesium.Cartesian3())
+    Cesium.Cartesian3.normalize(perpendicular, perpendicular)
+
+    // Apply the offset
+    const offsetVector = Cesium.Cartesian3.multiplyByScalar(perpendicular, offset, new Cesium.Cartesian3())
+    return { direction, position: Cesium.Cartesian3.add(current, offsetVector, new Cesium.Cartesian3()) }
+  }
+
+  for (let i = 0; i < positions.length; i++) {
+    positions[i] = setHeight(positions[i], height)
+  }
+
+  // Find local normal
+  // Implies that if the corridor extends over very large distances, the normal may be incorrect
+  const normal = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(positions[0])
+  const distances = [0]
+  let lineLength = 0
+  const corridorPositions = []
+
+  let lastLeftPoint = null
+  let lastRightPoint = null
+  let lastDirection = null
+  for (let i = 0; i < positions.length; i++) {
+    // Compute the offset positions to create the corridor
+    const left = computeOffset(positions[i], positions[i - 1], positions[i + 1], -width / 2, normal)
+    const right = computeOffset(positions[i], positions[i - 1], positions[i + 1], width / 2, normal)
+
+    // Check if [left, right] segment intersects with the previous one
+    if (i > 0) {
+      const turnLeft = Cesium.Cartesian3.cross(left.direction, lastDirection, new Cesium.Cartesian3()).z < 0
+
+      const previousAngle = angleBetweenThreePoints(positions[i - 1], positions[i], turnLeft ? lastLeftPoint : lastRightPoint)
+      const currentAngle = angleBetweenThreePoints(positions[i - 1], positions[i], turnLeft ? left.position : right.position)
+      if (currentAngle > previousAngle) {
+        if (turnLeft) left.position = lastLeftPoint
+        else right.position = lastRightPoint
+      }
+
+      const distance = Cesium.Cartesian3.distance(positions[i - 1], positions[i])
+      distances.push(distance)
+      lineLength += distance
+    }
+
+    corridorPositions.push(
+      left.position.x,
+      left.position.y,
+      left.position.z,
+      right.position.x,
+      right.position.y,
+      right.position.z
+    )
+
+    lastLeftPoint = left.position
+    lastRightPoint = right.position
+    lastDirection = left.direction
+  }
+
+  let percent = 0
+  const st = []
+  const indices = []
+  for (let i = 0; i < positions.length; i++) {
+    // Normalize distances for texture coordinates
+    percent += distances[i] / lineLength
+    if (i === positions.length - 1) percent = 1
+    st.push(1 - percent, 0, 1 - percent, 1)
+
+    // Add indices for triangulation
+    if (i < positions.length - 1) {
+      const baseIndex = i * 2
+      indices.push(
+        baseIndex, baseIndex + 1, baseIndex + 2,
+        baseIndex + 1, baseIndex + 3, baseIndex + 2
+      )
+    }
+  }
+
+  return {
+    geometry: new Cesium.Geometry({
+      attributes: {
+        position: new Cesium.GeometryAttribute({
+          componentDatatype: Cesium.ComponentDatatype.DOUBLE,
+          componentsPerAttribute: 3,
+          values: corridorPositions
+        }),
+        st: new Cesium.GeometryAttribute({
+          componentDatatype: Cesium.ComponentDatatype.FLOAT,
+          componentsPerAttribute: 2,
+          values: new Float64Array(st)
+        })
+      },
+      indices: new Uint16Array(indices),
+      primitiveType: Cesium.PrimitiveType.TRIANGLES,
+      boundingSphere: Cesium.BoundingSphere.fromVertices(corridorPositions)
+    }),
+    dimensions: {
+      lineLength,
+      width
+    }
+  }
+}
+
+function createMaterialWithMovingTexture (options) {
+  if (!options.image) return
+
+  let material = null
+  try {
+    // TODO : temporary throw to avoid to load material from type because it's not working
+    material = Cesium.Material.fromType('MovingMaterial')
+    material.uniforms.image = options.image
+    material.uniforms.repeat = new Cesium.Cartesian2(1.0, 1.0)
+    material.uniforms.offset = new Cesium.Cartesian2(0.0, 0.0)
+    material.translucent = options.translucent
+    throw new Error('Load material from type is not working')
+  } catch (e) {
+    const shaderSource = `
+        czm_material czm_getMaterial(czm_materialInput materialInput) {
+            czm_material material = czm_getDefaultMaterial(materialInput);
+
+            vec2 st = materialInput.st * repeat + offset;
+
+            // Loop texture with fract
+            st = fract(st);
+
+            vec4 color = texture(image, st);
+            material.${options.useAsDiffuse ? 'diffuse' : 'emission'} = color.rgb;
+            material.alpha = color.a;
+            return material;
+        }`
+
+    material = new Cesium.Material({
+      fabric: {
+        type: 'MovingMaterial',
+        source: shaderSource,
+        uniforms: {
+          image: options.image,
+          repeat: new Cesium.Cartesian2(1.0, 1.0),
+          offset: new Cesium.Cartesian2(0.0, 0.0)
+        }
+      },
+      translucent: _.get(options, 'translucent', false)
+    })
+  }
+
+  return material
+}
+
+export function createPrimitiveWithMovingTexture (type, options) {
+  if (!options.positions || !_.get(options, 'material.image', false)) return
+
+  const geometryOptions = {
+    positions: options.material.reverseAnimation === true ? options.positions.reverse() : options.positions
+  }
+
+  let geometry = null
+  switch (type) {
+    case 'wall':
+      geometryOptions.minimumHeights = _.get(options, 'minimumHeights', 0) // can be a single value
+      geometryOptions.maximumHeights = _.get(options, 'maximumHeights', null) // can be a single value
+      geometry = createWallGeometry(geometryOptions.positions, geometryOptions.minimumHeights, geometryOptions.maximumHeights)
+      break
+    case 'corridor':
+      geometryOptions.width = _.get(options, 'width', 10)
+      geometryOptions.height = _.get(options, 'height', 0)
+      geometry = createCorridorGeometry(geometryOptions.positions, geometryOptions.width, geometryOptions.height)
+      break
+    default:
+      break
+  }
+
+  if (!geometry) return
+  const dimensions = geometry.dimensions
+  geometry = geometry.geometry
+
+  // Create material
+  const material = createMaterialWithMovingTexture(_.get(options, 'material'))
+  if (!material) return
+
+  // By default, whole texture is mapped on the whole wall/corridor geometry
+  // Here we make it so texture keep it's aspect ratio, map 1 in the non animated
+  // direction, compute what goes in the other dimension
+  material.uniforms.repeat.x = dimensions.lineLength / (dimensions.minHeight || dimensions.width)
+  // Take potential scale into account
+  const scale = _.get(options, 'material.scale')
+  let animationSpeedScale = 1.0
+  if (scale) {
+    if (Array.isArray(scale)) {
+      material.uniforms.repeat.x *= scale[0]
+      material.uniforms.repeat.y *= scale[1]
+      animationSpeedScale = scale[0]
+    } else {
+      material.uniforms.repeat.x *= scale
+      material.uniforms.repeat.y *= scale
+      animationSpeedScale = scale
+    }
+  }
+
+  // Create primitive
+  return {
+    primitive: new Cesium.Primitive({
+      geometryInstances: new Cesium.GeometryInstance({
+        geometry
+      }),
+      appearance: new Cesium.MaterialAppearance({
+        material,
+        translucent: material.translucent
+      }),
+      asynchronous: false
+    }),
+    material: {
+      material,
+      animationSpeed: _.get(options, 'material.animationSpeed') * animationSpeedScale,
+      length: dimensions.lineLength
+    }
+  }
+}
+
+export function findPrimitiveForEntity (entity, viewer) {
+  const deepSearch = function (object, id, ids = []) {
+    if (object._id) {
+      if (object._id._id === id) return object
+      return null
+    }
+    if (object._guid) {
+      if (ids.includes(object._guid)) {
+        return null
+      }
+      ids.push(object._guid)
+    }
+    if (object._external) {
+      return deepSearch(object._external, id, ids)
+    }
+    if (object.collection) {
+      return deepSearch(object.collection, id, ids)
+    }
+
+    if (object._composites) {
+      for (const k in object._composites) {
+        const primitive = deepSearch(object._composites[k], id, ids)
+        if (primitive) return primitive
+      }
+    }
+
+    if (object._primitives) {
+      for (const o of object._primitives) {
+        if (o._guid) {
+          if (ids.includes(o._guid)) {
+            continue
+          }
+          ids.push(o._guid)
+        }
+        const primitive = deepSearch(o, id, ids)
+        if (primitive) return primitive
+      }
+    }
+  }
+
+  const primitives = viewer.scene.primitives
+  for (let i = 0; i < primitives.length; i++) {
+    const out = deepSearch(primitives.get(i), entity.id)
+    if (out) return out
+  }
+
+  return null
+}

package/map/client/cesium/utils/utils.features.js

@@ -2,6 +2,14 @@ import { kml } from '@tmcw/togeojson'
 import { exportKml } from 'cesium'
 
 export async function convertEntitiesToGeoJson(entities) {
+  const features = []
+  if (entities.values.length === 0) return { type: 'FeatureCollection', features }
+  // As cesium does not we usually keep track of original feature associated with an entity
+  _.forEach(entities.values, entity => {
+    if (entity.feature) features.push(entity.feature)
+  })
+  if (features.length > 0) return { type: 'FeatureCollection', features }
+  // Otherwise try to export as KML then convert to GeoJson
   const kmlEntities = await exportKml({ entities, modelCallback: () => '' })
   const parser = new DOMParser()
   return kml(parser.parseFromString(kmlEntities.kml, 'application/xml'))

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

@@ -0,0 +1,59 @@
+import _ from 'lodash'
+
+export const GeoJsonCesiumLayerFilters = {
+  // Filter to identify layers that require an update at a given frequency
+  TimeUpdate: {
+    // Possible for realtime layers only
+    'cesium.type': 'geoJson',
+    'cesium.realtime': true,
+    $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
+  },
+  // Filter to identify layers with variables affected by a unit change
+  UnitUpdate: {
+    '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,
+    $or: [{
+      'cesium.style': { $exists: true },
+      'cesium.template': { $exists: true }
+    }, {
+      'cesium.tooltip.template': { $exists: true }
+    }]
+  }
+}
+
+export function updateCesiumGeoJsonEntity (source, destination) {
+  destination.position = source.position
+  destination.orientation = source.orientation
+  destination.properties = source.properties
+  destination.description = source.description
+  // Points
+  if (source.billboard) destination.billboard = source.billboard
+  // Lines
+  if (source.polyline) destination.polyline = source.polyline
+  // Polygons
+  if (source.polygon) destination.polygon = source.polygon
+}
+
+export function hasUnitInCesiumLayerTemplate(units, layer) {
+  const unit = _.intersection(units, _.map(layer.variables, 'unit'))
+  if (_.isEmpty(unit)) return false
+  if (_.get(layer, 'cesium.tooltip.template', '').includes('Units')) return true
+  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
+}

package/map/client/cesium/utils/utils.style.js

@@ -2,7 +2,8 @@ import _ from 'lodash'
 import chroma from 'chroma-js'
 import moment from 'moment'
 import { Color } from 'cesium'
-import { Time, Units, TemplateContext } from '../../../../core/client/index.js'
+import { Time, Units, TemplateContext, utils as kdkCoreUtils } from '../../../../core/client/index.js'
+import { getFeatureStyleType } from '../../utils/utils.features.js'
 import { convertPointStyleToSimpleStyle, convertLineStyleToSimpleStyle, convertPolygonStyleToSimpleStyle, convertSimpleStyleColors,
          convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle,
          PointStyleTemplateMappings, LineStyleTemplateMappings, PolygonStyleTemplateMappings } from '../../utils/utils.style.js'
@@ -11,7 +12,7 @@ import { Cesium } from './utils.cesium.js'
 export const CesiumStyleMappings = {
   stroke: 'stroke',
   'stroke-color': 'stroke',
-  'stroke-opaciy': 'stroke.alpha',
+  'stroke-opacity': 'stroke.alpha',
   'stroke-width': 'strokeWidth',
   fill: 'fill',
   'fill-color': 'fill',
@@ -25,20 +26,132 @@ export const CesiumStyleOptions = _.values(CesiumStyleMappings)
 export const CesiumEntityTypes = ['billboard', 'box', 'corridor', 'cylinder', 'ellipse', 'ellipsoid',
   'label', 'model', 'path', 'plane', 'point', 'polygon', 'polyline', 'rectangle', 'wall']
 
+const GeoJsonGeometryTypesToCesiumEntityMappings = {
+  Point: 'point',
+  LineString: 'polyline',
+  Polygon: 'polygon'
+}
+
+const StyleToCesiumEntityStyleMappings = {
+  altitudeMode: 'heightReference',
+  width: 'width',
+  color: 'material'
+}
+
+const AltitudeModesMappings = {
+  clampToGround: 'Cesium.HeightReference.CLAMP_TO_GROUND',
+  relativeToGround: 'Cesium.HeightReference.RELATIVE_TO_GROUND',
+  absolute: 'Cesium.HeightReference.NONE'
+}
+
 export function convertToCesiumFromSimpleStyle (style, inPlace) {
   if (!style) return {}
   const convertedStyle = (inPlace ? style : {})
   _.forOwn(style, (value, key) => {
     if (_.has(CesiumStyleMappings, key)) {
       const mapping = _.get(CesiumStyleMappings, key)
-      _.set(convertedStyle, mapping, value)
-      if (inPlace) _.unset(style, key)
       // Convert from string to color object as required by cesium
       if ((typeof value === 'string') && ['markerColor', 'fill', 'stroke'].includes(mapping)) {
-        _.set(convertedStyle, mapping, Color.fromCssColorString(value))
+        value = kdkCoreUtils.getHtmlColor(value)
+        _.set(convertedStyle, mapping, Color.fromCssColorString(chroma(value).alpha(_.get(convertedStyle, [mapping, 'alpha'], 1)).css()))
+      } else {
+        _.set(convertedStyle, mapping, value)
+      }
+      if (inPlace) _.unset(style, key)
+    }
+  })
+  return convertedStyle
+}
+
+export function convertToCesiumFromStyle (feature, options) {
+  let style = _.get(feature, 'style', false)
+  if (!style || !_.get(feature, 'geometry')) return {}
+
+  let geometryType = _.get(GeoJsonGeometryTypesToCesiumEntityMappings, _.get(feature, 'geometry.type'))
+  if (!geometryType) return {}
+
+  const kdkStyle = geometryType === 'point'
+    ? convertSimpleStyleToPointStyle(feature.properties)
+    : geometryType === 'polyline'
+      ? convertSimpleStyleToLineStyle(feature.properties)
+      : convertSimpleStyleToPolygonStyle(feature.properties)
+  style = Object.assign({}, style, kdkStyle)
+
+  const convertedStyle = {}
+
+  const entityStyle = {}
+
+  // Check for options to apply to all features
+  if (_.get(options, 'cesium.minZoom') || _.get(options, 'cesium.maxZoom')) {
+    entityStyle.distanceDisplayCondition = {
+      type: 'Cesium.DistanceDisplayCondition',
+      options: [
+        _.get(options, 'cesium.minZoom', 0) || 0,
+        _.get(options, 'cesium.maxZoom', Number.MAX_VALUE) || Number.MAX_VALUE]
+    }
+  }
+
+  _.forOwn(style, (value, key) => {
+    if ((typeof value === 'string') && ['color'].includes(key)) {
+      let cesiumColor = Color.fromCssColorString(kdkCoreUtils.getColorFromPalette(value))
+
+      if (_.has(style, 'opacity')) {
+        cesiumColor = Color.fromAlpha(cesiumColor, _.get(style, 'opacity'))
       }
+      _.set(entityStyle, _.get(StyleToCesiumEntityStyleMappings, key), cesiumColor)
+    } else if (key === 'altitudeMode') {
+      _.set(entityStyle, _.get(StyleToCesiumEntityStyleMappings, key), _.get(AltitudeModesMappings, value))
+      // Clamp to ground is used by polylines
+      _.set(entityStyle, 'clampToGround', value === 'clampToGround')
+    } else if (key === 'extrude') {
+      switch (geometryType) {
+        case 'polygon':
+          // Extrude from ellipsoid to point height
+          _.set(entityStyle, 'extrudedHeight', 0)
+          _.set(entityStyle, 'perPositionHeight', true)
+          break
+        case 'polyline':
+          // Convert polyline to wall if extruded
+          geometryType = 'wall'
+          break
+      }
+    } else if (key === 'icon') {
+      // Convert to billboard if entity has an icon
+      geometryType = 'billboard'
+      _.set(entityStyle, 'image', _.get(value, 'url'))
+    } else {
+      const target = _.get(StyleToCesiumEntityStyleMappings, key)
+      if (target) _.set(entityStyle, target, value)
     }
   })
+
+  if (geometryType === 'polygon' && !_.has(style, 'extrude') && (!_.has(style, 'altitudeMode') || style.altitudeMode === 'clampToGround')) {
+    // Force perPositionHeight to false, for clamped to ground polygons
+    _.set(entityStyle, 'perPositionHeight', false)
+
+    // Force altitude to 0.0 for clamped to ground polygons
+    if (_.get(feature, 'geometry.coordinates[0][0]', []).length < 3) {
+      _.forEach(_.get(feature, 'geometry.coordinates', []), (coordinates, index) => {
+        feature.geometry.coordinates[index] = _.map(coordinates, (coord) => {
+          return [coord[0], coord[1], 0.0]
+        })
+      })
+    }
+
+    // Cesium does not support outlines for clamped to ground polygons, so we convert them to polylines
+    // In the case of a clamped to ground filled polygon with outline, the outline will not display
+    if (_.get(style, 'opacity') === 0) {
+      geometryType = 'polyline'
+      _.set(convertedStyle, 'geometry.type', 'LineString')
+      _.set(convertedStyle, 'geometry.coordinates', _.get(feature, 'geometry.coordinates[0]'))
+      _.set(convertedStyle, 'style.opacity', _.get(style, 'stroke.opacity', 1))
+      _.set(entityStyle, 'clampToGround', true)
+    }
+  }
+
+  _.set(convertedStyle, ['properties', 'entityStyle', geometryType], entityStyle)
+  _.defaults(convertedStyle.properties.entityStyle, _.get(feature, 'properties.entityStyle', {}))
+
   return convertedStyle
 }
 
@@ -51,16 +164,20 @@ function processStyle (style, feature, options, mappings) {
   if (cesiumOptions.template) {
     // Create the map of variables
     if (options.variables) context.variables = _.reduce(options.variables,
-      (result, variable) => Object.assign(result, { [variable.name]: variable }), {})
+        (result, variable) => Object.assign(result, { [variable.name]: variable }), {})
     cesiumOptions.template.forEach(entry => {
       _.set(style, _.get(mappings, _.kebabCase(entry.property), entry.property), entry.compiler(context))
     })
   }
 
+  // FIXME: type may be incorrect for walls or corridors
+  // since their geometries are lines, but they are rendered as polygons
+  const type = getFeatureStyleType(feature)
+
   // visibility attribute can be used to hide individual features
   // visibility is true by default but can also be a string when it's
-  // a result of a lodash steing template evaluation
-  let visibility = _.get(style, 'style.visibility', true)
+  // a result of a lodash string template evaluation
+  let visibility = _.get(style, `style.${type}.visibility`, _.get(style, 'style.visibility', true))
   if (typeof visibility === 'string') visibility = visibility === 'true'
   // The 'kdk-hidden-features' pane is created when the leaflet map is initialized
   // if (!visibility) _.set(style, `style.${type}.pane`, 'kdk-hidden-features')
@@ -71,27 +188,27 @@ function processStyle (style, feature, options, mappings) {
 export function getPointSimpleStyle (feature, options, engine, engineStylePath = 'style.point') {
   const engineStyle = _.get(engine, engineStylePath, {})
   const layerStyle = options ? _.get(options.cesium || options, 'layerPointStyle') : {}
-  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPointStyle(feature.properties)
-  const style = _.merge({}, engineStyle, layerStyle, featureStyle)
-  processStyle({ style: { point: style } }, feature, options, PointStyleTemplateMappings)
+  const templateStyle = processStyle({ style: { point: _.merge({}, engineStyle, layerStyle) } }, feature, options, PointStyleTemplateMappings)
+  const featureStyle = _.get(feature, 'style', {})
+  const style = _.merge({}, engineStyle, layerStyle, templateStyle ? templateStyle.style.point : {}, featureStyle)
   return convertSimpleStyleColors(convertPointStyleToSimpleStyle(style))
 }
 
 export function getLineSimpleStyle (feature, options, engine, engineStylePath = 'style.line') {
   const engineStyle = _.get(engine, engineStylePath, {})
   const layerStyle = options ? _.get(options.cesium || options, 'layerLineStyle') : {}
-  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToLineStyle(feature.properties)
-  const style = _.merge({}, engineStyle, layerStyle, featureStyle)
-  processStyle({ style: { line: style } }, feature, options, LineStyleTemplateMappings)
+  const templateStyle = processStyle({ style: { line: _.merge({}, engineStyle, layerStyle) } }, feature, options, LineStyleTemplateMappings)
+  const featureStyle = _.get(feature, 'style', {})
+  const style = _.merge({}, engineStyle, layerStyle, templateStyle ? templateStyle.style.line : {}, featureStyle)
   return convertSimpleStyleColors(convertLineStyleToSimpleStyle(style))
 }
 
 export function getPolygonSimpleStyle (feature, options, engine, engineStylePath = 'style.polygon') {
   const engineStyle = _.get(engine, engineStylePath, {})
   const layerStyle = options ? _.get(options.cesium || options, 'layerPolygonStyle') : {}
-  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPolygonStyle(feature.properties)
-  const style = _.merge({}, engineStyle, layerStyle, featureStyle)
-  processStyle({ style: { polygon: style } }, feature, options, PolygonStyleTemplateMappings)
+  const templateStyle = processStyle({ style: { polygon: _.merge({}, engineStyle, layerStyle) } }, feature, options, PolygonStyleTemplateMappings)
+  const featureStyle = _.get(feature, 'style', {})
+  const style = _.merge({}, engineStyle, layerStyle, templateStyle ? templateStyle.style.polygon : {}, featureStyle)
   return convertSimpleStyleColors(convertPolygonStyleToSimpleStyle(style))
 }