@masterportal/masterportalapi 2.19.2 → 2.20.0

package/CHANGELOG.md

@@ -3,11 +3,29 @@
 
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
+## ## 2.20.0 - 2023-06-30
+### Added
+- Add draw interaction for interactive and static geometry types.
+- WFS: Added function to load wfs features manually.
+
+### Changed
+- The following packages have been updated:
+    - dependencies:
+        - ol: 7.3.0 to 7.4.0
+        - cesium: 1.95.0 to 1.106.0
+- The examples in example/index.js are updated.
+
+### Fixed
+- VectorStyle: fixed several bugs of multiple geometries with styling rules.
+
+---
+
 ## 2.19.2 - 2023-06-12
 ### Fixed
 - VectorStyle of multiple geometries with styling rules does not fail on not existing style.
 
 ---
+
 ## 2.19.1 - 2023-06-02
 ### Changed
 - Exports in src/layer/wmts.js changed to export default {} to provide  ES-Syntax.

package/example/config/services.json

@@ -135,32 +135,53 @@
   },
   {
     "id": "6001",
-    "name": "ADV (EPSG:25832)",
-    "url": "https://dev.adv-smart.de/tiles/smarttiles_de_UTM32_dev/{z}/{x}/{y}.pbf",
-    "epsg": "EPSG:25832",
+    "name": "ArcGIS VectorTile",
+    "shortname": "VectorTile",
     "typ": "VectorTile",
+    "visibility": false,
+    "preview": {
+      "src": "./resources/vectorTile.png"
+    },
+    "gfiAttributes": "showAll",
+    "url": "https://test.geoportal-hamburg.de/vt/esri/tile/{z}/{y}/{x}.pbf",
+    "epsg": "EPSG:25832",
     "extent": [
-      -46133.17,
-      5048875.26857567,
-      1206211.10142433,
-      6301219.54000000
+      441336.2209999999,
+      5915995,
+      594002,
+      5986767.56699999981
+    ],
+    "origin": [
+      -9497963.94293634221,
+      9997963.94293634221
     ],
     "resolutions": [
-      4891.96981025128,
-      2445.98490512564,
-      1222.99245256282,
-      611.496226281410,
-      305.748113140705,
-      152.874056570353,
-      76.4370282851763,
-      38.2185141425881,
-      19.1092570712941,
-      9.55462853564703,
-      4.77731426782352,
-      2.38865713391176
+      39054.5466520950868,
+      19527.2733260475434,
+      9763.63666302377169,
+      4881.81833151188584,
+      2440.90916575594292,
+      1220.45458287797146,
+      610.227291438985731,
+      305.113645719492865,
+      152.556822859746433,
+      76.2784114298732163,
+      38.1392057149366082,
+      19.0696028574683041,
+      9.534801428734152,
+      4.767400714367076,
+      2.383700357183538,
+      1.191850178591769
     ],
-    "tileSize": 256,
-    "zDirection": -1
+    "tileSize": 512,
+    "vtStyles": [
+      {
+        "id": "VectorTile_STYLE",
+        "name": "Test",
+        "url": "https://test.geoportal-hamburg.de/vt/esri/resources/styles/root.json",
+        "defaultStyle": true
+      }
+    ]
   },
   {
     "id": "7001",

package/example/index.js

@@ -18,6 +18,7 @@ function errorCallback (errorEvent) {
     console.error("This is an error event:", errorEvent);
 }
 
+// Definitions:
 //* Add elements to window to play with API in console
 window.mpapi = {
     ...mpapi,
@@ -45,12 +46,12 @@ const hamburgServicesUrl = "https://geodienste.hamburg.de/services-internet.json
     // eslint-disable-next-line func-style
     getWfsStyleFunction = function () {
         const styleId = "8712",
-            olLayer = window.mpapi.map.getLayers().getArray().find((element) => element.get("id") === "8712"),
-            source = olLayer.getSource(),
+            olLayer = window.mpapi.map?.getLayers().getArray().find((element) => element.get("id") === "8712"),
+            source = olLayer?.getSource(),
             styleObject = styleList.returnStyleObject(styleId);
         let isClusterFeature = false;
 
-        if (styleObject !== undefined) {
+        if (styleObject !== undefined && source !== undefined) {
             source.on("featuresloadend", event => {
                 event.features.forEach(element => {
                     isClusterFeature = false;
@@ -61,6 +62,9 @@ const hamburgServicesUrl = "https://geodienste.hamburg.de/services-internet.json
     };
 let map2D = null;
 
+
+// Examples:
+
 /* VectorStyle example */
 // Example for using the vectorStyle that is now implemented in the masterportalAPI.
 // Hardcoded to show the school layer "8712" as a wfs and "1534" as wfs with webgl renderer.
@@ -74,70 +78,8 @@ styleList.initializeStyleList({}, config, config.layers, undefined, (currentStyl
     return currentStyleList;
 });
 
-// */
 //* Cleans up map before it is re-rendered (happens on every save during dev mode)
 document.getElementById(portalConfig.target).innerHTML = "";
-// add a click-listener to button, that creates a 3D-map on click
-document.getElementById("enable").addEventListener("click", function () {
-    if (window.mpapi.map2D === null) {
-        window.mpapi.map2D = window.mpapi.map;
-    }
-
-    if (window.mpapi.map.mapMode === "3D") {
-        window.mpapi.map.setEnabled(false);
-        window.mpapi.map = window.mpapi.map2D;
-        window.mpapi.map.getView().setRotation(0);
-        document.getElementById("layer-visibility").style.display = "none";
-    }
-    else {
-        const lib = portalConfig.cesiumLib ? portalConfig.cesiumLib : "https://geoportal-hamburg.de/mastercode/cesium/1_99/index.js";
-
-        document.getElementById("layer-visibility").style.display = "block";
-
-        load3DScriptModule.load3DScript(lib, function Loaded3DCallback () {
-            let tilesetLayer = null;
-
-            const settings3D = {
-                    map2D: window.mpapi.map2D,
-                    // set some options to Cesium scene
-                    cesiumParameter: {
-                        fxaa: true,
-                        globe: {
-                            enableLighting: true,
-                            maximumScreenSpaceError: 2,
-                            tileCacheSize: 20
-                        }
-                    }
-                },
-                map3D = mapsAPI.map.createMap(settings3D, "3D"),
-                rawLayerTerrain = rawLayerList.getLayerWhere({id: "4001"}),
-                rawLayerTileset = rawLayerList.getLayerWhere({id: "4002"}),
-                rawLayerEntities = rawLayerList.getLayerWhere({id: "4003"});
-
-            window.mpapi.map = map3D;
-            tilesetLayer = new mpapi.Tileset(rawLayerTileset, window.mpapi.map);
-            tilesetLayer.setVisible(true, window.mpapi.map);
-
-            // entities are 2 simple buildings in the park 'planten und blomen' near Tiergartenstraße
-            mpapi.entities.createLayer(rawLayerEntities, window.mpapi.map);
-            // mpapi.entities.setVisible(true, rawLayerEntities, window.mpapi.map);
-
-            mpapi.terrain.createLayer(rawLayerTerrain, window.mpapi.map);
-            mpapi.terrain.setVisible(true, rawLayerTerrain, window.mpapi.map);
-
-            window.mpapi.map.setEnabled(true);
-        });
-    }
-});
-
-// add a click-listener to button, that hides background layer in 3d
-document.getElementById("layer-visibility").addEventListener("click", function () {
-    map2D.getLayers().forEach(layer => {
-        map2D.removeLayer(layer);
-    });
-});
-
-map2D = mapsAPI.map.createMap(config, "2D", {errorCallback});
 
 //* geojson styling function call to override default styling and special wfs styling
 mpapi.geojson.setCustomStyles({
@@ -167,7 +109,6 @@ const styleWfs = function (feature, resolution) {
 };
 
 services.find(({id}) => id === "3001").style = styleWfs;
-// */
 
 
 // eslint-disable-next-line
@@ -187,6 +128,8 @@ const styleOaf = function (feature, resolution) {
 services.find(({id}) => id === "5001").style = styleOaf;
 
 //* SYNCHRONOUS EXAMPLE: layerConf is known
+// /*
+map2D = mapsAPI.map.createMap(config, "2D", {errorCallback});
 window.mpapi.map = map2D;
 
 ["2001", "2002", "1002", "3001", "5001"].forEach(id => window.mpapi.map.addLayer(id, {errorCallback}));
@@ -204,7 +147,8 @@ services
 
 // */
 
-/* ASYNCHRONOUS EXAMPLE 1: work with layerConf callback
+//* ASYNCHRONOUS EXAMPLE 1: work with layerConf callback (for testing comment out SYNCHRONOUS EXAMPLE)
+/*
 document.getElementById("enable").style.display = "none";
 mpapi.rawLayerList.initializeLayerList(hamburgServicesUrl,
     conf => {
@@ -213,49 +157,34 @@ mpapi.rawLayerList.initializeLayerList(hamburgServicesUrl,
             layerConf: conf,
             layers: null
         }, "2D");
-        ["6357", "6074"].forEach(id => window.mpapi.map.addLayer(id));
+        ["23420", "6074"].forEach(id => window.mpapi.map.addLayer(id));
     });
-//*/
+*/
 
-/* ASYNCHRONOUS EXAMPLE 2: work with createMap callback
+//* ASYNCHRONOUS EXAMPLE 2: work with createMap callback (for testing comment out SYNCHRONOUS EXAMPLE)
+/*
 document.getElementById("enable").style.display = "none";
 window.mpapi.map = mapsAPI.map.createMap({
     ...portalConfig, layerConf: hamburgServicesUrl, layers: [
-        {id: "6357"},
+        {id: "23420"},
         {id: "453", transparency: 50}
     ]}, "2D",
 {
     callback: () => ["6074"].forEach(id => window.mpapi.map.addLayer(id))
 });
-//*/
-
-/* SEARCH FUNCTION EXAMPLE
-// You may e.g. copy this code to the browser's console to run a search.
-
-window.mpapi.search("Eiffe", {
-    map: window.mpapi.map,
-    zoom: true,
-    zoomToParams: {duration: 1000, maxZoom: 8},
-    searchStreets: true
-}).then(x => console.log(x)).catch(e => console.error(e));
-
-window.mpapi.search("Mümmelmannsberg 72", {
-    map: window.mpapi.map,
-    zoom: true,
-    zoomToParams: {duration: 1000, maxZoom: 8},
-    searchAddress: true
-}).then(x => console.log(x)).catch(e => console.error(e));
+*/
 
-//*/
 
 /* VECTOR TILE EXAMPLE */
 /*
 document.getElementById("enable").style.display = "none";
-map2D.getLayers().forEach(layer => {
-    map2D.removeLayer(layer);
+window.mpapi.map = mapsAPI.map.createMap(config, "2D", {errorCallback});
+
+window.mpapi.map.getLayers().forEach(layer => {
+    window.mpapi.map.removeLayer(layer);
 });
 
-const vtStyleUrl = "https://dev.adv-smart.de/styles/playground/masterportal_test1.json";
+const vtStyleUrl = "https://test.geoportal-hamburg.de/vt/esri/resources/styles/root.json";
 
 fetch(vtStyleUrl)
     .then(response => response.json())
@@ -264,20 +193,105 @@ fetch(vtStyleUrl)
 
         mpapi.vectorTile.setStyle(vtLayer, style, vtStyleUrl);
     });
-//*/
+*/
 
 /* WMTS example */
 /*
-map2D.getLayers().forEach(layer => {
-    map2D.removeLayer(layer);
+window.mpapi.map = mapsAPI.map.createMap(config, "2D", {errorCallback});
+
+window.mpapi.map.getLayers().forEach(layer => {
+    window.mpapi.map.removeLayer(layer);
 });
 window.mpapi.map.addLayer("7001");
 window.mpapi.map.addLayer("7002");
 window.mpapi.map.addLayer("7003");
-*/
+//*/
 
 /* VectorStyle example */
 // Example for using the vectorStyle that is now implemented in the masterportalAPI.
 // Apply style to layer "8172"
 // mirrors behavior of Masterportal styling
 getWfsStyleFunction();
+
+
+/* SEARCH FUNCTION EXAMPLE
+// You may e.g. copy this code to the browser's console to run a search.
+
+window.mpapi.search("Eiffe", {
+    map: window.mpapi.map,
+    zoom: true,
+    zoomToParams: {duration: 1000, maxZoom: 8},
+    searchStreets: true
+}).then(x => console.log(x)).catch(e => console.error(e));
+
+window.mpapi.search("Mümmelmannsberg 72", {
+    map: window.mpapi.map,
+    zoom: true,
+    zoomToParams: {duration: 1000, maxZoom: 8},
+    searchAddress: true
+}).then(x => console.log(x)).catch(e => console.error(e));
+
+//*/
+
+
+// Add 3D functionality to the example:
+
+// add a click-listener to button, that creates a 3D-map on click
+document.getElementById("enable").addEventListener("click", function () {
+    if (window.mpapi.map2D === null) {
+        window.mpapi.map2D = window.mpapi.map;
+    }
+
+    if (window.mpapi.map.mapMode === "3D") {
+        window.mpapi.map.setEnabled(false);
+        window.mpapi.map = window.mpapi.map2D;
+        window.mpapi.map.getView().setRotation(0);
+        document.getElementById("layer-visibility").style.display = "none";
+    }
+    else {
+        const lib = portalConfig.cesiumLib ? portalConfig.cesiumLib : "https://geoportal-hamburg.de/mastercode/cesium/1_99/index.js";
+
+        document.getElementById("layer-visibility").style.display = "block";
+
+        load3DScriptModule.load3DScript(lib, function Loaded3DCallback () {
+            let tilesetLayer = null;
+
+            const settings3D = {
+                    map2D: window.mpapi.map2D,
+                    // set some options to Cesium scene
+                    cesiumParameter: {
+                        fxaa: true,
+                        globe: {
+                            enableLighting: true,
+                            maximumScreenSpaceError: 2,
+                            tileCacheSize: 20
+                        }
+                    }
+                },
+                map3D = mapsAPI.map.createMap(settings3D, "3D"),
+                rawLayerTerrain = rawLayerList.getLayerWhere({id: "4001"}),
+                rawLayerTileset = rawLayerList.getLayerWhere({id: "4002"}),
+                rawLayerEntities = rawLayerList.getLayerWhere({id: "4003"});
+
+            window.mpapi.map = map3D;
+            tilesetLayer = new mpapi.Tileset(rawLayerTileset, window.mpapi.map);
+            tilesetLayer.setVisible(true, window.mpapi.map);
+
+            // entities are 2 simple buildings in the park 'planten und blomen' near Tiergartenstraße
+            mpapi.entities.createLayer(rawLayerEntities, window.mpapi.map);
+            // mpapi.entities.setVisible(true, rawLayerEntities, window.mpapi.map);
+
+            mpapi.terrain.createLayer(rawLayerTerrain, window.mpapi.map);
+            mpapi.terrain.setVisible(true, rawLayerTerrain, window.mpapi.map);
+
+            window.mpapi.map.setEnabled(true);
+        });
+    }
+});
+
+// add a click-listener to button, that hides background layer in 3d
+document.getElementById("layer-visibility").addEventListener("click", function () {
+    map2D.getLayers().forEach(layer => {
+        map2D.removeLayer(layer);
+    });
+});

package/jest.setup.js

@@ -1,5 +1,20 @@
 import "regenerator-runtime/runtime";
 
+class Worker {
+    constructor (stringUrl) {
+        this.url = stringUrl;
+        this.onmessage = () => {
+            // empty
+        };
+    }
+
+    postMessage (msg) {
+        this.onmessage(msg);
+    }
+}
+// a mock for web worker
+window.Worker = Worker;
+
 window.URL.createObjectURL = function () {
     // empty
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.19.2",
+  "version": "2.20.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {
@@ -21,7 +21,7 @@
   "dependencies": {
     "core-js": "^3.30.2",
     "dayjs": "^1.11.7",
-    "ol": "7.3.0",
+    "ol": "7.4.0",
     "olcs": "^2.14.0",
     "proj4": "^2.9.0",
     "xml2js": "^0.5.0"
@@ -47,7 +47,7 @@
     "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
-    "cesium": "^1.95.0"
+    "cesium": "^1.106.0"
   },
   "engines": {
     "node": "^16.13.2 || ^18.12.0",

package/src/index.js

@@ -1,5 +1,6 @@
 import {createMapView} from "./maps/mapView";
 import crs from "./crs";
+import drawInteractions from "./maps/interactions/drawInteractions";
 import rawLayerList from "./rawLayerList";
 import * as wms from "./layer/wms";
 import wmts from "./layer/wmts";
@@ -36,5 +37,6 @@ export {
     ping,
     search,
     crs,
+    drawInteractions,
     webgl
 };

package/src/layer/wfs.js

@@ -252,3 +252,22 @@ export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {
     }
     return layer;
 }
+
+/**
+ * Load the features manually.
+ * @param {Object} layerAttributes raw layer attributes.
+ * @param {module:ol/vector/Source} layerSource - the source of the layer
+ * @returns {void}
+ */
+export function loadFeaturesManually (layerAttributes, layerSource) {
+    const getUrl = createUrl(layerAttributes, layerAttributes.version, {getCode: () => layerAttributes.crs}, "");
+
+    fetch(getUrl, layerSource)
+        .then(response => response.text())
+        .then(responseString => {
+            layerSource.addFeatures(layerSource.getFormat().readFeatures(responseString));
+        })
+        .catch(error => {
+            console.error(error);
+        });
+}

package/src/maps/interactions/drawInteractions.js

@@ -0,0 +1,130 @@
+import {createBox} from "ol/interaction/Draw.js";
+import {Draw} from "ol/interaction.js";
+
+const earthRadius = 6378137,
+    roh = 180 / Math.PI,
+    mappingDrawTypes = {
+        box: {
+            type: "Circle",
+            options: {
+                geometryFunction: createBox()
+            }
+        },
+        circle: {
+            type: "Circle"
+        },
+        doubleCircle: {
+            type: "Circle"
+        },
+        line: {
+            type: "LineString"
+        },
+        pen: {
+            type: "LineString",
+            options: {
+                freehand: true
+            }
+        },
+        point: {
+            type: "Point"
+        },
+        polygon: {
+            type: "Polygon"
+        }
+    };
+
+/**
+ * Transform the radius to map projection unit.
+ * @param {Number} radius The radius.
+ * @param {Object} mapProjection The map projection.
+ * @returns {Number} The transformed radius.
+ */
+function transformMapUnitRadius (radius, mapProjection) {
+    const unit = mapProjection.getUnits();
+    let mapUnitRadius;
+
+    if (unit === "m") {
+        mapUnitRadius = radius;
+    }
+    else if (unit === "degrees") {
+        mapUnitRadius = radius * roh / earthRadius;
+    }
+
+    return mapUnitRadius;
+}
+
+/**
+ * Create a feature for the outer circle of draw type: double circle.
+ * @param {ol/interaction/Draw} drawInteraction The draw interaction.
+ * @param {Object} mapProjection The map projection.
+ * @param {ol/source} source The vector layer source for draw features.
+ * @param {Object} [options={}] The options for drawing features.
+ * @param {Number} [options.circleOuterRadius] The radius for the outer circle.
+ * @returns {void}
+ */
+function drawOuterCircle (drawInteraction, mapProjection, source, options = {}) {
+    drawInteraction.on("drawend", event => {
+        const outerCircleFeature = event.feature.clone(),
+            mapUnitOuterRadius = transformMapUnitRadius(options.circleOuterRadius, mapProjection);
+
+        outerCircleFeature.getGeometry().setRadius(mapUnitOuterRadius);
+        source.addFeature(outerCircleFeature);
+    });
+}
+
+/**
+ * Create features for non-interactive circle or double circle.
+ * @param {ol/interaction/Draw} drawInteraction The draw interaction.
+ * @param {String} drawType The current draw type.
+ * @param {Object} mapProjection The map projection.
+ * @param {ol/source} source The vector layer source for draw features.
+ * @param {Object} [options={}] The options for drawing features.
+ * @param {Number} [options.circleInnerRadius] The radius for the inner circle.
+ * @param {Number} [options.circleOuterRadius] The radius for the outer circle.
+ * @param {Boolean} [options.interactiveCircle] Circle is drawn interactively or not.
+ * @returns {void}
+ */
+function drawCircle (drawInteraction, drawType, mapProjection, source, options = {}) {
+    if (options.interactiveCircle === false && options.circleInnerRadius > 0) {
+        drawInteraction.on("drawstart", event => {
+            const mapUnitInnerRadius = transformMapUnitRadius(options.circleInnerRadius, mapProjection);
+
+            event.feature.getGeometry().setRadius(mapUnitInnerRadius);
+            drawInteraction.finishDrawing();
+        });
+
+        if (drawType === "doubleCircle" && options.circleOuterRadius > 0) {
+            drawOuterCircle(drawInteraction, mapProjection, source, options);
+        }
+    }
+}
+
+/**
+ * Create the draw interaction.
+ * @param {String} drawType The current draw type.
+ * @param {ol/source} source The vector layer source for draw features.
+ * @returns {ol/interaction/Draw|null} The draw interaction.
+ */
+function createDrawInteraction (drawType, source) {
+    let drawInteraction = null;
+
+    if (typeof mappingDrawTypes[drawType] === "object") {
+        const options = mappingDrawTypes[drawType].options || {};
+
+        drawInteraction = new Draw({
+            source: source,
+            type: mappingDrawTypes[drawType].type,
+            freehand: options.freehand,
+            geometryFunction: options.geometryFunction
+        });
+    }
+
+    return drawInteraction;
+}
+
+export default {
+    createDrawInteraction,
+    drawCircle,
+    drawOuterCircle,
+    transformMapUnitRadius
+};

package/src/maps/ol/olMap.js

@@ -4,7 +4,7 @@ import setBackgroundImage from "../../lib/setBackgroundImage";
 import getInitialLayers from "../../lib/getInitialLayers";
 import defaults from "../../defaults";
 import * as wms from "../../layer/wms";
-import * as wmts from "../../layer/wmts";
+import wmts from "../../layer/wmts";
 import * as geojson from "../../layer/geojson";
 import * as wfs from "../../layer/wfs";
 import * as vectorBase from "../../layer/vectorBase";
@@ -23,7 +23,7 @@ let mapIdCounter = 0;
  */
 const layerBuilderMap = {
         wms,
-        wmts,
+        "wmts": wmts,
         wfs,
         geojson,
         vectorBase,

package/src/renderer/webgl.js

@@ -1,9 +1,9 @@
 import WebGLPointsLayer from "ol/layer/WebGLPoints";
 import WebGLVectorLayerRenderer from "ol/renderer/webgl/VectorLayer";
 import VectorLayer from "ol/layer/Layer";
-import {packColor} from "ol/renderer/webgl/shaders";
 import styleList from "../vectorStyle/styleList";
 import {getRulesForFeature} from "../vectorStyle/lib/getRuleForIndex";
+import {returnColor} from "../vectorStyle/lib/colorConvertions";
 
 /**
  * The default style for OpenLayers WebGLPoints class
@@ -11,82 +11,26 @@ import {getRulesForFeature} from "../vectorStyle/lib/getRuleForIndex";
  * @private
  */
 const defaultStyle = {
-    symbol: {
-        symbolType: "circle",
-        size: 20,
-        color: "#006688",
-        rotateWithView: false,
-        offset: [0, 0],
-        opacity: 0.6
-    }
-};
-
-/**
- * parses the styling rules for the renderer
- * @static
- * @private
- * @returns {Object} the style options object with conditional functions
- */
-export function getRenderFunctions () {
-    return {
-        /**
-         * Used for polygon fills
-         * Reads the relevant properties from the Masterportal style object
-         * @see https://bitbucket.org/geowerkstatt-hamburg/masterportal/src/dev/doc/style.json.md
-         */
-        fill: {
-            attributes: {
-                color: (feature) => {
-                    return packColor(feature.styleRule?.style.polygonFillColor || "#006688");
-                },
-                opacity: (feature) => {
-                    return typeof feature.styleRule?.style.polygonFillColor?.[3] === "number" ?
-                        feature.styleRule.style.polygonFillColor[3] : 1;
-                }
-            }
-        },
-        stroke: {
-            /**
-             * Used for polygon edges and lineStrings
-             * Reads the relevant properties from the Masterportal style object
-             * @see https://bitbucket.org/geowerkstatt-hamburg/masterportal/src/dev/doc/style.json.md
-             */
-            attributes: {
-                color: (feature) => {
-                    return packColor(feature.styleRule?.style.polygonStrokeColor || "#006688");
-                },
-                width: (feature) => {
-                    return feature.styleRule?.style.polygonStrokeWidth || 1;
-                },
-                opacity: (feature) => {
-                    return typeof feature.styleRule?.style.polygonStrokeColor?.[3] === "number" ?
-                        feature.styleRule.style.polygonStrokeColor[3] : 1;
-                }
-            }
-        },
-        point: {
-            /**
-             * As of now, the generic VectorLayerRenderer only supports points rendered as quads
-             * available attributes: color, size, opacity
-             * Due to that, we use WebGLPoints Layer Class for point geom types
-             * Reads the relevant properties from the Masterportal style object
-             * @see https://bitbucket.org/geowerkstatt-hamburg/masterportal/src/dev/doc/style.json.md
-             */
-            attributes: {
-                color: (feature) => {
-                    return packColor(feature.styleRule?.style.circleFillColor || "#006688");
-                },
-                size: (feature) => {
-                    return feature.styleRule?.style.circleRadius || 20;
-                },
-                opacity: (feature) => {
-                    return typeof feature.styleRule?.style.circleFillColor?.[3] === "number" ?
-                        feature.styleRule.style.circleFillColor[3] : 1;
-                }
-            }
+        symbol: {
+            symbolType: "circle",
+            size: 20,
+            color: "#006688",
+            rotateWithView: false,
+            offset: [0, 0],
+            opacity: 0.6
         }
+    },
+
+    /** @type {import('../src/ol/style/literal.js').LiteralStyle} */
+    style = {
+        "stroke-color": ["get", "STROKECOLOR"],
+        // NOTICE: does not work with ol 7.4.0, throws errors -> use 1 pixel width
+        // "stroke-width": ["get", "STROKEWIDTH"],
+        "stroke-width": 1,
+        "fill-color": ["get", "FILLCOLOR"],
+        "opacity": ["get", "OPACITY"],
+        "size": ["get", "CIRCLESIZE"]
     };
-}
 
 /**
  * Creates a layer object to extend from.
@@ -109,7 +53,9 @@ export function createVectorLayerRenderer () {
          * @experimental
          */
         createRenderer () {
-            return new WebGLVectorLayerRenderer(this, getRenderFunctions());
+            return new WebGLVectorLayerRenderer(this, {
+                style
+            });
         }
     }
 
@@ -132,9 +78,24 @@ export function formatFeatureStyles (feature, styleObject) {
     // extract first matching rule only
     const rule = getRulesForFeature(styleObject, feature)[0];
 
-    // don't set on properties to avoid GFI issues
     // undefined if no match
     feature.styleRule = rule;
+
+    if (rule && rule.style) {
+        // TODO set style on properties will be visible in GFI
+        const polygonFillColor = returnColor(rule.style.polygonFillColor, "hex"),
+            circleFillColor = returnColor(rule.style.circleFillColor, "hex"),
+            fillColor = polygonFillColor ? polygonFillColor : circleFillColor,
+            polygonStrokeColor = returnColor(rule.style.polygonStrokeColor, "hex"),
+            polygonStrokeWidth = rule.style.polygonStrokeWidth,
+            size = rule.style.circleRadius;
+
+        feature.set("FILLCOLOR", fillColor ? fillColor : "#006688");
+        feature.set("STROKECOLOR", polygonStrokeColor ? polygonStrokeColor : "#006688");
+        feature.set("STROKEWIDTH", polygonStrokeWidth ? polygonStrokeWidth : 1);
+        feature.set("OPACITY", polygonFillColor ? polygonFillColor[3] : 1);
+        feature.set("CIRCLESIZE", size ? size : 20);
+    }
 }
 
 /**

package/src/vectorStyle/createStyle.js

@@ -6,8 +6,7 @@ import LineStringStyle from "./styles/styleLine";
 import CesiumStyle from "./styles/styleCesium";
 import {getRuleForIndex, getRulesForFeature} from "./lib/getRuleForIndex";
 
-const legendsOfAllStyles = [],
-    uniqueStyles = [];
+const legendsOfAllStyles = [];
 let legendInformationLength = 0;
 
 /**
@@ -30,17 +29,13 @@ function isMultiGeometry (geometryType) {
  */
 function getSimpleGeometryStyle (geometryType, feature, rule, isClustered, wfsImgPathFromConfig) {
     const style = rule?.style,
-        legendValue = style ? style.legendValue : null,
-        alreadyExisitingStyle = uniqueStyles.find(element => element.featureStyle === style && element.geometryType === geometryType);
+        legendValue = style ? style.legendValue : null;
     let styleObject,
         styleObjectForLegend = null;
 
     feature.legendValue = legendValue ? legendValue : null;
 
-    if (alreadyExisitingStyle) {
-        styleObject = alreadyExisitingStyle.featureStyleObject;
-    }
-    else if (geometryType === "Point") {
+    if (geometryType === "Point") {
         styleObject = new PointStyle(feature, style, isClustered);
         if (isClustered) {
             styleObjectForLegend = new PointStyle(feature, style, false);
@@ -78,7 +73,6 @@ function getSimpleGeometryStyle (geometryType, feature, rule, isClustered, wfsIm
         styleObjectForLegend.initialize(feature, style, false, wfsImgPathFromConfig);
         styleObjectForLegend.legendValue = legendValue;
     }
-    uniqueStyles.push({featureStyle: style, featureStyleObject: styleObject, geometryType});
     styleObject.initialize(feature, style, isClustered, wfsImgPathFromConfig);
     styleObject.addLegendInfo(geometryType, styleObjectForLegend === null ? styleObject : styleObjectForLegend, rule);
     styleObject.legendValue = legendValue;
@@ -122,6 +116,7 @@ function getMultiGeometryStyle (geometryType, feature, rules, isClustered, wfsIm
                 console.warn("Multi encapsulated multiGeometries are not supported.");
             }
             else if (!simpleStyle.styleMultiGeomOnlyWithRule || rule) {
+                simpleStyle.getStyle()?.setGeometry(geometry);
                 olStyle.push(simpleStyle);
             }
         });
@@ -136,7 +131,7 @@ function getMultiGeometryStyle (geometryType, feature, rules, isClustered, wfsIm
     else {
         const simpleStyle = getSimpleGeometryStyle(geometryType, feature, rules, isClustered, wfsImgPathFromConfig);
 
-        simpleStyle.getStyle().setGeometry(geometryType);
+        simpleStyle.getStyle()?.setGeometry(geometryType);
         olStyle.push(simpleStyle);
     }
     return olStyle;
@@ -251,7 +246,7 @@ function createStyle (styleObject, feature, isClustered, wfsImgPathFromConfig) {
         captureLegendFromFeature(styleObject.styleId, legendInformation);
     }
     // label style is optional and depends on some fields
-    if (isClustered || hasLabelField) {
+    if (styleObjectGeometry !== null && (isClustered || hasLabelField)) {
         if (Array.isArray(styleObjectGeometry)) {
             styleObjectGeometry[0].setText(getLabelStyle(feature, style, isClustered));
         }

package/src/vectorStyle/styles/point/stylePoint.js

@@ -38,14 +38,14 @@ class PointStyle extends StyleClass {
         this.setFeature(feature);
         this.setIsClustered(isClustered);
         this.overwriteStyling(styles);
-        this.setStyle(this.getStyle());
+        this.setStyle(this.createStyle());
     }
 
     /**
      * This function returns a style for each feature.
      * @returns {ol/style} - The created style.
      */
-    getStyle () {
+    createStyle () {
         if (this.nullStyle) {
             return null;
         }

package/src/vectorStyle/styles/polygon/stylePolygon.js

@@ -28,14 +28,14 @@ class PolygonStyle extends StyleClass {
         this.setFeature(feature);
         this.setIsClustered(isClustered);
         this.overwriteStyling(styles);
-        this.setStyle(this.getStyle());
+        this.setStyle(this.createStyle());
     }
 
     /**
      * This function returns a style for each feature.
      * @returns {ol/style} - The created style.
      */
-    getStyle () {
+    createStyle () {
         if (this.nullStyle) {
             return null;
         }

package/src/vectorStyle/styles/style.js

@@ -35,6 +35,14 @@ class StyleClass {
         this.style = value;
     }
 
+    /**
+     * Getter for style.
+     * @returns {ol/style} - The style.
+     */
+    getStyle () {
+        return this.style;
+    }
+
     /*
      * setter for styles
      * @param {object} styles styles

package/src/vectorStyle/styles/styleCesium.js

@@ -22,14 +22,14 @@ class CesiumStyle extends StyleClass {
     initialize (rule) {
         this.overwriteStyling(rule.style);
         this.setConditions(rule.conditions);
-        this.setStyle(this.getStyle());
+        this.setStyle(this.createStyle());
     }
 
     /**
      * This function returns a style for each feature.
      * @returns {ol/style} - The created style.
      */
-    getStyle () {
+    createStyle () {
         return this.createCondition(this.get("conditions"), this.get("style"));
     }
 

package/src/vectorStyle/styles/styleLine.js

@@ -26,14 +26,14 @@ class LineStringStyle extends StyleClass {
         this.setFeature(feature);
         this.setIsClustered(isClustered);
         this.overwriteStyling(styles);
-        this.setStyle(this.getStyle());
+        this.setStyle(this.createStyle());
     }
 
     /**
      * This function returns a style for each feature.
      * @returns {ol/style/Style} - The created style.
      */
-    getStyle () {
+    createStyle () {
         if (this.nullStyle) {
             return null;
         }

package/src/vectorStyle/styles/styleText.js

@@ -28,14 +28,14 @@ class TextStyle extends StyleClass {
         this.setFeature(feature);
         this.setIsClustered(isClustered);
         this.overwriteStyling(styles);
-        this.setStyle(this.getStyle());
+        this.setStyle(this.createStyle());
     }
 
     /**
     * This function returns a style for each feature.
     * @returns {ol/style} - The created style.
     */
-    getStyle () {
+    createStyle () {
         if (this.nullStyle) {
             return null;
         }

package/test/layer/wfs.test.js

@@ -414,5 +414,57 @@ describe("wfs.js", function () {
             expect(webgl.afterLoading).toHaveBeenCalled();
         });
     });
+    describe("loadFeaturesManually", function () {
+        const consoleError = console.error;
+        let tick;
+
+        beforeEach(() => {
+            tick = () => {
+                return new Promise(resolve => {
+                    setTimeout(resolve, 0);
+                });
+            };
+
+            if (global.fetch) {
+                global.fetch.mockClear();
+            }
+        });
+        // to reset show error on load in console
+        afterEach(() => {
+            console.error = consoleError;
+        });
+
+        it("load features manually", async function () {
+            global.fetch = jest.fn().mockImplementationOnce(() => {
+                return new Promise((resolve) => {
+                    resolve({
+                        ok: true,
+                        status: 200,
+                        text: () => {
+                            return featureCollection;
+                        }
+                    });
+                });
+            });
+
+            const format = new WFS(),
+                source = new VectorSource({
+                    format: format,
+                    url: "https://url.de",
+                    version: "1.1.0",
+                    featureType: "krankenhaeuser_hh",
+                    featureNS: "http://www.deegree.org/app"
+                }),
+                layerAttributes = {
+                    crs: "EPSG:25832",
+                    version: "1.1.0",
+                    url: "https://url.de"
+                };
+
+            wfs.loadFeaturesManually(layerAttributes, source);
+            await tick();
+            expect(source.getFeatures()).toHaveLength(1);
+        });
+    });
 });
 

package/test/maps/interactions/drawInteractions.test.js

@@ -0,0 +1,50 @@
+import {Draw} from "ol/interaction.js";
+import VectorSource from "ol/source/Vector";
+
+import drawInteractions from "../../../src/maps/interactions/drawInteractions";
+
+describe("src/maps/interactions/drawInteractions.js", () => {
+    describe("createDrawInteraction", () => {
+        it("should create a draw interaction", () => {
+            const source = new VectorSource(),
+                drawType = "pen",
+                drawInteraction = drawInteractions.createDrawInteraction(drawType, source);
+
+            expect(drawInteraction).not.toBeUndefined();
+            expect(drawInteraction).not.toBeNull();
+            expect(drawInteraction).toBeInstanceOf(Draw);
+        });
+
+        it("should return null, if drawType is not supported", () => {
+            const source = new VectorSource(),
+                drawType = "abc",
+                drawInteraction = drawInteractions.createDrawInteraction(drawType, source);
+
+            expect(drawInteraction).not.toBeUndefined();
+            expect(drawInteraction).toBeNull();
+            expect(drawInteraction).not.toBeInstanceOf(Draw);
+        });
+    });
+
+    describe("transformMapUnitRadius", () => {
+        it("should return the input meter radius in meter ", () => {
+            const radius = 100,
+                mapProjection = {
+                    getUnits: () => "m"
+                },
+                mapUnitRadius = drawInteractions.transformMapUnitRadius(radius, mapProjection);
+
+            expect(mapUnitRadius).toEqual(100);
+        });
+
+        it("should return the input degree radius in meter ", () => {
+            const radius = 100,
+                mapProjection = {
+                    getUnits: () => "degrees"
+                },
+                mapUnitRadius = drawInteractions.transformMapUnitRadius(radius, mapProjection);
+
+            expect(mapUnitRadius).toEqual(0.0008983152841195215);
+        });
+    });
+});

package/test/renderer/webgl.test.js

@@ -4,7 +4,6 @@ import Polygon from "ol/geom/Polygon";
 import * as webgl from "../../src/renderer/webgl";
 import WebGLPointsLayer from "ol/layer/WebGLPoints";
 import Layer from "ol/layer/Layer";
-import {packColor} from "ol/renderer/webgl/shaders";
 import styleList from "../../src/vectorStyle/styleList";
 
 describe("webgl.js", () => {
@@ -108,54 +107,5 @@ describe("webgl.js", () => {
                 expect($feature.styleRule).toEqual(styleRule);
             });
         });
-        describe("getRenderFunctions", () => {
-            it("should read the style from styleRule and pack them to single float", () => {
-                const renderFunctions = webgl.getRenderFunctions();
-
-                $feature = feature.clone();
-                webgl.formatFeatureStyles($feature, styleObject);
-                expect(renderFunctions.fill.attributes.color($feature)).toEqual(packColor(styleRule.style.polygonFillColor));
-                expect(renderFunctions.fill.attributes.opacity($feature)).toEqual(styleRule.style.polygonFillColor[3]);
-                expect(renderFunctions.stroke.attributes.color($feature)).toEqual(packColor(styleRule.style.polygonStrokeColor));
-                expect(renderFunctions.stroke.attributes.width($feature)).toEqual(styleRule.style.polygonStrokeWidth);
-                expect(renderFunctions.stroke.attributes.opacity($feature)).toEqual(styleRule.style.polygonStrokeColor[3]);
-                expect(renderFunctions.point.attributes.color($feature)).toEqual(packColor(styleRule.style.circleFillColor));
-                expect(renderFunctions.point.attributes.size($feature)).toEqual(styleRule.style.circleRadius);
-                expect(renderFunctions.point.attributes.opacity($feature)).toEqual(styleRule.style.circleFillColor[3]);
-            });
-            it("should return default values if style is empty, i.e. \"default\" style", () => {
-                const renderFunctions = webgl.getRenderFunctions();
-
-                styleObject = {
-                    rules: [{
-                        style: {}
-                    }]
-                };
-                $feature = feature.clone();
-                webgl.formatFeatureStyles($feature, styleObject);
-                expect(typeof renderFunctions.fill.attributes.color($feature)).toEqual("number");
-                expect(typeof renderFunctions.fill.attributes.opacity($feature)).toEqual("number");
-                expect(typeof renderFunctions.stroke.attributes.color($feature)).toEqual("number");
-                expect(typeof renderFunctions.stroke.attributes.width($feature)).toEqual("number");
-                expect(typeof renderFunctions.stroke.attributes.opacity($feature)).toEqual("number");
-                expect(typeof renderFunctions.point.attributes.color($feature)).toEqual("number");
-                expect(typeof renderFunctions.point.attributes.size($feature)).toEqual("number");
-                expect(typeof renderFunctions.point.attributes.opacity($feature)).toEqual("number");
-            });
-            it("should return default values if no style rule is found", () => {
-                const renderFunctions = webgl.getRenderFunctions();
-
-                $feature = feature.clone();
-                expect(feature.styleRule).toBeUndefined();
-                expect(typeof renderFunctions.fill.attributes.color($feature)).toEqual("number");
-                expect(typeof renderFunctions.fill.attributes.opacity($feature)).toEqual("number");
-                expect(typeof renderFunctions.stroke.attributes.color($feature)).toEqual("number");
-                expect(typeof renderFunctions.stroke.attributes.width($feature)).toEqual("number");
-                expect(typeof renderFunctions.stroke.attributes.opacity($feature)).toEqual("number");
-                expect(typeof renderFunctions.point.attributes.color($feature)).toEqual("number");
-                expect(typeof renderFunctions.point.attributes.size($feature)).toEqual("number");
-                expect(typeof renderFunctions.point.attributes.opacity($feature)).toEqual("number");
-            });
-        });
     });
 });

package/test/vectorStyle/styles/point/stylePoint.test.js

@@ -27,8 +27,11 @@ describe("stylePoint", () => {
             expect(typeof stylePointClass.setSize).toBe("function");
         });
     });
-    describe("getStyle", function () {
+    describe("createStyle", function () {
         it("returns an instance of openlayers style", () => {
+            const createdStyle = stylePointClass.createStyle();
+
+            stylePointClass.setStyle(createdStyle);
             expect(stylePointClass.getStyle()).toBeInstanceOf(Style);
         });
         it("returns an instance of openlayers circleStyle", () => {
@@ -39,6 +42,9 @@ describe("stylePoint", () => {
                 legendValue: "Krankenhaus",
                 imageName: "krankenhaus.png"
             };
+            const createdStyle = stylePointClass.createStyle();
+
+            stylePointClass.setStyle(createdStyle);
 
             expect(stylePointClass.getStyle()).toBeInstanceOf(Style);
             expect(stylePointClass.getStyle().getImage()).toBeInstanceOf(CircleStyle);

package/test/vectorStyle/styles/polygon/stylePolygon.test.js

@@ -15,8 +15,11 @@ describe("stylePolygon", () => {
         isClustered = false,
         stylePolygonClass = new PolygonStyle(feature, style, isClustered);
 
-    describe("getStyle", function () {
+    describe("createStyle", function () {
         it("returns an instance of openlayers style", () => {
+            const createdStyle = stylePolygonClass.createStyle();
+
+            stylePolygonClass.setStyle(createdStyle);
             expect(stylePolygonClass.getStyle()).toBeInstanceOf(Style);
         });
     });

package/test/vectorStyle/styles/styleLine.test.js

@@ -21,8 +21,11 @@ describe("styleLine", () => {
         });
     });
 
-    describe("getStyle", function () {
+    describe("createStyle", function () {
         it("returns an instance of openlayers style", () => {
+            const createdStyle = styleLineClass.createStyle();
+
+            styleLineClass.setStyle(createdStyle);
             expect(styleLineClass.getStyle()).toBeInstanceOf(Style);
         });
     });