@masterportal/masterportalapi 2.48.0 → 2.50.0

package/CHANGELOG.md

@@ -3,6 +3,56 @@
 
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
+## Unreleased - in development
+### __Breaking Changes__
+
+### Added
+
+### Changed
+
+### Deprecated
+
+### Removed
+
+### Fixed
+
+---
+
+## 2.50.0 - 2025-08-214
+
+### Added
+- vectorStyle: added function `initStyleAndAddToList` to styleList. Adds a style contained in style.json to list of styles.
+- A new parameter "doNotLoadInitially" for OAF layer so that the layer can be loaded without features, which is necessary for external filtering.
+
+### Changed
+- The following packages have been updated:
+    - dependencies:
+        - ol: 10.4.1 to 10.6.0
+
+### Fixed
+- WMTS-Layer: Fixed layers without capabilities.
+- WFTS-Layer: Ensured zIndex is applied correctly to layers using webgl renderer.
+
+---
+
+## 2.49.0 - 2025-04-29
+
+### Added
+- Add new parameters polygonStrokeDash, polygonStrokeDashOffset in styleObject of drawInteraction.
+- webgl: extended default style for points.
+
+### Changed
+- The following packages have been updated:
+    - dependencies:
+        - ol-mapbox-style: 12.4.0 to 12.5.0
+
+### Fixed
+- wms: Fix passing layerParams from layerBuilder.
+- wms-time: layers that are updated daily don't run into errors due to late promise-resolving anymore.
+- Issue #1386: handle label creation if values are empty.
+
+---
+
 ## 2.48.0 - 2025-04-01
 
 ### Fixed

package/babel.config.json

@@ -1,5 +1,5 @@
 {
-    "presets": [],
+  "presets": [],
     "plugins": [
         "@babel/plugin-transform-modules-commonjs"
     ]

package/bitbucket-pipelines.yml

@@ -0,0 +1,43 @@
+image: node:20.12.2
+
+clone:
+    depth: 5000       # include the last five hundred commits
+
+pipelines:
+    # Start pipeline with tag to build examples zips and copy them to the Bitbucket download folder
+    tags:
+        'v2.*.*':
+            -   step:
+                    name: deploy on openCode
+                    script:
+                        - echo 'deploy to opencode:'$BITBUCKET_TAG
+                        - git fetch --all --tags
+                        - git checkout tags/$BITBUCKET_TAG
+                        - git push https://$OpenCode_User:$OpenCode_Password@gitlab.opencode.de/geowerkstatt-hamburg/masterportalapi.git $BITBUCKET_TAG
+                        - git clone --single-branch --branch master https://geowerkstatt@bitbucket.org/geowerkstatt-hamburg/masterportalapi.git
+                        - cd masterportalapi
+                        - git push https://$OpenCode_User:$OpenCode_Password@gitlab.opencode.de/geowerkstatt-hamburg/masterportalapi.git -f
+    custom: # Pipelines that are triggered manually
+        npm audit:
+            -   step:
+                    name: npm audit (security)
+                    caches:
+                        - node
+                    script:
+                        - npm install
+                        - npm audit --json
+        deploy last tag on openCode:
+            - variables:
+                - name: BITBUCKET_TAG
+                  description: tag to publish docs for
+            -   step:
+                    name: deploy last tag on openCode
+                    script:
+                        - apt-get update && apt-get install -y curl wput jq
+                        - git fetch --all --tags
+                        - echo 'deply to opencode:'$BITBUCKET_TAG
+                        - git checkout tags/$BITBUCKET_TAG
+                        - git push https://$OpenCode_User:$OpenCode_Password@gitlab.opencode.de/geowerkstatt-hamburg/masterportalapi.git $BITBUCKET_TAG
+                        - git clone --single-branch --branch master https://geowerkstatt@bitbucket.org/geowerkstatt-hamburg/masterportalapi.git
+                        - cd masterportalapi
+                        - git push https://$OpenCode_User:$OpenCode_Password@gitlab.opencode.de/geowerkstatt-hamburg/masterportalapi.git -f

package/jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
     /** ol prints errors without HTMLCanvasElement being available in test environment */
     "setupFiles": ["jest-canvas-mock"],
     /** node_modules are usually ignored by babel-jest, but ol is published in ES6 */
-    "transformIgnorePatterns": ["/node_modules/(?!(ol|olcs|ol-mapbox-style|geotiff|quick-lru|color-space|color-rgba|color-parse|color-name|rbush|quickselect|earcut|pbf)/).*/"],
+    "transformIgnorePatterns": ["/node_modules/(?!(ol|olcs|ol-mapbox-style|mapbox-to-css-font|geotiff|quick-lru|color-space|color-rgba|color-parse|color-name|rbush|quickselect|earcut|pbf)/).*/"],
     /** only consider files in src/ for coverage */
     "collectCoverageFrom": ["src/**/*.js"],
     /** coverage reporters */
@@ -14,7 +14,8 @@ module.exports = {
     /** mapping svg to string representation since jest can't handle svg and mapping olcs paths*/
     "moduleNameMapper": {
         "marker.svg": "<rootDir>/public/stringMarker.js",
-        "olcs/lib/olcs/(.*)$": "<rootDir>/node_modules/olcs/lib/olcs/$1"
+        "olcs/lib/olcs/(.*)$": "<rootDir>/node_modules/olcs/lib/olcs/$1",
+        "ol-mapbox-style$": "<rootDir>/node_modules/ol-mapbox-style/src/$1"
     },
     "testEnvironment": "jsdom",
     "setupFilesAfterEnv": ["./jest.setup.js"],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.48.0",
+  "version": "2.50.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {
@@ -21,8 +21,8 @@
   "dependencies": {
     "core-js": "^3.33.1",
     "dayjs": "^1.11.10",
-    "ol": "^10.4.0",
-    "ol-mapbox-style": "12.4.0",
+    "ol": "^10.6.0",
+    "ol-mapbox-style": "12.5.0",
     "olcs": "^2.22.1",
     "proj4": "^2.10.0",
     "xml2js": "^0.6.2"
@@ -64,6 +64,7 @@
   },
   "homepage": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi#readme",
   "directories": {
+    "doc": "docs",
     "example": "example",
     "test": "test"
   },

package/publiccode.yml

@@ -0,0 +1,88 @@
+# This repository adheres to the publiccode.yml standard by including this
+# metadata file that makes public software easily discoverable.
+# More info at https://github.com/italia/publiccode.yml
+
+publiccodeYmlVersion: '0.3'
+categories:
+  - geographic-information-systems, api
+description:
+  de:
+    apiDocumentation: 'https://bitbucket.org/geowerkstatt-hamburg/masterportalapi/src/master/README.md'
+    documentation: 'https://www.masterportal.org/dokumentation'
+    features:
+      - OGC-konform
+      - Konfigurierbar
+      - OpenSource
+      - Adminfreundlich
+      - Modular
+    genericName: 'MasterportalAPI'
+    localisedName: MasterportalAPI
+    longDescription: |2
+       Die MasterportalAPI ist eine API zum Einbinden und Anzeigen von Karteninhalten auf Ihrer Webseite. Sie basiert auf OpenLayers und wurde um Funktionen erweitert, die die einfache Nutzung von Konfigurations- und Infrastrukturdateien des Masterportals, einer funktionsreichen Mapping-App der Geowerkstatt Hamburg, ermöglichen. Sie ermöglicht außerdem die Erstellung einer 3D-Karte mithilfe von OLCS und Cäsium. Weitere Informationen finden Sie auf masterportal.org. Die MasterportalAPI ist Open-Source-Software. Es ist unter der [++MIT-Lizenz++](https://bitbucket.org/geowerkstatt-hamburg/masterportalapi/src/master/License.txt) veröffentlicht.
+    shortDescription: 'Die MasterportalAPI ist eine auf OpenLayers basierende API zum Einbinden und Anzeigen von Karteninhalten auf Ihrer Webseite'
+developmentStatus: stable
+intendedAudience:
+  countries:
+    - de
+    - en
+    - es
+    - it
+    - pt
+    - ru
+    - tr
+    - ua
+    - nl
+  scope:
+    - welfare
+    - agriculture
+    - culture
+    - defence
+    - education
+    - emergency-services
+    - employment
+    - energy
+    - environment
+    - finance-and-economic-development
+    - foreign-affairs
+    - government
+    - healthcare
+    - infrastructures
+    - local-authorities
+    - manufacturing
+    - research
+    - justice
+    - science-and-technology
+    - security
+    - society
+    - sport
+    - tourism
+    - transportation
+landingURL: 'https://www.masterportal.org'
+legal:
+  license: MIT
+  mainCopyrightOwner: 'Freie und Hansestadt Hamburg, Landesbetrieb Geoinformation und Vermessung'
+  repoOwner: 'Freie und Hansestadt Hamburg, Landesbetrieb Geoinformation und Vermessung'
+localisation:
+  availableLanguages:
+    - de
+    - en
+  localisationReady: true
+logo: |-
+  https://www.masterportal.org/fileadmin/_processed_/7/d/csm_news_masterportal_ce24f3cc3d.jpg
+maintenance:
+  contacts:
+    - name: Betrieb Webanwendungen
+      affiliation:  Freie und Hansestadt Hamburg, Landesbetrieb Geoinformation und Vermessung
+  contractors:
+    - name: Landesbetrieb Geoinformation und Vermessung
+      until: '2025-12-01'
+      website: 'https://www.hamburg.de/bsw/landesbetrieb-geoinformation-und-vermessung/'
+  type: community
+name: Masterportal
+platforms:
+  - web
+releaseDate: '2025-04-29'
+roadmap: 'https://bitbucket.org/geowerkstatt-hamburg/masterportalapi/src/master/'
+softwareType: api
+softwareVersion: 2.49.0
+url: 'https://bitbucket.org/geowerkstatt-hamburg/masterportalapi.git'

package/src/layer/oaf.js

@@ -23,6 +23,7 @@ import * as webgl from "../renderer/webgl";
  * @property {function} beforeLoading - function called before loading
  * @property {function} afterLoading - function called after loading, gets parameter features
  * @property {function} featuresFilter - function called after loading to filter features, gets parameter features
+ * @property {function} doNotLoadInitially - default false, if set to true the layer will be initialized without network call, an empty array of features is promoted - this is useful to add features later on (e.g. by filtering) to a full functional but initially empty layer
  * @property {function} clusterGeometryFunction -  used in cluster source. Returns the geometry of the cluster, gets parameter feature
  * @property {function} style - style function to style the layer
  * @property {object} loadingParams - added as params to url
@@ -173,6 +174,10 @@ function getLayerSource (rawLayer, options) {
     let source = null;
 
     function loader (extent, _, __, success, failure) {
+        if (options.doNotLoadInitially) {
+            onLoad(source, [], onError, success, failure, options);
+            return;
+        }
         const bboxParam = options.loadingStrategy === bbox ? extent : options.loadingParams.bbox,
             url = createUrl(rawLayer, {
                 ...options.loadingParams,

package/src/layer/vectorTile.js

@@ -4,11 +4,11 @@ import VectorTileSource from "ol/source/VectorTile";
 import OpenLayersTileGrid from "ol/tilegrid/TileGrid";
 import {extentFromProjection} from "ol/tilegrid";
 import * as webgl from "../renderer/webgl";
-
-import {stylefunction, apply} from "ol-mapbox-style";
+import {apply, stylefunction} from "ol-mapbox-style";
 
 import defaults from "../defaults";
 
+
 const OL_DEFAULT_VECTOR_TILE_GRID_CRS = "EPSG:3857";
 
 /**

package/src/layer/wms.js

@@ -112,6 +112,14 @@ export function createLayerSource (rawLayer, options) {
         projection = rawLayer.crs ? getProjection(rawLayer.crs) : undefined;
     let tileGrid = null;
 
+
+    // Fix for daily updated WMS-Time Layer, which use 'current' as the default value of the time-Extent in their getCapabilities
+    // The promise isn't resolved quickly enough for the continued work with the layer.
+    // Its resolved value would be the current date, so it is hardcoded here.
+    if (rawLayer.TIME && rawLayer.TIME.toString() === "[object Promise]") {
+        params.TIME = new Date().toISOString();
+    }
+
     if (rawLayer.singleTile) {
         return new ImageWMS({
             url: rawLayer.url,
@@ -154,13 +162,15 @@ export function createLayerSource (rawLayer, options) {
  * @param {function} [rawLayer.olAttribution] - optional function that takes a module:ol/Map~FrameState and returns a string or an array of strings representing source attributions
  * @param {string|number} [rawLayer.tilesize] - optional needed to create the tileGrid
  * @param {string|"anonymous"} [rawLayer.crossOrigin] - optional needed for CORS requests of image data, to enable canvas export
- * @param {object} layerParams - additional layer params
+ * @param {object} [optionalParams] - optional params
+ * @param {object} [optionalParams.layerParams] - additional layer params
+ * @param {options} [optionalParams.options] - additional options
  * @param {object} options - optional resolutions and origin to create the TileGrid
  * @param {Array} [options.resolutions] - optional resolutions to create the TileGrid, must be in descending order
  * @param {Array} [options.origin] - optional origin to create the TileGrid
  * @returns {ol.Layer} Layer that can be added to map.
  */
-export function createLayer (rawLayer, layerParams = {}, options) {
+export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {}) {
     const source = createLayerSource(rawLayer, options),
         Layer = rawLayer.singleTile ? ImageLayer : TileLayer;
 

package/src/layer/wmts.js

@@ -186,7 +186,7 @@ function createLayer (rawLayer, layerParams = {}) {
         infoFormat: rawLayer.infoFormat
     }, layerParams));
 
-    if (rawLayer.optionsFromCapabilities === undefined || rawLayer.capabilitiesUrl === undefined) {
+    if (!rawLayer.optionsFromCapabilities || !rawLayer.capabilitiesUrl) {
         createLayerSourceByDefinitions(rawLayer, tileLayer);
     }
     else {

package/src/maps/interactions/drawInteraction.js

@@ -169,6 +169,8 @@ function setStyleObject (currentLayout, outerCircle = false) {
                         lineStrokeWidth: currentLayout.strokeWidth,
                         polygonFillColor: fillColorRgba,
                         polygonStrokeColor: currentLayout.strokeColor,
+                        polygonStrokeDash: currentLayout.polygonDash,
+                        polygonStrokeDashOffset: currentLayout.polygonStrokeDashOffset,
                         polygonStrokeWidth: currentLayout.strokeWidth
                     }
                 }

package/src/renderer/webgl.js

@@ -1,27 +1,38 @@
-import WebGLPointsLayer from "ol/layer/WebGLVector";
 import WebGLVectorLayerRenderer from "ol/renderer/webgl/VectorLayer";
 import WebGLVectorTileLayerRenderer from "ol/renderer/webgl/VectorTileLayer.js";
 import VectorTile from "ol/layer/VectorTile.js";
 import VectorLayer from "ol/layer/Layer";
+import WebGLVectorLayer from "ol/layer/WebGLVector.js";
 import styleList from "../vectorStyle/styleList";
 import {getRulesForFeature} from "../vectorStyle/lib/getRuleForIndex";
 import {returnColor} from "../vectorStyle/lib/colorConvertions";
-import {asArray} from "ol/color.js";
-import {packColor, parseLiteralStyle} from "ol/webgl/styleparser.js";
 
 /**
  * The default style for OpenLayers WebGLPoints class
  * @see https://openlayers.org/en/latest/examples/webgl-points-layer.html
  * @private
  */
-const defaultPointStyle = {
-        "circle-radius": 10,
-        "circle-fill-color": "#006688",
-        "circle-rotate-with-view": false,
-        "circle-displacement": [0, 0],
-        "circle-opacity": 0.6
-    },
-
+const defaultPointStyle = [
+        {
+            style: {
+                "circle-fill-color": ["match", ["get", "selected"], 1, "#0c2026", "#006688"],
+                "circle-radius": [
+                    "interpolate",
+                    ["exponential", 1.5],
+                    ["zoom"],
+                    3, 6,
+                    6, 10,
+                    9, 20,
+                    12, 35,
+                    15, 60,
+                    18, 110
+                ],
+                "circle-rotate-with-view": false,
+                "circle-displacement": [0, 0],
+                "circle-opacity": 0.6
+            }
+        }
+    ],
     defaultPolygonStyle = {
         fillColor: "#006688",
         strokeColor: "#006688",
@@ -52,6 +63,11 @@ export function createVectorLayerRenderer () {
      * @description the temporary class with a custom renderer to render the vector data with WebGL
      */
     class LocalWebGLLayer extends VectorLayer {
+        constructor (options) {
+            super(options);
+            // Initialize with any default style variables
+            this.styleVariables = options.styleVariables || {};
+        }
         /**
          * Creates a new renderer that takes the defined style of the new layer as an input.
          * @returns {module:ol/renderer/webgl/WebGLVectorLayerRenderer} the custom renderer
@@ -62,6 +78,13 @@ export function createVectorLayerRenderer () {
                 style
             });
         }
+        /**
+         * Get the current style variables.
+         * @returns {Object} - The current style variables.
+         */
+        getStyleVariables () {
+            return this.styleVariables;
+        }
     }
 
     return LocalWebGLLayer;
@@ -72,9 +95,10 @@ export function createVectorLayerRenderer () {
  * @augments VectorTile
  * @private
  * @implements {WebGLVectorTileLayerRenderer}
+ * @param {Object} attrs - the attributes of the layer
  * @returns {module:ol/layer/VectorTile} the LocalWebGLLayer with a custom renderer for WebGL styling of vectorTile layers.
  */
-export function createVectorTileLayerRenderer () {
+export function createVectorTileLayerRenderer (attrs) {
     /**
      * @class LocalWebGLLayer
      * @see https://openlayers.org/en/latest/examples/webgl-vector-tiles.html
@@ -88,70 +112,8 @@ export function createVectorTileLayerRenderer () {
          * @experimental
          */
         createRenderer () {
-            const result = parseLiteralStyle(style),
-                invisible = [255, 255, 255, 0],
-                grey = [119, 119, 119, 1];
-
-
             return new WebGLVectorTileLayerRenderer(this, {
-                style: {
-                    fill: {
-                        fragment: result.builder.getFillFragmentShader(),
-                        vertex: result.builder.getFillVertexShader()
-                    },
-                    stroke: {
-                        fragment: result.builder.getStrokeFragmentShader(),
-                        vertex: result.builder.getStrokeVertexShader()
-                    },
-                    symbol: {
-                        fragment: result.builder.getSymbolFragmentShader(),
-                        vertex: result.builder.getSymbolVertexShader()
-                    },
-                    builder: result.builder,
-                    attributes: {
-                        fillColor: {
-                            size: 2,
-                            callback: (feature) => {
-                                const featureStyle = this.getStyle()(feature, 1);
-
-                                if (featureStyle && featureStyle[0]) {
-                                    const color = featureStyle[0]?.getFill()?.getColor();
-
-                                    return packColor(color && typeof color === "string" ? asArray(color) : invisible);
-                                }
-                                return packColor(grey);
-                            }
-                        },
-                        strokeColor: {
-                            size: 2,
-                            callback: (feature) => {
-                                const featureStyle = this.getStyle()(feature, 1);
-
-                                if (featureStyle && featureStyle[0]) {
-                                    const color = featureStyle[0]?.getStroke()?.getColor();
-
-                                    return packColor(color ? asArray(color) : invisible);
-                                }
-                                return packColor(grey);
-                            }
-                        },
-                        strokeWidth: {
-                            size: 1,
-                            callback: (feature) => {
-                                const featureStyle = this.getStyle()(feature, 1);
-
-                                if (featureStyle && featureStyle[0]) {
-                                    const width = featureStyle[0]?.getStroke()?.getWidth();
-
-                                    if (width !== undefined) {
-                                        return width > 10 ? width / 10 : 1;/** @todo needs refactoring in later versions  */
-                                    }
-                                }
-                                return 1;
-                            }
-                        }
-                    }
-                }
+                style: attrs.style ? attrs.style : style
             });
         }
     }
@@ -275,10 +237,10 @@ export function afterLoading (features, styleId, excludeTypesFromParsing, isPoin
  * Creates the OL Layer instance, used to rebuild the layer when shown again after layer has been disposed
  * @param {Object} attrs - the attributes of the layer
  * @public
- * @returns {VectorLayer | WebGLPointsLayer} returns the layer instance
+ * @returns {VectorLayer | WebGLVectorLayer} returns the layer instance
  */
 export function createLayer (attrs) {
-    let LayerConstructor = WebGLPointsLayer;
+    let LayerConstructor = WebGLVectorLayer;
     const options = {
         id: attrs.id,
         source: attrs.source,
@@ -292,7 +254,8 @@ export function createLayer (attrs) {
         renderer: "webgl",
         styleId: attrs.styleId,
         excludeTypesFromParsing: attrs.excludeTypesFromParsing,
-        extent: attrs.extent
+        extent: attrs.extent,
+        zIndex: attrs.zIndex
     };
 
     /**

package/src/vectorStyle/styleList.js

@@ -274,6 +274,30 @@ function addToStyleList (jsonStyles) {
     });
 }
 
+/**
+ * Fetches the style.json file and adds the style for the styleId to the style list, if contained in style.json.
+ * @param {object} [Config] - the Config.js object
+ * @param {string} [styleId] - the styleId to add
+ * @returns  {object} the style object for the styleId
+ */
+async function initStyleAndAddToList (Config, styleId) {
+    let style;
+
+    await fetch(Config.styleConf)
+        .then(response => response.json())
+        .then(data => {
+            style = data.find(aStyle => aStyle.styleId === styleId);
+
+            if (style) {
+                styleList.push(style);
+            }
+        })
+        .catch(error => {
+            console.error(error);
+        });
+    return style;
+}
+
 /**
  * Returns style object by styleId or by layerId
  * @param {string} layerId layerId
@@ -285,6 +309,7 @@ function returnStyleObject (layerId) {
 
 export default {
     initializeStyleList,
+    initStyleAndAddToList,
     addToStyleList,
     returnStyleObject
 };

package/src/vectorStyle/styles/styleText.js

@@ -120,7 +120,7 @@ class TextStyle extends StyleClass {
         const feature = this.feature,
             featureProperties = feature.getProperties(),
             textSuffix = this.attributes.textSuffix;
-        let text = mapAttributes(featureProperties, this.attributes.labelField, false);
+        let text = mapAttributes(featureProperties, this.attributes.labelField, false) ?? "";
 
         if (textSuffix !== "") {
             text = text + " " + textSuffix;

package/test/layer/oaf.test.js

@@ -52,6 +52,16 @@ describe("oaf.js", function () {
             expect(layer.get("id")).toEqual("id");
             expect(layer.getSource()).toBeInstanceOf(VectorSource);
         });
+        it("creates empty layer if doNotLoadInitially is true", function () {
+            const options = {
+                    doNotLoadInitially: true
+                },
+                layer = oaf.createLayer({id: "id"}, {options});
+
+            expect(layer).toBeInstanceOf(VectorLayer);
+            expect(layer.getSource()).toBeInstanceOf(VectorSource);
+            expect(layer.getSource().getFeatures().length).toEqual(0);
+        });
         it("creates a VectorLayer with style in rawLayer", function () {
             function styleFunction () {
                 const icon = new Style({

package/test/layer/wms.test.js

@@ -250,7 +250,7 @@ describe("wms.js", function () {
                     name: "name",
                     layers: "layer1, layer2"
                 },
-                layer = wms.createLayer({singleTile: false, tilesize: "10", extent: [10, 20, 11, 22]}, layerParams, options);
+                layer = wms.createLayer({singleTile: false, tilesize: "10", extent: [10, 20, 11, 22]}, {layerParams, options});
 
             expect(layer).toBeInstanceOf(TileLayer);
             expect(layer.get("name")).toEqual("name");
@@ -266,7 +266,7 @@ describe("wms.js", function () {
                     name: "name",
                     layers: "layer1, layer2"
                 },
-                layer = wms.createLayer({singleTile: true}, layerParams);
+                layer = wms.createLayer({singleTile: true}, {layerParams});
 
             expect(layer).toBeInstanceOf(ImageLayer);
             expect(layer.get("name")).toEqual("name");

package/test/maps/interactions/drawInteraction.test.js

@@ -86,7 +86,8 @@ describe("src/maps/interactions/drawInteraction.js", () => {
                 fillColor: [55, 126, 184],
                 fillTransparency: 0,
                 strokeColor: [0, 0, 0],
-                strokeWidth: 1
+                strokeWidth: 1,
+                polygonDash: [4]
             };
 
             drawInteractions.setStyleObject(currentLayout);
@@ -124,6 +125,8 @@ describe("src/maps/interactions/drawInteraction.js", () => {
                                 0,
                                 0
                             ],
+                            polygonStrokeDash: [4],
+                            polygonStrokeDashOffset: undefined,
                             polygonStrokeWidth: 1
                         }
                     }

package/test/renderer/webgl.test.js

@@ -5,7 +5,7 @@ import Feature from "ol/Feature";
 import Polygon from "ol/geom/Polygon";
 import MultiPoint from "ol/geom/MultiPoint";
 import * as webgl from "../../src/renderer/webgl";
-import WebGLPointsLayer from "ol/layer/WebGLVector";
+import WebGLVectorLayer from "ol/layer/WebGLVector.js";
 import Layer from "ol/layer/Layer";
 import {returnColor} from "../../src/vectorStyle/lib/colorConvertions";
 
@@ -18,7 +18,7 @@ jest.mock("../../src/vectorStyle/styleList.js", () => {
 });
 
 describe("webgl.js", () => {
-    let layerParams, layerParamsVectorTile, rawLayer, rawLayerVectorTile, styleRule, styleObject, defaultStyle;
+    let layerParams, layerParamsVectorTile, rawLayer, rawLayerVectorTile, styleRule, styleObject, defaultPointStyle;
 
     beforeEach(() => {
         layerParams = {
@@ -68,23 +68,30 @@ describe("webgl.js", () => {
         styleObject = {
             rules: [styleRule]
         };
-        defaultStyle = {
+        defaultPointStyle = {
             fillColor: "#006688",
             strokeColor: "#006688",
             strokeWidth: 1,
             opacity: 1,
-            size: 20
+            zoom: [
+                3, 6,
+                6, 10,
+                9, 20,
+                12, 35,
+                15, 60,
+                18, 110
+            ]
         };
     });
 
     describe("createLayer", () => {
         let source = new VectorSource();
 
-        it("should return a WebGLPointsLayer", () => {
+        it("should return a WebGLVectorLayer", () => {
             layerParams.isPointLayer = true;
             const webglLayer = webgl.createLayer({...rawLayer, ...layerParams, source});
 
-            expect(webglLayer).toBeInstanceOf(WebGLPointsLayer);
+            expect(webglLayer).toBeInstanceOf(WebGLVectorLayer);
             expect(webglLayer.get("isPointLayer")).toBeTruthy();
         });
         it("should return a custom Layer", () => {
@@ -92,7 +99,7 @@ describe("webgl.js", () => {
             const webglLayer = webgl.createLayer({...rawLayer, ...layerParams, source});
 
             expect(webglLayer).toBeInstanceOf(Layer);
-            expect(webglLayer).not.toBeInstanceOf(WebGLPointsLayer);
+            expect(webglLayer).not.toBeInstanceOf(WebGLVectorLayer);
             expect(webglLayer.get("isPointLayer")).toBeFalsy();
         });
         it("vectorTile: should return a VectorTile layer", () => {
@@ -102,7 +109,7 @@ describe("webgl.js", () => {
 
             expect(webglLayer).toBeInstanceOf(Layer);
             expect(webglLayer).toBeInstanceOf(VectorTile);
-            expect(webglLayer).not.toBeInstanceOf(WebGLPointsLayer);
+            expect(webglLayer).not.toBeInstanceOf(WebGLVectorLayer);
             expect(webglLayer.get("isPointLayer")).toBeFalsy();
         });
     });
@@ -187,12 +194,46 @@ describe("webgl.js", () => {
                     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);
+                expect($feature.get("fillColor")).toEqual(defaultPointStyle.fillColor);
+                expect($feature.get("strokeColor")).toEqual(defaultPointStyle.strokeColor);
+                expect($feature.get("strokeWidth")).toEqual(defaultPointStyle.strokeWidth);
+                expect($feature.get("opacity")).toEqual(defaultPointStyle.opacity);
             });
+
+            it("should calculate circle-radius based on zoom level", () => {
+                const zoomLevels = [3, 6, 9, 12, 15, 18],
+                    expectedRadii = [6, 10, 20, 35, 60, 110];
+
+                // eslint-disable-next-line no-use-before-define, max-nested-callbacks
+                zoomLevels.forEach((zoom, index) => testZoomLevel(zoom, index, expectedRadii));
+            });
+
+            function interpolateCircleRadius (zoom, zoomArray) {
+                for (let i = 0; i < zoomArray.length; i += 2) {
+                    const z = zoomArray[i],
+                        r = zoomArray[i + 1];
+
+                    if (zoom <= z) {
+                        if (i === 0) {
+                            return r;
+                        }
+                        const zPrev = zoomArray[i - 2],
+                            rPrev = zoomArray[i - 1],
+                            t = (zoom - zPrev) / (z - zPrev);
+
+                        return rPrev + (t * (r - rPrev));
+                    }
+                }
+                return zoomArray[zoomArray.length - 1];
+            }
+
+            function testZoomLevel (zoom, index, expectedRadii) {
+                const expectedRadius = expectedRadii[index],
+                    actualRadius = interpolateCircleRadius(zoom, defaultPointStyle.zoom);
+
+                expect(actualRadius).toEqual(expectedRadius);
+            }
+
         });
     });
 });