@masterportal/masterportalapi 2.27.0 → 2.29.0

package/CHANGELOG.md

@@ -5,20 +5,75 @@
 
 ### Unreleased - in development
 ## Added
+
 ## Changed
+
 ## Deprecated
+
 ## Removed
+
 ## Fixed
 
 ---
 
-### 2.27.0 - 2023-08-31
+### 2.29.0 - 2023-10-27
 ## Added
+- The following packages from parcel automatic were installed for node builtin:
+    - dependencies:
+        - assert": 2.1.0,
+        - browserify-zlib: 0.2.0,
+        - https-browserify: 1.0.0
+        - stream-http: 3.2.0
+        - url: 0.11.3
+        - util: 0.12.5
+- The following packages have been added:
+    - dependencies:
+        - ol-mapbox-style: 12.0.0
+
 ## Changed
-- VectorStyle: 'initializeStyleList' is asynchron, waits for loading finished and returns the loaded styles.
-## Deprecated
-## Removed
+- The following packages have been updated:
+    - dependencies:
+        - core-js: 3.32.0 to 3.33.1
+        - dayjs: 1.11.9 to 1.11.10
+        - ol: 7.5.2 to 8.1.0 (includes the change of the symbol style format in ol/layer/WebGLPointsLayer)
+        - olcs: 2.15.0 to 2.16.0
+        - proj4: 2.9.0 to 2.9.1
+    - devDependencies:
+        - @babel/core: 7.22.9 to 7.23.2
+        - @babel/plugin-transform-modules-commonjs: 7.22.5 to 7.23.2
+        - @parcel/transformer-sass: 2.9.3 to 2.10.0
+        - @swc/jest: 0.2.27 to 0.2.29
+        - eslint: 8.46.0 to 8.52.0
+        - jest: 29.6.2 to 29.7.0
+        - jest-environment-jsdom: 29.6.2 to 29.7.0
+        - parcel: 2.9.3 to 2.10.0
+        - sass: 1.64.2 to 1.69.4
+- Revert Cesium.Cesium3DTileset.fromUrl(url, options) adaptions in tileset.js for Cesium v1.107 deprecated warnings
+
 ## Fixed
+- styleList: styles of type oaf are now also added to the stylelist
+- Issue Masterportal #1052 VectorStyle: path to an icon in the map or in the legend in style.json may be an icon name, a relative path to icon, a complete url or an svg.
+
+---
+
+### 2.28.0 - 2023-09-27
+## Added
+- GfiAttributes: GFI Attributes can now be configured as HTML tags, e.g <a>, <img> or <iframe>
+
+## Changed
+- The following packages have been updated:
+    - dependencies:
+        - ol: 7.5.1 to 7.5.2 (This version fix a bug for vectorTiles with declutter: true)
+## Fixed
+- Issue Masterportal #1067 VectorStyle: if there is a ? in the services URL, no further one is added
+- Cesium tileset: set visibility and set opacity was fixed.
+- Webgl: set default style for feature and fix the opacity problem
+
+---
+
+### 2.27.0 - 2023-08-31
+## Changed
+- VectorStyle: 'initializeStyleList' is asynchron, waits for loading finished and returns the loaded styles.
 
 ---
 
@@ -31,7 +86,6 @@
 ---
 
 ## 2.25.0 - 2023-08-21
-
 ### Changed
 - WebGL: method "afterLoading" catches MultiPoint geometries and parses them to a single point feature for proper rendering
 - WebGL Render-Pipeline for VectorLayer of type VectorTile can be called using {"renderer": "webgl"} in config.json.

package/example/config/portal.json

@@ -56,30 +56,11 @@
       "renderer": "webgl",
       "hitTolerance": 20,
       "isPointLayer": true,
-      "style": {
-          "symbol": {
-              "symbolType": "circle",
-              "size": [
-                  "interpolate",
-                  ["linear"],
-                  ["get", "Total_votes"],
-                  0,
-                  6,
-                  18,
-                  24
-              ],
-              "color": [
-                  "interpolate",
-                  ["linear"],
-                  ["get", "compound"],
-                  -1,
-                  [240, 40, 30],
-                  1,
-                  [0, 200, 60]
-              ],
-              "opacity": 0.8,
-              "rotateWithView": true
-          }
+      "style":{
+          "circle-radius": [ "interpolate", ["linear"], ["get", "Total_votes"],  0, 3, 18, 12 ],
+          "circle-fill-color": [ "interpolate", ["linear"], ["get", "compound"], -1, [240, 40, 30], 1, [0, 200, 60] ],
+          "circle-rotate-with-view": true,
+          "circle-opacity": 0.8
       }
     }
   ],

package/example/config/services.json

@@ -32,7 +32,7 @@
     "id": "2001",
     "typ": "GeoJSON",
     "name": "Landesgrenze Hamburg",
-    "url": "https://geoportal-hamburg.de/lgv-config/landesgrenze_hh.json"
+    "url": "https://geodienste.hamburg.de/lgv-config/landesgrenze_hh.json"
   },
   {
     "id": "3001",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.27.0",
+  "version": "2.29.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {
@@ -19,34 +19,41 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "core-js": "^3.32.0",
-    "dayjs": "^1.11.9",
-    "ol": "7.5.1",
-    "olcs": "^2.15.0",
-    "proj4": "^2.9.0",
+    "core-js": "^3.33.1",
+    "dayjs": "^1.11.10",
+    "ol": "8.1.0",
+    "ol-mapbox-style": "12.0.0",
+    "olcs": "2.16.0",
+    "proj4": "^2.9.1",
     "xml2js": "^0.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
-    "@parcel/transformer-sass": "^2.9.3",
-    "@swc/jest": "^0.2.27",
+    "@babel/core": "^7.23.2",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.0",
+    "@parcel/transformer-sass": "^2.10.0",
+    "@swc/jest": "^0.2.29",
+    "assert": "^2.1.0",
+    "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
     "canvas": "^2.11.2",
-    "eslint": "^8.46.0",
+    "eslint": "^8.52.0",
     "events": "^3.3.0",
+    "https-browserify": "^1.0.0",
     "husky": "^8.0.3",
-    "jest": "^29.6.2",
+    "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.6.2",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "jsdoc": "^4.0.2",
-    "parcel": "^2.9.3",
+    "parcel": "^2.10.0",
     "process": "^0.11.10",
-    "sass": "^1.64.2",
+    "sass": "^1.69.4",
     "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
     "timers-browserify": "^2.0.12",
-    "use-resize-observer": "^9.1.0"
+    "url": "^0.11.3",
+    "use-resize-observer": "^9.1.0",
+    "util": "^0.12.5"
   },
   "peerDependencies": {
     "@cesium/engine": "^2.4.1"

package/src/layer/tileset.js

@@ -13,8 +13,8 @@ function createTileSet (rawLayer) {
     if (rawLayer.cesium3DTilesetOptions) {
         Object.assign(options, rawLayer.cesium3DTilesetOptions);
     }
-
-    return Promise.resolve(Cesium.Cesium3DTileset.fromUrl(url, options));
+    options.url = url;
+    return new Cesium.Cesium3DTileset(options);
 }
 
 /**
@@ -33,13 +33,8 @@ export default function Tileset (rawLayer) {
         typ: rawLayer.typ
     };
     if (Cesium) {
-        this.tileset = Promise.resolve(createTileSet(rawLayer));
-        this.tileset.then(function (tileset) {
-            if (tileset) {
-                tileset.layerReferenceId = rawLayer.id;
-            }
-        });
-
+        this.tileset = createTileSet(rawLayer);
+        this.tileset.layerReferenceId = rawLayer.id;
     }
 }
 
@@ -76,15 +71,10 @@ Tileset.prototype.setVisible = function (value, map) {
     if (map && typeof map.getCesiumScene === "function") {
         if (value) {
             if (!map.getCesiumScene().primitives.contains(this.tileset)) {
-                this.tileset.then(function (tileset) {
-                    map.getCesiumScene().primitives.add(tileset);
-                });
+                map.getCesiumScene().primitives.add(this.tileset);
             }
-            this.tileset.show = true;
-        }
-        else {
-            this.tileset.show = false;
         }
+        this.tileset.show = value;
     }
 };
 

package/src/lib/attributeMapper.js

@@ -118,6 +118,29 @@ function getValueFromCondition (key, condition, properties) {
 
 }
 
+/**
+ * Maps the feature properties by the given object. if the value is the wildcard '%value%' then the prepared value is taken.
+ * @param {HTML} htmltag The html tag.
+ * @param {Object} properties The properties for the htmltag.
+ * @param {String} preparedValue The prepared value.
+ * @returns {HTML} The html tag with mapped properties.
+ */
+function addPropertiesToHtmlTag (htmltag, properties, preparedValue) {
+    const htmltagWithproperties = htmltag;
+
+    if (properties) {
+        Object.keys(properties).forEach(prop => {
+            if (properties[prop] === "%value%") {
+                htmltagWithproperties.setAttribute(prop, preparedValue);
+            }
+            else {
+                htmltagWithproperties.setAttribute(prop, properties[prop]);
+            }
+        });
+    }
+    return htmltagWithproperties;
+}
+
 /**
  * Derives the gfi value if the value is an object.
  * @param {*} key Key of Attribute.
@@ -127,10 +150,12 @@ function getValueFromCondition (key, condition, properties) {
  */
 function prepareValueFromObject (key, mappingObj, properties) {
     const type = mappingObj?.type ? mappingObj.type : "string",
-        condition = mappingObj?.condition ? mappingObj.condition : null;
+        condition = mappingObj?.condition ? mappingObj.condition : null,
+        serializer = new XMLSerializer();
     let preparedValue = prepareValue(properties, key),
         format = mappingObj?.format ? mappingObj.format : "YYYY-MM-DDTHH:mm:ss.SSSZ",
-        date;
+        date,
+        htmltag;
 
     if (condition) {
         preparedValue = getValueFromCondition(key, condition, properties);
@@ -172,6 +197,32 @@ function prepareValueFromObject (key, mappingObj, properties) {
             preparedValue = getBooleanValue(preparedValue, format);
             break;
         }
+        case "html": {
+            // create tag
+            if (mappingObj?.html?.tag) {
+                htmltag = document.createElement(mappingObj?.html?.tag);
+            }
+            // create innerHTML
+            if (mappingObj?.html?.innerHTML === "%value%") {
+                htmltag.innerHTML = preparedValue;
+            }
+            else if (mappingObj?.html?.innerHTML) {
+                htmltag.innerHTML = mappingObj?.html?.innerHTML;
+            }
+
+
+            if (htmltag) {
+                if (mappingObj?.html?.properties) {
+                    htmltag = addPropertiesToHtmlTag(htmltag, mappingObj?.html?.properties, preparedValue);
+                }
+                preparedValue = serializer.serializeToString(htmltag);
+                // remove xmlns
+                preparedValue = preparedValue.replace(/ xmlns="(.*?)"/g, "");
+
+            }
+
+            break;
+        }
         // default equals to mappingObj.type === "string"
         default: {
             preparedValue = String(preparedValue);

package/src/maps/olcs/3dUtils/wmsRasterSynchronizer.js

@@ -6,8 +6,8 @@ import {getUid} from "olcs/util.js";
 import TileWMS from "ol/source/TileWMS.js";
 import ImageWMS from "ol/source/ImageWMS.js";
 import WMTS from "ol/source/WMTS.js";
-import olcsAbstractSynchronizer from "olcs/AbstractSynchronizer.ts";
-import {extentToRectangle, tileLayerToImageryLayer, updateCesiumLayerProperties} from "olcs/core.ts";
+import olcsAbstractSynchronizer from "olcs/AbstractSynchronizer.js";
+import {extentToRectangle, tileLayerToImageryLayer, updateCesiumLayerProperties} from "olcs/core.js";
 import {Tile, Image as ImageLayer} from "ol/layer.js";
 import {stableSort} from "ol/array.js";
 import {getBottomLeft, getBottomRight, getTopRight, getTopLeft} from "ol/extent.js";

package/src/maps/olcs/olcsMap.js

@@ -1,6 +1,6 @@
-import OLCesium from "olcs/OLCesium.ts";
+import OLCesium from "olcs/OLCesium.js";
 import {transform, get} from "ol/proj.js";
-import VectorSynchronizer from "olcs/VectorSynchronizer.ts";
+import VectorSynchronizer from "olcs/VectorSynchronizer.js";
 
 import FixedOverlaySynchronizer from "./3dUtils/fixedOverlaySynchronizer.js";
 import WMSRasterSynchronizer from "./3dUtils/wmsRasterSynchronizer.js";

package/src/renderer/webgl.js

@@ -14,26 +14,29 @@ import {packColor, parseLiteralStyle} from "ol/webgl/styleparser.js";
  * @see https://openlayers.org/en/latest/examples/webgl-points-layer.html
  * @private
  */
-const defaultStyle = {
-        symbol: {
-            symbolType: "circle",
-            size: 20,
-            color: "#006688",
-            rotateWithView: false,
-            offset: [0, 0],
-            opacity: 0.6
-        }
+const defaultPointStyle = {
+        "circle-radius": 10,
+        "circle-fill-color": "#006688",
+        "circle-rotate-with-view": false,
+        "circle-displacement": [0, 0],
+        "circle-opacity": 0.6
+    },
+
+    defaultPolygonStyle = {
+        fillColor: "#006688",
+        strokeColor: "#006688",
+        strokeWidth: 1,
+        opacity: 1
     },
 
     /** @type {import('ol/style/literal.js').LiteralStyle} */
-    style = {
+    style = Object.assign({
         "stroke-color": ["get", "strokeColor"],
         "stroke-width": ["get", "strokeWidth", "number"],
         "fill-color": ["get", "fillColor"],
         "opacity": ["get", "opacity", "number"],
-        "size": ["get", "circleSize", "number"],
-        symbol: defaultStyle.symbol
-    };
+        "size": ["get", "circleSize", "number"]
+    }, defaultPointStyle);
 
 /**
  *  Creates a vector layer with custom renderer.
@@ -165,29 +168,36 @@ export function createVectorTileLayerRenderer () {
  * @returns {void}
  */
 export function formatFeatureStyles (feature, styleObject) {
-    if (!styleObject) {
-        return;
-    }
+    let rule;
 
-    // extract first matching rule only
-    const rule = getRulesForFeature(styleObject, feature)[0];
+    if (styleObject) {
+        // extract first matching rule only
+        rule = getRulesForFeature(styleObject, feature)[0];
+    }
 
-    // undefined if no match
-    feature.styleRule = rule;
+    if (rule?.style) {
+        feature.styleRule = rule;
 
-    if (rule && rule.style) {
-        const polygonFillColor = returnColor(rule.style.polygonFillColor, "hex"),
+        const polygonFillColor = returnColor(rule.style.polygonFillColor, "rgba"),
             circleFillColor = returnColor(rule.style.circleFillColor, "hex"),
+
             fillColor = polygonFillColor ? polygonFillColor : circleFillColor,
             strokeColor = returnColor(rule.style.polygonStrokeColor || rule.style.lineStrokeColor, "hex"),
             strokeWidth = rule.style.polygonStrokeWidth || rule.style.lineStrokeWidth,
             size = rule.style.circleRadius;
 
-        feature.set("fillColor", fillColor ? fillColor : "#006688");
-        feature.set("strokeColor", strokeColor ? strokeColor : "#006688");
-        feature.set("strokeWidth", strokeWidth ? strokeWidth : 1);
-        feature.set("opacity", fillColor ? (rule.style.polygonFillColor || rule.style.circleFillColor)[3] : 1);
-        feature.set("circleSize", size ? size : 20);
+        feature.set("fillColor", fillColor || defaultPolygonStyle.fillColor);
+        feature.set("strokeColor", strokeColor || defaultPolygonStyle.strokeColor);
+        feature.set("strokeWidth", strokeWidth || defaultPolygonStyle.strokeWidth);
+        feature.set("opacity", fillColor ? (rule.style.polygonFillColor || rule.style.circleFillColor)[3] : defaultPolygonStyle.opacity);
+        feature.set("circleSize", size || defaultPointStyle["circle-radius"] * 2);
+    }
+    else {
+        feature.set("fillColor", defaultPolygonStyle.fillColor);
+        feature.set("strokeColor", defaultPolygonStyle.strokeColor);
+        feature.set("strokeWidth", defaultPolygonStyle.strokeWidth);
+        feature.set("opacity", defaultPolygonStyle.opacity);
+        feature.set("circleSize", defaultPointStyle["circle-radius"] * 2);
     }
 }
 
@@ -217,7 +227,7 @@ export function formatFeatureData (feature, excludeTypes = ["boolean"]) {
             valueIsTrue = typeof feature.get(key) === "string" && feature.get(key).toLowerCase() === "true" ? true : undefined,
             valueIsFalse = typeof feature.get(key) === "string" && feature.get(key).toLowerCase() === "false" ? false : undefined;
 
-        if (!isNaN(parseFloat(feature.get(key))) && !excludeTypes.includes("number")) {
+        if (!isNaN(parseFloat(feature.get(key))) && !excludeTypes?.includes("number")) {
             feature.set(key, valueAsNumber);
         }
         if (valueIsTrue === true && !excludeTypes.includes("boolean")) {
@@ -288,14 +298,14 @@ export function createLayer (attrs) {
      * If the layer consists only of points, use WebGLPointsLayer
      * For advanced styling options
      * @see https://openlayers.org/en/latest/examples/webgl-points-layer.html
-    */
+     */
     if (attrs.isPointLayer) {
         /**
          * @deprecated
          * @todo will be replaced in the next OL release and incorporated in the WebGLVectorLayerRenderer
          */
         return new LayerConstructor({
-            style: attrs.style || defaultStyle,
+            style: attrs.style || defaultPointStyle,
             disableHitDetection: false,
             ...options,
             isPointLayer: true
@@ -323,3 +333,12 @@ export function createLayer (attrs) {
         isPointLayer: false
     });
 }
+
+export default {
+    afterLoading,
+    createLayer,
+    createVectorLayerRenderer,
+    formatFeatureData,
+    formatFeatureGeometry,
+    formatFeatureStyles
+};

package/src/vectorStyle/lib/colorConvertions.js

@@ -90,6 +90,9 @@ export function returnColor (color, dest) {
     else if (src === "rgb" && dest === "hex") {
         newColor = rgbToHex(newColor[0], newColor[1], newColor[2]);
     }
+    else if (src === "rgb" && dest === "rgba") {
+        newColor = "rgba(" + newColor[0] + ", " + newColor[1] + ", " + newColor[2] + ", " + newColor[3] + ")";
+    }
 
     newColor = dest === "rgb" ? normalizeRgbColor(newColor) : newColor;
 

package/src/vectorStyle/lib/getGeometryTypeFromService.js

@@ -99,7 +99,14 @@ function getGeometryTypeFromWFS (rules, wfsURL, version, featureType, styleGeome
         "VERSION": version,
         "REQUEST": "DescribeFeatureType"
     };
-    let url = wfsURL + "?";
+    let url = wfsURL;
+
+    if (url && url.includes("?")) {
+        url += "&";
+    }
+    else {
+        url += "?";
+    }
 
     Object.keys(params).forEach(key => {
         url += key + "=" + params[key] + "&";

package/src/vectorStyle/styleList.js

@@ -30,7 +30,7 @@ function getStyleIdsFromLayers () {
 
     if (configuredLayers) {
         configuredLayers.forEach(layer => {
-            if (layer.typ === "WFS" || layer.typ === "GeoJSON" || layer.typ === "SensorThings" || layer.typ === "TileSet3D") {
+            if (layer.typ === "WFS" || layer.typ === "GeoJSON" || layer.typ === "SensorThings" || layer.typ === "TileSet3D" || layer.typ === "OAF") {
                 if (layer?.styleId) {
                     styleIds.push(layer.styleId);
                 }

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

@@ -1,6 +1,5 @@
 import {Style, Icon} from "ol/style.js";
 import {prepareValue, isObjectPath} from "../../../lib/attributeMapper";
-import PointStyle from "./stylePoint";
 
 /**
 * Returns the rotation value and its corresponding value according to style.json.
@@ -33,21 +32,23 @@ export function getRotationValue (rotation, featureValues) {
 */
 export function createIconStyle (attributes, feature, isClustered) {
     const showCluster = isClustered && feature.get("features")?.length > 1,
-
-        height = showCluster ? attributes.clusterImageHeight : attributes.imageHeight,
         imageName = showCluster ? attributes.clusterImageName : attributes.imageName,
         imageOffsetX = showCluster ? attributes.clusterImageOffsetY : attributes.imageOffsetX,
         imageOffsetY = showCluster ? attributes.clusterImageOffsetX : attributes.imageOffsetY,
         scale = showCluster ? attributes.clusterImageScale : attributes.imageScale,
-        src = imageName.indexOf("/") === -1 ? attributes.imagePath + imageName : imageName,
-        width = showCluster ? attributes.clusterImageWidth : attributes.imageWidth,
-        iconOptions = {
-            crossOrigin: "anonymous",
-            src: src.startsWith("<svg") ? "data:image/svg+xml;charset=utf-8," + encodeURIComponent(src) : src,
-            scale,
-            anchor: [parseFloat(imageOffsetX), parseFloat(imageOffsetY)],
-            imgSize: src.indexOf(".svg") > -1 ? [width, height] : ""
-        };
+        wfsImgPath = attributes.imagePath;
+    let iconOptions = {},
+        src = imageName;
+
+    if (!imageName.startsWith("https:") && !imageName.startsWith("<svg")) {
+        src = wfsImgPath + imageName;
+    }
+    iconOptions = {
+        crossOrigin: "anonymous",
+        src: src.startsWith("<svg") ? "data:image/svg+xml;charset=utf-8," + encodeURIComponent(src) : src,
+        scale,
+        anchor: [parseFloat(imageOffsetX), parseFloat(imageOffsetY)]
+    };
 
     if (!showCluster) {
         iconOptions.anchorXUnits = attributes.imageOffsetXUnit;
@@ -67,13 +68,10 @@ export function createIconStyle (attributes, feature, isClustered) {
  * @return {ol.Style} style
  */
 export function createSVGStyle (svgPath) {
-    const size = PointStyle.prototype.getSize();
-
     return new Style({
         image: new Icon({
             crossOrigin: "anonymous",
-            src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgPath),
-            imgSize: [size, size]
+            src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgPath)
         })
     });
 }

package/test/layer/tileset.test.js

@@ -6,12 +6,11 @@ describe("tileset.js", function () {
 
     beforeEach(() => {
         global.Cesium = {};
-        global.Cesium.Cesium3DTileset = {};
-        global.Cesium.Cesium3DTileset.fromUrl = jest.fn();
+        global.Cesium.Cesium3DTileset = jest.fn();
         global.Cesium.Cesium3DTileStyle = jest.fn(color => color);
         attr = {
             id: "4002",
-            name: "Gebäude LoD2",
+            name: "Gebäude LoD2",
             url: "https://geoportal-hamburg.de/gdi3d/datasource-data/LoD2",
             typ: "TileSet3D",
             cesium3DTilesetOptions: {
@@ -29,9 +28,7 @@ describe("tileset.js", function () {
                 };
             }
         };
-        cesium3DTilesetSpy = jest.spyOn(global.Cesium.Cesium3DTileset, "fromUrl").mockImplementation(() => {
-            return Promise.resolve({});
-        });
+        cesium3DTilesetSpy = jest.spyOn(global.Cesium, "Cesium3DTileset");
         console.warn = jest.fn();
     });
 
@@ -41,23 +38,21 @@ describe("tileset.js", function () {
         console.warn = consoleWarn;
     });
 
-    async function checkAttributes (layer, attrs) {
-        const tileset = await layer.tileset;
-
+    function checkAttributes (layer, attrs) {
         expect(layer.get("name")).toEqual(attrs.name);
         expect(layer.get("typ")).toEqual(attrs.typ);
         expect(layer.get("id")).toEqual(attrs.id);
-        expect(tileset.layerReferenceId).toEqual(attrs.id);
+        expect(layer.tileset.layerReferenceId).toEqual(attrs.id);
     }
 
     describe("createLayer", function () {
         it("creates tileset layer without map", function () {
             const layer = new Tileset(attr);
 
+            checkAttributes(layer, attr);
             expect(layer.tileSet).toEqual(undefined);
             expect(layer.tileset.show).toEqual(undefined);
             expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
-            checkAttributes(layer, attr);
         });
         it("creates 2 tileset layers  with map and checks attributes", function () {
             const attr2 = {

package/test/lib/attributeMapper.test.js

@@ -21,7 +21,8 @@ const props = {
                 }
             ]
         }
-    ]
+    ],
+    random_url: "http://random.url.de"
 };
 
 describe("src/utils/attributeMapper.js", () => {
@@ -272,6 +273,168 @@ describe("src/utils/attributeMapper.js", () => {
                 int: "12345"
             });
         });
+        it("should map object with mapping object and type:html", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "http://random.url.de"
+            });
+        });
+        it("should map object with mapping object and type:html and tag a", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "a",
+                        properties: {
+                            href: "%value%"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<a href=\"http://random.url.de\"></a>"
+            });
+        });
+        it("should map object with mapping object and type:html and tag a", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "a",
+                        innerHTML: "%value%",
+                        properties: {
+                            href: "%value%"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<a href=\"http://random.url.de\">http://random.url.de</a>"
+            });
+        });
+        it("should map object with mapping object and type:html and tag a without innerHTML and properties", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "a"
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<a></a>"
+            });
+        });
+        it("should map object with mapping object and type:html and tag a and innerHTML", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "a",
+                        innerHTML: "myURL",
+                        properties: {
+                            href: "%value%"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<a href=\"http://random.url.de\">myURL</a>"
+            });
+        });
+        it("should map object with mapping object and type:html and tag a and properties", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "a",
+                        innerHTML: "myURL",
+                        properties: {
+                            href: "%value%",
+                            target: "_blank"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<a href=\"http://random.url.de\" target=\"_blank\">myURL</a>"
+            });
+        });
+        it("should map object with mapping object and type:html and tag a and properties", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "a",
+                        innerHTML: "%value%",
+                        properties: {
+                            href: "%value%",
+                            target: "_blank"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<a href=\"http://random.url.de\" target=\"_blank\">http://random.url.de</a>"
+            });
+        });
+        it("should map object with mapping object and type:html and tag img and properties", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "img",
+                        properties: {
+                            src: "%value%",
+                            style: "width:150px"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<img src=\"http://random.url.de\" style=\"width:150px\" />"
+            });
+        });
+        it("should map object with mapping object and type:html and tag iframe and properties", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "iframe",
+                        properties: {
+                            src: "%value%",
+                            foo: "bar",
+                            bar: "foo"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<iframe src=\"http://random.url.de\" foo=\"bar\" bar=\"foo\"></iframe>"
+            });
+        });
     });
     describe("isObjectPath", () => {
         it("should return true for \"@foobar\"", () => {

package/test/renderer/webgl.test.js

@@ -18,7 +18,7 @@ jest.mock("../../src/vectorStyle/styleList.js", () => {
 });
 
 describe("webgl.js", () => {
-    let layerParams, layerParamsVectorTile, rawLayer, rawLayerVectorTile, styleRule, styleObject;
+    let layerParams, layerParamsVectorTile, rawLayer, rawLayerVectorTile, styleRule, styleObject, defaultStyle;
 
     beforeEach(() => {
         layerParams = {
@@ -68,6 +68,13 @@ describe("webgl.js", () => {
         styleObject = {
             rules: [styleRule]
         };
+        defaultStyle = {
+            fillColor: "#006688",
+            strokeColor: "#006688",
+            strokeWidth: 1,
+            opacity: 1,
+            size: 20
+        };
     });
 
     describe("createLayer", () => {
@@ -156,7 +163,7 @@ describe("webgl.js", () => {
             it("set the necessary style attributes on the feature for literal style syntax", () => {
                 $feature = feature.clone();
                 webgl.formatFeatureStyles($feature, styleObject);
-                expect($feature.get("fillColor")).toEqual(returnColor(styleRule.style.polygonFillColor, "hex"));
+                expect($feature.get("fillColor")).toEqual(returnColor(styleRule.style.polygonFillColor, "rgba"));
                 expect($feature.get("strokeColor")).toEqual(returnColor(styleRule.style.polygonStrokeColor, "hex"));
                 expect($feature.get("strokeWidth")).toEqual(styleRule.style.polygonStrokeWidth);
                 expect($feature.get("opacity")).toEqual(styleRule.style.polygonFillColor[3]);
@@ -173,6 +180,19 @@ describe("webgl.js", () => {
                 expect($feature.get("opacity")).toEqual(styleRule.style.circleFillColor[3]);
                 expect($feature.get("circleSize")).toEqual(styleRule.style.circleRadius);
             });
+            it("set the necessary style attributes on the feature with default style", () => {
+                $feature = feature.clone();
+                styleRule = null;
+                styleObject = {
+                    rules: [styleRule]
+                };
+                webgl.formatFeatureStyles($feature, styleObject);
+                expect($feature.get("fillColor")).toEqual(defaultStyle.fillColor);
+                expect($feature.get("strokeColor")).toEqual(defaultStyle.strokeColor);
+                expect($feature.get("strokeWidth")).toEqual(defaultStyle.strokeWidth);
+                expect($feature.get("opacity")).toEqual(defaultStyle.opacity);
+                expect($feature.get("circleSize")).toEqual(defaultStyle.size);
+            });
         });
     });
-});
+});

package/test/vectorStyle/lib/colorConvertions.test.js

@@ -1,4 +1,10 @@
-import {normalizeRgbColor, componentToHex, rgbToHex, hexToRgb} from "../../../src/vectorStyle/lib/colorConvertions";
+import {
+    normalizeRgbColor,
+    componentToHex,
+    rgbToHex,
+    hexToRgb,
+    returnColor
+} from "../../../src/vectorStyle/lib/colorConvertions";
 
 describe("normalizeRgbColor", function () {
     it("should be extend the given array with length 3 by value 1", function () {
@@ -39,4 +45,26 @@ describe("hexToRgb", function () {
     it("should return null", function () {
         expect(hexToRgb("")).toEqual(null);
     });
-});
+});
+
+describe("returnColor", function () {
+    it("should return the parsed rgb value", function () {
+        expect(returnColor([255, 0, 0])).toEqual([255, 0, 0]);
+    });
+    it("should return the parsed rgb value with hex format", function () {
+        expect(returnColor([255, 0, 0, 0.5], "hex")).toEqual("#ff0000");
+    });
+    it("should return the parsed rgb value with rgba format", function () {
+        expect(returnColor([255, 0, 0, 0.5], "rgba")).toEqual("rgba(255, 0, 0, 0.5)");
+    });
+
+    it("should return the parsed rgb value with hex format", function () {
+        expect(returnColor("#ff0000")).toEqual("#ff0000");
+    });
+    it("should return the parsed rgb value with array in string", function () {
+        expect(returnColor("[255, 0, 0, 0.5]")).toEqual(["255", "0", "0", "0.5"]);
+    });
+    it("should return the parsed rgb value with array in string and hex format as destination format", function () {
+        expect(returnColor("[255, 0, 0, 0.5]", "hex")).toEqual("#ff0000");
+    });
+});

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

@@ -34,7 +34,7 @@ describe("stylePointIcon.js", () => {
             clusterAttributes = {
                 clusterImageName: "bild.svg",
                 clusterImageWidth: 10,
-                clusterImagePath: "/imagePath",
+                imagePath: "/imagePath",
                 clusterImageHeight: 20,
                 clusterImageScale: 1
             },
@@ -61,12 +61,87 @@ describe("stylePointIcon.js", () => {
                 }
             };
 
-        it("should create icon point style", () => {
+        it("should create icon point style with imageName without path", () => {
             expect(stylePointIcon.createIconStyle(attributes, feature, false)).toBeInstanceOf(Style);
             expect(stylePointIcon.createIconStyle(clusterAttributes, clusteredFeature, true)).toBeInstanceOf(Style);
             expect(stylePointIcon.createIconStyle(attributes, feature, false).getImage()).toBeInstanceOf(Icon);
             expect(stylePointIcon.createIconStyle(attributes, feature, false).getImage().getScale()).toEqual(1);
         });
+        it("should create icon point style with pure imageName and wfsImgPath exists", () => {
+            let style = null;
+
+            attributes.imageName = "Rathaus.svg";
+            attributes.imagePath = "./geodaten/icons/";
+            style = stylePointIcon.createIconStyle(attributes, feature, false);
+
+            expect(style).toBeInstanceOf(Style);
+            expect(style.getImage()).toBeInstanceOf(Icon);
+            expect(style.getImage().getSrc()).toEqual(attributes.imagePath + attributes.imageName);
+        });
+        it("should create clustered icon point style with pure imageName and wfsImgPath exists", () => {
+            let style = null;
+
+            clusterAttributes.clusterImageName = "Rathaus.svg";
+            clusterAttributes.imagePath = "./geodaten/icons/";
+            style = stylePointIcon.createIconStyle(clusterAttributes, clusteredFeature, true);
+
+            expect(style).toBeInstanceOf(Style);
+            expect(style.getImage()).toBeInstanceOf(Icon);
+            expect(style.getImage().getSrc()).toEqual(clusterAttributes.imagePath + clusterAttributes.clusterImageName);
+        });
+        it("should create icon point style with path in imageName and wfsImgPath exists", () => {
+            let style = null;
+
+            attributes.imageName = "/svg/poi/Rathaus.svg";
+            attributes.imagePath = "https://localhost:9001/portal/basic/geodaten/icons/";
+            style = stylePointIcon.createIconStyle(attributes, feature, false);
+
+            expect(style).toBeInstanceOf(Style);
+            expect(style.getImage()).toBeInstanceOf(Icon);
+            expect(style.getImage().getSrc()).toEqual(attributes.imagePath + attributes.imageName);
+        });
+        it("should create clustered icon point style with path in imageName and wfsImgPath exists", () => {
+            let style = null;
+
+            clusterAttributes.clusterImageName = "/svg/poi/Rathaus.svg";
+            clusterAttributes.imagePath = "https://localhost:9001/portal/basic/geodaten/icons/";
+            style = stylePointIcon.createIconStyle(clusterAttributes, clusteredFeature, true);
+
+            expect(style).toBeInstanceOf(Style);
+            expect(style.getImage()).toBeInstanceOf(Icon);
+            expect(style.getImage().getSrc()).toEqual(clusterAttributes.imagePath + clusterAttributes.clusterImageName);
+        });
+        it("should create icon point style with whole path in imageName and wfsImgPath is empty", () => {
+            let style = null;
+
+            attributes.imageName = "https://localhost:9001/portal/basic/geodaten/icons/svg/poi/Rathaus.svg";
+            style = stylePointIcon.createIconStyle(attributes, feature, false);
+
+            expect(style).toBeInstanceOf(Style);
+            expect(style.getImage()).toBeInstanceOf(Icon);
+            expect(style.getImage().getSrc()).toEqual(attributes.imageName);
+        });
+        it("should create clustered icon point style with whole path in imageName and wfsImgPath is empty", () => {
+            let style = null;
+
+            clusterAttributes.clusterImageName = "https://localhost:9001/portal/basic/geodaten/icons/svg/poi/Rathaus.svg";
+            clusterAttributes.imagePath = "";
+            style = stylePointIcon.createIconStyle(clusterAttributes, clusteredFeature, true);
+
+            expect(style).toBeInstanceOf(Style);
+            expect(style.getImage()).toBeInstanceOf(Icon);
+            expect(style.getImage().getSrc()).toEqual(clusterAttributes.clusterImageName);
+        });
+        it("should create icon point style with svg", () => {
+            let style = null;
+
+            attributes.imageName = "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#E10019' class='bi bi-geo-fill' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z'/></svg>";
+            style = stylePointIcon.createIconStyle(attributes, feature, false);
+
+            expect(style).toBeInstanceOf(Style);
+            expect(style.getImage()).toBeInstanceOf(Icon);
+            expect(style.getImage().getSrc()).toEqual("data:image/svg+xml;charset=utf-8," + encodeURIComponent(attributes.imageName));
+        });
         it("should create cluster icon point style", () => {
             expect(stylePointIcon.createIconStyle(clusterAttributes, clusteredFeature, true)).toBeInstanceOf(Style);
             expect(stylePointIcon.createIconStyle(clusterAttributes, clusteredFeature, true).getImage()).toBeInstanceOf(Icon);