mobility-toolbox-js 2.0.1-beta.13 → 2.1.0

package/ol/layers/MaplibreLayer.js

@@ -1,139 +1,34 @@
-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, getMapboxStyleUrl } from "../../common/utils";
-export default class MaplibreLayer extends Layer {
-  constructor(options = {}) {
-    const mbLayer = new OLLayer({
-      source: new Source({}),
-      render: (frameState) => {
-        if (!this.mbMap) {
-          console.warn("Mapbox map doesn't exist.");
-          return null;
-        }
-        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;
+import { Map } from 'maplibre-gl';
+import { getMaplibreRender } from '../../common/utils';
+import MapGlLayer from './MapGlLayer';
+/**
+ * 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}
+ */
+export default class MaplibreLayer extends MapGlLayer {
+    getOlLayerRender() {
+        return getMaplibreRender(this);
     }
-    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;
+    // eslint-disable-next-line class-methods-use-this
+    getMapboxMapClass() {
+        return Map;
     }
-    this.loaded = false;
-    super.detachFromMap();
-  }
-  createStyleUrl() {
-    return getMapboxStyleUrl(this.apiKey, this.apiKeyName, this.styleUrl);
-  }
-  loadMbMap() {
-    this.olListenersKeys.push(this.map.on("change:target", () => {
-      this.loadMbMap();
-    }));
-    if (!this.map.getTargetElement()) {
-      return;
+    /**
+     * Create a copy of the MapboxLayer.
+     * @param {Object} newOptions Options to override
+     * @return {MapboxLayer} A MapboxLayer
+     */
+    clone(newOptions) {
+        return new MaplibreLayer(Object.assign(Object.assign({}, this.options), newOptions));
     }
-    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%";
-    this.mbMap = new Map({
-      style: this.createStyleUrl(),
-      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 }
-      ];
-    }
-    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 });
-  }
 }

package/ol/layers/RealtimeLayer.d.ts

@@ -0,0 +1,202 @@
+import GeoJSON from 'ol/format/GeoJSON';
+import Feature, { FeatureLike } from 'ol/Feature';
+import { MapEvent } from 'ol';
+import { Coordinate } from 'ol/coordinate';
+import { ObjectEvent } from 'ol/Object';
+import Layer from './Layer';
+import { RealtimeLayerMixinOptions } from '../../common/mixins/RealtimeLayerMixin';
+import { AnyMap, LayerGetFeatureInfoResponse, RealtimeFullTrajectory, RealtimeTrainId } from '../../types';
+import { RealtimeTrajectory } from '../../api/typedefs';
+import { WebSocketAPIMessageEventData } from '../../common/api/WebSocketAPI';
+export type OlRealtimeLayerOptions = RealtimeLayerMixinOptions & {
+    fullTrajectoryStyle: (feature: FeatureLike, resolution: number, options: any) => void;
+    allowRenderWhenAnimating?: boolean;
+};
+declare const RealtimeLayer_base: {
+    new (options: RealtimeLayerMixinOptions): {
+        [x: string]: any;
+        debug: boolean;
+        trajectories?: {
+            [key: string]: GeoJSONFeature;
+        } | undefined;
+        canvas?: import("../../types").AnyCanvas | undefined;
+        mode: import("../../types").RealtimeMode;
+        api: import("../../api/RealtimeAPI").default;
+        tenant: string;
+        time?: Date | undefined;
+        live?: boolean | undefined;
+        speed?: number | undefined;
+        filter?: Function | undefined;
+        sort?: Function | undefined;
+        style?: import("../../types").RealtimeStyleFunction | undefined;
+        styleOptions?: import("../../types").RealtimeStyleOptions | undefined;
+        pixelRatio?: number | undefined;
+        minZoomInterpolation: number;
+        isUpdateBboxOnMoveEnd: boolean;
+        hoverVehicleId?: string | undefined;
+        selectedVehicleId?: string | undefined;
+        renderState?: import("../../types").RealtimeRenderState | undefined;
+        useRequestAnimationFrame?: boolean | undefined;
+        useDebounce?: boolean | undefined;
+        useThrottle?: boolean | undefined;
+        mots?: import("../../types").RealtimeMot[] | undefined;
+        motsByZoom: import("../../types").RealtimeMot[][];
+        generalizationLevel?: import("../../types").RealtimeGeneralizationLevel | undefined;
+        generalizationLevelByZoom: import("../../types").RealtimeGeneralizationLevel[];
+        renderTimeIntervalByZoom: number[];
+        format: GeoJSON;
+        requestId?: number | undefined;
+        updateTimeInterval?: number | undefined;
+        updateTimeDelay?: number | undefined;
+        visibilityRef: import("ol/events").EventsKey;
+        selectedVehicle: GeoJSONFeature;
+        getMotsByZoom: (zoom: number) => import("../../types").RealtimeMot[];
+        getGeneralizationLevelByZoom: (zoom: number) => import("../../types").RealtimeGeneralizationLevel;
+        getRenderTimeIntervalByZoom: (zoom: number) => number;
+        throttleRenderTrajectories: (viewState: import("../../types").ViewState, noInterpolate?: boolean | undefined) => void;
+        debounceRenderTrajectories: (viewState: import("../../types").ViewState, noInterpolate?: boolean | undefined) => void;
+        onStart?: ((realtimeLayer: any) => void) | undefined;
+        onStop?: ((realtimeLayer: any) => void) | undefined;
+        defineProperties(options: RealtimeLayerMixinOptions): void;
+        attachToMap(map: any): void;
+        detachFromMap(): void;
+        start(): void;
+        startUpdateTime(): void;
+        stop(): void;
+        stopUpdateTime(): void;
+        renderTrajectoriesInternal(viewState: import("../../types").ViewState, noInterpolate?: boolean): boolean;
+        renderTrajectories(viewState: import("../../types").ViewState | undefined, noInterpolate: boolean | undefined): void;
+        setBbox(extent?: [number, number, number, number] | undefined, zoom?: number | undefined): void;
+        getRefreshTimeInMs(zoom?: number | undefined): number;
+        getVehicle(filterFc: Function): GeoJSONFeature[];
+        getFeatureInfoAtCoordinate(coordinate: Coordinate, options: import("../../types").LayerGetFeatureInfoOptions): Promise<{
+            layer: any;
+            features: Feature<import("ol/geom/Geometry").default>[];
+            coordinate: Coordinate;
+        }>;
+        getTrajectoryInfos(id: string): Promise<{
+            stopSequence: WebSocketAPIMessageEventData<RealtimeFullTrajectory> | WebSocketAPIMessageEventData<GeoJSONFeature[]>;
+            fullTrajectory: WebSocketAPIMessageEventData<RealtimeFullTrajectory> | WebSocketAPIMessageEventData<GeoJSONFeature[]>;
+        }>;
+        purgeOutOfDateTrajectories(): void;
+        purgeTrajectory(trajectory: GeoJSONFeature, extent: [number, number, number, number], zoom: number): boolean;
+        addTrajectory(trajectory: GeoJSONFeature): void;
+        removeTrajectory(trajectoryOrId: any): void;
+        onZoomEnd(): void;
+        onDocumentVisibilityChange(): void;
+        onTrajectoryMessage(data: WebSocketAPIMessageEventData<GeoJSONFeature>): void;
+        onDeleteTrajectoryMessage(data: WebSocketAPIMessageEventData<string>): void;
+        onFeatureHover(features: Feature<import("ol/geom/Geometry").default>[], layer: import("../../types").AnyRealtimeLayer, coordinate: Coordinate): void;
+        onFeatureClick(features: Feature<import("ol/geom/Geometry").default>[], layer: import("../../types").AnyRealtimeLayer, coordinate: Coordinate): void;
+    };
+} & typeof Layer;
+/**
+ * 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 RealtimeLayer_base {
+    allowRenderWhenAnimating?: boolean;
+    /**
+     * Constructor.
+     *
+     * @param {Object} options
+     * @private
+     */
+    constructor(options: OlRealtimeLayerOptions);
+    attachToMap(map: AnyMap): void;
+    /**
+     * Destroy the container of the tracker.
+     */
+    detachFromMap(): void;
+    /**
+     * 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: Coordinate): 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
+     */
+    renderTrajectoriesInternal(viewState: ViewState, noInterpolate: boolean): boolean;
+    /**
+     * Return the delay in ms before the next rendering.
+     */
+    getRefreshTimeInMs(): number;
+    getFeatureInfoAtCoordinate(coordinate: Coordinate, options?: {}): Promise<LayerGetFeatureInfoResponse>;
+    /**
+     * On move end we update the websocket with the new bbox.
+     *
+     * @private
+     * @override
+     */
+    onMoveEnd(evt: MapEvent | ObjectEvent): void;
+    /**
+     * Function called on moveend event only when the zoom has changed.
+     *
+     * @param {ol/MapEvent~MapEvent} evt Moveend event.
+     * @private
+     * @override
+     */
+    onZoomEnd(): void;
+    /**
+     * Update the cursor style when hovering a vehicle.
+     *
+     * @private
+     * @override
+     */
+    onFeatureHover(features: Feature[], layer: RealtimeLayer, coordinate: Coordinate): void;
+    /**
+     * Display the complete trajectory of the vehicle.
+     *
+     * @private
+     * @override
+     */
+    onFeatureClick(features: Feature[], layer: RealtimeLayer, coordinate: Coordinate): void;
+    /**
+     * Remove the trajectory form the list if necessary.
+     *
+     * @private
+     */
+    purgeTrajectory(trajectory: RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
+    /**
+     * Send the current bbox to the websocket
+     *
+     * @private
+     */
+    setBbox(extent?: [number, number, number, number], zoom?: number): void;
+    /**
+     * Highlight the trajectory of journey.
+     * @private
+     */
+    highlightTrajectory(id: RealtimeTrainId): Promise<Feature[] | undefined>;
+    /**
+     * Create a copy of the RealtimeLayer.
+     * @param {Object} newOptions Options to override
+     * @return {RealtimeLayer} A RealtimeLayer
+     */
+    clone(newOptions: OlRealtimeLayerOptions): RealtimeLayer;
+}
+export default RealtimeLayer;
+//# 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.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,mBAAmB,CAAC;AAKxC,OAAO,OAAO,EAAE,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAc,EACZ,yBAAyB,EAC1B,MAAM,wCAAwC,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,2BAA2B,EAC3B,sBAAsB,EACtB,eAAe,EAChB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAC;AAK7E,MAAM,MAAM,sBAAsB,GAAG,yBAAyB,GAAG;IAC/D,mBAAmB,EAAE,CACnB,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,GAAG,KACT,IAAI,CAAC;IACV,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF;;;;;;;;;;;;;;;;;GAiBG;AAEH,cAAM,aAAc,SAAQ,kBAAY;IACtC,wBAAwB,CAAC,EAAE,OAAO,CAAS;IAE3C;;;;;OAKG;gBACS,OAAO,EAAE,sBAAsB;IAmG3C,WAAW,CAAC,GAAG,EAAE,MAAM;IA4BvB;;OAEG;IACH,aAAa;IAKb;;;;OAIG;IACH,0BAA0B,CAAC,UAAU,EAAE,UAAU;IAgBjD;;;;OAIG;IAEH,kBAAkB,CAAC,aAAa,EAAE,OAAO;IA2BzC;;;;OAIG;IACH,0BAA0B,CAAC,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO;IA2BvE;;OAEG;IACH,kBAAkB;IAIlB,0BAA0B,CACxB,UAAU,EAAE,UAAU,EACtB,OAAO,KAAK,GACX,OAAO,CAAC,2BAA2B,CAAC;IAgBvC;;;;;OAKG;IAEH,SAAS,CAAC,GAAG,EAAE,QAAQ,GAAG,WAAW;IAerC;;;;;;OAMG;IAEH,SAAS;IAiBT;;;;;OAKG;IACH,cAAc,CACZ,QAAQ,EAAE,OAAO,EAAE,EACnB,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,UAAU;IAQxB;;;;;OAKG;IACH,cAAc,CACZ,QAAQ,EAAE,OAAO,EAAE,EACnB,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,UAAU;IAWxB;;;;OAIG;IACH,eAAe,CACb,UAAU,EAAE,kBAAkB,EAC9B,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EACxC,IAAI,EAAE,MAAM;IAed;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM;IAUhE;;;OAGG;IACH,mBAAmB,CAAC,EAAE,EAAE,eAAe,GAAG,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC;IAoBxE;;;;OAIG;IACH,KAAK,CAAC,UAAU,EAAE,sBAAsB;CAGzC;AAED,eAAe,aAAa,CAAC"}