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

package/ol/layers/MaplibreLayer.js

@@ -1,140 +1,69 @@
-import { toLonLat } from "ol/proj";
-import { Map } from "maplibre-gl";
-import Source from "ol/source/Source";
-import OLLayer from "ol/layer/Layer";
-import GeoJSON from "ol/format/GeoJSON";
-import { toDegrees } from "ol/math";
-import Layer from "./Layer";
-import { getMapboxMapCopyrights, getUrlWithParams } from "../../common/utils";
-export default class MaplibreLayer extends Layer {
-  constructor(options = {}) {
-    const mbLayer = new OLLayer({
-      source: new Source({}),
-      render: (frameState) => {
-        if (!this.map || !this.mbMap) {
-          return null;
+"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 canvas = this.mbMap.getCanvas();
-        const { viewState } = frameState;
-        const opacity = this.olLayer.getOpacity();
-        canvas.style.opacity = opacity;
-        this.mbMap.jumpTo({
-          center: toLonLat(viewState.center),
-          zoom: viewState.zoom - 1,
-          bearing: toDegrees(-viewState.rotation),
-          animate: false
-        });
-        if (!canvas.isConnected) {
-          this.map.render();
-        } else if (canvas.width !== frameState.size[0] || canvas.height !== frameState.size[1]) {
-          this.mbMap.resize();
-        }
-        this.mbMap.redraw();
-        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) {
-      return;
-    }
-    this.format = new GeoJSON({
-      featureProjection: this.map.getView().getProjection()
-    });
-    this.loadMbMap();
-  }
-  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;
-    }
-    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.error(`No apiKey defined for mapbox layer with style url to ${this.url}`);
-    }
-    this.mbMap = new Map({
-      style: getUrlWithParams(this.styleUrl, {
-        [this.apiKeyName]: this.apiKey
-      }).toString(),
-      container,
-      interactive: false,
-      trackResize: false,
-      attributionControl: false,
-      ...this.options.mapOptions || {}
-    });
-    this.mbMap.once("load", () => {
-      this.loaded = true;
-      this.dispatchEvent({
-        type: "load",
-        target: this
-      });
-    });
-    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 }
-      ];
+        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;
     }
-    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 MaplibreLayer({ ...this.options, ...newOptions });
-  }
-}
+    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;

package/ol/layers/RealtimeLayer.d.ts

@@ -0,0 +1,119 @@
+export default RealtimeLayer;
+/**
+ * Responsible for loading and display data from a Realtime service.
+ *
+ * @example
+ * import { RealtimeLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new RealtimeLayer({
+ *   url: [yourUrl],
+ *   apiKey: [yourApiKey],
+ * });
+ *
+ *
+ * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ *
+ * @extends {Layer}
+ * @implements {UserInteractionsLayerInterface}
+ * @implements {RealtimeLayerInterface}
+ */
+declare class RealtimeLayer extends Layer implements UserInteractionsLayerInterface, RealtimeLayerInterface {
+    /**
+     * Constructor.
+     *
+     * @param {Object} options
+     * @private
+     */
+    private constructor();
+    /** @ignore */
+    olLayer: any;
+    container: HTMLDivElement;
+    transformContainer: HTMLDivElement;
+    vectorLayer: any;
+    /** @ignore */
+    renderState: {
+        center: number[];
+        zoom: any;
+        rotation: number;
+    };
+    attachToMap(map: any): void;
+    currentZoom: any;
+    /**
+     * Detect in the canvas if there is data to query at a specific coordinate.
+     * @param {ol/coordinate~Coordinate}  coordinate The coordinate to test
+     * @returns
+     */
+    hasFeatureInfoAtCoordinate(coordinate: any): boolean;
+    /**
+     * Render the trajectories using current map's size, resolution and rotation.
+     * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
+     * @overrides
+     */
+    renderTrajectories(noInterpolate: boolean): void;
+    /**
+     * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
+     * @private
+     * @override
+     */
+    private override renderTrajectoriesInternal;
+    renderedViewState: any;
+    /**
+     * Return the delay in ms before the next rendering.
+     */
+    getRefreshTimeInMs(): any;
+    getFeatureInfoAtCoordinate(coordinate: any, options?: {}): any;
+    /**
+     * On move end we update the websocket with the new bbox.
+     *
+     * @private
+     * @override
+     */
+    private override onMoveEnd;
+    /**
+     * Function called on moveend event only when the zoom has changed.
+     *
+     * @param {ol/MapEvent~MapEvent} evt Moveend event.
+     * @private
+     * @override
+     */
+    private override onZoomEnd;
+    /**
+     * Update the cursor style when hovering a vehicle.
+     *
+     * @private
+     * @override
+     */
+    private override onFeatureHover;
+    /**
+     * Display the complete trajectory of the vehicle.
+     *
+     * @private
+     * @override
+     */
+    private override onFeatureClick;
+    /**
+     * Remove the trajectory form the list if necessary.
+     *
+     * @private
+     */
+    private purgeTrajectory;
+    /**
+     * Send the current bbox to the websocket
+     *
+     * @private
+     */
+    private setBbox;
+    /**
+     * Highlight the trajectory of journey.
+     * @private
+     */
+    private highlightTrajectory;
+    /**
+     * Create a copy of the RealtimeLayer.
+     * @param {Object} newOptions Options to override
+     * @return {RealtimeLayer} A RealtimeLayer
+     */
+    clone(newOptions: any): RealtimeLayer;
+}
+import Layer from "./Layer";
+//# sourceMappingURL=RealtimeLayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RealtimeLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/RealtimeLayer.js"],"names":[],"mappings":";AAYA;;;;;;;;;;;;;;;;;GAiBG;AACH,qDAHgB,8BAA8B,EAC9B,sBAAsB;IAGpC;;;;;OAKG;IACH,sBA2FC;IApFC,cAAc;IACd,aAsEI;IApDQ,0BAA8C;IAI9C,mCAAuD;IAmDnE,iBAAmD;IAInD,cAAc;IACd;;;;MAIC;IAGH,4BAqBC;IANO,iBAAuB;IAgB/B;;;;OAIG;IACH,qDAYC;IAED;;;;OAIG;IACH,kCAHW,OAAO,QAiBjB;IAED;;;;OAIG;IACH,4CAuBC;IAPG,uBAAyC;IAS7C;;OAEG;IACH,0BAEC;IAED,+DAMC;IAED;;;;;OAKG;IACH,2BAaC;IAED;;;;;;OAMG;IAEH,2BAEC;IAED;;;;;OAKG;IACH,gCAKC;IAED;;;;;OAKG;IACH,gCAQC;IAED;;;;OAIG;IACH,wBAMC;IAED;;;;OAIG;IACH,gBAQC;IAED;;;OAGG;IACH,4BAiBC;IAED;;;;OAIG;IACH,wBAFY,aAAa,CAIxB;CACF"}