@masterportal/masterportalapi 2.49.0 → 2.50.0

package/CHANGELOG.md

@@ -4,7 +4,6 @@
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
 ## Unreleased - in development
-
 ### __Breaking Changes__
 
 ### Added
@@ -19,10 +18,28 @@
 
 ---
 
-## 2.49.0 - 2025-04-294
+## 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:

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.49.0",
+  "version": "2.50.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {
@@ -21,7 +21,7 @@
   "dependencies": {
     "core-js": "^3.33.1",
     "dayjs": "^1.11.10",
-    "ol": "^10.4.0",
+    "ol": "^10.6.0",
     "ol-mapbox-style": "12.5.0",
     "olcs": "^2.22.1",
     "proj4": "^2.10.0",
@@ -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/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/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/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/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);
+            }
+
         });
     });
 });