mobility-toolbox-js 2.0.0-beta.45 → 2.0.0-beta.47

package/common/mixins/UserInteractionsLayerMixin.d.ts

@@ -1,14 +1,24 @@
+import { AnyMap, CommonLayerClass, UserInteractionCallback } from '../../types';
+import LayerCommon from '../layers/LayerCommon';
+export declare type UserInteractionsLayerMixinOptions = {
+    userInteractions?: boolean;
+    userClickInteractions?: boolean;
+    userHoverInteractions?: boolean;
+    defaultUserInteractions?: boolean;
+    onClick?: UserInteractionCallback;
+    onHover?: UserInteractionCallback;
+};
 /**
  * UserInteractionsLayerInterface.
  */
-export class UserInteractionsLayerInterface {
+export declare class UserInteractionsLayerInterface {
     constructor(options?: {});
     /**
      * Initialize the layer adding user interactions.
      *
      * @param {ol/Map~Map} map
      */
-    attachToMap(map: any): void;
+    attachToMap(map: AnyMap): void;
     /**
      * Terminate the layer unsubscribing user interactions.
      */
@@ -24,21 +34,20 @@ export class UserInteractionsLayerInterface {
     /**
      * Subscribe on user:click event.
      */
-    onClick(callback: any): void;
+    onClick(callback: UserInteractionCallback): void;
     /**
      * Subscribe on user:hover event.
      */
-    onHover(callback: any): void;
+    onHover(callback: UserInteractionCallback): void;
     /**
      * Unsubscribe on user:click event.
      */
-    unClick(callback: any): void;
+    unClick(callback: UserInteractionCallback): void;
     /**
      * Unsubscribe on user:hover event.
      */
-    unHover(callback: any): void;
+    unHover(callback: UserInteractionCallback): void;
 }
-export default UserInteractionsLayerMixin;
 /**
  * Mixin for UserInteractionsLayerInterface. It provide onClick and onHover functions.
  *
@@ -46,5 +55,6 @@ export default UserInteractionsLayerMixin;
  * @return {Class}  A class that implements {UserInteractionsLayerInterface} class and extends Base;
  * @private
  */
-declare function UserInteractionsLayerMixin(Base: Class): Class;
+declare function UserInteractionsLayerMixin<T extends CommonLayerClass>(Base: T): T & typeof LayerCommon;
+export default UserInteractionsLayerMixin;
 //# sourceMappingURL=UserInteractionsLayerMixin.d.ts.map

package/common/mixins/UserInteractionsLayerMixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserInteractionsLayerMixin.d.ts","sourceRoot":"","sources":["../../../src/common/mixins/UserInteractionsLayerMixin.js"],"names":[],"mappings":"AAQA;;GAEG;AACH;IAUE,0BAA4B;IAE5B;;;;OAIG;IACH,4BAAmB;IAEnB;;OAEG;IACH,sBAAkB;IAElB;;OAEG;IACH,iCAA6B;IAE7B;;OAEG;IACH,mCAA+B;IAE/B;;OAEG;IACH,6BAAoB;IAEpB;;OAEG;IACH,6BAAoB;IAEpB;;OAEG;IACH,6BAAoB;IAEpB;;OAEG;IACH,6BAAoB;CACrB;;AAED;;;;;;GAMG;AACH,gEAkNG"}
+{"version":3,"file":"UserInteractionsLayerMixin.d.ts","sourceRoot":"","sources":["../../../src/common/mixins/UserInteractionsLayerMixin.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAChF,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAEhD,oBAAY,iCAAiC,GAAG;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,OAAO,CAAC,EAAE,uBAAuB,CAAC;CACnC,CAAC;AAEF;;GAEG;AACH,qBAAa,8BAA8B;gBAU7B,OAAO,KAAK;IAExB;;;;OAIG;IACH,WAAW,CAAC,GAAG,EAAE,MAAM;IAEvB;;OAEG;IACH,aAAa;IAEb;;OAEG;IACH,wBAAwB;IAExB;;OAEG;IACH,0BAA0B;IAE1B;;OAEG;IACH,OAAO,CAAC,QAAQ,EAAE,uBAAuB;IAEzC;;OAEG;IACH,OAAO,CAAC,QAAQ,EAAE,uBAAuB;IAEzC;;OAEG;IACH,OAAO,CAAC,QAAQ,EAAE,uBAAuB;IAEzC;;OAEG;IACH,OAAO,CAAC,QAAQ,EAAE,uBAAuB;CAC1C;AAED;;;;;;GAMG;AACH,iBAAS,0BAA0B,CAAC,CAAC,SAAS,gBAAgB,EAC5D,IAAI,EAAE,CAAC,GACN,CAAC,GAAG,OAAO,WAAW,CAsQxB;AAED,eAAe,0BAA0B,CAAC"}

package/common/mixins/UserInteractionsLayerMixin.js

@@ -61,173 +61,184 @@ export class UserInteractionsLayerInterface {
  * @return {Class}  A class that implements {UserInteractionsLayerInterface} class and extends Base;
  * @private
  */
-const UserInteractionsLayerMixin = (Base) => class extends Base {
-    constructor(options = {}) {
-        super(options);
-        const { userInteractions = true, userClickInteractions = true, userHoverInteractions = true, defaultUserInteractions = true, } = options;
-        this.userInteractions = userInteractions;
-        this.userClickInteractions = userClickInteractions;
-        this.userHoverInteractions = userHoverInteractions;
-        this.defaultUserInteractions = defaultUserInteractions;
-        this.userClickCallbacks = [];
-        this.userHoverCallbacks = [];
-        this.userClickEventsKeys = [];
-        this.userHoverEventsKeys = [];
-        this.onUserClickCallback = this.onUserClickCallback.bind(this);
-        this.onUserMoveCallback = this.onUserMoveCallback.bind(this);
-        // Add mouse event callbacks
-        const { onClick, onHover } = options;
-        if (this.userInteractions && this.userClickInteractions && onClick) {
-            this.onClick(onClick);
+function UserInteractionsLayerMixin(Base) {
+    // @ts-ignore
+    return class extends Base {
+        constructor(options = {}) {
+            super(options);
+            const { userInteractions = true, userClickInteractions = true, userHoverInteractions = true, defaultUserInteractions = true, } = options;
+            this.userInteractions = userInteractions;
+            this.userClickInteractions = userClickInteractions;
+            this.userHoverInteractions = userHoverInteractions;
+            this.defaultUserInteractions = defaultUserInteractions;
+            this.userClickCallbacks = [];
+            this.userHoverCallbacks = [];
+            this.userClickEventsKeys = [];
+            this.userHoverEventsKeys = [];
+            this.onUserClickCallback = this.onUserClickCallback.bind(this);
+            this.onUserMoveCallback = this.onUserMoveCallback.bind(this);
+            // Add mouse event callbacks
+            const { onClick, onHover } = options;
+            if (this.userInteractions && this.userClickInteractions && onClick) {
+                this.onClick(onClick);
+            }
+            if (this.userInteractions && this.userHoverInteractions && onHover) {
+                this.onHover(onHover);
+            }
         }
-        if (this.userInteractions && this.userHoverInteractions && onHover) {
-            this.onHover(onHover);
+        attachToMap(map) {
+            super.attachToMap(map);
+            if (this.userInteractions &&
+                this.defaultUserInteractions &&
+                this.userClickInteractions &&
+                this.onFeatureClick) {
+                this.onClick(this.onFeatureClick);
+            }
+            if (this.userInteractions &&
+                this.defaultUserInteractions &&
+                this.userHoverInteractions &&
+                this.onFeatureHover) {
+                this.onHover(this.onFeatureHover);
+            }
+            this.listenEvents();
         }
-    }
-    attachToMap(map, options) {
-        super.attachToMap(map, options);
-        if (this.userInteractions &&
-            this.defaultUserInteractions &&
-            this.userClickInteractions &&
-            this.onFeatureClick) {
-            this.onClick(this.onFeatureClick);
+        detachFromMap() {
+            this.unlistenEvents();
+            super.detachFromMap();
         }
-        if (this.userInteractions &&
-            this.defaultUserInteractions &&
-            this.userHoverInteractions &&
-            this.onFeatureHover) {
-            this.onHover(this.onFeatureHover);
+        listenEvents() {
+            this.unlistenEvents();
+            this.userClickCallbacks.forEach((callback) => {
+                this.userClickEventsKeys.push(this.on(
+                // @ts-ignore
+                'user:click', ({ target: { features, layer, coordinate, event }, }) => {
+                    callback(features, layer, coordinate, event);
+                }));
+            });
+            this.userHoverCallbacks.forEach((callback) => {
+                this.userHoverEventsKeys.push(this.on(
+                // @ts-ignore
+                'user:hover', ({ target: { features, layer, coordinate, event }, }) => {
+                    callback(features, layer, coordinate, event);
+                }));
+            });
         }
-        this.listenEvents();
-    }
-    detachFromMap() {
-        this.unlistenEvents();
-        super.detachFromMap();
-    }
-    listenEvents() {
-        this.unlistenEvents();
-        this.userClickCallbacks.forEach((callback) => {
-            this.userClickEventsKeys.push(this.on('user:click', ({ target: { features, layer, coordinate } }) => {
-                callback(features, layer, coordinate);
-            }));
-        });
-        this.userHoverCallbacks.forEach((callback) => {
-            this.userHoverEventsKeys.push(this.on('user:hover', ({ target: { features, layer, coordinate, event } }) => {
-                callback(features, layer, coordinate, event);
-            }));
-        });
-    }
-    unlistenEvents() {
-        unByKey(this.userClickEventsKeys);
-        unByKey(this.userHoverEventsKeys);
-        this.userClickEventsKeys = [];
-        this.userHoverEventsKeys = [];
-    }
-    /**
-     * Listens to click events on the layer.
-     * @param {function} callback Callback function, called with the clicked
-     *   features,
-     *   the layer instance and the click event.
-     */
-    onClick(callback) {
-        this.userClickCallbacks.push(callback);
-        this.activateUserInteractions();
-        if (this.map) {
-            // If the layer is already attached to the map we reload the events
-            this.listenEvents();
+        unlistenEvents() {
+            unByKey(this.userClickEventsKeys);
+            unByKey(this.userHoverEventsKeys);
+            this.userClickEventsKeys = [];
+            this.userHoverEventsKeys = [];
         }
-    }
-    /**
-     * Listens to hover events on the layer.
-     * @param {function} callback Callback function, called with the clicked
-     *   features, the layer instance and the click event.
-     */
-    onHover(callback) {
-        this.userHoverCallbacks.push(callback);
-        this.activateUserInteractions();
-        if (this.map) {
-            // If the layer is already attached to the map we reload the events
-            this.listenEvents();
+        /**
+         * Listens to click events on the layer.
+         * @param {function} callback Callback function, called with the clicked
+         *   features,
+         *   the layer instance and the click event.
+         */
+        onClick(callback) {
+            this.userClickCallbacks.push(callback);
+            this.activateUserInteractions();
+            if (this.map) {
+                // If the layer is already attached to the map we reload the events
+                this.listenEvents();
+            }
         }
-    }
-    /**
-     * Unlistens to click events on the layer.
-     * @param {function} callback Callback function, called with the clicked
-     *   features,
-     *   the layer instance and the click event.
-     */
-    unClick(callback) {
-        const index = this.userClickCallbacks.indexOf(callback);
-        if (index !== -1) {
-            return;
+        /**
+         * Listens to hover events on the layer.
+         * @param {function} callback Callback function, called with the clicked
+         *   features, the layer instance and the click event.
+         */
+        onHover(callback) {
+            this.userHoverCallbacks.push(callback);
+            this.activateUserInteractions();
+            if (this.map) {
+                // If the layer is already attached to the map we reload the events
+                this.listenEvents();
+            }
         }
-        this.userClickCallbacks = this.userClickCallbacks.slice(index, 1);
-        if (this.map) {
-            // If the layer is already attached to the map we reload the events
-            this.listenEvents();
+        /**
+         * Unlistens to click events on the layer.
+         * @param {function} callback Callback function, called with the clicked
+         *   features,
+         *   the layer instance and the click event.
+         */
+        unClick(callback) {
+            const index = this.userClickCallbacks.indexOf(callback);
+            if (index !== -1) {
+                return;
+            }
+            this.userClickCallbacks = this.userClickCallbacks.slice(index, 1);
+            if (this.map) {
+                // If the layer is already attached to the map we reload the events
+                this.listenEvents();
+            }
         }
-    }
-    /**
-     * Unlistens to hover events on the layer.
-     * @param {function} callback Callback function, called with the clicked
-     *   features, the layer instance and the click event.
-     */
-    unHover(callback) {
-        const index = this.userHoverCallbacks.indexOf(callback);
-        if (index !== -1) {
-            return;
+        /**
+         * Unlistens to hover events on the layer.
+         * @param {function} callback Callback function, called with the clicked
+         *   features, the layer instance and the click event.
+         */
+        unHover(callback) {
+            const index = this.userHoverCallbacks.indexOf(callback);
+            if (index !== -1) {
+                return;
+            }
+            this.userHoverCallbacks = this.userHoverCallbacks.slice(index, 1);
+            if (this.map) {
+                // If the layer is already attached to the map we reload the events
+                this.listenEvents();
+            }
         }
-        this.userHoverCallbacks = this.userHoverCallbacks.slice(index, 1);
-        if (this.map) {
-            // If the layer is already attached to the map we reload the events
-            this.listenEvents();
+        /**
+         * Function triggered when the user click the map.
+         * @private
+         */
+        onUserClickCallback(evt) {
+            const coordinate = evt.coordinate ||
+                fromLonLat(evt.lngLat.toArray());
+            const emptyFeatureInfo = {
+                features: [],
+                layer: this,
+                coordinate,
+                event: evt,
+            };
+            return this.getFeatureInfoAtCoordinate(coordinate)
+                .then((featureInfo) => {
+                // @ts-ignore
+                this.dispatchEvent({
+                    type: 'user:click',
+                    target: featureInfo,
+                });
+                return featureInfo;
+            })
+                .catch(() => emptyFeatureInfo);
         }
-    }
-    /**
-     * Function triggered when the user click the map.
-     * @private
-     */
-    onUserClickCallback(evt) {
-        const coordinate = evt.coordinate || fromLonLat(evt.lngLat.toArray());
-        const emptyFeatureInfo = {
-            features: [],
-            layer: this,
-            coordinate,
-            event: evt,
-        };
-        return this.getFeatureInfoAtCoordinate(coordinate)
-            .then((featureInfo) => {
-            this.dispatchEvent({
-                type: 'user:click',
-                target: featureInfo,
-            });
-            return featureInfo;
-        })
-            .catch(() => emptyFeatureInfo);
-    }
-    /**
-     * Function triggered when the user move the cursor.
-     * @private
-     */
-    onUserMoveCallback(evt) {
-        const coordinate = evt.coordinate || fromLonLat(evt.lngLat.toArray());
-        const emptyFeatureInfo = {
-            features: [],
-            layer: this,
-            coordinate,
-            event: evt,
-        };
-        return this.getFeatureInfoAtCoordinate(coordinate)
-            .then((featureInfo) => {
-            this.dispatchEvent({
-                type: 'user:hover',
-                target: featureInfo,
-            });
-            return featureInfo;
-        })
-            .catch(() => emptyFeatureInfo);
-    }
-    activateUserInteractions() { }
-    deactivateUserInteractions() { }
-};
+        /**
+         * Function triggered when the user move the cursor.
+         * @private
+         */
+        onUserMoveCallback(evt) {
+            const coordinate = evt.coordinate ||
+                fromLonLat(evt.lngLat.toArray());
+            const emptyFeatureInfo = {
+                features: [],
+                layer: this,
+                coordinate,
+                event: evt,
+            };
+            return this.getFeatureInfoAtCoordinate(coordinate)
+                .then((featureInfo) => {
+                // @ts-ignore
+                this.dispatchEvent({
+                    type: 'user:hover',
+                    target: featureInfo,
+                });
+                return featureInfo;
+            })
+                .catch(() => emptyFeatureInfo);
+        }
+        activateUserInteractions() { }
+        deactivateUserInteractions() { }
+    };
+}
 export default UserInteractionsLayerMixin;

package/common/styles/realtimeDefaultStyle.d.ts

@@ -1,15 +1,36 @@
-export function getDelayBgCanvas(origin: any, radius: any, color: any): any;
-export function getDelayTextCanvas(width: any, text: any, fontSize: any, font: any, delayColor: any, delayOutlineColor?: string, pixelRatio?: number): any;
-export function getCircleCanvas(origin: any, radius: any, color: any, hasStroke: any, hasDash: any, pixelRatio: any): any;
-export function getTextCanvas(text: any, origin: any, textSize: any, fillColor: any, strokeColor: any, hasStroke: any, pixelRatio: any): any;
-export default realtimeDefaultStyle;
+import { RealtimeTrajectory, ViewState, RealtimeStyleOptions } from '../../types';
+/**
+ * Draw circle delay background
+ *
+ * @private
+ */
+export declare const getDelayBgCanvas: (origin: number, radius: number, color: string) => import("../../types").AnyCanvas | null;
+/**
+ * Draw delay text
+ *
+ * @private
+ */
+export declare const getDelayTextCanvas: (width: number, text: string, fontSize: number, font: string, delayColor: string, delayOutlineColor?: string, pixelRatio?: number) => import("../../types").AnyCanvas | null;
+/**
+ * Draw colored circle with black border
+ *
+ * @private
+ */
+export declare const getCircleCanvas: (origin: number, radius: number, color: string, hasStroke: boolean, hasDash: boolean, pixelRatio: number) => import("../../types").AnyCanvas | null;
+/**
+ * Draw text in the circle
+ *
+ * @private
+ */
+export declare const getTextCanvas: (text: string, origin: number, textSize: number, fillColor: string, strokeColor: string, hasStroke: boolean, pixelRatio: number) => import("../../types").AnyCanvas | null;
 /**
  * A tracker style that take in account the delay.
  *
- * @param {*} trajectory The trajectory to render.
- * @param {*} viewState The view state of the map.
- * @param {*} options Some options to change the rendering
+ * @param {RealtimeTrajectory} trajectory The trajectory to render.
+ * @param {ViewState} viewState The view state of the map.
+ * @param {RealtimeStyleOptions} options Some options to change the rendering
  * @return a canvas
  */
-declare function realtimeDefaultStyle(trajectory: any, viewState: any, options: any): any;
+declare const realtimeDefaultStyle: (trajectory: RealtimeTrajectory, viewState: ViewState, options: RealtimeStyleOptions) => import("../../types").AnyCanvas | null;
+export default realtimeDefaultStyle;
 //# sourceMappingURL=realtimeDefaultStyle.d.ts.map

package/common/styles/realtimeDefaultStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"realtimeDefaultStyle.d.ts","sourceRoot":"","sources":["../../../src/common/styles/realtimeDefaultStyle.js"],"names":[],"mappings":"AAUO,4EAeN;AAUM,2JA2BN;AAUM,0HAoCN;AAUM,6IAuCN;;AAKD;;;;;;;GAOG;AACH,0FA8LC"}
+{"version":3,"file":"realtimeDefaultStyle.d.ts","sourceRoot":"","sources":["../../../src/common/styles/realtimeDefaultStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EAET,oBAAoB,EACrB,MAAM,aAAa,CAAC;AAMrB;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,WACnB,MAAM,UACN,MAAM,SACP,MAAM,2CAmBd,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,UACtB,MAAM,QACP,MAAM,YACF,MAAM,QACV,MAAM,cACA,MAAM,sBACC,MAAM,eACb,MAAM,2CAuBnB,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,eAAe,WAClB,MAAM,UACN,MAAM,SACP,MAAM,aACF,OAAO,WACT,OAAO,cACJ,MAAM,2CAiCnB,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,aAAa,SAClB,MAAM,UACJ,MAAM,YACJ,MAAM,aACL,MAAM,eACJ,MAAM,aACR,OAAO,cACN,MAAM,2CAmCnB,CAAC;AAKF;;;;;;;GAOG;AACH,QAAA,MAAM,oBAAoB,eACZ,kBAAkB,aACnB,SAAS,WACX,oBAAoB,2CA2M9B,CAAC;AACF,eAAe,oBAAoB,CAAC"}

package/common/styles/realtimeDefaultStyle.js

@@ -12,6 +12,9 @@ export const getDelayBgCanvas = (origin, radius, color) => {
         const canvas = createCanvas(origin * 2, origin * 2);
         if (canvas) {
             const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return null;
+            }
             ctx.beginPath();
             ctx.arc(origin, origin, radius, 0, 2 * Math.PI, false);
             ctx.fillStyle = color;
@@ -35,6 +38,9 @@ export const getDelayTextCanvas = (width, text, fontSize, font, delayColor, dela
         const canvas = createCanvas(width, fontSize + 8 * pixelRatio);
         if (canvas) {
             const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return null;
+            }
             ctx.textAlign = 'left';
             ctx.textBaseline = 'middle';
             ctx.font = font;
@@ -62,6 +68,9 @@ export const getCircleCanvas = (origin, radius, color, hasStroke, hasDash, pixel
         const canvas = createCanvas(origin * 2, origin * 2);
         if (canvas) {
             const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return null;
+            }
             ctx.fillStyle = color;
             if (hasStroke) {
                 ctx.lineWidth = 1 * pixelRatio;
@@ -94,6 +103,9 @@ export const getTextCanvas = (text, origin, textSize, fillColor, strokeColor, ha
         const canvas = createCanvas(origin * 2, origin * 2);
         if (canvas) {
             const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return null;
+            }
             // Draw a stroke to the text only if a provider provides realtime but we don't use it.
             if (hasStroke) {
                 ctx.save();
@@ -122,14 +134,14 @@ const cache = {};
 /**
  * A tracker style that take in account the delay.
  *
- * @param {*} trajectory The trajectory to render.
- * @param {*} viewState The view state of the map.
- * @param {*} options Some options to change the rendering
+ * @param {RealtimeTrajectory} trajectory The trajectory to render.
+ * @param {ViewState} viewState The view state of the map.
+ * @param {RealtimeStyleOptions} options Some options to change the rendering
  * @return a canvas
  */
 const realtimeDefaultStyle = (trajectory, viewState, options) => {
-    const { hoverVehicleId, selectedVehicleId, useDelayStyle, delayOutlineColor = '#000', delayDisplay = 300000, getRadius, getBgColor, getDelayColor, getDelayText, getTextColor, getTextSize, } = options;
-    const { zoom, pixelRatio } = viewState;
+    const { hoverVehicleId, selectedVehicleId, useDelayStyle, delayOutlineColor = '#000', delayDisplay = 300000, getRadius = () => 0, getBgColor = () => '#000', getDelayColor = () => '#000', getDelayText = () => null, getTextColor = () => '#000', getTextSize = () => 0, } = options;
+    const { zoom, pixelRatio = 1 } = viewState;
     let { type } = trajectory.properties;
     const { train_id: id, line, delay, state, operator_provides_realtime_journey: operatorProvidesRealtime, } = trajectory.properties;
     let { name, text_color: textColor, color } = line || {};
@@ -150,8 +162,8 @@ const realtimeDefaultStyle = (trajectory, viewState, options) => {
         textColor = `#${textColor}`;
     }
     const z = Math.min(Math.floor(zoom || 1), 16);
-    const hover = hoverVehicleId && hoverVehicleId === id;
-    const selected = selectedVehicleId && selectedVehicleId === id;
+    const hover = !!(hoverVehicleId && hoverVehicleId === id);
+    const selected = !!(selectedVehicleId && selectedVehicleId === id);
     // Calcul the radius of the circle
     let radius = getRadius(type, z) * pixelRatio;
     const isDisplayStrokeAndDelay = radius >= 7 * pixelRatio;
@@ -174,7 +186,6 @@ const realtimeDefaultStyle = (trajectory, viewState, options) => {
     }
     if (!cache[key]) {
         if (radius === 0) {
-            cache[key] = null;
             return null;
         }
         const margin = 1 * pixelRatio;
@@ -186,21 +197,28 @@ const realtimeDefaultStyle = (trajectory, viewState, options) => {
         const canvas = createCanvas(size, size);
         if (canvas) {
             const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return null;
+            }
             if (isDisplayStrokeAndDelay && delay !== null) {
                 // Draw circle delay background
                 const delayBg = getDelayBgCanvas(origin, radiusDelay, getDelayColor(delay, cancelled));
-                ctx.drawImage(delayBg, 0, 0);
+                if (delayBg) {
+                    ctx.drawImage(delayBg, 0, 0);
+                }
             }
             // Show delay if feature is hovered or if delay is above 5mins.
             if (isDisplayStrokeAndDelay &&
-                (hover || delay >= delayDisplay || cancelled)) {
+                (hover || (delay || 0) >= delayDisplay || cancelled)) {
                 // Draw delay text
                 const fontSize = Math.max(cancelled ? 19 : 14, Math.min(cancelled ? 19 : 17, radius * 1.2)) * pixelRatio;
                 const text = getDelayText(delay, cancelled);
                 if (text) {
                     const textWidth = text.length * fontSize;
                     const delayText = getDelayTextCanvas(textWidth, text, fontSize, `bold ${fontSize}px arial, sans-serif`, getDelayColor(delay, cancelled, true), delayOutlineColor, pixelRatio);
-                    ctx.drawImage(delayText, origin + radiusDelay + margin, origin - fontSize);
+                    if (delayText) {
+                        ctx.drawImage(delayText, origin + radiusDelay + margin, origin - fontSize);
+                    }
                 }
             }
             // Draw colored circle with black border
@@ -212,22 +230,28 @@ const realtimeDefaultStyle = (trajectory, viewState, options) => {
                 circleFillColor = color || getBgColor(type);
             }
             const hasStroke = isDisplayStrokeAndDelay || hover || selected;
-            const hasDash = isDisplayStrokeAndDelay &&
-                useDelayStyle &&
+            const hasDash = !!isDisplayStrokeAndDelay &&
+                !!useDelayStyle &&
                 delay === null &&
                 operatorProvidesRealtime === 'yes';
             const circle = getCircleCanvas(origin, radius, circleFillColor, hasStroke, hasDash, pixelRatio);
-            ctx.drawImage(circle, 0, 0);
+            if (circle) {
+                ctx.drawImage(circle, 0, 0);
+            }
             // Draw text in the circle
-            if (mustDrawText) {
+            if (mustDrawText && ctx) {
                 const fontSize = Math.max(radius, 10);
                 const textSize = getTextSize(ctx, markerSize, name, fontSize);
                 const textColor2 = !useDelayStyle
                     ? textColor || getTextColor(type)
                     : '#000000';
-                const hasStroke2 = useDelayStyle && delay === null && operatorProvidesRealtime === 'yes';
+                const hasStroke2 = !!useDelayStyle &&
+                    delay === null &&
+                    operatorProvidesRealtime === 'yes';
                 const text = getTextCanvas(name, origin, textSize, textColor2, circleFillColor, hasStroke2, pixelRatio);
-                ctx.drawImage(text, 0, 0);
+                if (text) {
+                    ctx.drawImage(text, 0, 0);
+                }
             }
             cache[key] = canvas;
         }

package/common/styles/realtimeDelayStyle.d.ts

@@ -1,4 +1,4 @@
-export default realtimeDelayStyle;
+import { RealtimeTrajectory, ViewState, RealtimeStyleOptions } from '../../types';
 /**
  * A tracker style that display the delay as backgroundColor.
  *
@@ -7,5 +7,6 @@ export default realtimeDelayStyle;
  * @param {*} options Some options to change the rendering
  * @return a canvas
  */
-declare function realtimeDelayStyle(trajectory: any, viewState: any, options: any): any;
+declare const realtimeDelayStyle: (trajectory: RealtimeTrajectory, viewState: ViewState, options: RealtimeStyleOptions) => import("../../types").AnyCanvas | null;
+export default realtimeDelayStyle;
 //# sourceMappingURL=realtimeDelayStyle.d.ts.map

package/common/styles/realtimeDelayStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"realtimeDelayStyle.d.ts","sourceRoot":"","sources":["../../../src/common/styles/realtimeDelayStyle.js"],"names":[],"mappings":";AAEA;;;;;;;GAOG;AACH,wFAKC"}
+{"version":3,"file":"realtimeDelayStyle.d.ts","sourceRoot":"","sources":["../../../src/common/styles/realtimeDelayStyle.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,oBAAoB,EACrB,MAAM,aAAa,CAAC;AACrB;;;;;;;GAOG;AACH,QAAA,MAAM,kBAAkB,eACV,kBAAkB,aACnB,SAAS,WACX,oBAAoB,2CAM9B,CAAC;AACF,eAAe,kBAAkB,CAAC"}

package/common/styles/realtimeSimpleStyle.d.ts

@@ -1,3 +1,3 @@
+declare const realtimeSimpleStyle: () => HTMLCanvasElement;
 export default realtimeSimpleStyle;
-declare function realtimeSimpleStyle(): any;
 //# sourceMappingURL=realtimeSimpleStyle.d.ts.map

package/common/styles/realtimeSimpleStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"realtimeSimpleStyle.d.ts","sourceRoot":"","sources":["../../../src/common/styles/realtimeSimpleStyle.js"],"names":[],"mappings":";AAKA,4CAeC"}
+{"version":3,"file":"realtimeSimpleStyle.d.ts","sourceRoot":"","sources":["../../../src/common/styles/realtimeSimpleStyle.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,mBAAmB,yBAiBxB,CAAC;AACF,eAAe,mBAAmB,CAAC"}