@masterportal/masterportalapi 2.58.0 → 2.60.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
+## 2.60.0 - 2026-04-10
+
+### Added
+- Issue #15: At VectorTile layer the `vtStyles` attribute is evaluated, and the style is applied using the `layers` attribute or to the styles attribute `defaultStyle`.
+
+### Changed
+- The following packages have been updated:
+    - dependencies:
+        - ol-mapbox-style: 12.5.0 to 13.3.0
+
+---
+
+## 2.59.0 - 2026-03-13
+
+### Changed
+- Updated examples to prevent console errors caused by certain layers/services.
+- The following packages have been updated:
+    - dependencies:
+        - @cesium/engine: 20.0.1 to 23.0.0
+- The following packages have been overwritten:
+        - geotiff in ol: to 2.1.3
+
+---
+
 ## 2.58.0 - 2026-02-19
 
 ### Changed

package/example/config/portal.json

@@ -62,16 +62,6 @@
           "circle-rotate-with-view": true,
           "circle-opacity": 0.8
       }
-    },
-    {
-      "id": "4002",
-      "name": "Gebäude LoD2",
-      "url": "https://daten-hamburg.de/gdi3d/datasource-data/LoD2",
-      "typ": "TileSet3D",
-      "styleId": "3DTileSetStyle",
-      "cesium3DTilesetOptions": {
-        "maximumScreenSpaceError": 6
-      }
     }
   ],
   "cesiumLib":"https://geoportal-hamburg.de/mastercode/cesium/latest/Cesium.js",

package/example/config/services.json

@@ -200,6 +200,57 @@
       }
     ]
   },
+  {
+    "id": "6002",
+    "name": "ArcGIS VectorTile with layers attribute",
+    "shortname": "VectorTile",
+    "typ": "VectorTile",
+    "visibility": false,
+    "preview": {
+      "src": "./resources/vectorTile.png"
+    },
+    "layers": "M020_N/DS07_TatsaechlicheNutzung/G020_600_GEB_TNutz_F/P05_CI054_Platz,M020_N/DS07_TatsaechlicheNutzung/G020_600_GEB_TNutz_F/P06_CI060_BaulichGepraegteFlaeche",
+    "gfiAttributes": "showAll",
+    "url": "https://test.geoportal-hamburg.de/vt/esri/tile/{z}/{y}/{x}.pbf",
+    "epsg": "EPSG:25832",
+    "extent": [
+      441336.2209999999,
+      5915995,
+      594002,
+      5986767.56699999981
+    ],
+    "origin": [
+      -9497963.94293634221,
+      9997963.94293634221
+    ],
+    "resolutions": [
+      39054.5466520950868,
+      19527.2733260475434,
+      9763.63666302377169,
+      4881.81833151188584,
+      2440.90916575594292,
+      1220.45458287797146,
+      610.227291438985731,
+      305.113645719492865,
+      152.556822859746433,
+      76.2784114298732163,
+      38.1392057149366082,
+      19.0696028574683041,
+      9.534801428734152,
+      4.767400714367076,
+      2.383700357183538,
+      1.191850178591769
+    ],
+    "tileSize": 512,
+    "vtStyles": [
+      {
+        "id": "VectorTile_STYLE",
+        "name": "Test",
+        "url": "https://test.geoportal-hamburg.de/vt/esri/resources/styles/root.json",
+        "defaultStyle": true
+      }
+    ]
+  },
   {
     "id": "7001",
     "name": "TopPlusOpen",
@@ -215,141 +266,5 @@
     "typ": "WMTS",
     "optionsFromCapabilities": true,
     "layers": "eoc:basemap"
-  },
-  {
-    "id": "7003",
-    "name": "Geoland Basemap",
-    "urls": [
-      "https://maps1.wien.gv.at/basemap/geolandbasemap/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
-      "https://maps2.wien.gv.at/basemap/geolandbasemap/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
-      "https://maps3.wien.gv.at/basemap/geolandbasemap/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
-      "https://maps4.wien.gv.at/basemap/geolandbasemap/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
-      "https://maps.wien.gv.at/basemap/geolandbasemap/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png"
-    ],
-    "typ": "WMTS",
-    "layer": "geolandbasemap",
-    "version": "1.0.0",
-    "format": "image/png",
-    "style": "normal",
-    "transparent": false,
-    "tileSize": "256",
-    "minScale": "0",
-    "maxScale": "2500000",
-    "tileMatrixSet": "google3857",
-    "matrixSizes": [
-      [
-        1,
-        1
-      ],
-      [
-        2,
-        2
-      ],
-      [
-        4,
-        4
-      ],
-      [
-        8,
-        8
-      ],
-      [
-        16,
-        16
-      ],
-      [
-        32,
-        32
-      ],
-      [
-        64,
-        64
-      ],
-      [
-        128,
-        128
-      ],
-      [
-        256,
-        256
-      ],
-      [
-        512,
-        512
-      ],
-      [
-        1024,
-        1024
-      ],
-      [
-        2048,
-        2048
-      ],
-      [
-        4096,
-        4096
-      ],
-      [
-        8192,
-        8192
-      ],
-      [
-        16384,
-        16384
-      ],
-      [
-        32768,
-        32768
-      ],
-      [
-        65536,
-        65536
-      ],
-      [
-        131072,
-        131072
-      ],
-      [
-        262144,
-        262144
-      ],
-      [
-        524288,
-        524288
-      ]
-    ],
-    "coordinateSystem": "EPSG:3857",
-    "layerAttribution": "nicht vorhanden",
-    "legend": false,
-    "cache": true,
-    "wrapX": true,
-    "origin": [
-      -20037508.3428,
-      20037508.3428
-    ],
-    "scales": [
-      559082264.029,
-      279541132.015,
-      139770566.007,
-      69885283.0036,
-      34942641.5018,
-      17471320.7509,
-      8735660.37545,
-      4367830.18773,
-      2183915.09386,
-      1091957.54693,
-      45978.773466,
-      272989.386733,
-      136494.693366,
-      68247.3466832,
-      34123.6733416,
-      17061.8366708,
-      8530.91833540,
-      4265.45916770,
-      2132.72958385,
-      1066.36479193
-    ],
-    "resLength": "20",
-    "requestEncoding": "REST"
   }
 ]

package/example/index.js

@@ -195,6 +195,19 @@ fetch(vtStyleUrl)
     });
 */
 
+/* VECTOR TILE EXAMPLE 2, using layers attribute */
+/*
+document.getElementById("enable").style.display = "none";
+window.mpapi.map = mapsAPI.map.createMap(config, "2D", {errorCallback});
+
+window.mpapi.map.getLayers().forEach(layer => {
+    window.mpapi.map.removeLayer(layer);
+});
+
+const vtLayer = window.mpapi.map.addLayer("6002");
+
+*/
+
 /* WMTS example */
 /*
 window.mpapi.map = mapsAPI.map.createMap(config, "2D", {errorCallback});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.58.0",
+  "version": "2.60.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {
@@ -35,7 +35,7 @@
     "core-js": "^3.33.1",
     "dayjs": "^1.11.10",
     "ol": "10.8.0",
-    "ol-mapbox-style": "12.5.0",
+    "ol-mapbox-style": "13.3.0",
     "olcs": "^2.22.1",
     "proj4": "^2.10.0",
     "xml2js": "^0.6.2"
@@ -70,7 +70,12 @@
     "util": "^0.12.5"
   },
   "peerDependencies": {
-    "@cesium/engine": "^20.0.1"
+    "@cesium/engine": "^23.0.0"
+  },
+  "overrides": {
+    "ol": {
+      "geotiff": "^2.1.3"
+    }
   },
   "engines": {
     "node": "^22.19.0 || ^24.11.1",
@@ -78,6 +83,7 @@
   },
   "homepage": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi#readme",
   "directories": {
+    "doc": "docs",
     "example": "example",
     "test": "test"
   },

package/publiccode.yml

@@ -81,8 +81,8 @@ maintenance:
 name: Masterportal
 platforms:
   - web
-releaseDate: '2026-02-19'
+releaseDate: '2026-04-10'
 roadmap: 'https://bitbucket.org/geowerkstatt-hamburg/masterportalapi/src/master/'
 softwareType: api
-softwareVersion: 2.58.0
+softwareVersion: 2.60.0
 url: 'https://bitbucket.org/geowerkstatt-hamburg/masterportalapi.git'

package/src/layer/vectorTile.js

@@ -4,7 +4,7 @@ import VectorTileSource from "ol/source/VectorTile";
 import OpenLayersTileGrid from "ol/tilegrid/TileGrid";
 import {extentFromProjection} from "ol/tilegrid";
 import * as webgl from "../renderer/webgl";
-import {apply, stylefunction} from "ol-mapbox-style";
+import {apply, applyStyle, stylefunction} from "ol-mapbox-style";
 
 import defaults from "../defaults";
 
@@ -132,9 +132,54 @@ export function createLayerSource (url, options = {}) {
     return new VectorTileSource(sourceParams);
 }
 
+/**
+ * Set a mapbox style
+ * @param {ol.layer.VectorTile} layer - layer to style
+ * @param {object} glStyle - MapBox style definition
+ * @param {options} [styleParams={}] - Additional options for style specification
+ * @param {string} url - MapBox style url
+ * @returns {void}
+ */
+export function setStyle (layer, glStyle, {options = {}} = {}, url) {
+    if (url) {
+        fetch(url)
+            .then(response => response.json())
+            .then(style => {
+                const styles = options.layers ? style.layers.filter((styleLayer) => options.layers.includes(styleLayer.id)) : style.layers;
+
+                style.layers = styles;
+                applyStyle(layer, style);
+            });
+    }
+    if (glStyle && glStyle.sources) {
+
+        Object.keys(glStyle.sources).forEach((key) => {
+            const glStyleSourceId = key;
+
+            if (glStyle.sources[key].type !== "vector" && glStyle.sources[key].type !== "geojson") {
+                const olMap = layer.get("map");
+
+                apply(olMap, url);
+            }
+            else {
+                stylefunction(layer, glStyle,
+                    options.sourceId ? options.sourceId : glStyleSourceId,
+                    options.resolutions,
+                    options.spriteData,
+                    options.spriteImageUrl,
+                    options.getFonts);
+            }
+        });
+    }
+}
+
+
 /**
  * Creates a Vector Tiles layer.
  *
+ * Note: Within the vtStyles of a layer we introduced a boolean flag called defaultStyle.
+ *       This option allows to mark a vtStyle as default. When not present, the first entry will be taken
+ *       as style.
  * @param {rawLayer} rawLayer - rawLayer as specified in services.json
  * @param {object} [layerParams={}] - extra params of the layer. Can overwrite or extend all ol layer parameters.
  * @param {object} [options={}] - parameter object. Not used atm.
@@ -176,34 +221,11 @@ export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {
     if (options.style && rawLayer.renderer !== "webgl") {
         layer.setStyle(options.style);
     }
+    if (rawLayer.vtStyles) {
+        const vtStyle = rawLayer.vtStyles.filter((style) => style.defaultStyle)[0] || rawLayer.vtStyles[0];
 
-    return layer;
-}
+        setStyle(layer, {}, {options: {layers: rawLayer.layers}}, vtStyle.url);
 
-/**
- * Set a mapbox style
- * @param {ol.layer.VectorTile} layer - layer to style
- * @param {object} glStyle - MapBox style definition
- * @param {options} [styleParams={}] - Additional options for style specification
- * @param {string} url - MapBox style url
- * @returns {void}
- */
-export function setStyle (layer, glStyle, {options = {}} = {}, url) {
-    Object.keys(glStyle.sources).forEach((key) => {
-        const glStyleSourceId = key;
-
-        if (glStyle.sources[key].type !== "vector" && glStyle.sources[key].type !== "geojson") {
-            const olMap = layer.get("map");
-
-            apply(olMap, url);
-        }
-        else {
-            stylefunction(layer, glStyle,
-                options.sourceId ? options.sourceId : glStyleSourceId,
-                options.resolutions,
-                options.spriteData,
-                options.spriteImageUrl,
-                options.getFonts);
-        }
-    });
+    }
+    return layer;
 }

package/src/lib/ping.js

@@ -21,7 +21,8 @@ export default function ({url, typ, capabilitiesUrl, ...rest}) {
             .forEach(entity => entity.url ? statusCheckUrls.push(entity.url) : null);
     }
     else if (typ === "TileSet3D" || typ === "Terrain3D") {
-        statusCheckUrls.push(url);
+        // 3D tile layers: skip HEAD ping; Cesium GET requests will load tiles
+        return Promise.resolve(200);
     }
     else if (typ === "GeoJSON") {
         if (!url && rest.features) {

package/src/vectorStyle/createStyle.js

@@ -1,4 +1,4 @@
-import {Style} from "ol/style.js";
+import {Style, Icon} from "ol/style.js";
 import PointStyle from "./styles/point/stylePoint";
 import TextStyle from "./styles/styleText";
 import PolygonStyle from "./styles/polygon/stylePolygon";
@@ -267,6 +267,35 @@ function createStyle (styleObject, feature, isClustered, wfsImgPathFromConfig) {
     if (feature?.getGeometry().getType() === "Point" || feature?.getGeometry().getType() === "MultiPoint") {
         feature.setStyle(styleObjectGeometry);
     }
+    // polygon with icon in the center is optional for given polygonImage in style config file
+    if (style?.polygonImage && (feature?.getGeometry().getType() === "Polygon" || feature?.getGeometry().getType() === "MultiPolygon")) {
+        if (!Array.isArray(styleObjectGeometry)) {
+            styleObjectGeometry = [styleObjectGeometry];
+        }
+        styleObjectGeometry.push(new Style({
+            geometry: function (geometryFeature) {
+                const geometry = geometryFeature.getGeometry(),
+                    geometryType = geometry.getType();
+
+
+                if (geometryType === "Polygon") {
+                    return geometry.getInteriorPoint();
+                }
+                if (geometryType === "MultiPolygon") {
+                    return geometry.getInteriorPoints();
+                }
+                return geometry;
+
+            },
+            image: new Icon({
+                anchor: [0.5, 0.5],
+                anchorXUnits: "fraction",
+                anchorYUnits: "fraction",
+                crossOrigin: "anonymous",
+                src: wfsImgPathFromConfig + style?.polygonImage
+            })
+        }));
+    }
     return styleObjectGeometry;
 }
 

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

@@ -22,13 +22,17 @@ class PolygonStyle extends StyleClass {
      * @param {ol/feature} feature Feature to be styled.
      * @param {object} styles styling properties to overwrite defaults
      * @param {Boolean} isClustered Flag to show if feature is clustered.
+     * @param {Boolean} wfsImgPathFromConfig image Path of the wfs.
      * @returns {void}
      */
-    initialize (feature, styles, isClustered) {
+    initialize (feature, styles, isClustered, wfsImgPathFromConfig) {
         this.setFeature(feature);
         this.setIsClustered(isClustered);
         this.overwriteStyling(styles);
         this.setStyle(this.createStyle());
+        if (wfsImgPathFromConfig !== undefined) {
+            this.setImagePath(wfsImgPathFromConfig);
+        }
     }
 
     /**
@@ -124,6 +128,15 @@ class PolygonStyle extends StyleClass {
 
         return legendCanvas.toDataURL();
     }
+
+    /**
+     * Setter for imagePath.
+     * @param {String} value Image path.
+     * @returns {void}
+     */
+    setImagePath (value) {
+        this.attributes.imagePath = value;
+    }
 }
 
 export default PolygonStyle;

package/test/layer/vectorTile.test.js

@@ -29,7 +29,11 @@ jest.mock("../../src/renderer/webgl.js", () => {
 
 describe("vectorTile.js", function () {
 
-    beforeAll(() => crs.registerProjections());
+    beforeAll(() => {
+        crs.registerProjections();
+        global.Request = global.Request || jest.fn();
+        global.Response = global.Response || jest.fn();
+    });
 
     const rawLayer = {
             name: "VT Test",

package/test/vectorStyle/createStyle.test.js

@@ -3,7 +3,7 @@ import PointStyle from "../../src/vectorStyle/styles/point/stylePoint";
 import LineStringStyle from "../../src/vectorStyle/styles/styleLine";
 import CesiumStyle from "../../src/vectorStyle/styles/styleCesium";
 import PolygonStyle from "../../src/vectorStyle/styles/polygon/stylePolygon";
-import {Style, Stroke, Fill} from "ol/style.js";
+import {Style, Stroke, Fill, Icon} from "ol/style.js";
 import {GeoJSON} from "ol/format.js";
 
 let rules,
@@ -280,6 +280,41 @@ describe("createStyle", () => {
         });
     });
 
+    it("should return the correct style for a feature with geometry of type Polygon ", () => {
+        const stylingRules = [{
+                "conditions": {
+                    "sequence": [0, 0]
+                },
+                "style": {
+                    "polygonStrokeColor": [
+                        161,
+                        113,
+                        14,
+                        1
+                    ],
+                    "polygonStrokeWidth": 0.2,
+                    "polygonFillColor": [
+                        161,
+                        113,
+                        14,
+                        1
+                    ],
+                    "polygonImage": "image.svg"
+                }
+            }],
+            styleObject = {styleId: "styleId", rules: stylingRules},
+            polygonFeature = jsonObjects[2],
+            style = createStyle.createStyle(styleObject, polygonFeature, isClustered, wfsImgPathFromConfig);
+
+        expect(style === null).toBe(false);
+        expect(style).toBeInstanceOf(Array);
+        style.forEach(aStyle => {
+            expect(aStyle).toBeInstanceOf(Style);
+        });
+        expect(style[1].getImage()).toBeInstanceOf(Icon);
+        expect(style[1].getImage().getSrc()).toEqual(wfsImgPathFromConfig + stylingRules[0].style.polygonImage);
+    });
+
     it("should return the correct style for a feature with geometry of type MultiPolygon ", () => {
         const stylingRules = [{
                 "conditions": {

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

@@ -13,6 +13,7 @@ describe("stylePolygon", () => {
             imageName: "krankenhaus.png"
         },
         isClustered = false,
+        wfsImgPathFromConfig = "/path/to/wfs/images/",
         stylePolygonClass = new PolygonStyle(feature, style, isClustered);
 
     describe("createStyle", function () {
@@ -61,4 +62,11 @@ describe("stylePolygon", () => {
         });
     });
 
+    describe("setImagePath", () => {
+        it("defines setImagePath() needed for polygon with Icon", () => {
+            stylePolygonClass.setImagePath(wfsImgPathFromConfig);
+            expect(stylePolygonClass.attributes.imagePath).toEqual(wfsImgPathFromConfig);
+        });
+    });
+
 });