@masterportal/masterportalapi 2.59.0 → 2.60.0

package/CHANGELOG.md

@@ -3,7 +3,19 @@
 
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
- ## 2.59.0 - 2026-03-13
+## 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.

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",

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.59.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"
@@ -83,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-03-13'
+releaseDate: '2026-04-10'
 roadmap: 'https://bitbucket.org/geowerkstatt-hamburg/masterportalapi/src/master/'
 softwareType: api
-softwareVersion: 2.59.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/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",