qwc2 2025.11.18 → 2025.11.26

package/components/ThemeLayersListWindow.js

@@ -35,7 +35,7 @@ import PropTypes from 'prop-types';
 import { LayerRole, addLayer } from '../actions/layers';
 import { setCurrentTask } from '../actions/task';
 import { setThemeLayersList } from '../actions/theme';
-import { showNotification, closeWindow } from '../actions/windows';
+import { showNotification, closeWindow, NotificationType } from '../actions/windows';
 import LayerUtils from '../utils/LayerUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 import ThemeUtils from '../utils/ThemeUtils';
@@ -62,22 +62,33 @@ var ThemeLayersListWindow = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "addLayers", function (sublayers) {
       _this.props.closeWindow("existinglayers");
-      var existingLayer = _this.props.layers.find(function (l) {
-        return l.type === 'wms' && l.url === _this.props.theme.url;
-      });
-      if (existingLayer) {
-        var existingSublayers = [].concat(_toConsumableArray(LayerUtils.getSublayerNames(existingLayer)), [existingLayer.name]);
+      var existingSublayers = _this.props.layers.reduce(function (res, layer) {
+        if (layer.type === 'wms' && layer.url === _this.props.theme.url) {
+          return [].concat(_toConsumableArray(res), _toConsumableArray(LayerUtils.getSublayerNames(layer)), [layer.name]);
+        }
+        return res;
+      }, []);
+      if (!isEmpty(existingSublayers)) {
         var filteredSublayers = [];
         sublayers = sublayers.filter(function (sublayer) {
           if (existingSublayers.includes(sublayer.name)) {
-            filteredSublayers.push(sublayer.title);
+            filteredSublayers.push(sublayer);
             return false;
           }
           return true;
         });
         if (!isEmpty(filteredSublayers)) {
-          var text = LocaleUtils.tr("themelayerslist.existinglayers") + ": " + filteredSublayers.join(",");
-          _this.props.showNotification("existinglayers", text);
+          var text = LocaleUtils.tr("themelayerslist.existinglayers") + ": " + filteredSublayers.map(function (l) {
+            return l.title;
+          }).join(", ");
+          var actions = [{
+            name: LocaleUtils.tr("themelayerslist.addanyway"),
+            onClick: function onClick() {
+              _this.props.addLayer(ThemeUtils.createThemeLayer(_this.props.theme, _this.props.themes, LayerRole.USERLAYER, filteredSublayers));
+              return true;
+            }
+          }];
+          _this.props.showNotification("existinglayers", text, NotificationType.INFO, false, actions);
         }
       }
       if (!isEmpty(sublayers)) {
@@ -108,6 +119,7 @@ var ThemeLayersListWindow = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_this, "onClose", function () {
+      _this.props.closeWindow("existinglayers");
       _this.props.setThemeLayersList(null);
     });
     return _this;
@@ -180,8 +192,7 @@ var ThemeLayersListWindow = /*#__PURE__*/function (_React$Component) {
         onClose: this.onClose,
         title: LocaleUtils.tr("themelayerslist.addlayerstotheme")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "theme-list-window-body",
-        role: "body"
+        className: "theme-list-window-body"
       }, /*#__PURE__*/React.createElement("h4", {
         className: "theme-list-window-title"
       }, this.props.theme.title), /*#__PURE__*/React.createElement("div", {

package/components/ThemeList.js

@@ -39,6 +39,7 @@ import { setCurrentTask } from '../actions/task';
 import { setCurrentTheme, setThemeLayersList } from '../actions/theme';
 import ConfigUtils from '../utils/ConfigUtils';
 import LocaleUtils from '../utils/LocaleUtils';
+import MiscUtils from '../utils/MiscUtils';
 import ThemeUtils from '../utils/ThemeUtils';
 import Icon from './Icon';
 import './style/ThemeList.css';
@@ -96,7 +97,9 @@ var ThemeList = /*#__PURE__*/function (_React$Component) {
                 expandedGroups: _objectSpread(_objectSpread({}, state.expandedGroups), {}, _defineProperty({}, subdir.id, !expanded))
               };
             });
-          }
+          },
+          onKeyDown: MiscUtils.checkKeyActivate,
+          tabIndex: "0"
         }, _this.props.collapsibleGroups ? /*#__PURE__*/React.createElement(Icon, {
           icon: expanded ? "collapse" : "expand"
         }) : null, " ", subdir.titleMsgId ? LocaleUtils.tr(subdir.titleMsgId) : subdir.title), expanded ? _this.renderThemeGroup(subdir, filter) : null);
@@ -171,7 +174,9 @@ var ThemeList = /*#__PURE__*/function (_React$Component) {
             target: link.target
           }, link.title);
         })) : null) : null, /*#__PURE__*/React.createElement("div", {
-          className: "theme-item-body"
+          className: "theme-item-body",
+          onKeyDown: MiscUtils.checkKeyActivate,
+          tabIndex: 0
         }, item.description ? /*#__PURE__*/React.createElement("div", {
           className: "theme-item-description",
           dangerouslySetInnerHTML: {

package/components/WindowManager.js

@@ -32,6 +32,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 import React from 'react';
 import { connect } from 'react-redux';
+import isEmpty from 'lodash.isempty';
 import PropTypes from 'prop-types';
 import { closeWindow, closeAllWindows, NotificationType } from '../actions/windows';
 import LocaleUtils from '../utils/LocaleUtils';
@@ -78,7 +79,6 @@ var WindowManager = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("iframe", {
         className: "windows-iframe-dialog-body",
         name: key,
-        role: "body",
         src: data.url
       }));
     });
@@ -92,7 +92,19 @@ var WindowManager = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement("div", {
         className: className,
         key: key
-      }, /*#__PURE__*/React.createElement("div", null, data.text), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, data.text), !isEmpty(data.actions) ? /*#__PURE__*/React.createElement("div", {
+        className: "windows-notification-actions"
+      }, data.actions.map(function (action, idx) {
+        return /*#__PURE__*/React.createElement("button", {
+          className: "button",
+          key: "action" + idx,
+          onClick: function onClick() {
+            var res = action.onClick();
+            if (res) _this.closeWindow(key);
+          },
+          type: "button"
+        }, action.name);
+      })) : null), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
         icon: "remove",
         onClick: function onClick() {
           return _this.closeWindow(key);

package/components/map/layers/VectorLayer.js

@@ -23,6 +23,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import ol from 'openlayers';
 import FeatureStyles from '../../../utils/FeatureStyles';
 export function createFeatures(options, mapCrs) {
+  var segmentize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var format = new ol.format.GeoJSON();
   return (options.features || []).reduce(function (collection, featureObj) {
     var _ref, _featureObj$crs;
@@ -41,7 +42,7 @@ export function createFeatures(options, mapCrs) {
     var featureStyleOptions = _objectSpread(_objectSpread({}, options.styleOptions), featureObj.styleOptions);
     feature.set('styleName', featureStyleName);
     feature.set('styleOptions', featureStyleOptions);
-    if (featureObj.circleParams) {
+    if (featureObj.circleParams && !segmentize) {
       feature.set('circleParams', featureObj.circleParams);
       feature.setGeometry(new ol.geom.Circle(featureObj.circleParams.center, featureObj.circleParams.radius));
     }
@@ -58,6 +59,7 @@ export function createFeatures(options, mapCrs) {
   }, []);
 }
 export function updateFeatures(source, newOptions, oldOptions, mapCrs) {
+  var segmentize = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var format = new ol.format.GeoJSON();
   var oldFeaturesMap = (oldOptions.features || []).reduce(function (res, f) {
     res[f.id] = f;
@@ -118,7 +120,7 @@ export function updateFeatures(source, newOptions, oldOptions, mapCrs) {
         var _feature$getGeometry2;
         (_feature$getGeometry2 = _feature.getGeometry()) === null || _feature$getGeometry2 === void 0 || _feature$getGeometry2.transform(featureCrs, mapCrs);
       }
-      if (featureObj.circleParams) {
+      if (featureObj.circleParams && !segmentize) {
         _feature.setGeometry(new ol.geom.Circle(featureObj.circleParams.center, featureObj.circleParams.radius));
       }
       var featureStyleName = featureObj.styleName || newOptions.styleName;

package/components/map3d/HeightProfile3D.js

@@ -257,7 +257,6 @@ var HeightProfile = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement("div", {
         className: "height-profile-chart-container",
         onMouseLeave: _this3.hideMarker,
-        role: "body",
         style: {
           position: 'relative'
         }

package/components/map3d/Map3D.js

@@ -37,10 +37,12 @@ import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import Instance from '@giro3d/giro3d/core/Instance.js';
-import Coordinates from '@giro3d/giro3d/core/geographic/Coordinates';
+import Coordinates, { crsIsGeographic } from '@giro3d/giro3d/core/geographic/Coordinates';
+import Ellipsoid from '@giro3d/giro3d/core/geographic/Ellipsoid';
 import Extent from '@giro3d/giro3d/core/geographic/Extent.js';
+import CoordinateSystem from '@giro3d/giro3d/core/geographic/coordinate-system/CoordinateSystem';
 import ElevationLayer from '@giro3d/giro3d/core/layer/ElevationLayer.js';
-import FeatureCollection from "@giro3d/giro3d/entities/FeatureCollection.js";
+import DrapedFeatureCollection from '@giro3d/giro3d/entities/DrapedFeatureCollection';
 import Map from '@giro3d/giro3d/entities/Map.js';
 import Tiles3D from "@giro3d/giro3d/entities/Tiles3D.js";
 import Inspector from "@giro3d/giro3d/gui/Inspector.js";
@@ -212,7 +214,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         colorLayers[layer.id] = _objectSpread(_objectSpread({}, layer), {}, {
           visibility: (_prevOptions$visibili = prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.visibility) !== null && _prevOptions$visibili !== void 0 ? _prevOptions$visibili : false,
           opacity: (_prevOptions$opacity = prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.opacity) !== null && _prevOptions$opacity !== void 0 ? _prevOptions$opacity : 255,
-          extrusionHeight: (_prevOptions$extrusio = prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.extrusionHeight) !== null && _prevOptions$extrusio !== void 0 ? _prevOptions$extrusio : ['vector', 'wfs'].includes(layer.type) ? 0 : undefined,
+          extrusionHeight: (_prevOptions$extrusio = prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.extrusionHeight) !== null && _prevOptions$extrusio !== void 0 ? _prevOptions$extrusio : layerCreator.createFeatureSource ? 0 : undefined,
           fields: (_prevOptions$fields = prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.fields) !== null && _prevOptions$fields !== void 0 ? _prevOptions$fields : undefined,
           sublayers: _preserveSublayerOptions(layer, prevOptions)
         });
@@ -250,9 +252,9 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         mapLayer.visible = options.visibility;
         mapLayer.opacity = options.opacity / 255;
         layerBelow = mapLayer;
-        if (options.extrusionHeight !== 0) {
-          _this2.createUpdateExtrudedLayer(mapLayer, options, options.features !== (prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.features));
-        } else if ((prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.extrusionHeight) !== 0) {
+        if (options.extrusionHeight !== undefined && options.extrusionHeight !== 0) {
+          _this2.createUpdateExtrudedLayer(layerCreator, mapLayer, 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) {
           _this2.removeExtrudedLayer(options.id);
         }
       });
@@ -262,7 +264,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
           layerId = _ref4[0],
           options = _ref4[1];
         if (!(layerId in colorLayers)) {
-          if (options.extrusionHeight !== 0) {
+          if (options.extrusionHeight !== undefined && options.extrusionHeight !== 0) {
             _this2.removeExtrudedLayer(options.id);
           }
           _this2.removeLayer(layerId);
@@ -270,11 +272,9 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
       });
       _this2.instance.notifyChange(_this2.map);
     });
-    _defineProperty(_this2, "createUpdateExtrudedLayer", function (mapLayer, options) {
+    _defineProperty(_this2, "createUpdateExtrudedLayer", function (layerCreator, mapLayer, options) {
       var _options$features, _options$features$red;
-      var forceCreate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      var bounds = options.bbox.bounds;
-      var extent = new Extent(options.bbox.crs, bounds[0], bounds[2], bounds[1], bounds[3]);
+      var forceCreate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       var objId = options.id + ":extruded";
       var makeColor = function makeColor(c) {
         if (Array.isArray(c)) {
@@ -292,20 +292,9 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
           _this2.instance.remove(obj);
         }
         var layercolor = makeColor((_options$color = options.color) !== null && _options$color !== void 0 ? _options$color : "#FF0000");
-        obj = new FeatureCollection({
-          source: mapLayer.source.source,
-          extent: extent,
-          minLevel: 1,
-          maxLevel: 1,
-          ignoreZ: true,
-          elevation: function elevation(feature) {
-            var _this2$getTerrainHeig;
-            var coordinates = feature.getGeometry().getCoordinates();
-            while (Array.isArray(coordinates[0])) {
-              coordinates = coordinates[0];
-            }
-            return (_this2$getTerrainHeig = _this2.getTerrainHeightFromMap(coordinates)) !== null && _this2$getTerrainHeig !== void 0 ? _this2$getTerrainHeig : 0;
-          },
+        obj = new DrapedFeatureCollection({
+          source: layerCreator.createFeatureSource(mapLayer, options, _this2.state.sceneContext.mapCrs),
+          drapingMode: 'per-feature',
           extrusionOffset: function extrusionOffset(feature) {
             if (typeof obj.userData.extrusionHeight === "string") {
               return parseFloat(feature.getProperties()[obj.userData.extrusionHeight]) || 0;
@@ -325,7 +314,9 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         });
         obj.castShadow = true;
         obj.receiveShadow = true;
-        _this2.instance.add(obj);
+        _this2.instance.add(obj).then(function () {
+          obj.attach(_this2.map);
+        });
         _this2.objectMap[objId] = obj;
       }
       obj.userData.extrusionHeight = options.extrusionHeight;
@@ -339,7 +330,9 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
       }, {});
       obj.opacity = mapLayer.opacity;
       obj.visible = mapLayer.visible;
-      obj.updateStyles();
+      if (obj.visible) {
+        obj.updateStyles();
+      }
     });
     _defineProperty(_this2, "removeExtrudedLayer", function (layerId) {
       var objId = layerId + ":extruded";
@@ -602,23 +595,25 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         return;
       }
       var projection = _this2.props.theme.mapCrs;
+      var crs = CoordinateSystem.fromSrid(projection);
 
       // Setup instance
       _this2.instance = new Instance({
         target: _this2.container,
-        crs: projection,
+        crs: crs,
         renderer: {
           clearColor: 0x000000,
           preserveDrawingBuffer: true
         }
       });
       _this2.sceneObjectGroup = new Group();
+      _this2.sceneObjectGroup.name = "sceneObjects";
       _this2.instance.add(_this2.sceneObjectGroup);
 
       // Setup map
       var initialBbox = (_this2$props$theme$ma = (_this2$props$theme$ma2 = _this2.props.theme.map3d) === null || _this2$props$theme$ma2 === void 0 ? void 0 : _this2$props$theme$ma2.extent) !== null && _this2$props$theme$ma !== void 0 ? _this2$props$theme$ma : _this2.props.theme.initialBbox;
       var bounds = CoordinatesUtils.reprojectBbox(initialBbox.bounds, initialBbox.crs, projection);
-      var extent = new Extent(projection, bounds[0], bounds[2], bounds[1], bounds[3]);
+      var extent = new Extent(crs, bounds[0], bounds[2], bounds[1], bounds[3]);
       _this2.map = new Map({
         extent: extent,
         backgroundColor: "white"
@@ -627,7 +622,12 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
 
       // Setup camera
       var center = extent.center();
-      _this2.instance.view.camera.position.set(center.x, center.y, 0.5 * (extent.east - extent.west));
+      if (crsIsGeographic(center.crs)) {
+        var position = Ellipsoid.WGS84.toCartesian(center.latitude, center.longitude, center.altitude);
+        _this2.instance.view.camera.position.set(position.x, position.y, 0.5 * (extent.east - extent.west));
+      } else {
+        _this2.instance.view.camera.position.set(center.x, center.y, 0.5 * (extent.east - extent.west));
+      }
 
       // Skybox
       var cubeTextureLoader = new CubeTextureLoader();
@@ -637,7 +637,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
 
       // Setup elevation
       var demUrl = MiscUtils.resolveAssetsPath((_this2$props$theme$ma3 = (_this2$props$theme$ma4 = _this2.props.theme.map3d) === null || _this2$props$theme$ma4 === void 0 || (_this2$props$theme$ma4 = _this2$props$theme$ma4.dtm) === null || _this2$props$theme$ma4 === void 0 ? void 0 : _this2$props$theme$ma4.url) !== null && _this2$props$theme$ma3 !== void 0 ? _this2$props$theme$ma3 : "");
-      var demCrs = ((_this2$props$theme$ma5 = _this2.props.theme.map3d) === null || _this2$props$theme$ma5 === void 0 || (_this2$props$theme$ma5 = _this2$props$theme$ma5.dtm) === null || _this2$props$theme$ma5 === void 0 ? void 0 : _this2$props$theme$ma5.crs) || "EPSG:3857";
+      var demCrs = CoordinateSystem.fromSrid(((_this2$props$theme$ma5 = _this2.props.theme.map3d) === null || _this2$props$theme$ma5 === void 0 || (_this2$props$theme$ma5 = _this2$props$theme$ma5.dtm) === null || _this2$props$theme$ma5 === void 0 ? void 0 : _this2$props$theme$ma5.crs) || "EPSG:3857");
       if (demUrl) {
         var _this2$props$theme$ma6, _this2$props$theme$ma7;
         var demSource = new GeoTIFFSource({
@@ -740,8 +740,8 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
 
       // Add other objects
       (((_this2$props$theme$ma10 = _this2.props.theme.map3d) === null || _this2$props$theme$ma10 === void 0 ? void 0 : _this2$props$theme$ma10.objects3d) || []).forEach(function (entry) {
-        var _entry$visibility2;
-        importGltf(MiscUtils.resolveAssetsPath(entry.url), entry.name, _this2.state.sceneContext, {
+        var _entry$title2, _entry$visibility2;
+        importGltf(MiscUtils.resolveAssetsPath(entry.url), (_entry$title2 = entry.title) !== null && _entry$title2 !== void 0 ? _entry$title2 : entry.name, _this2.state.sceneContext, {
           visibility: (_entry$visibility2 = entry.visibility) !== null && _entry$visibility2 !== void 0 ? _entry$visibility2 : true
         });
       });
@@ -911,7 +911,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         scenePos = [scenePos];
       }
       var dtmPos = scenePos.map(function (p) {
-        return CoordinatesUtils.reproject(p, _this2.state.sceneContext.mapCrs, _this2.state.sceneContext.dtmCrs);
+        return CoordinatesUtils.reproject(p, _this2.state.sceneContext.mapCrs, _this2.state.sceneContext.dtmCrs.name);
       });
       var dtmExt = [Infinity, Infinity, -Infinity, -Infinity];
       dtmPos.forEach(function (p) {
@@ -968,7 +968,8 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
     });
     _defineProperty(_this2, "getTerrainHeightFromMap", function (scenePos) {
       var _elevationResult$samp;
-      var coordinates = new Coordinates(_this2.state.sceneContext.mapCrs, scenePos[0], scenePos[1], 0);
+      var crs = CoordinateSystem.fromSrid(_this2.state.sceneContext.mapCrs);
+      var coordinates = new Coordinates(crs, scenePos[0], scenePos[1], 0);
       var elevationResult = _this2.state.sceneContext.map.getElevation({
         coordinates: coordinates
       });

package/components/map3d/View3DSwitcher.js

@@ -63,7 +63,8 @@ var View3DSwitcher = /*#__PURE__*/function (_React$Component) {
         },
         position: _this.props.position
       }, /*#__PURE__*/React.createElement("div", {
-        className: "view3d-switcher-buttons" + (_this.state.expanded ? " view3d-switcher-buttons-expanded" : "")
+        className: "view3d-switcher-buttons" + (_this.state.expanded ? " view3d-switcher-buttons-expanded" : ""),
+        inert: _this.state.expanded ? undefined : "true"
       }, buttons.map(function (button) {
         return /*#__PURE__*/React.createElement("button", {
           className: "map-button" + (button.mode === _this.props.view3dMode ? " map-button-active" : ""),

package/components/map3d/drawtool/NumericInput3D.js

@@ -212,8 +212,7 @@ var NumericInput3D = /*#__PURE__*/function (_React$Component) {
         scrollable: true,
         title: LocaleUtils.tr("draw3d.numericinput")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "draw3d-numeric-input-body",
-        role: "body"
+        className: "draw3d-numeric-input-body"
       }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("draw3d.position")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(NumberInput, {
         decimals: 0,
         disabled: disabled,

package/components/map3d/layers/GeoTIFFLayer3D.js

@@ -6,6 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import CoordinateSystem from '@giro3d/giro3d/core/geographic/coordinate-system/CoordinateSystem';
 import ColorLayer from '@giro3d/giro3d/core/layer/ColorLayer';
 import GeoTIFFSource from "@giro3d/giro3d/sources/GeoTIFFSource.js";
 export default {
@@ -14,7 +15,7 @@ export default {
       name: options.name,
       source: new GeoTIFFSource({
         url: options.url,
-        crs: projection
+        crs: CoordinateSystem.fromSrid(projection)
       })
     });
   }

package/components/map3d/layers/VectorLayer3D.js

@@ -12,7 +12,9 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  * LICENSE file in the root directory of this source tree.
  */
 
+import CoordinateSystem from '@giro3d/giro3d/core/geographic/coordinate-system/CoordinateSystem';
 import ColorLayer from '@giro3d/giro3d/core/layer/ColorLayer';
+import StaticFeatureSource from '@giro3d/giro3d/sources/StaticFeatureSource';
 import VectorSource from "@giro3d/giro3d/sources/VectorSource.js";
 import ol from 'openlayers';
 import FeatureStyles from '../../../utils/FeatureStyles';
@@ -22,7 +24,8 @@ export default {
     return new ColorLayer({
       name: options.name,
       source: new VectorSource({
-        data: createFeatures(options, projection),
+        dataProjection: CoordinateSystem.fromSrid(projection),
+        data: createFeatures(options, projection, true),
         format: new ol.format.GeoJSON(),
         style: options.styleFunction || function (feature) {
           var styleName = options.styleName || 'default';
@@ -39,7 +42,7 @@ export default {
       layer.source.setStyle(newOptions.styleFunction);
     }
     if (newOptions.features !== oldOptions.features) {
-      updateFeatures(layer.source, newOptions, oldOptions, projection);
+      updateFeatures(layer.source, newOptions, oldOptions, projection, true);
     } else if ((oldOptions.rev || 0) !== (newOptions.rev || 0)) {
       layer.source.update();
     }
@@ -54,5 +57,12 @@ export default {
       });
       resolve(_toConsumableArray(fields.values()));
     });
+  },
+  createFeatureSource: function createFeatureSource(layer, options, projection) {
+    var crs = CoordinateSystem.fromSrid(projection);
+    return new StaticFeatureSource({
+      coordinateSystem: crs,
+      features: layer.source.source.getFeatures()
+    });
   }
 };

package/components/map3d/layers/WFSLayer3D.js

@@ -22,7 +22,10 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
  * LICENSE file in the root directory of this source tree.
  */
 
+import Extent from '@giro3d/giro3d/core/geographic/Extent';
+import CoordinateSystem from '@giro3d/giro3d/core/geographic/coordinate-system/CoordinateSystem';
 import ColorLayer from '@giro3d/giro3d/core/layer/ColorLayer';
+import StreamableFeatureSource, { wfsBuilder, tiledLoadingStrategy } from '@giro3d/giro3d/sources/StreamableFeatureSource';
 import VectorSource from "@giro3d/giro3d/sources/VectorSource.js";
 import axios from 'axios';
 import { tile } from "ol/loadingstrategy.js";
@@ -55,7 +58,7 @@ export default {
     return new ColorLayer({
       name: options.name,
       source: new VectorSource({
-        dataProjection: options.projection,
+        dataProjection: CoordinateSystem.fromSrid(projection),
         data: {
           url: url.format(urlParts),
           format: olOpts.format
@@ -110,5 +113,18 @@ export default {
         reject([]);
       });
     });
+  },
+  createFeatureSource: function createFeatureSource(layer, options, projection) {
+    var bounds = CoordinatesUtils.reprojectBbox(options.bbox.bounds, options.bbox.crs, projection);
+    var crs = CoordinateSystem.fromSrid(projection);
+    var maxextent = new Extent(crs, bounds[0], bounds[2], bounds[1], bounds[3]);
+    return new StreamableFeatureSource({
+      queryBuilder: wfsBuilder(options.url, options.name),
+      sourceCoordinateSystem: crs,
+      extent: maxextent,
+      loadingStrategy: tiledLoadingStrategy({
+        tileSize: 5000
+      })
+    });
   }
 };

package/components/style/App.css

@@ -111,6 +111,10 @@ button.button {
     outline: none;
 }
 
+button.button:focus {
+    outline: var(--focus-outline);
+}
+
 button.button:disabled {
     background-color: var(--button-bg-color-disabled);
     color: var(--button-text-color-disabled);

package/components/style/AppMenu.css

@@ -44,7 +44,6 @@ div.AppMenu .appmenu-icon > span.icon {
     transition: color 0.25s, border-color 0.25s, background-color 0.25s;
 }
 
-
 div.AppMenu.appmenu-visible .appmenu-icon > span.icon {
     color: var(--app-submenu-text-color-hover);
     border-color: var(--app-submenu-text-color-hover);
@@ -80,14 +79,15 @@ div.AppMenu.appmenu-compact div.appmenu-menu-container {
     top: 3.5em;
 }
 
-div.AppMenu.appmenu-compact div.appmenu-menu-container:hover {
+div.AppMenu.appmenu-compact div.appmenu-menu-container:hover,
+div.AppMenu.appmenu-compact div.appmenu-menu-container:focus-within {
     right: 0;
 }
 
-div.AppMenu ul.appmenu-menu {
-    text-align: left;
-    padding: 0;
+div.AppMenu div.appmenu-menu {
     background-color: var(--app-menu-bg-color);
+    text-align: left;
+    font-size: small;
 }
 
 div.AppMenu.appmenu-visible div.appmenu-menu-container {
@@ -95,72 +95,57 @@ div.AppMenu.appmenu-visible div.appmenu-menu-container {
     opacity: 1;
 }
 
-div.AppMenu ul.appmenu-menu li {
+div.appmenu-menu-item {
+    display: flex;
+    align-items: center;
     color: var(--app-menu-text-color);
-    list-style-type: none;
-    margin: 0;
-    font-size: small;
     font-weight: bold;
 }
 
-div.AppMenu ul.appmenu-menu li:not(:last-child) {
+div.appmenu-menu-item:not(:last-child) {
     border-bottom: 1px solid var(--app-menu-text-color);
 }
 
-div.AppMenu ul.appmenu-menu > li.appmenu-leaf-active,
-div.AppMenu ul.appmenu-menu > li.appmenu-submenu-active,
-div.AppMenu ul.appmenu-menu > li.appmenu-submenu-expanded {
-    background-color: var(--app-menu-bg-color-hover);
-    color: var(--app-menu-text-color-hover);
-}
-
-div.AppMenu ul.appmenu-menu li > .icon {
-    vertical-align: middle;
+div.appmenu-menu-item > .icon {
     width: 2em;
     margin: 0.5em 1em 0.5em 1em;
 }
 
-div.AppMenu ul.appmenu-menu li.appmenu-submenu > ul {
-    background-color: var(--app-submenu-bg-color);
-    padding: 0;
-    display: none;
-}
-
-div.AppMenu ul.appmenu-menu li.appmenu-submenu-expanded > ul {
-    display: block;
+div.appmenu-menu-item-label {
+    margin: 0.25em 0;
 }
 
-div.AppMenu ul.appmenu-menu li.appmenu-submenu > ul > li {
-    color: var(--app-submenu-text-color);
+div.appmenu-menu-item-comment {
+    font-weight: normal;
+    font-size: 90%;
 }
 
-div.AppMenu ul.appmenu-menu li.appmenu-submenu > ul > li.appmenu-leaf-active,
-div.AppMenu ul.appmenu-menu li.appmenu-submenu > ul > li.appmenu-submenu-active,
-div.AppMenu ul.appmenu-menu li.appmenu-submenu > ul > li.appmenu-submenu-expanded {
-    background-color: var(--app-submenu-bg-color-hover);
-    color: var(--app-submenu-text-color-hover);
+div.appmenu-submenu-active,
+div.appmenu-submenu-expanded {
+    background-color: var(--app-menu-bg-color-hover);
+    color: var(--app-menu-text-color-hover);
 }
 
-div.AppMenu ul.appmenu-menu li.appmenu-leaf {
-    display: flex;
-    align-items: center;
+div.appmenu-menu-item-nested {
+    background-color: var(--app-submenu-bg-color);
+    color: var(--app-submenu-text-color);
 }
 
-div.AppMenu ul.appmenu-menu li.appmenu-leaf > span.icon {
-    flex: 0 0 auto;
+div.appmenu-menu-item:focus-within {
+    background-color: var(--app-menu-bg-color-hover);
+    color: var(--app-menu-text-color-hover);
+    outline: none;
 }
 
-div.AppMenu ul.appmenu-menu li.appmenu-leaf > span.appmenu-leaf-label {
-    flex: 1 1 auto;
-    margin: 0.25em 0;
+div.appmenu-menu-item-nested:focus-within {
+    background-color: var(--app-submenu-bg-color-hover);
+    color: var(--app-submenu-text-color-hover);
 }
 
-div.AppMenu ul.appmenu-menu li.appmenu-leaf div.appmenu-leaf-comment {
-    font-weight: normal;
-    font-size: 90%;
+div.appmenu-menu-item-filter {
+    padding-right: 0.5em;
 }
 
-div.appmenu-filter {
-    width: 100%;
-    margin-right: 0.5em;
+div.appmenu-menu-item-filter > div.input-container {
+    flex: 1 1 auto;
 }

package/components/style/DefaultColorScheme.css

@@ -40,6 +40,7 @@
     /* List */
     --list-bg-color: white;
     --list-section-bg-color: #ccc;
+    --list-section-bg-color-hover: #bbb;
     --list-section-text-color: #595959;
     --list-item-bg-color-even: #f0f0f0;
     --list-item-bg-color-hover: #dcdcdc;

package/components/style/PickFeature.css

@@ -1,9 +1,3 @@
-div.PickFeatureMenu {
-    border: 1px solid var(--border-color);
-    background-color: var(--list-bg-color);
-    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
-}
-
 div.PickFeatureMenu > div {
     padding: 0.25em 0.5em;
 }