@masterportal/masterportalapi 2.28.0 → 2.29.0

package/CHANGELOG.md

@@ -16,6 +16,46 @@
 
 ---
 
+### 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
+- 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>

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.28.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.2",
-    "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;
     }
 }
 
@@ -63,11 +58,7 @@ Tileset.prototype.setOpacity = function (opacity) {
         color = splitValues.toString();
     }
 
-    this.tileset.then(function (tileset) {
-        if (tileset) {
-            tileset.style = new Cesium.Cesium3DTileStyle({color});
-        }
-    });
+    this.tileset.style = new Cesium.Cesium3DTileStyle({color});
 };
 
 /**
@@ -80,16 +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.then(function (tileset) {
-            if (tileset) {
-                tileset.show = value;
-            }
-        });
+        this.tileset.show = value;
     }
 };
 

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

@@ -15,14 +15,11 @@ import {packColor, parseLiteralStyle} from "ol/webgl/styleparser.js";
  * @private
  */
 const defaultPointStyle = {
-        symbol: {
-            symbolType: "circle",
-            size: 20,
-            color: "#006688",
-            rotateWithView: false,
-            offset: [0, 0],
-            opacity: 0.6
-        }
+        "circle-radius": 10,
+        "circle-fill-color": "#006688",
+        "circle-rotate-with-view": false,
+        "circle-displacement": [0, 0],
+        "circle-opacity": 0.6
     },
 
     defaultPolygonStyle = {
@@ -33,14 +30,13 @@ const defaultPointStyle = {
     },
 
     /** @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: defaultPointStyle.symbol
-    };
+        "size": ["get", "circleSize", "number"]
+    }, defaultPointStyle);
 
 /**
  *  Creates a vector layer with custom renderer.
@@ -194,14 +190,14 @@ export function formatFeatureStyles (feature, styleObject) {
         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.symbol.size);
+        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.symbol.size);
+        feature.set("circleSize", defaultPointStyle["circle-radius"] * 2);
     }
 }
 

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 = {
@@ -75,62 +70,40 @@ describe("tileset.js", function () {
         });
     });
     describe("setOpacity", function () {
-        it("calls setOpacity sets opacity to terrain style", function (done) {
+        it("calls setOpacity sets opacity to terrain style", function () {
             const layer = new Tileset(attr, map);
 
             layer.setOpacity(0.5);
 
-            layer.tileset.then(function (tileset) {
-                if (tileset) {
-                    expect(tileset.style).toEqual({color: "rgba(255, 255, 255, 0.5)"});
-                    done();
-                }
-            });
+            expect(layer.tileset.style).toEqual({color: "rgba(255, 255, 255, 0.5)"});
         });
     });
     describe("setVisible", function () {
-        it("calls setVisible without map shall not fail", function (done) {
+        it("calls setVisible without map shall not fail", function () {
             const layer = new Tileset(attr, map);
 
             expect(layer.tileset.show).toEqual(undefined);
             layer.setVisible(true);
 
-            layer.tileset.then(function (tileset) {
-                if (tileset) {
-                    checkAttributes(layer, attr);
-                    expect(layer.tileset.show).toEqual(undefined);
-                    expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
-                    done();
-                }
-            });
+            checkAttributes(layer, attr);
+            expect(layer.tileset.show).toEqual(undefined);
+            expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
         });
-        it("sets the tileset layer visible", function (done) {
+        it("sets the tileset layer visible", function () {
             const layer = new Tileset(attr, map);
 
             layer.setVisible(true, map);
-
-            layer.tileset.then(function (tileset) {
-                if (tileset) {
-                    checkAttributes(layer, attr);
-                    expect(tileset.show).toEqual(true);
-                    expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
-                    done();
-                }
-            });
+            checkAttributes(layer, attr);
+            expect(layer.tileset.show).toEqual(true);
+            expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
         });
-        it("sets the tileset layer not visible", function (done) {
+        it("sets the tileset layer not visible", function () {
             const layer = new Tileset(attr, map);
 
             layer.setVisible(false, map);
-
-            layer.tileset.then(function (tileset) {
-                if (tileset) {
-                    checkAttributes(layer, attr);
-                    expect(tileset.show).toEqual(false);
-                    expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
-                    done();
-                }
-            });
+            checkAttributes(layer, attr);
+            expect(layer.tileset.show).toEqual(false);
+            expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
         });
     });
     describe("get", function () {

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);