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

package/mapbox/layers/Layer.js

@@ -0,0 +1,139 @@
+"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);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Observable_1 = require("ol/Observable");
+var proj_1 = require("ol/proj");
+var Layer_1 = require("../../common/layers/Layer");
+var UserInteractionsLayerMixin_1 = require("../../common/mixins/UserInteractionsLayerMixin");
+/**
+ * A class representing a layer to display on an OpenLayers map.
+ *
+ * @example
+ * import { Layer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new Layer({
+ *   olLayer: ...,
+ * });
+ *
+ * @see <a href="/example/ol-map">Map example</a>
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+var Layer = /** @class */ (function (_super) {
+    __extends(Layer, _super);
+    function Layer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Initialize the layer and listen to user events.
+     * @param {ol/Map~Map} map
+     */
+    Layer.prototype.attachToMap = function (map) {
+        _super.prototype.attachToMap.call(this, map);
+        if (!this.map) {
+            return;
+        }
+        if (this.userInteractions) {
+            this.toggleVisibleListeners();
+            this.onChangeVisibleKey = this.on('change:visible', this.toggleVisibleListeners);
+        }
+    };
+    Layer.prototype.detachFromMap = function () {
+        if (this.map) {
+            this.deactivateUserInteractions();
+            (0, Observable_1.unByKey)(this.onChangeVisibleKey);
+        }
+        _super.prototype.detachFromMap.call(this);
+    };
+    Layer.prototype.activateUserInteractions = function () {
+        this.deactivateUserInteractions();
+        if (this.map &&
+            this.userInteractions &&
+            this.userClickInteractions &&
+            this.userClickCallbacks.length) {
+            this.map.on('click', this.onUserClickCallback);
+        }
+        if (this.map &&
+            this.userInteractions &&
+            this.userHoverInteractions &&
+            this.userHoverCallbacks.length) {
+            this.map.on('mousemove', this.onUserMoveCallback);
+        }
+    };
+    Layer.prototype.deactivateUserInteractions = function () {
+        if (this.map) {
+            this.map.off('mousemove', this.onUserMoveCallback);
+            this.map.off('click', this.onUserClickCallback);
+        }
+    };
+    /**
+     * Toggle listeners needed when a layer is avisible or not.
+     * @private
+     */
+    Layer.prototype.toggleVisibleListeners = function () {
+        if (this.visible) {
+            this.activateUserInteractions();
+        }
+        else {
+            this.deactivateUserInteractions();
+        }
+    };
+    /**
+     * Returns the current extent in mercator coordinates.
+     */
+    Layer.prototype.getMercatorExtent = function () {
+        var bounds = this.map.getBounds().toArray();
+        return (0, proj_1.transformExtent)(__spreadArray(__spreadArray([], bounds[0], true), bounds[1], true), 'EPSG:4326', 'EPSG:3857');
+    };
+    /**
+     * Returns the equivalent zoom in Openlayers.
+     */
+    Layer.prototype.getOlZoom = function () {
+        return this.map.getZoom() + 1;
+    };
+    /**
+     * Create a copy of the Layer.
+     * @param {Object} newOptions Options to override
+     * @return {Layer} A Layer
+     */
+    Layer.prototype.clone = function (newOptions) {
+        return new Layer(__assign(__assign({}, this.options), newOptions));
+    };
+    return Layer;
+}((0, UserInteractionsLayerMixin_1.default)(Layer_1.default)));
+exports.default = Layer;

package/mapbox/layers/RealtimeLayer.js

@@ -0,0 +1,312 @@
+"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);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var proj_1 = require("ol/proj");
+var Observable_1 = require("ol/Observable");
+var extent_1 = require("ol/extent");
+var transform_rotate_1 = require("@turf/transform-rotate");
+var helpers_1 = require("@turf/helpers");
+var RealtimeLayerMixin_1 = require("../../common/mixins/RealtimeLayerMixin");
+var Layer_1 = require("./Layer");
+var utils_1 = require("../utils");
+/**
+ * Responsible for loading and display data from a Realtime service.
+ *
+ * @example
+ * import { RealtimeLayer } from 'mobility-toolbox-js/mapbox';
+ *
+ * const layer = new RealtimeLayer({
+ *   url: [yourUrl],
+ *   apiKey: [yourApiKey],
+ * });
+ *
+ *
+ * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ *
+ * @extends {Layer}
+ * @implements {RealtimeLayerInterface}
+ */
+var RealtimeLayer = /** @class */ (function (_super) {
+    __extends(RealtimeLayer, _super);
+    function RealtimeLayer(options) {
+        if (options === void 0) { options = {}; }
+        var _this = _super.call(this, __assign({}, options)) || this;
+        /** @ignore */
+        _this.onLoad = _this.onLoad.bind(_this);
+        /** @ignore */
+        _this.onMove = _this.onMove.bind(_this);
+        /** @ignore */
+        _this.onMoveEnd = _this.onMoveEnd.bind(_this);
+        /** @ignore */
+        _this.onZoomEnd = _this.onZoomEnd.bind(_this);
+        /** @ignore */
+        _this.onVisibilityChange = _this.onVisibilityChange.bind(_this);
+        return _this;
+    }
+    /**
+     * Initialize the layer.
+     *
+     * @param {mapboxgl.Map} map A [mapbox Map](https://docs.mapbox.com/mapbox-gl-js/api/map/).
+     * @param {string} beforeId Layer's id before which we want to add the new layer.
+     * @override
+     */
+    RealtimeLayer.prototype.attachToMap = function (map, beforeId) {
+        if (!map) {
+            return;
+        }
+        var canvas = map.getCanvas();
+        _super.prototype.attachToMap.call(this, map, {
+            width: canvas.width / this.pixelRatio,
+            height: canvas.height / this.pixelRatio,
+        });
+        this.source = {
+            type: 'canvas',
+            canvas: this.canvas,
+            coordinates: (0, utils_1.getSourceCoordinates)(map, this.pixelRatio),
+            // Set to true if the canvas source is animated. If the canvas is static, animate should be set to false to improve performance.
+            animate: true,
+            attribution: this.copyrights && this.copyrights.join(', '),
+        };
+        this.beforeId = beforeId;
+        this.layer = {
+            id: this.key,
+            type: 'raster',
+            source: this.key,
+            layout: {
+                visibility: this.visible ? 'visible' : 'none',
+            },
+            paint: {
+                'raster-opacity': 1,
+                'raster-fade-duration': 0,
+                'raster-resampling': 'nearest', // important otherwise it looks blurry
+            },
+        };
+        if (map.isStyleLoaded()) {
+            this.onLoad();
+        }
+        this.map.on('load', this.onLoad);
+        this.listeners = [this.on('change:visible', this.onVisibilityChange)];
+    };
+    /**
+     * Remove listeners from the Mapbox Map.
+     */
+    RealtimeLayer.prototype.detachFromMap = function () {
+        if (this.map) {
+            this.map.off('load', this.onLoad);
+            this.listeners.forEach(function (listener) {
+                (0, Observable_1.unByKey)(listener);
+            });
+            if (this.map.style && this.map.getLayer(this.key)) {
+                this.map.removeLayer(this.key);
+            }
+            if (this.map.style && this.map.getSource(this.key)) {
+                this.map.removeSource(this.key);
+            }
+        }
+        _super.prototype.detachFromMap.call(this);
+    };
+    /**
+     * Start updating vehicles position.
+     *
+     * @listens {mapboxgl.map.event:zoomend} Listen to zoom end event.
+     * @listens {mapboxgl.map.event:mousemove} Listen to mousemove end.
+     * @override
+     */
+    RealtimeLayer.prototype.start = function () {
+        _super.prototype.start.call(this);
+        this.map.on('move', this.onMove);
+        this.map.on('moveend', this.onMoveEnd);
+        this.map.on('zoomend', this.onZoomEnd);
+    };
+    /**
+     * Stop updating vehicles position, and unlisten events.
+     *
+     * @override
+     */
+    RealtimeLayer.prototype.stop = function () {
+        _super.prototype.stop.call(this);
+        if (this.map) {
+            this.map.off('move', this.onMove);
+            this.map.off('moveend', this.onMoveEnd);
+            this.map.off('zoomend', this.onZoomEnd);
+        }
+    };
+    RealtimeLayer.prototype.onLoad = function () {
+        if (!this.map.getSource(this.key)) {
+            this.map.addSource(this.key, this.source);
+        }
+        if (!this.map.getLayer(this.key)) {
+            this.map.addLayer(this.layer, this.beforeId);
+        }
+    };
+    /**
+     * Function triggered when the user moves the cursor over the map.
+     * @override
+     */
+    RealtimeLayer.prototype.onUserMoveCallback = function (evt) {
+        _super.prototype.onUserMoveCallback.call(this, __assign({ coordinate: (0, proj_1.fromLonLat)(evt.lngLat.toArray()) }, evt));
+    };
+    /**
+     * Render the trajectories using current map's size, resolution and rotation.
+     * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
+     * @overrides
+     */
+    RealtimeLayer.prototype.renderTrajectories = function (noInterpolate) {
+        if (!this.map) {
+            return;
+        }
+        var _a = this.map.getCanvas(), width = _a.width, height = _a.height;
+        var center = this.map.getCenter();
+        // We use turf here to have good transform.
+        var leftBottom = this.map.unproject({
+            x: 0,
+            y: height / this.pixelRatio,
+        }); // southWest
+        var rightTop = this.map.unproject({ x: width / this.pixelRatio, y: 0 }); // north east
+        var coord0 = (0, transform_rotate_1.default)((0, helpers_1.point)([leftBottom.lng, leftBottom.lat]), -this.map.getBearing(), {
+            pivot: [center.lng, center.lat],
+        }).geometry.coordinates;
+        var coord1 = (0, transform_rotate_1.default)((0, helpers_1.point)([rightTop.lng, rightTop.lat]), -this.map.getBearing(), {
+            pivot: [center.lng, center.lat],
+        }).geometry.coordinates;
+        var bounds = __spreadArray(__spreadArray([], (0, proj_1.fromLonLat)(coord0), true), (0, proj_1.fromLonLat)(coord1), true);
+        var xResolution = (0, extent_1.getWidth)(bounds) / (width / this.pixelRatio);
+        var yResolution = (0, extent_1.getHeight)(bounds) / (height / this.pixelRatio);
+        var res = Math.max(xResolution, yResolution);
+        // Coordinate of trajectories are in mercator so we have to pass the proper resolution and center in mercator.
+        var viewState = {
+            size: [width / this.pixelRatio, height / this.pixelRatio],
+            center: (0, proj_1.fromLonLat)([center.lng, center.lat]),
+            extent: bounds,
+            resolution: res,
+            zoom: this.map.getZoom(),
+            rotation: -(this.map.getBearing() * Math.PI) / 180,
+            pixelRatio: this.pixelRatio,
+        };
+        _super.prototype.renderTrajectories.call(this, viewState, noInterpolate);
+    };
+    /**
+     * Return the delay in ms before the next rendering.
+     */
+    RealtimeLayer.prototype.getRefreshTimeInMs = function () {
+        return _super.prototype.getRefreshTimeInMs.call(this, this.map.getZoom());
+    };
+    RealtimeLayer.prototype.getFeatureInfoAtCoordinate = function (coordinate, options) {
+        if (options === void 0) { options = {}; }
+        var resolution = (0, utils_1.getMercatorResolution)(this.map);
+        return _super.prototype.getFeatureInfoAtCoordinate.call(this, coordinate, __assign({ resolution: resolution }, options));
+    };
+    RealtimeLayer.prototype.onVisibilityChange = function () {
+        if (this.visible && !this.map.getLayer(this.key)) {
+            this.map.addLayer(this.layer, this.beforeId);
+        }
+        else if (this.map.getLayer(this.key)) {
+            this.map.removeLayer(this.key);
+        }
+        // We can't use setLayoutProperty it triggers an error probably a bug in mapbox
+        // this.map.setLayoutProperty(
+        //   this.key,
+        //   'visibilty',
+        //   this.visible ? 'visible' : 'none',
+        // );
+    };
+    /**
+     * Remove the trajectory form the list if necessary.
+     *
+     * @private
+     */
+    RealtimeLayer.prototype.purgeTrajectory = function (trajectory, extent, zoom) {
+        return _super.prototype.purgeTrajectory.call(this, trajectory, extent || this.getMercatorExtent(), zoom || Math.floor(this.map.getZoom() + 1));
+    };
+    /**
+     * Send the current bbox to the websocket
+     */
+    RealtimeLayer.prototype.setBbox = function (extent, zoom) {
+        var newExtent = extent;
+        var newZoom = zoom;
+        if (!newExtent && this.isUpdateBboxOnMoveEnd) {
+            newExtent = extent || this.getMercatorExtent();
+            newZoom = Math.floor(this.getOlZoom());
+        }
+        _super.prototype.setBbox.call(this, newExtent, newZoom);
+    };
+    /**
+     * Callback on 'move' event.
+     *
+     * @private
+     */
+    RealtimeLayer.prototype.onMove = function () {
+        this.renderTrajectories();
+    };
+    RealtimeLayer.prototype.renderTrajectoriesInternal = function (viewState, noInterpolate) {
+        var render = _super.prototype.renderTrajectoriesInternal.call(this, viewState, noInterpolate);
+        if (render && this.map.style) {
+            var extent = (0, utils_1.getSourceCoordinates)(this.map, this.pixelRatio);
+            var source = this.map.getSource(this.key);
+            if (source) {
+                source.setCoordinates(extent);
+            }
+        }
+        return render;
+    };
+    /**
+     * Send the new BBOX to the websocket.
+     *
+     * @private
+     * @override
+     */
+    RealtimeLayer.prototype.onMoveEnd = function () {
+        this.renderTrajectories();
+        if (this.visible && this.isUpdateBboxOnMoveEnd) {
+            this.setBbox();
+        }
+    };
+    /**
+     * Update the cursor style when hovering a vehicle.
+     *
+     * @private
+     * @override
+     */
+    RealtimeLayer.prototype.onFeatureHover = function (features, layer, coordinate) {
+        _super.prototype.onFeatureHover.call(this, features, layer, coordinate);
+        this.map.getCanvasContainer().style.cursor = features.length
+            ? 'pointer'
+            : 'auto';
+    };
+    return RealtimeLayer;
+}((0, RealtimeLayerMixin_1.default)(Layer_1.default)));
+exports.default = RealtimeLayer;

package/mapbox/layers/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RealtimeLayer = exports.Layer = void 0;
+var Layer_1 = require("./Layer");
+Object.defineProperty(exports, "Layer", { enumerable: true, get: function () { return Layer_1.default; } });
+var RealtimeLayer_1 = require("./RealtimeLayer");
+Object.defineProperty(exports, "RealtimeLayer", { enumerable: true, get: function () { return RealtimeLayer_1.default; } });

package/mapbox/utils.js

@@ -0,0 +1,57 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSourceCoordinates = exports.getMercatorResolution = void 0;
+var extent_1 = require("ol/extent");
+var proj_1 = require("ol/proj");
+/**
+ * Get the current resolution of a Mapbox map.
+ * @param {mapboxgl.Map} map A map object.
+ * @private
+ */
+var getMercatorResolution = function (map) {
+    var bounds = map.getBounds().toArray();
+    var a = (0, proj_1.fromLonLat)(bounds[0]);
+    var b = (0, proj_1.fromLonLat)(bounds[1]);
+    var extent = __spreadArray(__spreadArray([], a, true), b, true);
+    var _a = map.getCanvas(), width = _a.width, height = _a.height;
+    var xResolution = (0, extent_1.getWidth)(extent) / width;
+    var yResolution = (0, extent_1.getHeight)(extent) / height;
+    return Math.max(xResolution, yResolution);
+};
+exports.getMercatorResolution = getMercatorResolution;
+/**
+ * Get the canvas source coordinates of the current map's extent.
+ * @param {mapboxgl.Map} map A map object.
+ * @private
+ */
+var getSourceCoordinates = function (map, pixelRatio) {
+    // Requesting getBounds is not enough when we rotate the map, so we request manually each corner.
+    var _a = map.getCanvas(), width = _a.width, height = _a.height;
+    var leftTop = map.unproject({ x: 0, y: 0 });
+    var leftBottom = map.unproject({ x: 0, y: height / pixelRatio }); // southWest
+    var rightBottom = map.unproject({
+        x: width / pixelRatio,
+        y: height / pixelRatio,
+    });
+    var rightTop = map.unproject({ x: width / pixelRatio, y: 0 }); // north east
+    return [
+        [leftTop.lng, leftTop.lat],
+        [rightTop.lng, rightTop.lat],
+        [rightBottom.lng, rightBottom.lat],
+        [leftBottom.lng, leftBottom.lat],
+    ];
+};
+exports.getSourceCoordinates = getSourceCoordinates;
+exports.default = {
+    getMercatorResolution: exports.getMercatorResolution,
+    getSourceCoordinates: exports.getSourceCoordinates,
+};