qwc2 2026.3.24 → 2026.4.2

package/README.md

@@ -1,4 +1,4 @@
-![Logo](https://raw.githubusercontent.com/qgis/qwc2/refs/heads/master/static/assets/img/qwc-logo.svg) QGIS Web Client
+![Logo](https://raw.githubusercontent.com/qgis/qwc2/refs/heads/master/static/assets/img/qwc-logo.svg) QGIS Web Client · [qwc.app](https://qwc.app)
 =================
 
 ## Introduction
@@ -10,28 +10,7 @@ The `qwc2` NPM package can be used as a dependency to build a custom QWC applica
 
 ### Main Features
 
-- Modular and easily configurable and extensible
-- Responsive, separately configurable for desktop and mobile devices
-- Theme switcher
-- Search with configurable search providers
-- Layer tree
-  * Toggle layers and groups
-  * Change layer order and opacity
-  * Import external WMS/WFS/WMTS/GeoJSON/KML layers
-  * Compare layers
-- Feature info
-- Printing using QGIS print layouts
-- Share permalinks
-- Bookmarks
-- Measuring tools
-- Height profile
-- Redlining
-- Editing and attribute table
-- Attribute table
-- Export map (raster images, DXF)
-- Time manager for temporal layers
-- Themeable with color schemes
-- [Additional plugins!](https://qwc-services.github.io/master/references/qwc2_plugins/)
+See [qwc.app/features](https://qwc.app/features).
 
 ## Quick start
 

package/components/AppMenu.js

@@ -72,8 +72,8 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
         _this.props.setCurrentTask(null);
       }
       _this.props.onMenuToggled(!_this.state.menuVisible);
-      if (_this.props.menuCompact) {
-        _this.props.setMenuMargin(!_this.state.menuVisible ? MiscUtils.convertEmToPx(3.75) : 0, 0);
+      if (_this.props.menuDisplayMode !== "normal") {
+        _this.props.setMenuMargin(!_this.state.menuVisible ? MiscUtils.convertEmToPx(3.5) : 0, 0);
       }
       _this.setState(function (state) {
         return {
@@ -84,7 +84,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_this, "checkCloseMenu", function (ev) {
-      if (_this.menuEl && !_this.menuEl.contains(ev.target) && !_this.props.keepMenuOpen) {
+      if (_this.menuEl && !_this.menuEl.contains(ev.target) && _this.props.menuDisplayMode === "normal") {
         _this.toggleMenu();
         MiscUtils.killEvent(ev);
       }
@@ -98,7 +98,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_this, "onMenuitemClicked", function (item) {
-      if (!_this.props.keepMenuOpen && _this.state.menuVisible) {
+      if (_this.props.menuDisplayMode === "normal" && _this.state.menuVisible) {
         _this.toggleMenu();
       }
       if (item.url) {
@@ -111,6 +111,10 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "renderMenuItems", function (items, level, filter) {
       var submenu = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       return (items || []).map(function (item) {
+        var trargs = item.trargs || [];
+        var label = item.title ? LocaleUtils.tr.apply(LocaleUtils, [item.title].concat(_toConsumableArray(trargs))) : LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "")].concat(_toConsumableArray(trargs)));
+        var comment = item.comment ? LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "") + "_comment"].concat(_toConsumableArray(trargs))) : "";
+        var labelclass = _this.props.menuDisplayMode === "icononly" ? "appmenu-menu-item-tooltip" : "appmenu-menu-item-label";
         if (item.subitems) {
           var _item$key;
           var expanded = filter || _this.state.submenusVisible[level] === item.key;
@@ -123,7 +127,6 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
             "appmenu-submenu": true,
             "appmenu-submenu-expanded": expanded
           });
-          var label = item.title ? LocaleUtils.tr(item.title) : LocaleUtils.tr("appmenu.items." + item.key);
           return [/*#__PURE__*/React.createElement("div", {
             className: className,
             key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.title,
@@ -137,14 +140,12 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
             tabIndex: 0
           }, /*#__PURE__*/React.createElement(Icon, {
             icon: item.icon,
-            size: "xlarge",
-            title: _this.props.menuIconOnly ? label : null
-          }), !_this.props.menuIconOnly ? label : null), subitems];
+            size: "xlarge"
+          }), /*#__PURE__*/React.createElement("span", {
+            className: labelclass
+          }, label)), subitems];
         } else {
-          var trargs = item.trargs || [];
-          var _label = item.title ? LocaleUtils.tr.apply(LocaleUtils, [item.title].concat(_toConsumableArray(trargs))) : LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "")].concat(_toConsumableArray(trargs)));
-          var comment = item.comment ? LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "") + "_comment"].concat(_toConsumableArray(trargs))) : "";
-          if (!filter || removeDiacritics(_label.toLowerCase()).match(filter) || comment && removeDiacritics(comment.toLowerCase()).match(filter)) {
+          if (!filter || removeDiacritics(label.toLowerCase()).match(filter) || comment && removeDiacritics(comment.toLowerCase()).match(filter)) {
             var _className = classnames({
               "appmenu-menu-item": true,
               "appmenu-menu-item-nested": submenu
@@ -162,13 +163,10 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
               tabIndex: 0
             }, /*#__PURE__*/React.createElement(Icon, {
               icon: item.icon,
-              size: "xlarge",
-              title: _this.props.menuIconOnly ? _label : null
-            }), !_this.props.menuIconOnly ? /*#__PURE__*/React.createElement("span", {
-              className: "appmenu-menu-item-label"
-            }, _label, comment ? /*#__PURE__*/React.createElement("div", {
-              className: "appmenu-menu-item-comment"
-            }, comment) : null) : null);
+              size: "xlarge"
+            }), /*#__PURE__*/React.createElement("span", {
+              className: labelclass
+            }, label));
           }
           return null;
         }
@@ -215,7 +213,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
         MiscUtils.killEvent(ev);
       } else if (ev.key === 'Escape') {
         var _this$menuBtn, _this$menuBtn$focus;
-        if (!_this.props.menuCompact) {
+        if (_this.props.menuDisplayMode === "normal") {
           _this.toggleMenu();
         }
         (_this$menuBtn = _this.menuBtn) === null || _this$menuBtn === void 0 || (_this$menuBtn$focus = _this$menuBtn.focus) === null || _this$menuBtn$focus === void 0 || _this$menuBtn$focus.call(_this$menuBtn);
@@ -237,7 +235,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
   return _createClass(AppMenu, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.props.showOnStartup) {
+      if (this.props.showOnStartup || this.props.menuDisplayMode !== "normal") {
         this.toggleMenu();
       }
       this.addKeyBindings(this.props.menuItems);
@@ -249,7 +247,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
-      if (this.state.menuVisible && !prevState.menuVisible && !this.props.menuCompact) {
+      if (this.state.menuVisible && !prevState.menuVisible) {
         // Need to wait until slide in transition is over
         setTimeout(function () {
           var _this2$filterfield, _this2$filterfield$fo;
@@ -259,7 +257,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
         setTimeout(function () {
           return document.addEventListener('click', _this2.checkCloseMenu);
         }, 0);
-      } else if (prevState.menuVisible && !this.state.menuVisible && !this.props.menuCompact) {
+      } else if (prevState.menuVisible && !this.state.menuVisible) {
         document.removeEventListener('click', this.checkCloseMenu);
       }
     }
@@ -281,13 +279,13 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
         _this$props$buttonCon;
       var isMobile = ConfigUtils.isMobile();
       var visible = !this.props.currentTaskBlocked && this.state.menuVisible;
-      var showLabel = !this.props.menuCompact && !isMobile;
+      var showLabel = this.props.menuDisplayMode === "normal" && !isMobile;
       var className = classnames({
         "AppMenu": true,
         "appmenu-blocked": this.props.currentTaskBlocked,
         "appmenu-visible": visible,
-        "appmenu-compact": this.props.menuCompact,
-        "appmenu-icononly": this.props.menuIconOnly,
+        "appmenu-compact": this.props.menuDisplayMode === "compact",
+        "appmenu-icononly": this.props.menuDisplayMode === "icononly",
         "appmenu-nolabel": !showLabel
       });
       var filter = this.state.filter ? new RegExp(removeDiacritics(this.state.filter).replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&"), "i") : null;
@@ -313,6 +311,8 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
       }))]), /*#__PURE__*/React.createElement("div", {
         className: "appmenu-menu-container",
         tabIndex: -1
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "appmenu-menu-aligner"
       }, /*#__PURE__*/React.createElement("div", {
         className: "appmenu-menu",
         inert: !visible,
@@ -321,7 +321,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
           _this3.menuEl = el;
           MiscUtils.setupKillTouchEvents(el);
         }
-      }, this.props.showFilterField ? /*#__PURE__*/React.createElement("div", {
+      }, this.props.showFilterField && this.props.menuDisplayMode !== "icononly" ? /*#__PURE__*/React.createElement("div", {
         className: "appmenu-menu-item appmenu-menu-item-filter",
         onFocus: this.focusFilterField,
         onKeyDown: this.keyNav,
@@ -352,7 +352,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
           });
         },
         role: "suffix"
-      }))) : null, this.renderMenuItems(this.props.menuItems, 0, filter))));
+      }))) : null, this.renderMenuItems(this.props.menuItems, 0, filter)))));
     }
   }]);
 }(React.Component);
@@ -362,8 +362,7 @@ _defineProperty(AppMenu, "propTypes", {
   buttonContents: PropTypes.object,
   buttonLabel: PropTypes.string,
   currentTaskBlocked: PropTypes.bool,
-  keepMenuOpen: PropTypes.bool,
-  menuCompact: PropTypes.bool,
+  menuDisplayMode: PropTypes.string,
   menuIconOnly: PropTypes.bool,
   menuItems: PropTypes.array,
   onMenuToggled: PropTypes.func,

package/components/AttributeTableWidget.js

@@ -388,7 +388,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
       };
       newState[stateField] = val;
       // Reset page if a reload is triggered (either filter changed with a set filter value, or filter value cleared)
-      if (newState.filterVal || _this.state.filterVal && !newState.filterVal) {
+      if (newState.filterField && (newState.filterVal || _this.state.filterVal && !newState.filterVal)) {
         newState.currentPage = 0;
         _this.reload(_this.state.selectedLayer, false, newState);
       } else {
@@ -814,6 +814,13 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
       if (this.state.highlightedFeature !== prevState.highlightedFeature || this.state.features !== prevState.features || this.state.selectedFeatures !== prevState.selectedFeatures) {
         this.highlightFeatures();
       }
+      if (this.state.loadedLayer !== prevState.loadedLayer && this.props.showDisplayFieldOnly) {
+        this.setState(function (state) {
+          return {
+            filterField: state.curEditConfig.displayField
+          };
+        });
+      }
     }
   }, {
     key: "componentWillUnmount",

package/components/SearchBox.js

@@ -1025,12 +1025,13 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         var text = LocaleUtils.tr("search.existinglayer") + ": " + existingLayerName;
         _this.props.showNotification("existinglayer", text);
       } else {
+        var _existingLayer$role;
         var existingLayer = _this.props.layers.find(function (l) {
           return l.type === layer.type && l.url === layer.url;
         });
         _this.props.addLayer(_objectSpread(_objectSpread({}, layer), {}, {
           srcid: existingLayer === null || existingLayer === void 0 ? void 0 : existingLayer.srcid,
-          role: LayerRole.USERLAYER
+          role: (_existingLayer$role = existingLayer === null || existingLayer === void 0 ? void 0 : existingLayer.role) !== null && _existingLayer$role !== void 0 ? _existingLayer$role : LayerRole.USERLAYER
         }));
       }
       if (_this.props.searchOptions.zoomToLayers && layer.bbox) {

package/components/map/layers/MVTLayer.js

@@ -15,21 +15,21 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import axios from 'axios';
 import { applyStyle } from 'ol-mapbox-style';
 import ol from 'openlayers';
+export var createLayer = function createLayer(options) {
+  return new ol.layer.VectorTile(_objectSpread({
+    minResolution: options.minResolution,
+    maxResolution: options.maxResolution,
+    declutter: options.declutter,
+    source: new ol.source.VectorTile(_objectSpread({
+      projection: options.projection,
+      format: new ol.format.MVT({}),
+      url: options.url,
+      tileGrid: options.tileGridConfig ? new ol.tilegrid.TileGrid(_objectSpread({}, options.tileGridConfig)) : undefined
+    }, options.sourceConfig || {}))
+  }, options.layerConfig || {}));
+};
 export default {
   create: function create(options) {
-    var createLayer = function createLayer() {
-      return new ol.layer.VectorTile(_objectSpread({
-        minResolution: options.minResolution,
-        maxResolution: options.maxResolution,
-        declutter: options.declutter,
-        source: new ol.source.VectorTile(_objectSpread({
-          projection: options.projection,
-          format: new ol.format.MVT({}),
-          url: options.url,
-          tileGrid: options.tileGridConfig ? new ol.tilegrid.TileGrid(_objectSpread({}, options.tileGridConfig)) : undefined
-        }, options.sourceConfig || {}))
-      }, options.layerConfig || {}));
-    };
     var group = new ol.layer.Group();
     if (options.style) {
       axios.get(options.style).then(function (response) {
@@ -40,7 +40,7 @@ export default {
         Object.keys(glStyle.sources).forEach(function (styleSource) {
           var _glStyle$sources$styl;
           ((_glStyle$sources$styl = glStyle.sources[styleSource].url) === null || _glStyle$sources$styl === void 0 ? void 0 : _glStyle$sources$styl.startsWith(".")) && (glStyle.sources[styleSource].url = new URL(glStyle.sources[styleSource].url, options.style).href);
-          var layer = createLayer();
+          var layer = createLayer(options);
           applyStyle(layer, glStyle, styleSource, options.styleOptions).then(function () {
             group.getLayers().push(layer);
           })["catch"](function (e) {
@@ -53,7 +53,7 @@ export default {
         console.warn("Unable to load style " + options.style + ": " + String(e));
       });
     } else {
-      group.getLayers().push(createLayer());
+      group.getLayers().push(createLayer(options));
     }
     return group;
   }

package/components/map3d/ColorLayer3D.js

@@ -0,0 +1,158 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Copyright 2026 Sourcepole AG
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import DrapedFeatureCollection from '@giro3d/giro3d/entities/DrapedFeatureCollection';
+import PropTypes from 'prop-types';
+import LayerRegistry3D from './layers/index';
+var ColorLayer3D = /*#__PURE__*/function (_React$Component) {
+  function ColorLayer3D(props) {
+    var _this;
+    _classCallCheck(this, ColorLayer3D);
+    _this = _callSuper(this, ColorLayer3D, [props]);
+    _defineProperty(_this, "applyLayerOptions", function (layerCreator, prevOptions) {
+      var _this$props$map$getLa;
+      var options = _this.props.options;
+      // Reorder layer
+      var layerBelow = (_this$props$map$getLa = _this.props.map.getLayers(function (l) {
+        return l.userData.layerId === _this.props.prevLayerId;
+      })[0]) !== null && _this$props$map$getLa !== void 0 ? _this$props$map$getLa : null;
+      _this.mapLayer.moveAfter(layerBelow);
+      // WMS layer handles visibility and opacity internally
+      if (_this.props.options.type !== "wms") {
+        _this.mapLayer.setVisible(options.visibility);
+        _this.mapLayer.setOpacity(options.opacity / 255);
+      }
+      if (_this.props.options.extrusionHeight !== undefined && _this.props.options.extrusionHeight !== 0) {
+        _this.createUpdateExtrudedLayer(layerCreator, options, options.features !== (prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.features));
+      } else if ((prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.extrusionHeight) !== undefined && (prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.extrusionHeight) !== 0) {
+        _this.props.sceneContext.removeSceneObject(_this.props.options.id + ":extruded");
+      }
+    });
+    _defineProperty(_this, "createUpdateExtrudedLayer", function (layerCreator, options) {
+      var _options$features, _options$features$red;
+      var forceCreate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var objId = options.id + ":extruded";
+      var makeColor = function makeColor(c) {
+        if (Array.isArray(c)) {
+          return c[0] << 16 | c[1] << 8 | c[2];
+        } else if (typeof c === "string") {
+          return parseInt(c.replace("#", ""), 16);
+        } else {
+          return c;
+        }
+      };
+      var obj = _this.props.sceneContext.getSceneObject(objId);
+      if (!obj || forceCreate) {
+        var _options$color;
+        if (obj) {
+          _this.props.sceneContext.removeSceneObject(objId);
+        }
+        var layercolor = makeColor((_options$color = options.color) !== null && _options$color !== void 0 ? _options$color : "#FF0000");
+        obj = new DrapedFeatureCollection({
+          source: layerCreator.createFeatureSource(_this.mapLayer, options, _this.props.sceneContext.mapCrs),
+          drapingMode: 'per-feature',
+          extrusionOffset: function extrusionOffset(feature) {
+            if (typeof obj.userData.extrusionHeight === "string") {
+              return parseFloat(feature.getProperties()[obj.userData.extrusionHeight]) || 0;
+            } else {
+              return obj.userData.extrusionHeight;
+            }
+          },
+          style: function style(feature) {
+            var _obj$userData$feature, _obj$userData$feature2;
+            return (_obj$userData$feature = (_obj$userData$feature2 = obj.userData.featureStyles) === null || _obj$userData$feature2 === void 0 ? void 0 : _obj$userData$feature2[feature.getId()]) !== null && _obj$userData$feature !== void 0 ? _obj$userData$feature : {
+              fill: {
+                color: layercolor,
+                shading: true
+              }
+            };
+          }
+        });
+        obj.castShadow = true;
+        obj.receiveShadow = true;
+        _this.props.sceneContext.addSceneObject(objId, obj, false, {}, false, function () {
+          obj.attach(_this.props.map);
+        });
+      }
+      obj.userData.extrusionHeight = options.extrusionHeight;
+      obj.userData.featureStyles = (_options$features = options.features) === null || _options$features === void 0 || (_options$features$red = _options$features.reduce) === null || _options$features$red === void 0 ? void 0 : _options$features$red.call(_options$features, function (res, feature) {
+        return _objectSpread(_objectSpread({}, res), {}, _defineProperty({}, feature.id, {
+          fill: {
+            color: makeColor(feature.styleOptions.fillColor),
+            shading: true
+          }
+        }));
+      }, {});
+      obj.opacity = _this.mapLayer.opacity();
+      obj.visible = _this.mapLayer.visible();
+      if (obj.visible) {
+        obj.updateStyles();
+      }
+    });
+    _this.mapLayer = null;
+    return _this;
+  }
+  _inherits(ColorLayer3D, _React$Component);
+  return _createClass(ColorLayer3D, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var layerCreator = LayerRegistry3D[this.props.options.type];
+      if (layerCreator) {
+        this.mapLayer = layerCreator.create3d(this.props.options, this.props.sceneContext.mapCrs);
+        this.mapLayer.attach(this.props.map);
+        this.applyLayerOptions(layerCreator, {});
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var layerCreator = LayerRegistry3D[this.props.options.type];
+      if (this.mapLayer && layerCreator) {
+        layerCreator.update3d(this.mapLayer, this.props.options, prevProps.options, this.props.sceneContext.mapCrs);
+        this.applyLayerOptions(layerCreator, prevProps.options);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.mapLayer) {
+        this.props.sceneContext.removeSceneObject(this.props.options.id + ":extruded");
+        this.mapLayer.dispose();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }]);
+}(React.Component);
+_defineProperty(ColorLayer3D, "propTypes", {
+  map: PropTypes.object,
+  options: PropTypes.object,
+  prevLayerId: PropTypes.string,
+  sceneContext: PropTypes.object
+});
+export { ColorLayer3D as default };