@masterportal/masterportalapi 2.14.0 → 2.15.1

package/src/renderer/webgl.js

@@ -0,0 +1,250 @@
+import WebGLPointsLayer from "ol/layer/WebGLPoints";
+import WebGLVectorLayerRenderer from "ol/renderer/webgl/VectorLayer";
+import VectorLayer from "ol/layer/Layer";
+import {packColor} from "ol/renderer/webgl/shaders";
+import styleList from "../vectorStyle/styleList";
+import {getRulesForFeature} from "../vectorStyle/lib/getRuleForIndex";
+
+/**
+ * The default style for OpenLayers WebGLPoints class
+ * @see https://openlayers.org/en/latest/examples/webgl-points-layer.html
+ * @private
+ */
+const defaultStyle = {
+    symbol: {
+        symbolType: "circle",
+        size: 20,
+        color: "#006688",
+        rotateWithView: false,
+        offset: [0, 0],
+        opacity: 0.6
+    }
+};
+
+/**
+ * parses the styling rules for the renderer
+ * @static
+ * @private
+ * @returns {Object} the style options object with conditional functions
+ */
+export function getRenderFunctions () {
+    return {
+        /**
+         * Used for polygon fills
+         * Reads the relevant properties from the Masterportal style object
+         * @see https://bitbucket.org/geowerkstatt-hamburg/masterportal/src/dev/doc/style.json.md
+         */
+        fill: {
+            attributes: {
+                color: (feature) => {
+                    return packColor(feature.styleRule?.style.polygonFillColor || "#006688");
+                },
+                opacity: (feature) => {
+                    return typeof feature.styleRule?.style.polygonFillColor?.[3] === "number" ?
+                        feature.styleRule.style.polygonFillColor[3] : 1;
+                }
+            }
+        },
+        stroke: {
+            /**
+             * Used for polygon edges and lineStrings
+             * Reads the relevant properties from the Masterportal style object
+             * @see https://bitbucket.org/geowerkstatt-hamburg/masterportal/src/dev/doc/style.json.md
+             */
+            attributes: {
+                color: (feature) => {
+                    return packColor(feature.styleRule?.style.polygonStrokeColor || "#006688");
+                },
+                width: (feature) => {
+                    return feature.styleRule?.style.polygonStrokeWidth || 1;
+                },
+                opacity: (feature) => {
+                    return typeof feature.styleRule?.style.polygonStrokeColor?.[3] === "number" ?
+                        feature.styleRule.style.polygonStrokeColor[3] : 1;
+                }
+            }
+        },
+        point: {
+            /**
+             * As of now, the generic VectorLayerRenderer only supports points rendered as quads
+             * available attributes: color, size, opacity
+             * Due to that, we use WebGLPoints Layer Class for point geom types
+             * Reads the relevant properties from the Masterportal style object
+             * @see https://bitbucket.org/geowerkstatt-hamburg/masterportal/src/dev/doc/style.json.md
+             */
+            attributes: {
+                color: (feature) => {
+                    return packColor(feature.styleRule?.style.circleFillColor || "#006688");
+                },
+                size: (feature) => {
+                    return feature.styleRule?.style.circleRadius || 20;
+                },
+                opacity: (feature) => {
+                    return typeof feature.styleRule?.style.circleFillColor?.[3] === "number" ?
+                        feature.styleRule.style.circleFillColor[3] : 1;
+                }
+            }
+        }
+    };
+}
+
+/**
+ * Creates a layer object to extend from.
+ * @augments VectorLayer
+ * @private
+ * @implements {WebGLVectorLayerRenderer}
+ * @param {Object} attrs attributes of the layer
+ * @returns {module:ol/layer/Layer} the LocalWebGLLayer with a custom renderer for WebGL styling
+ */
+export function createVectorLayerRenderer () {
+    /**
+     * @class LocalWebGLLayer
+     * @see https://openlayers.org/en/latest/examples/webgl-vector-layer.html
+     * @description the temporary class with a custom renderer to render the vector data with WebGL
+     */
+    class LocalWebGLLayer extends VectorLayer {
+        /**
+         * 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
+         * @experimental
+         */
+        createRenderer () {
+            return new WebGLVectorLayerRenderer(this, getRenderFunctions());
+        }
+    }
+
+    return LocalWebGLLayer;
+}
+
+/**
+ * Parses the vectorStyle from style.json to the feature
+ * to reduce processing on runtime
+ * @private
+ * @param {module:ol/Feature} feature - the feature to check
+ * @param {module:Backbone/Model} [styleObject] - (optional) the style model from StyleList
+ * @returns {void}
+ */
+export function formatFeatureStyles (feature, styleObject) {
+    if (!styleObject) {
+        return;
+    }
+
+    // extract first matching rule only
+    const rule = getRulesForFeature(styleObject, feature)[0];
+
+    // don't set on properties to avoid GFI issues
+    // undefined if no match
+    feature.styleRule = rule;
+}
+
+/**
+ * Layouts the geometry coordinates, removes the Z component
+ * @deprecated Will be probably removed in release version
+ * @private
+ * @param {module:ol/Feature} feature - the feature to format
+ * @returns {void}
+ */
+export function formatFeatureGeometry (feature) {
+    feature.getGeometry()?.setCoordinates?.(feature.getGeometry().getCoordinates(), "XY");
+}
+
+/**
+ * Cleans the data by automatically parsing data provided as strings to the accurate data type
+ * @todo Extend to Date types
+ * @private
+ * @param {module:ol/Feature} feature - the feature to format
+ * @param {String[]} [excludeTypes=["boolean"]] - types that should not be parsed from strings
+ * @returns {void}
+ */
+export function formatFeatureData (feature, excludeTypes = ["boolean"]) {
+    for (const key in feature.getProperties()) {
+        const
+            valueAsNumber = parseFloat(feature.get(key)),
+            valueIsTrue = typeof feature.get(key) === "string" && feature.get(key).toLowerCase() === "true" ? true : undefined,
+            valueIsFalse = typeof feature.get(key) === "string" && feature.get(key).toLowerCase() === "false" ? false : undefined;
+
+        if (!isNaN(parseFloat(feature.get(key))) && !excludeTypes.includes("number")) {
+            feature.set(key, valueAsNumber);
+        }
+        if (valueIsTrue === true && !excludeTypes.includes("boolean")) {
+            feature.set(key, valueIsTrue);
+        }
+        if (valueIsFalse === false && !excludeTypes.includes("boolean")) {
+            feature.set(key, valueIsFalse);
+        }
+    }
+}
+
+/**
+ * feature transformations called after loading
+ * called by the layer source loader, binds the instance of the layer model
+ * should be called on each source refresh
+ * @param {module:ol/Feature[]} features - the features loaded by the layer
+ * @param {String} styleId - The layer's styleId
+ * @param {String[]} excludeTypesFromParsing - types that should not be parsed from strings, only necessary for webgl
+ * @returns {void}
+ */
+export function afterLoading (features, styleId, excludeTypesFromParsing) {
+    const styleObject = styleList.returnStyleObject(styleId); // load styleModel to extract rules per feature
+
+    if (Array.isArray(features)) {
+        features.forEach(feature => {
+            formatFeatureGeometry(feature); /** @deprecated will propbably not be necessary anymore in release version */
+            formatFeatureStyles(feature, styleObject); /** @todo needs refactoring in release version  */
+            formatFeatureData(feature, excludeTypesFromParsing); /** Necessary since the WebGLPoints Style Syntax depends on data types (i.e. numbers not as strings) */
+        });
+    }
+}
+
+
+/**
+ * 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
+ */
+export function createLayer (attrs) {
+    let LayerConstructor = WebGLPointsLayer;
+    const options = {
+        id: attrs.id,
+        source: attrs.source,
+        disableHitDetection: false,
+        name: attrs.name,
+        typ: attrs.typ,
+        gfiAttributes: attrs.gfiAttributes,
+        gfiTheme: attrs.gfiTheme,
+        hitTolerance: attrs.hitTolerance || 10,
+        opacity: attrs.transparency ? (100 - attrs.transparency) / 100 : attrs.opacity,
+        renderer: "webgl",
+        styleId: attrs.styleId,
+        excludeTypesFromParsing: attrs.excludeTypesFromParsing
+    };
+
+    /**
+     * If the layer consists only of points, use WebGLPointsLayer
+     * For advanced styling options
+     * @see https://openlayers.org/en/latest/examples/webgl-points-layer.html
+    */
+    if (attrs.isPointLayer) {
+        /**
+         * @deprecated
+         * @todo will be replaced in the next OL release and incorporated in the WebGLVectorLayerRenderer
+         */
+        return new LayerConstructor({
+            style: attrs.style || defaultStyle,
+            disableHitDetection: false,
+            ...options,
+            isPointLayer: true
+        });
+    }
+
+    /**
+     * use ol/renderer/webgl/WebGLVectorLayerRenderer if not point layer
+     * Point styling as quads only
+     */
+    LayerConstructor = createVectorLayerRenderer(attrs);
+    return new LayerConstructor({
+        ...options,
+        isPointLayer: false
+    });
+}

package/src/vectorStyle/styleList.js

@@ -278,4 +278,4 @@ export default {
     initializeStyleList,
     addToStyleList,
     returnStyleObject
-};
+};

package/src/vectorStyle/styles/point/stylePoint.js

@@ -46,8 +46,12 @@ class PointStyle extends StyleClass {
      * @returns {ol/style} - The created style.
      */
     getStyle () {
-        const type = this.attributes.type.toLowerCase(),
-            isClustered = this.isClustered;
+        const isClustered = this.isClustered;
+        let type = this.attributes.type.toLowerCase();
+
+        if (isClustered && this.feature.get("features")?.length > 1) {
+            type = this.attributes.clusterType.toLowerCase();
+        }
 
         if (type === "icon") {
             return createIconStyle(this.attributes, this.feature, isClustered);

package/src/vectorStyle/styles/styleText.js

@@ -38,7 +38,7 @@ class TextStyle extends StyleClass {
     getStyle () {
         const isClustered = this.isClustered,
             feature = this.feature,
-            labelField = this.labelField;
+            labelField = this.attributes.labelField;
 
         if (isClustered && feature.get("features")?.length > 1 && this.attributes.clusterTextType !== "none") {
             return this.createClusteredTextStyle();

package/test/layer/geojson/index.test.js

@@ -3,9 +3,17 @@ import VectorSource from "ol/source/Vector.js";
 import Feature from "ol/Feature";
 import {Style, Icon} from "ol/style.js";
 import {geojson} from "../../../src";
+import * as webgl from "../../../src/renderer/webgl.js";
 
 const features = [new Feature(), new Feature()];
 
+jest.mock("../../../src/renderer/webgl.js", () => {
+    const original = jest.requireActual("../../../src/renderer/webgl.js");
+
+    original.afterLoading = jest.fn();
+    return original;
+});
+
 describe("geojson/index", function () {
     describe("createLayer", function () {
         it("creates an ol/layer/Vector", function () {
@@ -70,6 +78,12 @@ describe("geojson/index", function () {
             expect(layer.get("name")).toEqual("name");
             expect(layer.get("layers")).toEqual("layer1, layer2");
         });
+        it("creates a WebGLLayer, with param renderer \"webgl\"", function () {
+            const layer = geojson.createLayer({}, {layerParams: {renderer: "webgl"}});
+
+            expect(layer.constructor.name).toEqual("LocalWebGLLayer");
+            expect(layer.getSource()).toBeInstanceOf(VectorSource);
+        });
     });
 
     describe("createLayerSource", function () {
@@ -79,6 +93,15 @@ describe("geojson/index", function () {
             expect(source.getFormat()).toBeDefined();
             expect(source.getUrl()).toBeDefined();
         });
+        it("creates a vectorSource with an additional listener, when renderer is \"webgl\"", () => {
+            const
+                rawLayer = {url: "example.com/geo.json"},
+                source = geojson.createLayerSource({...rawLayer, renderer: "webgl"}, {});
+
+            expect(source.getListeners("featuresloadend")).toHaveLength(2);
+            source.getListeners("featuresloadend")[1]({features: []});
+            expect(webgl.afterLoading).toHaveBeenCalled();
+        });
 
     });
 

package/test/layer/oaf.test.js

@@ -7,6 +7,7 @@ import defaults from "../../src/defaults";
 import GeoJSON from "ol/format/GeoJSON.js";
 import * as oaf from "../../src/layer/oaf";
 import {featureCollection} from "./resources/oafFeatures";
+import * as webgl from "../../src/renderer/webgl.js";
 
 jest.mock("../../src/rawLayerList.js", () => {
     const original = jest.requireActual("../../src/rawLayerList.js");
@@ -15,6 +16,13 @@ jest.mock("../../src/rawLayerList.js", () => {
     return original;
 });
 
+jest.mock("../../src/renderer/webgl.js", () => {
+    const original = jest.requireActual("../../src/renderer/webgl.js");
+
+    original.afterLoading = jest.fn();
+    return original;
+});
+
 
 describe("oaf.js", function () {
     describe("createLayer", function () {
@@ -107,6 +115,12 @@ describe("oaf.js", function () {
             expect(layer.get("name")).toEqual("name");
             expect(layer.get("layers")).toEqual("layer1, layer2");
         });
+        it("creates a WebGLLayer, with param renderer \"webgl\"", function () {
+            const layer = oaf.createLayer({id: "id"}, {layerParams: {renderer: "webgl"}});
+
+            expect(layer.constructor.name).toEqual("LocalWebGLLayer");
+            expect(layer.getSource()).toBeInstanceOf(VectorSource);
+        });
     });
     describe("createLayerSource", function () {
         const consoleError = console.error;
@@ -241,5 +255,21 @@ describe("oaf.js", function () {
                 expect(afterLoadingMock.mock.calls.length).toBe(1);
             });
         });
+        it("creates a vectorSource with an additional listener, when renderer is \"webgl\"", () => {
+            const
+                url = "https://url.de",
+                rawLayer = {
+                    id: "id",
+                    url: url,
+                    featureNS: "http://www.deegree.org/app",
+                    featureType: "krankenhaeuser_hh",
+                    version: "1.0.0"
+                },
+                source = oaf.createLayerSource({...rawLayer, renderer: "webgl"});
+
+            expect(source.getListeners("featuresloadend")).toHaveLength(1);
+            source.getListeners("featuresloadend")[0]({features: []});
+            expect(webgl.afterLoading).toHaveBeenCalled();
+        });
     });
 });

package/test/layer/vectorBase.test.js

@@ -4,6 +4,14 @@ import Polygon from "ol/geom/Polygon";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector.js";
 import * as vectorBase from "../../src/layer/vectorBase";
+import * as webgl from "../../src/renderer/webgl.js";
+
+jest.mock("../../src/renderer/webgl.js", () => {
+    const original = jest.requireActual("../../src/renderer/webgl.js");
+
+    original.afterLoading = jest.fn();
+    return original;
+});
 
 describe("vectorBase.js", function () {
 
@@ -25,23 +33,35 @@ describe("vectorBase.js", function () {
 
             expect(source).toBeInstanceOf(VectorSource);
         });
+        it("creates a vectorSource with an additional listener, when renderer is \"webgl\"", () => {
+            vectorBase.createLayerSource({renderer: "webgl"});
+
+            expect(webgl.afterLoading).toHaveBeenCalled();
+        });
     });
 
     describe("createLayer", function () {
+        const attr = {
+            name: "Albus Percival Wulfric Brian Dumbledore",
+            typ: "VectorBase",
+            gfiAttributes: "ignore",
+            id: "Rawenclaw_01"
+        };
+
         it("creates a vector Base Layer", function () {
-            const attr = {
-                    name: "Albus Percival Wulfric Brian Dumbledore",
-                    typ: "VectorBase",
-                    gfiAttributes: "ignore",
-                    id: "Rawenclaw_01"
-                },
-                layer = vectorBase.createLayer(attr);
+            const layer = vectorBase.createLayer(attr);
 
             expect(layer).toBeInstanceOf(VectorLayer);
             expect(layer.get("name")).toEqual("Albus Percival Wulfric Brian Dumbledore");
             expect(layer.get("typ")).toEqual("VectorBase");
             expect(layer.get("id")).toEqual("Rawenclaw_01");
         });
+        it("creates a WebGLLayer, with param renderer \"webgl\"", function () {
+            const layer = vectorBase.createLayer({...attr, renderer: "webgl"});
+
+            expect(layer.constructor.name).toEqual("LocalWebGLLayer");
+            expect(layer.getSource()).toBeInstanceOf(VectorSource);
+        });
     });
 
     describe("updateSource", function () {

package/test/layer/wfs.test.js

@@ -8,6 +8,7 @@ import {WFS} from "ol/format.js";
 import * as wfs from "../../src/layer/wfs";
 import {featureCollection} from "./resources/wfsFeatures";
 import {wfsFilterQuery} from "./resources/wfsFilter";
+import * as webgl from "../../src/renderer/webgl.js";
 
 jest.mock("../../src/rawLayerList.js", () => {
     const original = jest.requireActual("../../src/rawLayerList.js");
@@ -16,6 +17,13 @@ jest.mock("../../src/rawLayerList.js", () => {
     return original;
 });
 
+jest.mock("../../src/renderer/webgl.js", () => {
+    const original = jest.requireActual("../../src/renderer/webgl.js");
+
+    original.afterLoading = jest.fn();
+    return original;
+});
+
 
 describe("wfs.js", function () {
     describe("createLayer", function () {
@@ -107,6 +115,12 @@ describe("wfs.js", function () {
             expect(layer.get("name")).toEqual("name");
             expect(layer.get("layers")).toEqual("layer1, layer2");
         });
+        it("creates a WebGLLayer, with param renderer \"webgl\"", function () {
+            const layer = wfs.createLayer({version: "1.1.0"}, {layerParams: {renderer: "webgl"}});
+
+            expect(layer.constructor.name).toEqual("LocalWebGLLayer");
+            expect(layer.getSource()).toBeInstanceOf(VectorSource);
+        });
     });
     describe("createLayerSource", function () {
         const consoleError = console.error;
@@ -383,6 +397,22 @@ describe("wfs.js", function () {
                 expect(afterLoadingMock.mock.calls.length).toBe(1);
             });
         });
+        it("creates a vectorSource with an additional listener, when renderer is \"webgl\"", () => {
+            const
+                url = "https://url.de",
+                rawLayer = {
+                    id: "id",
+                    url: url,
+                    featureNS: "http://www.deegree.org/app",
+                    featureType: "krankenhaeuser_hh",
+                    version: "1.0.0"
+                },
+                source = wfs.createLayerSource({...rawLayer, renderer: "webgl"});
+
+            expect(source.getListeners("featuresloadend")).toHaveLength(1);
+            source.getListeners("featuresloadend")[0]({features: []});
+            expect(webgl.afterLoading).toHaveBeenCalled();
+        });
     });
 });
 

package/test/renderer/webgl.test.js

@@ -0,0 +1,161 @@
+import VectorSource from "ol/source/Vector.js";
+import Feature from "ol/Feature";
+import Polygon from "ol/geom/Polygon";
+import * as webgl from "../../src/renderer/webgl";
+import WebGLPointsLayer from "ol/layer/WebGLPoints";
+import Layer from "ol/layer/Layer";
+import {packColor} from "ol/renderer/webgl/shaders";
+import styleList from "../../src/vectorStyle/styleList";
+
+describe("webgl.js", () => {
+    let layerParams, rawLayer, styleRule, styleObject;
+
+    beforeEach(() => {
+        layerParams = {
+            name: "webglTestLayer",
+            id: "123",
+            typ: "WFS",
+            renderer: "webgl",
+            styleId: "123"
+        };
+        rawLayer = {
+            url: "https://url.de",
+            name: "wfsSourceLayer",
+            id: "123",
+            typ: "WFS",
+            version: "2.0.0",
+            featureNS: "http://www.deegree.org/app",
+            featureType: "krankenhaeuser_hh",
+            outputFormat: "XML"
+        };
+        styleRule = {style: {
+            polygonFillColor: [255, 0, 0, 0.5],
+            polygonStrokeColor: [0, 255, 0, 0.5],
+            polygonStrokeWidth: 2,
+            circleFillColor: [0, 0, 255, 0.5],
+            circleRadius: 6
+        }};
+        styleObject = {
+            rules: [styleRule]
+        };
+
+        jest.spyOn(styleList, "returnStyleObject").mockImplementation(() => styleObject);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    describe("createLayer", () => {
+        const source = new VectorSource();
+
+        it("should return a WebGLPointsLayer", () => {
+            layerParams.isPointLayer = true;
+            const webglLayer = webgl.createLayer({...rawLayer, ...layerParams, source});
+
+            expect(webglLayer).toBeInstanceOf(WebGLPointsLayer);
+            expect(webglLayer.get("isPointLayer")).toBeTruthy();
+        });
+        it("should return a custom Layer", () => {
+            layerParams.isPointLayer = false;
+            const webglLayer = webgl.createLayer({...rawLayer, ...layerParams, source});
+
+            expect(webglLayer).toBeInstanceOf(Layer);
+            expect(webglLayer).not.toBeInstanceOf(WebGLPointsLayer);
+            expect(webglLayer.get("isPointLayer")).toBeFalsy();
+        });
+    });
+    describe("private format and style functions", () => {
+        const
+            feature = new Feature({
+                geometry: new Polygon([
+                    [[0, 0, 0], [1, 0, 0], [1, 1, 0], [0, 1, 0], [0, 0, 0]]
+                ], "XYZ"),
+                apple: "42",
+                pear: "true",
+                pumpkin: "false"
+            });
+        let $feature;
+
+        describe("formatFeatureGeometry", () => {
+            it("should remove any Z components from the geometry", () => {
+                $feature = feature.clone();
+                webgl.formatFeatureGeometry($feature);
+                /* eslint-disable-next-line max-nested-callbacks */
+                expect($feature.getGeometry().getCoordinates()[0].every(coord => coord.length === 2)).toBeTruthy();
+            });
+        });
+        describe("formatFeatureData", () => {
+            it("should not format excluded formats 'number' and 'boolean", () => {
+                $feature = feature.clone();
+                webgl.formatFeatureData($feature, ["number", "boolean"]);
+                expect(typeof $feature.get("apple")).toEqual("string");
+                expect(typeof $feature.get("pear")).toEqual("string");
+                expect(typeof $feature.get("pumpkin")).toEqual("string");
+            });
+            it("should format numbers and booleans", () => {
+                $feature = feature.clone();
+                webgl.formatFeatureData($feature, []);
+                expect(typeof $feature.get("apple")).toEqual("number");
+                expect(typeof $feature.get("pear")).toEqual("boolean");
+                expect(typeof $feature.get("pumpkin")).toEqual("boolean");
+            });
+        });
+        describe("formatFeatureStyles", () => {
+            it("bind the styling rule from the styleObject to each feature", () => {
+                $feature = feature.clone();
+                webgl.formatFeatureStyles($feature, styleObject);
+                expect($feature.styleRule).toEqual(styleRule);
+            });
+        });
+        describe("getRenderFunctions", () => {
+            it("should read the style from styleRule and pack them to single float", () => {
+                const renderFunctions = webgl.getRenderFunctions();
+
+                $feature = feature.clone();
+                webgl.formatFeatureStyles($feature, styleObject);
+                expect(renderFunctions.fill.attributes.color($feature)).toEqual(packColor(styleRule.style.polygonFillColor));
+                expect(renderFunctions.fill.attributes.opacity($feature)).toEqual(styleRule.style.polygonFillColor[3]);
+                expect(renderFunctions.stroke.attributes.color($feature)).toEqual(packColor(styleRule.style.polygonStrokeColor));
+                expect(renderFunctions.stroke.attributes.width($feature)).toEqual(styleRule.style.polygonStrokeWidth);
+                expect(renderFunctions.stroke.attributes.opacity($feature)).toEqual(styleRule.style.polygonStrokeColor[3]);
+                expect(renderFunctions.point.attributes.color($feature)).toEqual(packColor(styleRule.style.circleFillColor));
+                expect(renderFunctions.point.attributes.size($feature)).toEqual(styleRule.style.circleRadius);
+                expect(renderFunctions.point.attributes.opacity($feature)).toEqual(styleRule.style.circleFillColor[3]);
+            });
+            it("should return default values if style is empty, i.e. \"default\" style", () => {
+                const renderFunctions = webgl.getRenderFunctions();
+
+                styleObject = {
+                    rules: [{
+                        style: {}
+                    }]
+                };
+                $feature = feature.clone();
+                webgl.formatFeatureStyles($feature, styleObject);
+                expect(typeof renderFunctions.fill.attributes.color($feature)).toEqual("number");
+                expect(typeof renderFunctions.fill.attributes.opacity($feature)).toEqual("number");
+                expect(typeof renderFunctions.stroke.attributes.color($feature)).toEqual("number");
+                expect(typeof renderFunctions.stroke.attributes.width($feature)).toEqual("number");
+                expect(typeof renderFunctions.stroke.attributes.opacity($feature)).toEqual("number");
+                expect(typeof renderFunctions.point.attributes.color($feature)).toEqual("number");
+                expect(typeof renderFunctions.point.attributes.size($feature)).toEqual("number");
+                expect(typeof renderFunctions.point.attributes.opacity($feature)).toEqual("number");
+            });
+            it("should return default values if no style rule is found", () => {
+                const renderFunctions = webgl.getRenderFunctions();
+
+                $feature = feature.clone();
+                expect(feature.styleRule).toBeUndefined();
+                expect(typeof renderFunctions.fill.attributes.color($feature)).toEqual("number");
+                expect(typeof renderFunctions.fill.attributes.opacity($feature)).toEqual("number");
+                expect(typeof renderFunctions.stroke.attributes.color($feature)).toEqual("number");
+                expect(typeof renderFunctions.stroke.attributes.width($feature)).toEqual("number");
+                expect(typeof renderFunctions.stroke.attributes.opacity($feature)).toEqual("number");
+                expect(typeof renderFunctions.point.attributes.color($feature)).toEqual("number");
+                expect(typeof renderFunctions.point.attributes.size($feature)).toEqual("number");
+                expect(typeof renderFunctions.point.attributes.opacity($feature)).toEqual("number");
+            });
+        });
+    });
+});