@masterportal/masterportalapi 2.16.0 → 2.17.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
+## 2.17.0 - 2023-04-27
+### Added
+- Added functionality for mapbox style raster sources for vector tile layer.
+- Added possibility to use zoomToFeatureId in vectorStyle.
+
+### Changed
+- ol map default interactions and keyboardEventTarget can now be set by config parameters.
+- The following packages have been updated:
+    - dependencies:
+        - xml2js: 0.4.23 to 0.5.0
+
+### Fix
+- Fix vectorStyle for circlesegments.
+
+---
+
 ## 2.16.0 - 2023-03-28
 ### Added
 - Added support for `npm` version ^9.1.3.

package/example/index.js

@@ -262,7 +262,7 @@ fetch(vtStyleUrl)
     .then(style => {
         const vtLayer = window.mpapi.map.addLayer("6001");
 
-        mpapi.vectorTile.setStyle(vtLayer, style);
+        mpapi.vectorTile.setStyle(vtLayer, style, vtStyleUrl);
     });
 //*/
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {
@@ -23,7 +23,7 @@
     "ol": "7.3.0",
     "olcs": "^2.13.1",
     "proj4": "^2.9.0",
-    "xml2js": "^0.4.23"
+    "xml2js": "^0.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",

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 {stylefunction} from "ol-mapbox-style";
+import {stylefunction, apply} from "ol-mapbox-style";
 
 import defaults from "../defaults";
 
@@ -161,13 +161,25 @@ export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {
  * @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 = {}} = {}) {
-    stylefunction(layer, glStyle,
-        options.sourceId ? options.sourceId : Object.keys(glStyle.sources)[0],
-        options.resolutions,
-        options.spriteData,
-        options.spriteImageUrl,
-        options.getFonts);
+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);
+        }
+    });
 }

package/src/maps/ol/olMap.js

@@ -150,18 +150,23 @@ export function createMap (config = defaults, {mapParams, callback, errorCallbac
     crs.registerProjections(config.namedProjections);
     setBackgroundImage(config);
     setGazetteerUrl(config.gazetteerUrl);
-    const map = new Map(Object.assign({
-        target: config.target || defaults.target,
-        interactions: olDefaultInteractions({dragPan: false, altShiftDragRotate: false, pinchRotate: false}).extend([
-            new DragPan({
-                condition: function (event) {
-                    return (!event.originalEvent.pointerType || event.originalEvent.pointerType === "mouse") || (config.twoFingerPan && this.getPointerCount() === 2) || !config.twoFingerPan;
-                }
-            })
-        ]),
-        controls: [],
-        view: createMapView(config)
-    }, mapParams));
+    const selectedInteractions = config.mapInteractions?.interactionModes ? config.mapInteractions?.interactionModes : {dragPan: false, altShiftDragRotate: false, pinchRotate: false},
+        map = new Map(Object.assign({
+            target: config.target || defaults.target,
+            interactions: olDefaultInteractions(selectedInteractions).extend([
+                new DragPan({
+                    condition: function (event) {
+                        if (event.originalEvent.shiftKey) {
+                            return false;
+                        }
+                        return (!event.originalEvent.pointerType || event.originalEvent.pointerType === "mouse") || (config.twoFingerPan && this.getPointerCount() === 2) || !config.twoFingerPan;
+                    }
+                })
+            ]),
+            controls: [],
+            view: createMapView(config),
+            keyboardEventTarget: config.mapInteractions?.keyboardEventTarget ? config.mapInteractions?.keyboardEventTarget : false
+        }, mapParams));
 
     map.set("mapMode", "2D");
     map.set("id", `map2D_${mapIdCounter++}`);

package/src/vectorStyle/styleList.js

@@ -18,7 +18,8 @@ let styleList,
     highlightFeaturesPolygonStyleId,
     highlightFeaturesLineStyleId,
     styleConf,
-    featureViaUrlLayers;
+    featureViaUrlLayers,
+    zoomToFeatureId;
 
 /**
  * Gathers the styleIds of the layers.
@@ -196,9 +197,10 @@ function parseStyles (data) {
         getStyleIdForHighlightFeaturesPolygon(),
         getStyleIdForHighlightFeaturesLine(),
         getStyleIdsFromTools(),
-        getFeatureViaURLStyles());
+        getFeatureViaURLStyles(),
+        zoomToFeatureId);
 
-    styleIds = styleIds.reduce((acc, val) => acc.concat(val), []);
+    styleIds = styleIds.reduce((acc, val) => acc.concat(val), []).filter(item => item);
     filteredData = dataWithDefaultValue.filter(styleObject => styleIds.includes(styleObject.styleId));
 
     return filteredData;
@@ -223,6 +225,7 @@ function initializeStyleList (styleGetters, Config, layers, tools, callback) {
     highlightFeaturesPointStyleId = styleGetters.highlightFeaturesPointStyleId;
     highlightFeaturesPolygonStyleId = styleGetters.highlightFeaturesPolygonStyleId;
     highlightFeaturesLineStyleId = styleGetters.highlightFeaturesLineStyleId;
+    zoomToFeatureId = styleGetters.zoomToFeatureId;
 
     styleConf = Config.styleConf;
     featureViaUrlLayers = Config.featureViaURL?.layers;

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

@@ -220,11 +220,14 @@ export function createNominalPointStyle (attributes, feature, defaultImageName)
     if (styleScalingShape === "CIRCLESEGMENTS") {
         svgPath = createNominalCircleSegments(workingFeature, attributes);
         style = createSVGStyle(svgPath, 5);
+        style.type = "CIRCLESEGMENTS";
+        style.scalingAttribute = workingFeature.get(attributes.scalingAttribute);
     }
 
     // create style from svg and image
     if (imageName !== defaultImageName) {
         imageStyle = createIconStyle(attributes, feature);
+        imageStyle.type = "imageStyle";
         style = [style, imageStyle];
     }