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

package/mapbox/layers/RealtimeLayer.js

@@ -1,48 +1,11 @@
-"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");
+import { fromLonLat } from 'ol/proj';
+import { unByKey } from 'ol/Observable';
+import { getWidth, getHeight } from 'ol/extent';
+import transformRotate from '@turf/transform-rotate';
+import { point } from '@turf/helpers';
+import mixin from '../../common/mixins/RealtimeLayerMixin';
+import Layer from './Layer';
+import { getSourceCoordinates, getMercatorResolution } from '../utils';
 /**
  * Responsible for loading and display data from a Realtime service.
  *
@@ -60,22 +23,19 @@ var utils_1 = require("../utils");
  * @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;
+class RealtimeLayer extends mixin(Layer) {
+    constructor(options = {}) {
+        super(Object.assign({}, options));
         /** @ignore */
-        _this.onLoad = _this.onLoad.bind(_this);
+        this.onLoad = this.onLoad.bind(this);
         /** @ignore */
-        _this.onMove = _this.onMove.bind(_this);
+        this.onMove = this.onMove.bind(this);
         /** @ignore */
-        _this.onMoveEnd = _this.onMoveEnd.bind(_this);
+        this.onMoveEnd = this.onMoveEnd.bind(this);
         /** @ignore */
-        _this.onZoomEnd = _this.onZoomEnd.bind(_this);
+        this.onZoomEnd = this.onZoomEnd.bind(this);
         /** @ignore */
-        _this.onVisibilityChange = _this.onVisibilityChange.bind(_this);
-        return _this;
+        this.onVisibilityChange = this.onVisibilityChange.bind(this);
     }
     /**
      * Initialize the layer.
@@ -84,19 +44,19 @@ var RealtimeLayer = /** @class */ (function (_super) {
      * @param {string} beforeId Layer's id before which we want to add the new layer.
      * @override
      */
-    RealtimeLayer.prototype.attachToMap = function (map, beforeId) {
+    attachToMap(map, beforeId) {
         if (!map) {
             return;
         }
-        var canvas = map.getCanvas();
-        _super.prototype.attachToMap.call(this, map, {
+        const canvas = map.getCanvas();
+        super.attachToMap(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),
+            coordinates: 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(', '),
@@ -120,15 +80,15 @@ var RealtimeLayer = /** @class */ (function (_super) {
         }
         this.map.on('load', this.onLoad);
         this.listeners = [this.on('change:visible', this.onVisibilityChange)];
-    };
+    }
     /**
      * Remove listeners from the Mapbox Map.
      */
-    RealtimeLayer.prototype.detachFromMap = function () {
+    detachFromMap() {
         if (this.map) {
             this.map.off('load', this.onLoad);
-            this.listeners.forEach(function (listener) {
-                (0, Observable_1.unByKey)(listener);
+            this.listeners.forEach((listener) => {
+                unByKey(listener);
             });
             if (this.map.style && this.map.getLayer(this.key)) {
                 this.map.removeLayer(this.key);
@@ -137,8 +97,8 @@ var RealtimeLayer = /** @class */ (function (_super) {
                 this.map.removeSource(this.key);
             }
         }
-        _super.prototype.detachFromMap.call(this);
-    };
+        super.detachFromMap();
+    }
     /**
      * Start updating vehicles position.
      *
@@ -146,91 +106,90 @@ var RealtimeLayer = /** @class */ (function (_super) {
      * @listens {mapboxgl.map.event:mousemove} Listen to mousemove end.
      * @override
      */
-    RealtimeLayer.prototype.start = function () {
-        _super.prototype.start.call(this);
+    start() {
+        super.start();
         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);
+    stop() {
+        super.stop();
         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 () {
+    }
+    onLoad() {
         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));
-    };
+    onUserMoveCallback(evt) {
+        super.onUserMoveCallback(Object.assign({ coordinate: 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) {
+    renderTrajectories(noInterpolate) {
         if (!this.map) {
             return;
         }
-        var _a = this.map.getCanvas(), width = _a.width, height = _a.height;
-        var center = this.map.getCenter();
+        const { width, height } = this.map.getCanvas();
+        const center = this.map.getCenter();
         // We use turf here to have good transform.
-        var leftBottom = this.map.unproject({
+        const 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(), {
+        const rightTop = this.map.unproject({ x: width / this.pixelRatio, y: 0 }); // north east
+        const coord0 = transformRotate(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(), {
+        const coord1 = transformRotate(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);
+        const bounds = [...fromLonLat(coord0), ...fromLonLat(coord1)];
+        const xResolution = getWidth(bounds) / (width / this.pixelRatio);
+        const yResolution = getHeight(bounds) / (height / this.pixelRatio);
+        const 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 = {
+        const viewState = {
             size: [width / this.pixelRatio, height / this.pixelRatio],
-            center: (0, proj_1.fromLonLat)([center.lng, center.lat]),
+            center: 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);
-    };
+        super.renderTrajectories(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 () {
+    getRefreshTimeInMs() {
+        return super.getRefreshTimeInMs(this.map.getZoom());
+    }
+    getFeatureInfoAtCoordinate(coordinate, options = {}) {
+        const resolution = getMercatorResolution(this.map);
+        return super.getFeatureInfoAtCoordinate(coordinate, Object.assign({ resolution }, options));
+    }
+    onVisibilityChange() {
         if (this.visible && !this.map.getLayer(this.key)) {
             this.map.addLayer(this.layer, this.beforeId);
         }
@@ -243,70 +202,69 @@ var RealtimeLayer = /** @class */ (function (_super) {
         //   '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));
-    };
+    purgeTrajectory(trajectory, extent, zoom) {
+        return super.purgeTrajectory(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;
+    setBbox(extent, zoom) {
+        let newExtent = extent;
+        let newZoom = zoom;
         if (!newExtent && this.isUpdateBboxOnMoveEnd) {
             newExtent = extent || this.getMercatorExtent();
             newZoom = Math.floor(this.getOlZoom());
         }
-        _super.prototype.setBbox.call(this, newExtent, newZoom);
-    };
+        super.setBbox(newExtent, newZoom);
+    }
     /**
      * Callback on 'move' event.
      *
      * @private
      */
-    RealtimeLayer.prototype.onMove = function () {
+    onMove() {
         this.renderTrajectories();
-    };
-    RealtimeLayer.prototype.renderTrajectoriesInternal = function (viewState, noInterpolate) {
-        var render = _super.prototype.renderTrajectoriesInternal.call(this, viewState, noInterpolate);
+    }
+    renderTrajectoriesInternal(viewState, noInterpolate) {
+        const render = super.renderTrajectoriesInternal(viewState, noInterpolate);
         if (render && this.map.style) {
-            var extent = (0, utils_1.getSourceCoordinates)(this.map, this.pixelRatio);
-            var source = this.map.getSource(this.key);
+            const extent = getSourceCoordinates(this.map, this.pixelRatio);
+            const 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 () {
+    onMoveEnd() {
         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);
+    onFeatureHover(features, layer, coordinate) {
+        super.onFeatureHover(features, layer, coordinate);
         this.map.getCanvasContainer().style.cursor = features.length
             ? 'pointer'
             : 'auto';
-    };
-    return RealtimeLayer;
-}((0, RealtimeLayerMixin_1.default)(Layer_1.default)));
-exports.default = RealtimeLayer;
+    }
+}
+export default RealtimeLayer;

package/mapbox/layers/RealtimeLayer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RealtimeLayer.test.d.ts.map

package/mapbox/layers/RealtimeLayer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RealtimeLayer.test.d.ts","sourceRoot":"","sources":["../../../src/mapbox/layers/RealtimeLayer.test.js"],"names":[],"mappings":""}

package/mapbox/layers/RealtimeLayer.test.js

@@ -0,0 +1,10 @@
+import RealtimeLayer from './RealtimeLayer';
+let layer;
+describe('RealtimeLayer', () => {
+    beforeEach(() => {
+        layer = new RealtimeLayer();
+    });
+    test('should be instanced.', () => {
+        expect(layer).toBeInstanceOf(RealtimeLayer);
+    });
+});

package/mapbox/layers/index.js

@@ -1,7 +1,2 @@
-"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; } });
+export { default as Layer } from './Layer';
+export { default as RealtimeLayer } from './RealtimeLayer';

package/mapbox/utils.js

@@ -1,48 +1,35 @@
-"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");
+import { getWidth, getHeight } from 'ol/extent';
+import { fromLonLat } from '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;
+export const getMercatorResolution = (map) => {
+    const bounds = map.getBounds().toArray();
+    const a = fromLonLat(bounds[0]);
+    const b = fromLonLat(bounds[1]);
+    const extent = [...a, ...b];
+    const { width, height } = map.getCanvas();
+    const xResolution = getWidth(extent) / width;
+    const yResolution = 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) {
+export const getSourceCoordinates = (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({
+    const { width, height } = map.getCanvas();
+    const leftTop = map.unproject({ x: 0, y: 0 });
+    const leftBottom = map.unproject({ x: 0, y: height / pixelRatio }); // southWest
+    const rightBottom = map.unproject({
         x: width / pixelRatio,
         y: height / pixelRatio,
     });
-    var rightTop = map.unproject({ x: width / pixelRatio, y: 0 }); // north east
+    const rightTop = map.unproject({ x: width / pixelRatio, y: 0 }); // north east
     return [
         [leftTop.lng, leftTop.lat],
         [rightTop.lng, rightTop.lat],
@@ -50,8 +37,7 @@ var getSourceCoordinates = function (map, pixelRatio) {
         [leftBottom.lng, leftBottom.lat],
     ];
 };
-exports.getSourceCoordinates = getSourceCoordinates;
-exports.default = {
-    getMercatorResolution: exports.getMercatorResolution,
-    getSourceCoordinates: exports.getSourceCoordinates,
+export default {
+    getMercatorResolution,
+    getSourceCoordinates,
 };

package/mbt.js

@@ -1,3 +1,4 @@
+"use strict";
 (() => {
   var __create = Object.create;
   var __defProp = Object.defineProperty;
@@ -33355,7 +33356,10 @@ uniform ${i3} ${o3} u_${a3};
       this.apiKey = options.apiKey;
     }
     fetch(path, params, config) {
-      if (!this.apiKey && !/key=/.test(this.url)) {
+      if (!this.url) {
+        return Promise.reject(new Error(`No url defined for request to ${this.url}/${path}`));
+      }
+      if (!this.url && !this.apiKey && !/key=/.test(this.url)) {
         return Promise.reject(new Error(`No apiKey defined for request to ${this.url}`));
       }
       const searchParams = params || {};
@@ -33382,10 +33386,7 @@ uniform ${i3} ${o3} u_${a3};
   // src/api/RoutingAPI.ts
   var RoutingAPI = class extends HttpAPI_default {
     constructor(options) {
-      super({
-        url: "https://api.geops.io/routing/v1/",
-        ...options || {}
-      });
+      super({ url: "https://api.geops.io/routing/v1/", ...options });
     }
     route(params, config) {
       return this.fetch("", params, config);
@@ -33491,8 +33492,26 @@ uniform ${i3} ${o3} u_${a3};
         send();
       }
     }
+    addEvents(onMessage, onError) {
+      if (this.websocket) {
+        this.websocket.addEventListener("message", onMessage);
+        if (onError) {
+          this.websocket.addEventListener("error", onError);
+          this.websocket.addEventListener("close", onError);
+        }
+      }
+    }
+    removeEvents(onMessage, onError) {
+      if (this.websocket) {
+        this.websocket.removeEventListener("message", onMessage);
+        if (onError) {
+          this.websocket.removeEventListener("error", onError);
+          this.websocket.removeEventListener("close", onError);
+        }
+      }
+    }
     listen(params, cb, errorCb) {
-      this.unlisten(params, cb);
+      this.unlisten(params, cb, errorCb);
       const onMessage = (evt) => {
         let data = {};
         try {
@@ -33509,33 +33528,42 @@ uniform ${i3} ${o3} u_${a3};
           }
         });
       };
-      if (this.websocket) {
-        this.websocket.addEventListener("message", onMessage);
-        if (errorCb) {
-          this.websocket.addEventListener("error", errorCb);
-          this.websocket.addEventListener("close", errorCb);
-        }
-      }
+      this.addEvents(onMessage, errorCb);
       return { onMessageCb: onMessage, onErrorCb: errorCb };
     }
     unlisten(params, cb) {
-      if (!this.websocket) {
-        return;
-      }
-      this.subscriptions.filter((s) => s.params.channel === params.channel && (!cb || s.cb === cb)).forEach(({ onMessageCb, onErrorCb }) => {
-        if (this.websocket) {
-          this.websocket.removeEventListener("message", onMessageCb);
-          if (onErrorCb) {
-            this.websocket.removeEventListener("error", onErrorCb);
-            this.websocket.removeEventListener("close", onErrorCb);
-          }
-        }
+      [...this.subscriptions || [], ...this.requests || []].filter((s) => s.params.channel === params.channel && (!cb || s.cb === cb)).forEach(({ onMessageCb, onErrorCb }) => {
+        this.removeEvents(onMessageCb, onErrorCb);
       });
     }
     get(params, cb, errorCb) {
-      const reqStr = WebSocketAPI.getRequestString("GET", params);
-      this.send(reqStr);
-      this.listen(params, cb, errorCb);
+      const requestString = WebSocketAPI.getRequestString("GET", params);
+      this.send(requestString);
+      const once = (callback) => (...args) => {
+        callback(...args);
+        const index2 = this.requests.findIndex((request) => requestString === request.requestString && cb === request.cb);
+        const { onMessageCb: onMessageCb2, onErrorCb: onErrorCb2 } = this.requests[index2];
+        this.removeEvents(onMessageCb2, onErrorCb2);
+        this.requests.splice(index2, 1);
+      };
+      const { onMessageCb, onErrorCb } = this.listen(params, once(cb), once(errorCb));
+      if (!this.requests) {
+        this.requests = [];
+      }
+      const index = this.requests.findIndex((request) => requestString === request.requestString && cb === request.cb);
+      const newReq = {
+        params,
+        requestString,
+        cb,
+        errorCb,
+        onMessageCb,
+        onErrorCb
+      };
+      if (index > -1) {
+        this.requests[index] = newReq;
+      } else {
+        this.requests.push(newReq);
+      }
     }
     subscribe(params, cb, errorCb, quiet = false) {
       const { onMessageCb, onErrorCb } = this.listen(params, cb, errorCb);
@@ -33558,13 +33586,7 @@ uniform ${i3} ${o3} u_${a3};
     unsubscribe(source, cb) {
       const toRemove = this.subscriptions.filter((s) => s.params.channel === source && (!cb || s.cb === cb));
       toRemove.forEach(({ onMessageCb, onErrorCb }) => {
-        if (this.websocket) {
-          this.websocket.removeEventListener("message", onMessageCb);
-          if (onErrorCb) {
-            this.websocket.removeEventListener("error", onErrorCb);
-            this.websocket.removeEventListener("close", onErrorCb);
-          }
-        }
+        this.removeEvents(onMessageCb, onErrorCb);
       });
       this.subscriptions = this.subscriptions.filter((s) => s.params.channel !== source || cb && s.cb !== cb);
       if (source && this.subscribed[source] && !this.subscriptions.find((s) => s.params.channel === source) && toRemove.find((subscr) => !subscr.quiet)) {
@@ -35648,7 +35670,7 @@ uniform ${i3} ${o3} u_${a3};
       getTextSize: getTextSize2
     } = options;
     const { zoom, pixelRatio } = viewState;
-    let { type, cancelled } = trajectory.properties;
+    let { type } = trajectory.properties;
     const {
       train_id: id,
       line,
@@ -35657,7 +35679,7 @@ uniform ${i3} ${o3} u_${a3};
       operator_provides_realtime_journey: operatorProvidesRealtime
     } = trajectory.properties;
     let { name, text_color: textColor, color } = line || {};
-    cancelled = cancelled === true || state === "JOURNEY_CANCELLED";
+    const cancelled = state === "JOURNEY_CANCELLED";
     if (!type) {
       type = "Rail";
     }
@@ -35755,7 +35777,7 @@ uniform ${i3} ${o3} u_${a3};
   var canvas;
   var realtimeSimpleStyle = () => {
     if (!canvas) {
-      document.createElement("canvas");
+      canvas = document.createElement("canvas");
       canvas.width = 15;
       canvas.height = 15;
       const ctx = canvas.getContext("2d");