@masterportal/masterportalapi 2.13.0 → 2.15.0

package/example/config/portal.json

@@ -29,7 +29,53 @@
   "layers": [
     {
       "id": "1001"
+    },
+    {
+      "id": "8712",
+      "name": "Schulinfosystem",
+      "renderer": "default",
+      "styleId": "8712",
+      "typ": "WFS"
+    },
+    {
+      "id": "1534",
+      "renderer": "webgl",
+      "isPointLayer": false,
+      "styleId": "1534",
+      "typ": "WFS"
+    },
+    {
+      "id": "2003",
+      "renderer": "webgl",
+      "hitTolerance": 20,
+      "isPointLayer": true,
+      "style": {
+          "symbol": {
+              "symbolType": "circle",
+              "size": [
+                  "interpolate",
+                  ["linear"],
+                  ["get", "Total_votes"],
+                  0,
+                  6,
+                  18,
+                  24
+              ],
+              "color": [
+                  "interpolate",
+                  ["linear"],
+                  ["get", "compound"],
+                  -1,
+                  [240, 40, 30],
+                  1,
+                  [0, 200, 60]
+              ],
+              "opacity": 0.8,
+              "rotateWithView": true
+          }
+      }
     }
   ],
-  "cesiumLib":"https://geoportal-hamburg.de/mastercode/cesium/1_99/Cesium.js"
+  "cesiumLib":"https://geoportal-hamburg.de/mastercode/cesium/1_99/Cesium.js",
+  "wfsImgPath": "https://geodienste.hamburg.de/lgv-config/img/"
 }

package/example/config/services.json

@@ -113,6 +113,26 @@
       "anzahl_schueler": ">1000"
     }
   },
+  {
+    "id": "8712",
+    "name": "de.hh.up:staatliche schulen",
+    "url": "https://geodienste.hamburg.de/HH_WFS_Schulen",
+    "typ": "WFS",
+    "featureType": "staatliche_schulen",
+    "outputFormat": "XML",
+    "version": "1.1.0",
+    "featureNS": "https://registry.gdi-de.org/id/de.hh.up"
+  },
+  {
+    "id" : "1534",
+    "name" : "de.hh.up:verzeichnis oeffentlicher gruenanlagen",
+    "url" : "https://geodienste.hamburg.de/HH_WFS_Gruenplan",
+    "typ" : "WFS",
+    "featureType" : "verzeichnis_oeffentlicher_gruenanlagen",
+    "outputFormat" : "XML",
+    "version" : "1.1.0",
+    "featureNS" : "https://registry.gdi-de.org/id/de.hh.up"
+  },
   {
     "id": "6001",
     "name": "ADV (EPSG:25832)",

package/example/index.js

@@ -5,10 +5,13 @@ import {Style, Stroke, Fill, Icon} from "ol/style.js";
 import * as mpapi from "../src";
 import mapsAPI from "../src/maps/api.js";
 import rawLayerList from "../src/rawLayerList";
+import styleList from "../src/vectorStyle/styleList";
+import createStyle from "../src/vectorStyle/createStyle";
 
 import services from "./config/services.json";
 import portalConfig from "./config/portal.json";
-import localGeoJSON from "./config/localGeoJSON.js";
+import localGeoJSON from "./config/localGeoJSON";
+import localGeoJSONPoints from "./config/localGeoJSONPoints";
 import load3DScriptModule from "../src/lib/load3DScript";
 
 function errorCallback (errorEvent) {
@@ -21,20 +24,56 @@ window.mpapi = {
     map2D: null,
     map: null
 };
-//* Fake service that holds client-side prepared geojson; also nice to test automatic transformation since data is in WGS 84
+//* Fake services that hold client-side prepared geojson; also nice to test automatic transformation since data is in WGS 84
 // eslint-disable-next-line no-unused-vars
 const hamburgServicesUrl = "https://geodienste.hamburg.de/services-internet.json",
-    localService = {
+    localServices = [{
         id: "2002",
         typ: "GeoJSON",
         features: localGeoJSON
     },
+    {
+        id: "2003",
+        typ: "GeoJSON",
+        features: localGeoJSONPoints
+    }],
     config = {
         ...portalConfig,
-        layerConf: services
+        layerConf: [...services, ...localServices], // add local services
+        styleConf: "https://geodienste.hamburg.de/lgv-config/style_v3.json"
+    },
+    // eslint-disable-next-line func-style
+    getWfsStyleFunction = function () {
+        const styleId = "8712",
+            olLayer = window.mpapi.map.getLayers().getArray().find((element) => element.get("id") === "8712"),
+            source = olLayer.getSource(),
+            styleObject = styleList.returnStyleObject(styleId);
+        let isClusterFeature = false;
+
+        if (styleObject !== undefined) {
+            source.on("featuresloadend", event => {
+                event.features.forEach(element => {
+                    isClusterFeature = false;
+                    element.setStyle(createStyle.createStyle(styleObject, element, isClusterFeature, config.wfsImgPath));
+                });
+            });
+        }
     };
 let map2D = null;
 
+/* VectorStyle example */
+// Example for using the vectorStyle that is now implemented in the masterportalAPI.
+// Hardcoded to show the school layer "8712" as a wfs and "1534" as wfs with webgl renderer.
+// For better visibility adding of the other layers, especially "5001", should be commented out.
+// initialize StyleList before map is created for automated lookup of styleObject when creating webgl layer
+// application of regular canvas style happens after loading
+styleList.initializeStyleList({}, config, config.layers, undefined, (currentStyleList, error) => {
+    if (error) {
+        console.error("Die Datei " + config.styleConf + " konnte nicht geladen werden!");
+    }
+    return currentStyleList;
+});
+
 // */
 //* Cleans up map before it is re-rendered (happens on every save during dev mode)
 document.getElementById(portalConfig.target).innerHTML = "";
@@ -99,8 +138,6 @@ document.getElementById("layer-visibility").addEventListener("click", function (
 });
 
 map2D = mapsAPI.map.createMap(config, "2D", {errorCallback});
-services.push(localService);
-// */
 
 //* geojson styling function call to override default styling and special wfs styling
 mpapi.geojson.setCustomStyles({
@@ -237,4 +274,10 @@ map2D.getLayers().forEach(layer => {
 window.mpapi.map.addLayer("7001");
 window.mpapi.map.addLayer("7002");
 window.mpapi.map.addLayer("7003");
-// */
+*/
+
+/* VectorStyle example */
+// Example for using the vectorStyle that is now implemented in the masterportalAPI.
+// Apply style to layer "8172"
+// mirrors behavior of Masterportal styling
+getWfsStyleFunction();

package/jest.config.js

@@ -3,7 +3,7 @@ module.exports = {
     /** ol prints errors without HTMLCanvasElement being available in test environment */
     "setupFiles": ["jest-canvas-mock"],
     /** node_modules are usually ignored by babel-jest, but ol is published in ES6 */
-    "transformIgnorePatterns": ["/node_modules/(?!(ol|olcs|ol-mapbox-style|geotiff)/).*/"],
+    "transformIgnorePatterns": ["/node_modules/(?!(ol|olcs|ol-mapbox-style|geotiff|quick-lru)/).*/"],
     /** only consider files in src/ for coverage */
     "collectCoverageFrom": ["src/**/*.js"],
     /** coverage reporters */

package/jest.setup.js

@@ -2,4 +2,12 @@ import "regenerator-runtime/runtime";
 
 window.URL.createObjectURL = function () {
     // empty
-};
+};
+
+window.ResizeObserver =
+    window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+        disconnect: jest.fn(),
+        observe: jest.fn(),
+        unobserve: jest.fn()
+    }));

package/package.json

@@ -1,62 +1,64 @@
-{
-  "name": "@masterportal/masterportalapi",
-  "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.13.0",
-  "license": "MIT",
-  "description": "Basic functions of the Masterportal as api",
-  "repository": {
-    "type": "git",
-    "url": "git+https://bitbucket.org/geowerkstatt-hamburg/masterportalapi.git"
-  },
-  "main": "src/index.js",
-  "scripts": {
-    "test": "jest .test.js --config ./jest.config.js --collectCoverage",
-    "test:trace": "node --trace-warnings node_modules/jest/bin/jest.js ./test/layer/wfs.test.js --config ./jest.config.js",
-    "test:watch": "jest .test.js --config ./jest.config.js --watch",
-    "example": "parcel example/index.html",
-    "generate-jsdoc": "jsdoc ./src -r -d ./docs/ -R ./README.md -c jsdoc.json",
-    "prePushHook": "eslint --max-warnings 0 \"./**/*.js\" && npm run test",
-    "prepare": "husky install"
-  },
-  "dependencies": {
-    "core-js": "^3.27.1",
-    "ol": "7.1.0",
-    "olcs": "^2.13.1",
-    "proj4": "^2.8.1",
-    "xml2js": "^0.4.23"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/plugin-transform-modules-commonjs": "^7.20.11",
-    "@parcel/transformer-sass": "^2.6.0",
-    "buffer": "^6.0.3",
-    "canvas": "^2.11.0",
-    "eslint": "^8.31.0",
-    "events": "^3.3.0",
-    "husky": "^8.0.3",
-    "jest": "^29.3.1",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.3.1",
-    "jsdoc": "^4.0.0",
-    "parcel": "^2.6.0",
-    "process": "^0.11.10",
-    "sass": "^1.57.1",
-    "stream-browserify": "^3.0.0",
-    "timers-browserify": "^2.0.12"
-  },
-  "peerDependencies": {
-    "cesium": "^1.95.0"
-  },
-  "engines": {
-    "node": "^16.13.2 || ^18.12.0",
-    "npm": "^8.1.2"
-  },
-  "homepage": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi#readme",
-  "directories": {
-    "example": "example",
-    "test": "test"
-  },
-  "bugs": {
-    "url": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi/issues"
-  }
-}
+{
+  "name": "@masterportal/masterportalapi",
+  "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
+  "version": "2.15.0",
+  "license": "MIT",
+  "description": "Basic functions of the Masterportal as api",
+  "repository": {
+    "type": "git",
+    "url": "git+https://bitbucket.org/geowerkstatt-hamburg/masterportalapi.git"
+  },
+  "main": "src/index.js",
+  "scripts": {
+    "test": "jest .test.js --config ./jest.config.js --collectCoverage",
+    "test:trace": "node --trace-warnings node_modules/jest/bin/jest.js ./test/layer/wfs.test.js --config ./jest.config.js",
+    "test:watch": "jest .test.js --config ./jest.config.js --watch",
+    "example": "parcel example/index.html",
+    "generate-jsdoc": "jsdoc ./src -r -d ./docs/ -R ./README.md -c jsdoc.json",
+    "prePushHook": "eslint --max-warnings 0 \"./**/*.js\" && npm run test",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "core-js": "^3.27.1",
+    "ol": "7.2.2",
+    "olcs": "^2.13.1",
+    "proj4": "^2.8.1",
+    "xml2js": "^0.4.23"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-transform-modules-commonjs": "^7.20.11",
+    "@parcel/transformer-sass": "^2.6.0",
+    "buffer": "^6.0.3",
+    "canvas": "^2.11.0",
+    "eslint": "^8.31.0",
+    "events": "^3.3.0",
+    "husky": "^8.0.3",
+    "jest": "^29.3.1",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^29.3.1",
+    "jsdoc": "^4.0.0",
+    "parcel": "^2.6.0",
+    "process": "^0.11.10",
+    "sass": "^1.57.1",
+    "stream-browserify": "^3.0.0",
+    "timers-browserify": "^2.0.12",
+    "use-resize-observer": "^9.1.0"
+  },
+  "peerDependencies": {
+    "cesium": "^1.95.0"
+  },
+  "engines": {
+    "node": "^16.13.2 || ^18.12.0",
+    "npm": "^8.1.2"
+  },
+  "homepage": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi#readme",
+  "directories": {
+    "doc": "docs",
+    "example": "example",
+    "test": "test"
+  },
+  "bugs": {
+    "url": "https://bitbucket.org/geowerkstatt-hamburg/masterportalapi/issues"
+  }
+}

package/src/index.js

@@ -10,6 +10,7 @@ import * as vectorTile from "./layer/vectorTile";
 import * as oaf from "./layer/oaf";
 import * as terrain from "./layer/terrain";
 import * as entities from "./layer/entities";
+import * as webgl from "./renderer/webgl";
 import Tileset from "./layer/tileset";
 import * as layerLib from "./layer/lib";
 import {search, setGazetteerUrl} from "./searchAddress";
@@ -34,5 +35,6 @@ export {
     rawLayerList,
     ping,
     search,
-    crs
+    crs,
+    webgl
 };

package/src/layer/geojson/index.js

@@ -1,22 +1,32 @@
 import VectorLayer from "ol/layer/Vector";
 import GeoJSON from "ol/format/GeoJSON.js";
 import style, {setCustomStyles} from "./style";
-
+import * as webgl from "../../renderer/webgl";
 
 import {createVectorSource, createClusterVectorSource} from "../vector";
 
 // forward import to export
 export {setCustomStyles};
 
+/**
+ * @typedef {Object} layerParams
+ * @property {string} [renderer] - use default canvas or webgl renderer
+ * @property {string} [styleId] - the styleId of the layer
+ * @property {string[]} [excludeTypesFromParsing] - types that should not be parsed from strings, only necessary for webgl
+ */
+
 /**
  * Creates the VectorSource for a GeoJSON layer. It will ensure each feature has the field id set to use with the other exported geojson functions.
  * @param {object} rawLayer - rawLayer as specified in services.json
  * @param {string} [rawLayer.url] - url to fetch geojson from; if no rawLayer.features given, this is required
  * @param {object} [rawLayer.features] - if features are transmitted via rawLayer, they will be used instead of requesting an URL
+ * @param {"default" | "webgl" | undefined} [rawLayer.renderer] - use default canvas or webgl renderer
+ * @param {string} [rawLayer.styleId] - the styleId of the layer, only necessary for webgl style pipeline
+ * @param {string[]} [rawLayer.excludeTypesFromParsing] - types that should not be parsed from strings, only necessary for webgl
  * @param {object} options - options of the geojson layer
  * @returns {ol.source.Vector} created VectorSource
  */
-export function createLayerSource ({url, features, clusterDistance}, options) {
+export function createLayerSource ({url, features, clusterDistance, renderer, styleId, excludeTypesFromParsing}, options) {
     const format = new GeoJSON();
     let source = null;
 
@@ -32,6 +42,18 @@ export function createLayerSource ({url, features, clusterDistance}, options) {
         }
     });
 
+    // perform necessary feature operations if renderer is webgl
+    if (renderer === "webgl") {
+        // if features were provided before source creation
+        if (features?.length > 0) {
+            webgl.afterLoading(source.getFeatures(), styleId, excludeTypesFromParsing);
+        }
+        // wait for loading
+        source.once("featuresloadend", event => {
+            webgl.afterLoading(event?.features, styleId, excludeTypesFromParsing);
+        });
+    }
+
     return source;
 }
 
@@ -45,9 +67,30 @@ export function createLayerSource ({url, features, clusterDistance}, options) {
  * @returns {ol.layer.Vector} Layer with id and source specified in rawLayer
  */
 export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {}) {
-    const layer = new VectorLayer(Object.assign({
+    let layer, source;
+
+    // use WebGL render pipeline, if specified
+    if (layerParams.renderer === "webgl") {
+        source = createLayerSource({
+            ...rawLayer,
+            renderer: layerParams.renderer,
+            styleId: layerParams.styleId,
+            excludeTypesFromParsing: layerParams.excludeTypesFromParsing
+        }, options);
+        layer = webgl.createLayer({
+            ...rawLayer,
+            ...layerParams,
+            source
+        });
+
+        return layer;
+    }
+
+    // use default canvas renderer
+    source = createLayerSource(rawLayer, options);
+    layer = new VectorLayer(Object.assign({
         id: rawLayer.id,
-        source: createLayerSource(rawLayer, options)
+        source
     }, layerParams));
 
     if (options.style) {
@@ -59,6 +102,7 @@ export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {
     else {
         layer.setStyle(style);
     }
+
     return layer;
 }
 
@@ -70,6 +114,13 @@ export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {
 export function updateSource (layer) {
     // openlayers named this "refresh", but it also means "reload" if an URL is set
     layer.getSource().refresh();
+
+    // perform necessary feature operations if renderer is webgl
+    if (layer.get("renderer") === "webgl") {
+        layer.getSource().once("featuresloadend", event => {
+            webgl.afterLoading(event?.features, layer.get("styleId"), layer.get("excludeTypesFromParsing"));
+        });
+    }
 }
 
 /**

package/src/layer/oaf.js

@@ -4,6 +4,7 @@ import GeoJSON from "ol/format/GeoJSON.js";
 import {createVectorSource, createClusterVectorSource} from "./vector";
 import {onError, onLoad} from "../lib/wfsUtil";
 import {getParamsUrl} from "../lib/oafUtil";
+import * as webgl from "../renderer/webgl";
 
 /**
  * Layer specification as in services.json.
@@ -170,6 +171,9 @@ function createUrl (rawLayer) {
 /**
  * Creates an ol/source element for the rawLayer by OAF (XML or Geojson)
  * @param {rawLayer} rawLayer layer specification as in services.json
+ * @param {"default" | "webgl" | undefined} [rawLayer.renderer] - use default canvas or webgl renderer
+ * @param {string} [rawLayer.styleId] - the styleId of the layer, only necessary for webgl style pipeline
+ * @param {string[]} [rawLayer.excludeTypesFromParsing] - types that should not be parsed from strings, only necessary for webgl
  * @param {options} [options] additional options
  * {@link https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html failure/success see}
  * @returns {(ol.source.VectorSource|ol.source.Cluster)} VectorSource or Cluster, depending on whether clusterDistance is set.
@@ -182,6 +186,12 @@ export function createLayerSource (rawLayer, options = {}) {
     const url = createUrl(rawLayer),
         source = getLayerSource(rawLayer, options, url);
 
+    if (rawLayer.renderer === "webgl") {
+        source.once("featuresloadend", event => {
+            webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing);
+        });
+    }
+
     return source;
 }
 
@@ -194,11 +204,31 @@ export function createLayerSource (rawLayer, options = {}) {
  * @returns {ol.Layer} Layer that can be added to map.
  */
 export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {}) {
-    const source = createLayerSource(rawLayer, options),
-        layer = new VectorLayer(Object.assign({
-            source,
-            id: rawLayer.id
-        }, layerParams));
+    let layer, source;
+
+    // use WebGL render pipeline, if specified
+    if (layerParams.renderer === "webgl") {
+        source = createLayerSource({
+            ...rawLayer,
+            renderer: layerParams.renderer,
+            styleId: layerParams.styleId,
+            excludeTypesFromParsing: layerParams.excludeTypesFromParsing
+        }, options);
+        layer = webgl.createLayer({
+            ...rawLayer,
+            ...layerParams,
+            source
+        });
+
+        return layer;
+    }
+
+    // use default canvas renderer
+    source = createLayerSource(rawLayer, options);
+    layer = new VectorLayer(Object.assign({
+        source,
+        id: rawLayer.id
+    }, layerParams));
 
     if (options.style) {
         layer.setStyle(options.style);

package/src/layer/vectorBase.js

@@ -1,6 +1,7 @@
 
 import VectorLayer from "ol/layer/Vector.js";
 import VectorSource from "ol/source/Vector.js";
+import * as webgl from "../renderer/webgl";
 
 /**
  * Triggered by Layer to create a layerSource
@@ -8,9 +9,16 @@ import VectorSource from "ol/source/Vector.js";
  * @returns {void}
  */
 export function createLayerSource (attrs) {
-    return new VectorSource({
+    const source = new VectorSource({
         features: attrs.features
     });
+
+    // perform necessary feature operations if renderer is webgl
+    if (attrs.renderer === "webgl") {
+        webgl.afterLoading(source.getFeatures(), attrs.styleId, attrs.excludeTypesFromParsing);
+    }
+
+    return source;
 }
 
 /**
@@ -20,6 +28,11 @@ export function createLayerSource (attrs) {
  * @returns {void}
  */
 export function updateSource (layer, features) {
+    // perform necessary feature operations if renderer is webgl
+    if (layer.get("renderer") === "webgl") {
+        webgl.afterLoading(features, layer.get("styleId"), layer.get("excludeTypesFromParsing"));
+    }
+
     layer.getSource().clear(true);
     layer.getSource().addFeatures(features);
 }
@@ -32,6 +45,12 @@ export function updateSource (layer, features) {
 export function createLayer (attrs) {
     const source = this.createLayerSource(attrs);
 
+    if (attrs.renderer === "webgl") {
+        return webgl.createLayer({
+            ...attrs,
+            source
+        });
+    }
     return new VectorLayer({
         source: source,
         name: attrs.name,

package/src/layer/wfs.js

@@ -1,6 +1,7 @@
 import VectorLayer from "ol/layer/Vector.js";
 import {bbox} from "ol/loadingstrategy.js";
 import {WFS} from "ol/format.js";
+import * as webgl from "../renderer/webgl";
 
 import {createVectorSource, createClusterVectorSource} from "./vector";
 import {getVersion, onError, onLoad} from "../lib/wfsUtil";
@@ -14,6 +15,9 @@ import {getVersion, onError, onLoad} from "../lib/wfsUtil";
  * @property {string} featureNS - the namespace URI used for features
  * @property {number} clusterDistance - pixel radius, within this radius, all features are "clustered" into one feature - if available, a cluster source is created.
  * @property {function} style - style function to style the layer if options.style is not set
+ * @property {string} [renderer] - use default canvas or webgl renderer
+ * @property {string} [styleId] - the styleId of the layer
+ * @property {string[]} [excludeTypesFromParsing] - types that should not be parsed from strings, only necessary for webgl
  */
 
 /**
@@ -95,7 +99,7 @@ function loadWFS (url, params, source, {onErrorFn, success, failure}, options) {
  * @param {string} filter xml resource as wfs filter
  * @param {string} url url to load features from
  * @param {ol.source.VectorSource} source the vector source
-* @param {object} errorAndSuccessFns functions to handle error and success
+ * @param {object} errorAndSuccessFns functions to handle error and success
  * @param {function} errorAndSuccessFns.onErrorFn  Calls options.onLoadingError and 'featuresloaderror' event will be fired by using failure callback.
  * @param {function} errorAndSuccessFns.success  callback: 'featuresloadend' event will be fired
  * @param {function} errorAndSuccessFns.failure failure callback to ol.VectorLayer, fires 'featuresloaderror' event
@@ -138,6 +142,9 @@ function createUrl (rawLayer, version, projection, bboxParam) {
  * Creates an ol/source element for the rawLayer by using a loader.
  * The 'featuresloadend' and 'featuresloaderror' events will be fired by using success and failure callbacks of the loader.
  * @param {rawLayer} rawLayer layer specification as in services.json
+ * @param {"default" | "webgl" | undefined} [rawLayer.renderer] - use default canvas or webgl renderer
+ * @param {string} [rawLayer.styleId] - the styleId of the layer, only necessary for webgl style pipeline
+ * @param {string[]} [rawLayer.excludeTypesFromParsing] - types that should not be parsed from strings, only necessary for webgl
  * @param {options} [options] additional options
  * {@link https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html failure/success see}
  * @returns {(ol.source.VectorSource|ol.source.Cluster)} VectorSource or Cluster, depending on whether clusterDistance is set.
@@ -186,10 +193,14 @@ export function createLayerSource (rawLayer, options = {}) {
     if (options.beforeLoading) {
         source.once("featuresloadstart", () => options.beforeLoading());
     }
-
     if (rawLayer.clusterDistance) {
         return createClusterVectorSource(source, rawLayer.clusterDistance, options.clusterGeometryFunction);
     }
+    if (rawLayer.renderer === "webgl") {
+        source.once("featuresloadend", event => {
+            webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing);
+        });
+    }
     return source;
 }
 
@@ -202,11 +213,31 @@ export function createLayerSource (rawLayer, options = {}) {
  * @returns {ol.Layer} Layer that can be added to map.
  */
 export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {}) {
-    const source = createLayerSource(rawLayer, options),
-        layer = new VectorLayer(Object.assign({
-            source,
-            id: rawLayer.id
-        }, layerParams));
+    let layer, source;
+
+    // use WebGL render pipeline, if specified
+    if (layerParams.renderer === "webgl") {
+        source = createLayerSource({
+            ...rawLayer,
+            renderer: layerParams.renderer,
+            styleId: layerParams.styleId,
+            excludeTypesFromParsing: layerParams.excludeTypesFromParsing
+        }, options);
+        layer = webgl.createLayer({
+            ...rawLayer,
+            ...layerParams,
+            source
+        });
+
+        return layer;
+    }
+
+    // use default canvas renderer
+    source = createLayerSource(rawLayer, options);
+    layer = new VectorLayer(Object.assign({
+        source,
+        id: rawLayer.id
+    }, layerParams));
 
     if (options.style) {
         layer.setStyle(options.style);