mobility-toolbox-js 3.0.0-beta.9 → 3.0.1-beta.0

package/maplibre/layers/RealtimeLayer.js

@@ -8,21 +8,39 @@ import Layer from './Layer';
 import { getSourceCoordinates } from '../utils';
 import toMercatorExtent from '../../common/utils/toMercatorExtent';
 /**
- * Responsible for loading and display data from a geOps realtime API.
+ * A Maplibre layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
  * @example
- * import { RealtimeLayer } from 'mobility-toolbox-js/Maplibre';
+ * import { Map } from 'maplibre-gl';
+ * import { RealtimeLayer } from 'mobility-toolbox-js/maplibre';
  *
+ * // Define the map
+ * const map = new Map({ ... });
+ *
+ * // Define your layer map
  * const layer = new RealtimeLayer({
  *   apiKey: "yourApiKey"
  *   // url: "wss://api.geops.io/tracker-ws/v1/",
  * });
  *
+ * // Add the layer to your map *
+ * map.on('load', () => {
+ *   map.addLayer(layer);
+ * });
+ *
  *
  * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ * @see <a href="/example/mb-realtime>Live example</a>
  *
- * @implements {maplibregl.CustomLayer}
+ * @implements {maplibregl.CustomLayerInterface}
  * @extends {maplibregl.Evented}
+ * @classproperty {function} filter - Filter out a train. This function must be fast, it is executed for every trajectory on every render frame.
+ * @classproperty {RealtimeMode} mode - The realtime mode to use.
+ * @classproperty {RealtimeMot[]} mots - Filter trains by its mode of transportation. It filters trains on backend side.
+ * @classproperty {RealtimeTenant} tenant - Filter trains by its tenant. It filters trains on backend side.
+ * @classproperty {function} sort - Sort trains. This function must be fast, it is executed on every render frame.
+ * @classproperty {function} style - Function to style the vehicles.
+ s
  * @public
  */
 class RealtimeLayer extends RealtimeLayerMixin(Layer) {
@@ -31,13 +49,19 @@ class RealtimeLayer extends RealtimeLayerMixin(Layer) {
      *
      * @param {RealtimeLayerOptions} options
      * @param {string} options.apiKey Access key for [geOps apis](https://developer.geops.io/).
-     * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps realtime API url.
-     *
+     * @param {FilterFunction} options.filter Filter out a train. This function must be fast, it is executed for every trajectory on every render frame.
+     * @param {getMotsByZoomFunction} options.getMotsByZoom Returns for each zoom level the list of MOTs to display. It filters trains on backend side.
+     * @param {number} [options.minZoomInterpolation=8] Minimal zoom level where to start to interpolate train positions.
+     * @param {RealtimeMode} [options.mode='topographic'] The realtime mode to use.
+     * @param {SortFunction} options.sort Sort trains. This function must be fast, it is executed on every render frame.
+     * @param {RealtimeStyleFunction} options.style Function to style the vehicles.
+     * @param {RealtimeTenant} options.tenant Filter trains by its tenant. It filters trains on backend side.
+     * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps Realtime API url.
      */
     constructor(options = {}) {
         var _a;
         const canvas = document.createElement('canvas');
-        super(Object.assign({ canvas }, options));
+        super(Object.assign({ canvas, id: 'realtime' }, options));
         /** @private */
         this.source = {
             id: this.id,

package/maplibre/utils/getSourceCoordinates.js

@@ -4,17 +4,17 @@
  */
 export const getSourceCoordinates = (map, pixelRatio = 1) => {
     // Requesting getBounds is not enough when we rotate the map, so we request manually each corner.
-    const { width, height } = map.getCanvas();
-    // @ts-ignore
+    const { height, width } = map.getCanvas();
+    // @ts-expect-error
     const leftTop = map.unproject({ x: 0, y: 0 });
-    // @ts-ignore
+    // @ts-expect-error
     const leftBottom = map.unproject({ x: 0, y: height / pixelRatio }); // southWest
-    // @ts-ignore
+    // @ts-expect-error
     const rightBottom = map.unproject({
         x: width / pixelRatio,
         y: height / pixelRatio,
     });
-    // @ts-ignore
+    // @ts-expect-error
     const rightTop = map.unproject({ x: width / pixelRatio, y: 0 }); // north east
     return [
         [leftTop.lng, leftTop.lat],