@masterportal/masterportalapi 2.43.0 → 2.45.0

package/CHANGELOG.md

@@ -18,7 +18,34 @@
 
 ---
 
-## 2.43.0 - 2024-01-17
+## 2.45.0 - 2025-01-28
+
+### Added
+- vectorStyle: 
+    - extended 3d example by tileset styling
+
+### Changed
+- vectorStyle: 
+    - renamed configured style type="Cesium" to type="cesium"
+
+### Fixed
+- vectorStyle: 
+    - fixed styling for type "cesium"
+
+---
+
+## 2.44.0 - 2025-01-22
+
+### Added
+- Tileset.js: The tileset layer knows now the rawLayer transparency.
+
+### Fixed
+- Transparency and visibility information in `addLayer` is now interpreted correctly again
+- WMS-Layer: special loadFunction is used for every value attribute `isSecured` (behaviour equals <2.38.0)
+
+---
+
+## 2.43.0 - 2025-01-17
 
 ### Changed
 - The following packages have been updated:
@@ -32,6 +59,19 @@
 
 ---
 
+## 2.42.2 - 2024-12-05
+### Changed
+- Revert Change, because of problems with Routing:
+    - The following packages have been updated:
+        - dependencies:
+            - ol: 9.2.4 to 10.2.1
+            - ol-mapbox-style: 12.2.1 to 12.3.5
+            - olcs: 2.20.0 to 2.22.1
+        - peerDependencies:
+            - cesium/engine: 9.2.0 to 12.0.1
+
+---
+
 ## 2.42.1 - 2024-11-28
 
 ### Fixed

package/example/config/portal.json

@@ -62,6 +62,16 @@
           "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

@@ -58,6 +58,7 @@
     "name": "Gebäude LoD2",
     "url": "https://daten-hamburg.de/gdi3d/datasource-data/LoD2",
     "typ": "TileSet3D",
+    "styleId": "3DTileSetStyle",
     "cesium3DTilesetOptions": {
       "maximumScreenSpaceError": 6
     }

package/example/index.js

@@ -235,6 +235,23 @@ window.mpapi.search("Mümmelmannsberg 72", {
 
 
 // Add 3D functionality to the example:
+// ---------------------------------------
+// example style tileset by vectorstyling using style_v3.json
+function getTilesetStyle (styleId) {
+    const styleObject = styleList.returnStyleObject(styleId);
+
+    if (styleObject !== undefined) {
+        const createdStyle = createStyle.createStyle(styleObject, undefined, false, config.wfsImgPath),
+            options = {
+                color: {
+                    conditions: createdStyle
+                }
+            };
+
+        return new Cesium.Cesium3DTileStyle(options);
+    }
+    return undefined;
+}
 
 // add a click-listener to button, that creates a 3D-map on click
 document.getElementById("enable").addEventListener("click", function () {
@@ -275,11 +292,14 @@ document.getElementById("enable").addEventListener("click", function () {
 
             window.mpapi.map = map3D;
             tilesetLayer = new mpapi.Tileset(rawLayerTileset, window.mpapi.map);
+            tilesetLayer.tileset?.then(tileset => {
+                tileset.style = getTilesetStyle(rawLayerTileset.styleId);
+            });
             tilesetLayer.setVisible(true, window.mpapi.map);
 
             // entities are 2 simple buildings in the park 'planten und blomen' near Tiergartenstraße
             mpapi.entities.createLayer(rawLayerEntities, window.mpapi.map);
-            // mpapi.entities.setVisible(true, rawLayerEntities, window.mpapi.map);
+            mpapi.entities.setVisible(true, rawLayerEntities, window.mpapi.map);
 
             mpapi.terrain.createLayer(rawLayerTerrain, window.mpapi.map);
             mpapi.terrain.setVisible(true, rawLayerTerrain, window.mpapi.map);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.43.0",
+  "version": "2.45.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {

package/src/layer/tileset.js

@@ -33,7 +33,8 @@ export default function Tileset (rawLayer) {
     this.values = {
         name: rawLayer.name,
         id: rawLayer.id,
-        typ: rawLayer.typ
+        typ: rawLayer.typ,
+        transparency: rawLayer.transparency
     };
     if (Cesium) {
         this.tileset = Promise.resolve(createTileSet(this, rawLayer));

package/src/layer/wms.js

@@ -77,12 +77,13 @@ export function makeParams (rawLayer) {
 }
 
 /**
- * Return a ol tile or image load function for the rawLayer. Fetches with credentials: 'include'.
+ * Return a ol tile or image load function for the rawLayer.
+ * @param {object} rawLayer - layer specification as in services.json
  * @returns {function} tile/image load function
  */
-export function loadFunctionWithCredentials () {
+export function defaultLoadFunction ({isSecured}) {
     return async (image, src) => {
-        const response = await fetch(src, {credentials: "include"}),
+        const response = await fetch(src, {credentials: isSecured ? "include" : "omit"}),
             data = await response.blob();
 
         image.getImage().src = URL.createObjectURL(data);
@@ -99,7 +100,7 @@ export function loadFunctionWithCredentials () {
  * @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 {string} [rawLayer.cqlFilter] - optional CQL filter to add to the request
- * @param {boolean} [rawLayer.isSecured] - if the layer is secured by BasicAuth, images are loaded with credentials: 'include'.
+ * @param {boolean} [rawLayer.isSecured] - whether the layer is secured by BasicAuth and should include or omit the credentials prompt
  * @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
@@ -119,9 +120,7 @@ export function createLayerSource (rawLayer, options) {
             projection: projection,
             attributions: rawLayer.olAttribution,
             crossOrigin: rawLayer.crossOrigin,
-            ...rawLayer.isSecured ? {
-                imageLoadFunction: loadFunctionWithCredentials()
-            } : {}
+            imageLoadFunction: defaultLoadFunction(rawLayer)
         });
     }
     if (options && options.resolutions) {
@@ -139,9 +138,7 @@ export function createLayerSource (rawLayer, options) {
         projection: projection,
         attributions: rawLayer.olAttribution,
         crossOrigin: rawLayer.crossOrigin,
-        ...rawLayer.isSecured ? {
-            tileLoadFunction: loadFunctionWithCredentials()
-        } : {}
+        tileLoadFunction: defaultLoadFunction(rawLayer)
     });
 }
 

package/src/maps/ol/olMap.js

@@ -83,15 +83,20 @@ function injectErrorCallback (layer, errorCallback) {
  * @param {(string|ol/layer/Base)} layerOrId - if of layer to add to map
  * @param {object} [params] - optional parameter object
  * @param {boolean} [params.layerParams={}] - additional layerParams specified in portalConfig
- * @param {boolean} [params.visibility=true] - whether added layer is initially visible
- * @param {Number} [params.transparency=0] - how visible the layer is initially
+ * @param {boolean} [params.layerParams.visibility=true] - if params.visibility not given, this is used
+ * @param {Number} [params.layerParams.transparency=0] - if params.transparency not given, this is used
+ * @param {boolean} [params.visibility=params.layerParams.visibility] - whether added layer is initially visible
+ * @param {Number} [params.transparency=params.layerParams.transparency] - how visible the layer is initially
  * @param {Function} [params.errorCallback=console.error] - callback for layer source error events
  * @returns {?ol.Layer} added layer
  */
-function addLayer (layerOrId, params = {layerParams: {}, visibility: true, transparency: 0, errorCallback: console.error}) {
-    const errorCallback = typeof params.errorCallback === "function"
-        ? params.errorCallback
-        : console.error;
+function addLayer (layerOrId, params) {
+    const visibility = params?.visibility ?? params?.layerParams?.visibility ?? true,
+        transparency = params?.transparency ?? params?.layerParams?.transparency ?? 0,
+        layerParams = {...params?.layerParams || {}, visibility, transparency},
+        errorCallback = typeof params?.errorCallback === "function"
+            ? params?.errorCallback
+            : console.error;
     let layer, layerBuilder;
 
     // if parameter is id, create and add layer with masterportalAPI mechanisms
@@ -107,9 +112,9 @@ function addLayer (layerOrId, params = {layerParams: {}, visibility: true, trans
             console.error("Layer with id '" + layerOrId + "' has unknown type '" + rawLayer.typ + "'. No layer added to map.");
             return null;
         }
-        layer = layerBuilder.createLayer(rawLayer, {layerParams: params.layerParams}, {map: this});
-        layer.setVisible(typeof params.visibility === "boolean" ? params.visibility : true);
-        layer.setOpacity(typeof params.transparency === "number" ? (100 - params.transparency) / 100 : 1);
+        layer = layerBuilder.createLayer(rawLayer, {layerParams}, {map: this});
+        layer.setVisible(typeof visibility === "boolean" ? visibility : true);
+        layer.setOpacity(typeof transparency === "number" ? (100 - transparency) / 100 : 1);
         injectErrorCallback(layer, errorCallback);
         originalAddLayer.call(this, layer);
         return layer;

package/src/vectorStyle/createStyle.js

@@ -16,7 +16,7 @@ let legendInformationLength = 0;
  * @returns {Boolean} is geometrytype a multiGeometry
  */
 function isMultiGeometry (geometryType) {
-    return geometryType === "MultiPoint" || geometryType === "MultiLineString" || geometryType === "MultiPolygon" || geometryType === "GeometryCollection" || geometryType === "Cesium";
+    return geometryType === "MultiPoint" || geometryType === "MultiLineString" || geometryType === "MultiPolygon" || geometryType === "GeometryCollection" || geometryType === "cesium";
 }
 
 /**
@@ -34,7 +34,9 @@ function getSimpleGeometryStyle (geometryType, feature, rule, isClustered, wfsIm
     let styleObject,
         styleObjectForLegend = null;
 
-    feature.legendValue = legendValue ? legendValue : null;
+    if (feature) {
+        feature.legendValue = legendValue ? legendValue : null;
+    }
 
     if (geometryType === "Point") {
         styleObject = new PointStyle(feature, style, isClustered);
@@ -54,10 +56,10 @@ function getSimpleGeometryStyle (geometryType, feature, rule, isClustered, wfsIm
             styleObjectForLegend = new PolygonStyle(feature, style, false);
         }
     }
-    else if (geometryType === "Cesium") {
+    else if (geometryType === "cesium") {
         styleObject = new CesiumStyle(rule);
         styleObject.initialize(rule);
-        styleObject.addLegendInfo("Cesium", styleObject, rule);
+        styleObject.addLegendInfo("cesium", styleObject, rule);
         styleObject.legendValue = legendValue;
         return styleObject;
     }
@@ -128,7 +130,7 @@ function getMultiGeometryStyle (geometryType, feature, rules, isClustered, wfsIm
             }
         });
     }
-    else if (geometryType === "Cesium") {
+    else if (geometryType === "cesium") {
         rules.forEach(rule => {
             const simpleStyle = getSimpleGeometryStyle(geometryType, feature, rule, isClustered, wfsImgPathFromConfig);
 
@@ -153,7 +155,7 @@ function getMultiGeometryStyle (geometryType, feature, rules, isClustered, wfsIm
  * @returns {ol/style/Style}    style is always returned
  */
 function getGeometryStyle (feature, rules, isClustered, wfsImgPathFromConfig) {
-    const geometryType = feature ? feature.getGeometry().getType() : "Cesium";
+    const geometryType = feature ? feature.getGeometry().getType() : "cesium";
 
     // For simple geometries the first styling rule is used.
     // That algorithm implements an OR statement between multiple valid conditions giving precedence to its order in the style.json.

package/src/vectorStyle/lib/getRuleForIndex.js

@@ -7,7 +7,7 @@ import {checkProperties} from "../lib/valueOperations";
  */
 export function getRulesForFeature (styleObject, feature) {
     styleObject.rules.forEach(rule => {
-        if (typeof feature.get("rotation") !== "undefined") {
+        if (typeof feature?.get("rotation") !== "undefined") {
             rule.style.rotation = feature.get("rotation");
         }
     });

package/src/vectorStyle/lib/valueOperations.js

@@ -140,7 +140,7 @@ export function checkProperty (featureProperties, key, value) {
  * @returns {Boolean} true if all properties are satisfied
  */
 export function checkProperties (feature, rule) {
-    if (rule?.conditions?.properties) {
+    if (rule?.conditions?.properties && feature) {
         const featureProperties = feature.getProperties(),
             properties = rule.conditions.properties;
         let key,

package/src/vectorStyle/styles/styleCesium.js

@@ -30,7 +30,7 @@ class CesiumStyle extends StyleClass {
      * @returns {ol/style} - The created style.
      */
     createStyle () {
-        return this.createCondition(this.get("conditions"), this.get("style"));
+        return this.createCondition(this.attributes.conditions, this.style);
     }
 
     /**
@@ -40,7 +40,7 @@ class CesiumStyle extends StyleClass {
      * @returns {*} - Condition for cesium 3d tile style.
      */
     createCondition (conditions, style) {
-        const {color} = style,
+        const color = style?.color || this.attributes.color,
             condition = [];
         let ruleCondition;
 

package/test/layer/wms.test.js

@@ -102,7 +102,7 @@ describe("wms.js", function () {
         });
     });
 
-    describe("loadFunctionWithCredentials", function () {
+    describe("defaultLoadFunction", function () {
         beforeEach(() => {
             const blob = new Blob();
 
@@ -121,12 +121,19 @@ describe("wms.js", function () {
         });
 
         it("passes credentials if isSecured is set", async function () {
-            const result = wms.loadFunctionWithCredentials(),
+            const result = wms.defaultLoadFunction({isSecured: true}),
                 input = {src: ""};
 
             await result({getImage: () => input}, "SECURE_WMS");
             expect(input.src).toEqual("blob:BLOB");
         });
+        it("does not pass credentials if isSecured is not set", async function () {
+            const result = wms.defaultLoadFunction({isSecured: false}),
+                input = {src: ""};
+
+            await result({getImage: () => input}, "INSECURE_WMS");
+            expect(input.src).toEqual("blob:BLOB");
+        });
     });
 
     describe("createLayerSource", function () {

package/test/map.test.js

@@ -122,9 +122,9 @@ describe("map.js", function () {
         it("sets visibility and transparency", function () {
             const result1 = Map.prototype.addLayer("works"),
                 result2 = Map.prototype.addLayer("works", {}),
-                result3 = Map.prototype.addLayer("works", {visibility: false}),
-                result4 = Map.prototype.addLayer("works", {transparency: 50}),
-                result5 = Map.prototype.addLayer("works", {visibility: false, transparency: 20});
+                result3 = Map.prototype.addLayer("works", {layerParams: {visibility: false}}),
+                result4 = Map.prototype.addLayer("works", {layerParams: {transparency: 50}}),
+                result5 = Map.prototype.addLayer("works", {layerParams: {visibility: false, transparency: 20}});
 
             expect(result1.getOpacity()).toBe(1);
             expect(result1.getVisible()).toBe(true);

package/test/vectorStyle/createStyle.test.js

@@ -1,6 +1,7 @@
 import createStyle from "../../src/vectorStyle/createStyle";
 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 {GeoJSON} from "ol/format.js";
@@ -9,6 +10,7 @@ let rules,
     jsonObjects,
     multiLineStringRules,
     multiPolygonRules,
+    cesiumRules,
     isClustered;
 
 const wfsImgPathFromConfig = "/path/to/wfs/images",
@@ -238,6 +240,12 @@ beforeEach(() => {
             polygonStrokeColor: [255, 0, 0, 1]
         }
     }];
+    cesiumRules = [{
+        style: {
+            type: "cesium",
+            color: "rgba(50, 154, 26, 0.8)"
+        }
+    }];
 });
 
 describe("createStyle", () => {
@@ -442,6 +450,13 @@ describe("getSimpleGeometryStyle", function () {
         isClustered = true;
         expect(createStyle.getSimpleGeometryStyle("not exist", jsonObjects[0], null, isClustered, wfsImgPathFromConfig)).toBeInstanceOf(Style);
     });
+    it("should create Cesium style", function () {
+        isClustered = true;
+        const tilesetStyle = createStyle.getSimpleGeometryStyle("cesium", undefined, cesiumRules[0], false, wfsImgPathFromConfig);
+
+        expect(tilesetStyle).toBeInstanceOf(CesiumStyle);
+        expect(tilesetStyle.attributes.color).toEqual(cesiumRules[0].style.color);
+    });
 });
 
 describe("getMultiGeometryStyle", function () {

package/test/vectorStyle/lib/getRuleForIndex.test.js

@@ -128,5 +128,9 @@ describe("getRuleForIndex", function () {
             expect(Array.isArray(getRulesForFeature(styleObject, jsonObjects[1]))).toBe(true);
             expect(getRulesForFeature(styleObject, jsonObjects[1]).length).toEqual(1);
         });
+        it("should not fail if feature is undefined - is the case for type=Cesium", function () {
+            expect(Array.isArray(getRulesForFeature(styleObject, undefined))).toBe(true);
+            expect(getRulesForFeature(styleObject, jsonObjects[1]).length).toEqual(1);
+        });
     });
 });

package/test/vectorStyle/lib/valueOperations.test.js

@@ -185,7 +185,7 @@ describe("checkProperties", function () {
     it("should return true for rule that has no properties", function () {
         expect(checkProperties(jsonObjects[0], rules[2])).toBe(true);
     });
-    it("should return false for rule that has not fitting properties", function () {
-        expect(checkProperties(jsonObjects[1], rules[1])).toBe(false);
+    it("should do nothing if feature is undefined", function () {
+        expect(checkProperties(undefined, rules[1])).toBe(true);
     });
 });

package/test/vectorStyle/styles/styleCesium.test.js

@@ -0,0 +1,120 @@
+import CesiumStyle from "../../../src/vectorStyle/styles/styleCesium";
+import StyleClass from "../../../src/vectorStyle/styles/style";
+
+describe("styleCesium", () => {
+    const expectedStyle = ["((${attributes.Dachform} === 'Flachdach'))", "rgba(50, 154, 26, 0.8)"];
+    let rule,
+        styleCesiumClass;
+
+    beforeEach(() => {
+        rule = {
+            conditions: {
+                "attributes.Dachform": "Flachdach"
+            },
+            style: {
+                type: "cesium",
+                color: "rgba(50, 154, 26, 0.8)"
+            }
+        };
+
+    });
+
+    describe("initialize", function () {
+        it("shall call 3 functions for initialization", () => {
+            const setConditionsSpy = jest.spyOn(CesiumStyle.prototype, "setConditions"),
+                overwriteStylingSpy = jest.spyOn(StyleClass.prototype, "overwriteStyling"),
+                setStyleSpy = jest.spyOn(StyleClass.prototype, "setStyle");
+
+            styleCesiumClass = new CesiumStyle();
+            styleCesiumClass.initialize(rule);
+            expect(setConditionsSpy).toHaveBeenCalledTimes(1);
+            expect(overwriteStylingSpy).toHaveBeenCalledTimes(1);
+            expect(setStyleSpy).toHaveBeenCalledTimes(1);
+        });
+    });
+
+
+    describe("createStyle", function () {
+        it("shall call createCondition and create expected style", () => {
+            const createConditionSpy = jest.spyOn(CesiumStyle.prototype, "createCondition"),
+                createdStyle = styleCesiumClass.createStyle();
+
+            styleCesiumClass = new CesiumStyle();
+            expect(createConditionSpy).toHaveBeenCalledTimes(1);
+            expect(createConditionSpy).toHaveBeenCalledWith(rule.conditions, expectedStyle);
+            expect(createdStyle).toEqual(expectedStyle);
+        });
+    });
+
+    describe("createCondition", function () {
+        it("createCondition with conditions and no style", () => {
+            let condition = null;
+
+            styleCesiumClass = new CesiumStyle();
+            styleCesiumClass.initialize(rule);
+            condition = styleCesiumClass.createCondition(rule.conditions);
+
+            expect(condition).toEqual(expectedStyle);
+        });
+
+        it("createCondition with no conditions and no style", () => {
+            let condition = null;
+
+            styleCesiumClass = new CesiumStyle();
+            delete rule.conditions;
+            styleCesiumClass.initialize(rule);
+            condition = styleCesiumClass.createCondition(undefined);
+
+            expect(condition).toEqual(["true", "rgba(50, 154, 26, 0.8)"]);
+        });
+
+
+        it("createCondition no conditions but with style", () => {
+            let condition = null;
+            const style = {
+                color: "rgba(150, 154, 26, 0.8)"
+            };
+
+            styleCesiumClass = new CesiumStyle();
+            delete rule.conditions;
+            styleCesiumClass.initialize(rule);
+            condition = styleCesiumClass.createCondition(undefined, style);
+
+            expect(condition).toEqual(["true", "rgba(150, 154, 26, 0.8)"]);
+        });
+    });
+
+    describe("createCesiumConditionForRule", function () {
+        it("createCesiumConditionForRule with an equals condition", () => {
+            let condition = null;
+
+            styleCesiumClass = new CesiumStyle();
+            styleCesiumClass.initialize(rule);
+            condition = styleCesiumClass.createCesiumConditionForRule([["attributes.Dachform", "Flachdach"]]);
+
+            expect(condition).toEqual("((${attributes.Dachform} === 'Flachdach'))");
+        });
+
+        it("createCesiumConditionForRule with 2 equals conditions", () => {
+            let condition = null;
+
+            styleCesiumClass = new CesiumStyle();
+            styleCesiumClass.initialize(rule);
+            condition = styleCesiumClass.createCesiumConditionForRule([["attributes.Dachform", "Flachdach"], ["foo", "bar"]]);
+
+            expect(condition).toEqual("((${attributes.Dachform} === 'Flachdach') && (${foo} === 'bar'))");
+        });
+
+        it("createCesiumConditionForRule with a >, <= condition", () => {
+            let condition = null;
+
+            styleCesiumClass = new CesiumStyle();
+            styleCesiumClass.initialize(rule);
+            condition = styleCesiumClass.createCesiumConditionForRule([["attributes.height", [10, 20]]]);
+
+            expect(condition).toEqual("((${attributes.height} > 10 && ${attributes.height} <= 20))");
+        });
+
+
+    });
+});