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

package/ol/layers/MapboxStyleLayer.js

@@ -0,0 +1,383 @@
+"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];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable no-param-reassign */
+var Layer_1 = require("./Layer");
+/**
+ * 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}
+ */
+var MapboxStyleLayer = /** @class */ (function (_super) {
+    __extends(MapboxStyleLayer, _super);
+    /**
+     * 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.
+     */
+    function MapboxStyleLayer(options) {
+        if (options === void 0) { options = {}; }
+        var _this = _super.call(this, options) || this;
+        /**
+         * MapboxLayer provided for the style Layer.
+         * @type {MapboxLayer}
+         * @private
+         */
+        _this.mapboxLayer = options.mapboxLayer;
+        /**
+         * Define if the layer has data to display in the current mapbox layer.
+         */
+        _this.disabled = false;
+        /**
+         * Function to filter features to be displayed.
+         * @type {function}
+         * @private
+         */
+        _this.styleLayersFilter = options.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
+         */
+        _this.beforeId = options.beforeId;
+        /**
+         * Function to filter features for getFeatureInfoAtCoordinate method.
+         * @type {function}
+         * @private
+         */
+        _this.featureInfoFilter = options.featureInfoFilter || (function (obj) { return obj; });
+        /**
+         * Function to query the rendered features.
+         * @type {function}
+         * @private
+         */
+        _this.queryRenderedLayersFilter = options.queryRenderedLayersFilter;
+        /**
+         * Array of features to highlight.
+         * @type {Array<ol/Feature~Feature>}
+         * @private
+         */
+        _this.highlightedFeatures = [];
+        /**
+         * Array of selected features.
+         * @type {Array<ol/Feature~Feature>}
+         * @private
+         */
+        _this.selectedFeatures = [];
+        /**
+         * Array of mapbox style layers to add.
+         * @type {Array<mapboxgl.styleLayer>}
+         * @private
+         */
+        _this.styleLayers =
+            (options.styleLayer ? [options.styleLayer] : options.styleLayers) || [];
+        /**
+         * @private
+         */
+        _this.addStyleLayers = _this.addStyleLayers.bind(_this);
+        /**
+         * @private
+         */
+        _this.onLoad = _this.onLoad.bind(_this);
+        if (options.filters) {
+            /** @private */
+            _this.addDynamicFilters = function () {
+                _this.setFilter(typeof options.filters === 'function'
+                    ? options.filters(_this)
+                    : options.filters);
+            };
+        }
+        if (!_this.styleLayersFilter && _this.styleLayers) {
+            var ids_1 = _this.styleLayers.map(function (s) { return s.id; });
+            _this.styleLayersFilter = function (styleLayer) { return ids_1.includes(styleLayer.id); };
+        }
+        return _this;
+    }
+    /**
+     * Initialize the layer.
+     * @param {mapboxgl.Map} map the mapbox map.
+     * @override
+     */
+    MapboxStyleLayer.prototype.attachToMap = function (map) {
+        var _this = this;
+        if (!this.mapboxLayer.map) {
+            this.mapboxLayer.attachToMap(map);
+        }
+        _super.prototype.attachToMap.call(this, map);
+        if (!this.map) {
+            return;
+        }
+        // Apply the initial visibiltity.
+        var mbMap = this.mapboxLayer.mbMap;
+        if (!mbMap) {
+            // If the mbMap is not yet created because the  map has no target yet, we
+            // relaunch the initialisation when it's the case.
+            this.olListenersKeys.push(this.map.on('change:target', function () {
+                _this.attachToMap(map);
+            }));
+            return;
+        }
+        // mbMap.loaded() and mbMap.isStyleLoaded() are reliable only on the first call of init.
+        // On the next call (when a topic change for example), these functions returns false because
+        // the style is being modified.
+        // That's why we rely on a property instead for the next calls.
+        if (this.mapboxLayer.loaded || mbMap.isStyleLoaded() || mbMap.loaded()) {
+            this.onLoad();
+        }
+        else {
+            mbMap.once('load', this.onLoad);
+        }
+        // Apply the visibiltity when layer's visibility change.
+        this.olListenersKeys.push(this.on('change:visible', function (evt) {
+            // Once the map is loaded we can apply vsiiblity without waiting
+            // the style. Mapbox take care of the application of style changes.
+            _this.applyLayoutVisibility(evt);
+        }));
+        this.olListenersKeys.push(this.mapboxLayer.on('load', function () {
+            _this.onLoad();
+        }));
+    };
+    /**
+     * Terminate the layer.
+     * @param {mapboxgl.Map} map the mapbox map.
+     * @override
+     */
+    MapboxStyleLayer.prototype.detachFromMap = function (map) {
+        var mbMap = this.mapboxLayer.mbMap;
+        if (mbMap) {
+            mbMap.off('load', this.onLoad);
+            this.removeStyleLayers();
+        }
+        _super.prototype.detachFromMap.call(this, map);
+    };
+    /** @ignore */
+    MapboxStyleLayer.prototype.addStyleLayers = function () {
+        var _this = this;
+        var mbMap = this.mapboxLayer.mbMap;
+        if (!mbMap) {
+            return;
+        }
+        this.styleLayers.forEach(function (styleLayer) {
+            var id = styleLayer.id, source = styleLayer.source;
+            if (mbMap.getSource(source) && !mbMap.getLayer(id)) {
+                mbMap.addLayer(styleLayer, _this.beforeId);
+            }
+        });
+        this.applyLayoutVisibility();
+    };
+    /** @ignore */
+    MapboxStyleLayer.prototype.removeStyleLayers = function () {
+        var mbMap = this.mapboxLayer.mbMap;
+        if (!mbMap) {
+            return;
+        }
+        this.styleLayers.forEach(function (styleLayer) {
+            if (mbMap.getLayer(styleLayer.id)) {
+                mbMap.removeLayer(styleLayer.id);
+            }
+        });
+    };
+    /**
+     * On Mapbox map load callback function. Add style layers and dynaimc filters.
+     * @ignore
+     */
+    MapboxStyleLayer.prototype.onLoad = function () {
+        this.addStyleLayers();
+        if (this.addDynamicFilters) {
+            this.addDynamicFilters();
+        }
+        var mbMap = this.mapboxLayer.mbMap;
+        var style = mbMap.getStyle();
+        if (style && this.styleLayersFilter) {
+            var styles = style.layers.filter(this.styleLayersFilter);
+            this.disabled = !styles.length;
+        }
+    };
+    /**
+     * 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.
+     */
+    MapboxStyleLayer.prototype.getFeatureInfoAtCoordinate = function (coordinate) {
+        var _this = this;
+        var mbMap = this.mapboxLayer.mbMap;
+        // Ignore the getFeatureInfo until the mapbox map is loaded
+        if (!mbMap || !mbMap.isStyleLoaded()) {
+            return Promise.resolve({ coordinate: coordinate, features: [], layer: this });
+        }
+        // We query features only on style layers used by this layer.
+        var layers = this.styleLayers || [];
+        if (this.styleLayersFilter) {
+            layers = mbMap.getStyle().layers.filter(this.styleLayersFilter);
+        }
+        if (this.queryRenderedLayersFilter) {
+            layers = mbMap.getStyle().layers.filter(this.queryRenderedLayersFilter);
+        }
+        return this.mapboxLayer
+            .getFeatureInfoAtCoordinate(coordinate, {
+            layers: layers.map(function (layer) { return layer && layer.id; }),
+            validate: false,
+        })
+            .then(function (featureInfo) {
+            var features = featureInfo.features.filter(function (feature) {
+                return _this.featureInfoFilter(feature, _this.map.getView().getResolution());
+            });
+            _this.highlight(features);
+            return __assign(__assign({}, featureInfo), { features: features, layer: _this });
+        });
+    };
+    /**
+     * 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.
+     */
+    MapboxStyleLayer.prototype.setFilter = function (filter) {
+        var mbMap = this.mapboxLayer.mbMap;
+        if (!mbMap) {
+            return;
+        }
+        this.styleLayers.forEach(function (_a) {
+            var id = _a.id;
+            if (mbMap.getLayer(id)) {
+                mbMap.setFilter(id, filter);
+            }
+        });
+    };
+    /**
+     * Set if features are hovered or not.
+     * @param {Array<ol/Feature~Feature>} features
+     * @param {boolean} state Is the feature hovered
+     * @private
+     */
+    MapboxStyleLayer.prototype.setHoverState = function (features, state) {
+        var mbMap = this.mapboxLayer.mbMap;
+        if (!features || !mbMap) {
+            return;
+        }
+        features.forEach(function (feature) {
+            var _a = feature.get('mapboxFeature') || {}, source = _a.source, sourceLayer = _a.sourceLayer;
+            if ((!source && !sourceLayer) || !feature.getId()) {
+                if (!feature.getId()) {
+                    // eslint-disable-next-line no-console
+                    console.warn("No feature's id found. To use the feature state functionnality, tiles must be generated with --generate-ids. See https://github.com/mapbox/tippecanoe#adding-calculated-attributes.", feature.getId(), feature.getProperties());
+                }
+                return;
+            }
+            mbMap.setFeatureState({
+                id: feature.getId(),
+                source: source,
+                sourceLayer: sourceLayer,
+            }, { hover: state });
+        });
+    };
+    /**
+     * Select a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to select.
+     * @private
+     */
+    MapboxStyleLayer.prototype.select = function (features) {
+        if (features === void 0) { features = []; }
+        this.setHoverState(this.selectedFeatures, false);
+        this.selectedFeatures = features;
+        this.setHoverState(this.selectedFeatures, true);
+    };
+    /**
+     * Highlight a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to highlight.
+     * @private
+     */
+    MapboxStyleLayer.prototype.highlight = function (features) {
+        var _this = this;
+        if (features === void 0) { features = []; }
+        // Filter out selected features
+        var filtered = this.highlightedFeatures.filter(function (feature) {
+            return !_this.selectedFeatures
+                .map(function (feat) { return feat.getId(); })
+                .includes(feature.getId());
+        });
+        // Remove previous highlight
+        this.setHoverState(filtered, false);
+        this.highlightedFeatures = features;
+        // Add highlight
+        this.setHoverState(this.highlightedFeatures, true);
+    };
+    /**
+     * Apply visibility to style layers that fits the styleLayersFilter function.
+     * @param {Event} evt Layer's event that has called the function.
+     * @private
+     */
+    // eslint-disable-next-line no-unused-vars
+    MapboxStyleLayer.prototype.applyLayoutVisibility = function (evt) {
+        var visible = this.visible;
+        var mbMap = this.mapboxLayer.mbMap;
+        var filterFunc = this.styleLayersFilter;
+        if (!mbMap) {
+            return;
+        }
+        var style = mbMap.getStyle();
+        if (!style) {
+            return;
+        }
+        if (filterFunc) {
+            var visibilityValue = visible ? 'visible' : 'none';
+            for (var i = 0; i < style.layers.length; i += 1) {
+                var styleLayer = style.layers[i];
+                if (filterFunc(styleLayer)) {
+                    if (mbMap.getLayer(styleLayer.id)) {
+                        mbMap.setLayoutProperty(styleLayer.id, 'visibility', visibilityValue);
+                    }
+                }
+            }
+        }
+    };
+    /**
+     * Create a copy of the MapboxStyleLayer.
+     * @param {Object} newOptions Options to override.
+     * @return {MapboxStyleLayer} A MapboxStyleLayer.
+     */
+    MapboxStyleLayer.prototype.clone = function (newOptions) {
+        return new MapboxStyleLayer(__assign(__assign({}, this.options), newOptions));
+    };
+    return MapboxStyleLayer;
+}(Layer_1.default));
+exports.default = MapboxStyleLayer;

package/ol/layers/MaplibreLayer.js

@@ -0,0 +1,69 @@
+"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];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var maplibre_gl_1 = require("maplibre-gl");
+var Layer_1 = require("./Layer");
+var MapboxLayerMixin_1 = require("../../common/mixins/MapboxLayerMixin");
+var utils_1 = require("../../common/utils");
+/**
+ * A class representing MaplibreLayer to display on BasicMap
+ *
+ * @example
+ * import { MaplibreLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new MaplibreLayer({
+ *   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 MaplibreLayer = /** @class */ (function (_super) {
+    __extends(MaplibreLayer, _super);
+    function MaplibreLayer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    MaplibreLayer.prototype.getOlLayerRender = function () {
+        return (0, utils_1.getMaplibreRender)(this);
+    };
+    // eslint-disable-next-line class-methods-use-this
+    MaplibreLayer.prototype.getMapboxMapClass = function () {
+        return maplibre_gl_1.Map;
+    };
+    /**
+     * Create a copy of the MapboxLayer.
+     * @param {Object} newOptions Options to override
+     * @return {MapboxLayer} A MapboxLayer
+     */
+    MaplibreLayer.prototype.clone = function (newOptions) {
+        return new MaplibreLayer(__assign(__assign({}, this.options), newOptions));
+    };
+    return MaplibreLayer;
+}((0, MapboxLayerMixin_1.default)(Layer_1.default)));
+exports.default = MaplibreLayer;