mobility-toolbox-js 2.0.0-beta.30 → 2.0.0-beta.34

package/ol/layers/MapboxLayer.js

@@ -1,204 +1,137 @@
-import { toLonLat } from "ol/proj";
-import { Map } from "mapbox-gl";
-import Source from "ol/source/Source";
-import OLLayer from "ol/layer/Layer";
-import GeoJSON from "ol/format/GeoJSON";
-import Layer from "./Layer";
-import { getMapboxMapCopyrights, getUrlWithParams } from "../../common/utils";
-export default class MapboxLayer extends Layer {
-  constructor(options = {}) {
-    const mbLayer = new OLLayer({
-      source: new Source({}),
-      render: (frameState) => {
-        if (!this.map || !this.mbMap) {
-          return null;
-        }
-        let changed = false;
-        const canvas = this.mbMap.getCanvas();
-        const { viewState } = frameState;
-        const visible = this.olLayer.getVisible();
-        if (this.renderState.visible !== visible) {
-          canvas.style.display = visible ? "block" : "none";
-          this.renderState.visible = visible;
-          canvas.style.position = "absolute";
-        }
-        const opacity = this.olLayer.getOpacity();
-        if (this.renderState.opacity !== opacity) {
-          canvas.style.opacity = opacity;
-          this.renderState.opacity = opacity;
-        }
-        const { rotation } = viewState;
-        if (this.renderState.rotation !== rotation) {
-          this.mbMap.rotateTo(-(rotation || 0) * 180 / Math.PI, {
-            animate: false
-          });
-          changed = true;
-          this.renderState.rotation = rotation;
-        }
-        if (this.renderState.zoom !== viewState.zoom || this.renderState.center[0] !== viewState.center[0] || this.renderState.center[1] !== viewState.center[1]) {
-          this.mbMap.jumpTo({
-            center: toLonLat(viewState.center),
-            zoom: viewState.zoom - 1,
-            animate: false
-          });
-          changed = true;
-          this.renderState.zoom = viewState.zoom;
-          this.renderState.center = viewState.center;
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
         }
-        const size = this.map.getSize();
-        if (this.renderState.size[0] !== size[0] || this.renderState.size[1] !== size[1]) {
-          changed = true;
-          this.renderState.size = size;
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable no-underscore-dangle */
+var mapbox_gl_1 = require("mapbox-gl");
+var Layer_1 = require("./Layer");
+var MapboxLayerMixin_1 = require("../../common/mixins/MapboxLayerMixin");
+var utils_1 = require("../../common/utils");
+/**
+ * A class representing Mapboxlayer to display on BasicMap
+ *
+ * @example
+ * import { MapboxLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new MapboxLayer({
+ *   url: 'https://maps.geops.io/styles/travic_v2/style.json',
+ *   apikey: 'yourApiKey',
+ * });
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+var MapboxLayer = /** @class */ (function (_super) {
+    __extends(MapboxLayer, _super);
+    function MapboxLayer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    MapboxLayer.prototype.attachToMap = function (map) {
+        var _this = this;
+        _super.prototype.attachToMap.call(this, map);
+        if (!this.map || this.mbMap) {
+            return;
         }
-        if (this.mbMap && this.mbMap.style && this.mbMap.isStyleLoaded() && changed) {
-          try {
-            if (this.mbMap._frame) {
-              this.mbMap._frame.cancel();
-              this.mbMap._frame = null;
+        this.olListenersKeys.push(this.map.on('change:size', function () {
+            try {
+                if (_this.mbMap) {
+                    _this.mbMap.resize();
+                }
+            }
+            catch (err) {
+                // ignore render errors
+                // eslint-disable-next-line no-console
+                console.warn(err);
             }
-            this.mbMap._render();
-          } catch (err) {
-            console.warn(err);
-          }
+        }));
+    };
+    /**
+     * Create the mapbox map.
+     * @private
+     */
+    MapboxLayer.prototype.loadMbMap = function () {
+        var _this = this;
+        // If the map hasn't been resized, the center could be [NaN,NaN].
+        // We set default good value for the mapbox map, to avoid the app crashes.
+        var _a = this.map.getView().getCenter(), x = _a[0], y = _a[1];
+        if (!x || !y) {
+            x = 0;
+            y = 0;
         }
-        return this.mbMap.getContainer();
-      }
-    });
-    super({
-      ...options,
-      olLayer: mbLayer
-    });
-    this.styleUrl = options.url;
-    this.apiKey = options.apiKey;
-    this.apiKeyName = options.apiKeyName || "key";
-    this.updateAttribution = this.updateAttribution.bind(this);
-  }
-  attachToMap(map) {
-    super.attachToMap(map);
-    if (!this.map || this.mbMap) {
-      return;
-    }
-    this.format = new GeoJSON({
-      featureProjection: this.map.getView().getProjection()
-    });
-    this.loadMbMap();
-    this.olListenersKeys.push(this.map.on("change:size", () => {
-      try {
-        if (this.mbMap) {
-          this.mbMap.resize();
+        // Options the last render run did happen. If something changes
+        // we have to render again
+        /** @ignore */
+        this.renderState = {
+            center: [x, y],
+            zoom: null,
+            rotation: null,
+            visible: null,
+            opacity: null,
+            size: [0, 0],
+        };
+        _super.prototype.loadMbMap.call(this);
+        this.mbMap.once('load', function () {
+            var _a;
+            _this.mbMap.resize();
+            /** @ignore */
+            _this.copyrights = (0, utils_1.getMapboxMapCopyrights)(_this.mbMap) || [];
+            (_a = _this.olLayer.getSource()) === null || _a === void 0 ? void 0 : _a.setAttributions(_this.copyrights);
+        });
+        var mapboxCanvas = this.mbMap.getCanvas();
+        if (mapboxCanvas) {
+            if (this.options.tabIndex) {
+                mapboxCanvas.setAttribute('tabindex', this.options.tabIndex);
+            }
+            else {
+                // With a tabIndex='-1' the mouse events works but the map is not focused when we click on it
+                // so we remove completely the tabIndex attribute.
+                mapboxCanvas.removeAttribute('tabindex');
+            }
         }
-      } catch (err) {
-        console.warn(err);
-      }
-    }));
-  }
-  detachFromMap() {
-    if (this.mbMap) {
-      this.mbMap.off("idle", this.updateAttribution);
-      this.mbMap.triggerRepaint = () => {
-      };
-      this.mbMap.remove();
-      this.mbMap = null;
-    }
-    this.loaded = false;
-    super.detachFromMap();
-  }
-  loadMbMap() {
-    this.olListenersKeys.push(this.map.on("change:target", () => {
-      this.loadMbMap();
-    }));
-    if (!this.map.getTargetElement()) {
-      return;
-    }
-    if (!this.visible) {
-      this.olListenersKeys.push(this.once("change:visible", () => {
-        this.loadMbMap();
-      }));
-      return;
-    }
-    let [x, y] = this.map.getView().getCenter();
-    if (!x || !y) {
-      x = 0;
-      y = 0;
-    }
-    const container = document.createElement("div");
-    container.style.position = "absolute";
-    container.style.width = "100%";
-    container.style.height = "100%";
-    if (!this.apiKey && !this.styleUrl.includes(this.apiKeyName)) {
-      console.warn(`No apiKey is defined for request to ${this.styleUrl}`);
-    }
-    this.mbMap = new Map({
-      style: getUrlWithParams(this.styleUrl, {
-        [this.apiKeyName]: this.apiKey
-      }).toString(),
-      container,
-      interactive: false,
-      trackResize: false,
-      attributionControl: false,
-      ...this.options.mapOptions || {}
-    });
-    this.renderState = {
-      center: [x, y],
-      zoom: null,
-      rotation: null,
-      visible: null,
-      opacity: null,
-      size: [0, 0]
     };
-    this.mbMap.once("load", () => {
-      this.mbMap.resize();
-      this.loaded = true;
-      this.copyrights = getMapboxMapCopyrights(this.mbMap) || [];
-      this.olLayer.getSource()?.setAttributions(this.copyrights);
-      this.dispatchEvent({
-        type: "load",
-        target: this
-      });
-    });
-    const mapboxCanvas = this.mbMap.getCanvas();
-    if (mapboxCanvas) {
-      if (this.options.tabIndex) {
-        mapboxCanvas.setAttribute("tabindex", this.options.tabIndex);
-      } else {
-        mapboxCanvas.removeAttribute("tabindex");
-      }
-    }
-    this.mbMap.on("idle", this.updateAttribution);
-  }
-  updateAttribution(evt) {
-    const newAttributions = getMapboxMapCopyrights(evt.target) || [];
-    if (this.copyrights.toString() !== newAttributions.toString()) {
-      this.copyrights = newAttributions;
-      this.olLayer.getSource()?.setAttributions(newAttributions);
-    }
-  }
-  getFeatureInfoAtCoordinate(coordinate, options) {
-    if (!options || !this.format || !this.mbMap || !this.mbMap.isStyleLoaded()) {
-      return Promise.resolve({ coordinate, features: [], layer: this });
-    }
-    let pixel = coordinate && this.mbMap.project(toLonLat(coordinate));
-    if (this.hitTolerance) {
-      const { x, y } = pixel;
-      pixel = [
-        { x: x - this.hitTolerance, y: y - this.hitTolerance },
-        { x: x + this.hitTolerance, y: y + this.hitTolerance }
-      ];
-    }
-    const features = this.mbMap.queryRenderedFeatures(pixel, options).map((feature) => {
-      const olFeature = this.format.readFeature(feature);
-      if (olFeature) {
-        olFeature.set("mapboxFeature", feature);
-      }
-      return olFeature;
-    });
-    return Promise.resolve({
-      layer: this,
-      features,
-      coordinate
-    });
-  }
-  clone(newOptions) {
-    return new MapboxLayer({ ...this.options, ...newOptions });
-  }
-}
+    MapboxLayer.prototype.getOlLayerRender = function () {
+        return (0, utils_1.getMapboxRender)(this);
+    };
+    // eslint-disable-next-line class-methods-use-this
+    MapboxLayer.prototype.getMapboxMapClass = function () {
+        return mapbox_gl_1.Map;
+    };
+    /**
+     * Create a copy of the MapboxLayer.
+     * @param {Object} newOptions Options to override
+     * @return {MapboxLayer} A MapboxLayer
+     */
+    MapboxLayer.prototype.clone = function (newOptions) {
+        return new MapboxLayer(__assign(__assign({}, this.options), newOptions));
+    };
+    return MapboxLayer;
+}((0, MapboxLayerMixin_1.default)(Layer_1.default)));
+exports.default = MapboxLayer;

package/ol/layers/MapboxStyleLayer.d.ts

@@ -0,0 +1,146 @@
+export default MapboxStyleLayer;
+/**
+ * Layer for visualizing a specific set of layer from a MapboxLayer.
+ *
+ * @example
+ * import { MapboxLayer, MapboxStyleLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const mapboxLayer = new MapboxLayer({
+ *   url: 'https://maps.geops.io/styles/travic_v2/style.json?key=[yourApiKey]',
+ * });
+ *
+ * const layer = new MapboxStyleLayer({
+ *   mapboxLayer: mapboxLayer,
+ *   styleLayersFilter: () => {},
+ * });
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+declare class MapboxStyleLayer extends Layer {
+    /**
+     * Constructor.
+     *
+     * @param {Object} options
+     * @param {MapboxLayer} [options.mapboxLayer] The MapboxLayer to use.
+     * @param {Function} [options.styleLayersFilter] Filter function to decide which style layer to display.
+     */
+    constructor(options?: {
+        mapboxLayer?: MapboxLayer;
+        styleLayersFilter?: Function;
+    });
+    /**
+     * MapboxLayer provided for the style Layer.
+     * @type {MapboxLayer}
+     * @private
+     */
+    private mapboxLayer;
+    /**
+     * Define if the layer has data to display in the current mapbox layer.
+     */
+    disabled: boolean;
+    /**
+     * Function to filter features to be displayed.
+     * @type {function}
+     * @private
+     */
+    private styleLayersFilter;
+    /**
+     * Mapbox style layer id where to add the style layers.
+     * See [mapbox.map.addLayer](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addlayer) documentation.
+     * @type {String}
+     * @private
+     */
+    private beforeId;
+    /**
+     * Function to filter features for getFeatureInfoAtCoordinate method.
+     * @type {function}
+     * @private
+     */
+    private featureInfoFilter;
+    /**
+     * Function to query the rendered features.
+     * @type {function}
+     * @private
+     */
+    private queryRenderedLayersFilter;
+    /**
+     * Array of features to highlight.
+     * @type {Array<ol/Feature~Feature>}
+     * @private
+     */
+    private highlightedFeatures;
+    /**
+     * Array of selected features.
+     * @type {Array<ol/Feature~Feature>}
+     * @private
+     */
+    private selectedFeatures;
+    /**
+     * Array of mapbox style layers to add.
+     * @type {Array<mapboxgl.styleLayer>}
+     * @private
+     */
+    private styleLayers;
+    /** @ignore */
+    addStyleLayers(): void;
+    /**
+     * On Mapbox map load callback function. Add style layers and dynaimc filters.
+     * @ignore
+     */
+    onLoad(): void;
+    /** @private */
+    private addDynamicFilters;
+    /**
+     * Terminate the layer.
+     * @param {mapboxgl.Map} map the mapbox map.
+     * @override
+     */
+    override detachFromMap(map: mapboxgl.Map): void;
+    /** @ignore */
+    removeStyleLayers(): void;
+    /**
+     * Request feature information for a given coordinate.
+     * @param {ol/coordinate~Coordinate} coordinate Coordinate to request the information at.
+     * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate.
+     */
+    getFeatureInfoAtCoordinate(coordinate: any): Promise<FeatureInfo>;
+    /**
+     * Set filter that determines which features should be rendered in a style layer.
+     * @param {mapboxgl.filter} filter Determines which features should be rendered in a style layer.
+     */
+    setFilter(filter: mapboxgl.filter): void;
+    /**
+     * Set if features are hovered or not.
+     * @param {Array<ol/Feature~Feature>} features
+     * @param {boolean} state Is the feature hovered
+     * @private
+     */
+    private setHoverState;
+    /**
+     * Select a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to select.
+     * @private
+     */
+    private select;
+    /**
+     * Highlight a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to highlight.
+     * @private
+     */
+    private highlight;
+    /**
+     * Apply visibility to style layers that fits the styleLayersFilter function.
+     * @param {Event} evt Layer's event that has called the function.
+     * @private
+     */
+    private applyLayoutVisibility;
+    /**
+     * Create a copy of the MapboxStyleLayer.
+     * @param {Object} newOptions Options to override.
+     * @return {MapboxStyleLayer} A MapboxStyleLayer.
+     */
+    clone(newOptions: any): MapboxStyleLayer;
+}
+import Layer from "./Layer";
+//# sourceMappingURL=MapboxStyleLayer.d.ts.map

package/ol/layers/MapboxStyleLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapboxStyleLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/MapboxStyleLayer.js"],"names":[],"mappings":";AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH;IACE;;;;;;OAMG;IACH;QAHiC,WAAW;QACd,iBAAiB;OA4F9C;IAvFC;;;;OAIG;IACH,oBAAsC;IAEtC;;OAEG;IACH,kBAAqB;IAErB;;;;OAIG;IACH,0BAAkD;IAElD;;;;;OAKG;IACH,iBAAgC;IAEhC;;;;OAIG;IACH,0BAAoE;IAEpE;;;;OAIG;IACH,kCAAkE;IAElE;;;;OAIG;IACH,4BAA6B;IAE7B;;;;OAIG;IACH,yBAA0B;IAE1B;;;;OAIG;IACH,oBACyE;IAiG3E,cAAc;IACd,uBAcC;IAiBD;;;OAGG;IACH,eAaC;IAtIG,eAAe;IACf,0BAMC;IAgEL;;;;OAIG;IACH,gDAOC;IAmBD,cAAc;IACd,0BAYC;IAqBD;;;;OAIG;IACH,6CAFY,QAAQ,WAAW,CAAC,CAiC/B;IAED;;;OAGG;IACH,yCAYC;IAED;;;;;OAKG;IACH,sBA8BC;IAED;;;;OAIG;IACH,eAIC;IAED;;;;OAIG;IACH,kBAeC;IAED;;;;OAIG;IAEH,8BA8BC;IAED;;;;OAIG;IACH,wBAFY,gBAAgB,CAI3B;CACF"}