mobility-toolbox-js 2.0.1-beta.13 → 2.2.0-beta.0

package/common/mixins/UserInteractionsLayerMixin.d.ts

@@ -0,0 +1,60 @@
+import { AnyMap, CommonLayerClass, UserInteractionCallback } from '../../types';
+import LayerCommon from '../layers/LayerCommon';
+export type UserInteractionsLayerMixinOptions = {
+    userInteractions?: boolean;
+    userClickInteractions?: boolean;
+    userHoverInteractions?: boolean;
+    defaultUserInteractions?: boolean;
+    onClick?: UserInteractionCallback;
+    onHover?: UserInteractionCallback;
+};
+/**
+ * UserInteractionsLayerInterface.
+ */
+export declare class UserInteractionsLayerInterface {
+    constructor(options?: {});
+    /**
+     * Initialize the layer adding user interactions.
+     *
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map: AnyMap): void;
+    /**
+     * Terminate the layer unsubscribing user interactions.
+     */
+    detachFromMap(): void;
+    /**
+     * Activate map listeners events.
+     */
+    activateUserInteractions(): void;
+    /**
+     * Deactivate map listeners events.
+     */
+    deactivateUserInteractions(): void;
+    /**
+     * Subscribe on user:click event.
+     */
+    onClick(callback: UserInteractionCallback): void;
+    /**
+     * Subscribe on user:hover event.
+     */
+    onHover(callback: UserInteractionCallback): void;
+    /**
+     * Unsubscribe on user:click event.
+     */
+    unClick(callback: UserInteractionCallback): void;
+    /**
+     * Unsubscribe on user:hover event.
+     */
+    unHover(callback: UserInteractionCallback): void;
+}
+/**
+ * Mixin for UserInteractionsLayerInterface. It provide onClick and onHover functions.
+ *
+ * @param {Class} Base A class to extend with {UserInteractionsLayerInterface} functionnalities.
+ * @return {Class}  A class that implements {UserInteractionsLayerInterface} class and extends Base;
+ * @private
+ */
+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

@@ -0,0 +1 @@
+{"version":3,"file":"UserInteractionsLayerMixin.d.ts","sourceRoot":"","sources":["../../../src/common/mixins/UserInteractionsLayerMixin.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAChF,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAEhD,MAAM,MAAM,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,CAkQxB;AAED,eAAe,0BAA0B,CAAC"}

package/common/mixins/UserInteractionsLayerMixin.js

@@ -0,0 +1,241 @@
+/* eslint-disable no-empty-function,@typescript-eslint/no-empty-function */
+/* eslint-disable no-useless-constructor,@typescript-eslint/no-useless-constructor */
+/* eslint-disable no-unused-vars,@typescript-eslint/no-unused-vars */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable max-classes-per-file */
+import { fromLonLat } from 'ol/proj';
+import { unByKey } from 'ol/Observable';
+import BaseEvent from 'ol/events/Event';
+/**
+ * UserInteractionsLayerInterface.
+ */
+export class UserInteractionsLayerInterface {
+    /*
+     * Constructor
+  
+     * @param {Object} options Layer options.
+     * @param {string} options.userInteractions If true, it listens for user mouse hover and click event.
+     * @param {string} options.userClickInteractions If true, it listens for user click event.
+     * @param {string} options.userHoverInteractions If true, it listens for user mouse over event.
+     * @param {string} options.defaultUserInteractions  If true, it adds default listeners for user mouse hover and click event.
+     */
+    constructor(options = {}) { }
+    /**
+     * Initialize the layer adding user interactions.
+     *
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map) { }
+    /**
+     * Terminate the layer unsubscribing user interactions.
+     */
+    detachFromMap() { }
+    /**
+     * Activate map listeners events.
+     */
+    activateUserInteractions() { }
+    /**
+     * Deactivate map listeners events.
+     */
+    deactivateUserInteractions() { }
+    /**
+     * Subscribe on user:click event.
+     */
+    onClick(callback) { }
+    /**
+     * Subscribe on user:hover event.
+     */
+    onHover(callback) { }
+    /**
+     * Unsubscribe on user:click event.
+     */
+    unClick(callback) { }
+    /**
+     * Unsubscribe on user:hover event.
+     */
+    unHover(callback) { }
+}
+/**
+ * Mixin for UserInteractionsLayerInterface. It provide onClick and onHover functions.
+ *
+ * @param {Class} Base A class to extend with {UserInteractionsLayerInterface} functionnalities.
+ * @return {Class}  A class that implements {UserInteractionsLayerInterface} class and extends Base;
+ * @private
+ */
+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);
+            }
+        }
+        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();
+        }
+        detachFromMap() {
+            this.unlistenEvents();
+            super.detachFromMap();
+        }
+        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);
+                }));
+            });
+        }
+        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();
+            }
+        }
+        /**
+         * 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();
+            }
+        }
+        /**
+         * 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;
+            }
+            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) => {
+                const event = new BaseEvent('user:click');
+                event.target = featureInfo;
+                this.dispatchEvent(event);
+                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) => {
+                const event = new BaseEvent('user:hover');
+                event.target = featureInfo;
+                this.dispatchEvent(event);
+                return featureInfo;
+            })
+                .catch(() => emptyFeatureInfo);
+        }
+        activateUserInteractions() { }
+        deactivateUserInteractions() { }
+    };
+}
+export default UserInteractionsLayerMixin;

package/common/styles/index.d.ts

@@ -0,0 +1,5 @@
+export { default as realtimeDefaultStyle } from "./realtimeDefaultStyle";
+export { default as realtimeDelayStyle } from "./realtimeDelayStyle";
+export { default as realtimeSimpleStyle } from "./realtimeSimpleStyle";
+export * from "./realtimeDefaultStyle";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/common/styles/index.js"],"names":[],"mappings":""}

package/common/styles/index.js

@@ -1,4 +1,4 @@
-export { default as trackerDefaultStyle } from "./trackerDefaultStyle";
-export { default as trackerDelayStyle } from "./trackerDelayStyle";
-export { default as trackerSimpleStyle } from "./trackerSimpleStyle";
-export * from "./trackerDefaultStyle";
+export { default as realtimeDefaultStyle } from './realtimeDefaultStyle';
+export { default as realtimeDelayStyle } from './realtimeDelayStyle';
+export { default as realtimeSimpleStyle } from './realtimeSimpleStyle';
+export * from './realtimeDefaultStyle';

package/common/styles/realtimeDefaultStyle.d.ts

@@ -0,0 +1,36 @@
+import type { RealtimeStyleFunction } 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: (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 {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 const realtimeDefaultStyle: RealtimeStyleFunction;
+export default realtimeDefaultStyle;
+//# sourceMappingURL=realtimeDefaultStyle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"realtimeDefaultStyle.d.ts","sourceRoot":"","sources":["../../../src/common/styles/realtimeDefaultStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAKV,qBAAqB,EACtB,MAAM,aAAa,CAAC;AAMrB;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,WACnB,MAAM,UACN,MAAM,SACP,MAAM,2CAmBd,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,SACvB,MAAM,YACF,MAAM,QACV,MAAM,cACA,MAAM,sBACC,MAAM,eACb,MAAM,2CA0BnB,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,EAAE,qBAkO3B,CAAC;AACF,eAAe,oBAAoB,CAAC"}

package/common/styles/realtimeDefaultStyle.js

@@ -0,0 +1,275 @@
+import createCanvas from '../utils/createCanvas';
+/** @private */
+const cacheDelayBg = {};
+/**
+ * Draw circle delay background
+ *
+ * @private
+ */
+export const getDelayBgCanvas = (origin, radius, color) => {
+    const key = `${origin}, ${radius}, ${color}`;
+    if (!cacheDelayBg[key]) {
+        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;
+            ctx.filter = 'blur(1px)';
+            ctx.fill();
+            cacheDelayBg[key] = canvas;
+        }
+    }
+    return cacheDelayBg[key];
+};
+/** @private */
+const cacheDelayText = {};
+/**
+ * Draw delay text
+ *
+ * @private
+ */
+export const getDelayTextCanvas = (text, fontSize, font, delayColor, delayOutlineColor = '#000', pixelRatio = 1) => {
+    const key = `${text}, ${font}, ${delayColor}, ${delayOutlineColor}, ${pixelRatio}`;
+    if (!cacheDelayText[key]) {
+        const canvas = createCanvas(Math.ceil(text.length * fontSize), Math.ceil(fontSize + 8 * pixelRatio));
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return null;
+            }
+            ctx.font = font;
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'middle';
+            ctx.font = font;
+            ctx.fillStyle = delayColor;
+            ctx.strokeStyle = delayOutlineColor;
+            ctx.lineWidth = 1.5 * pixelRatio;
+            ctx.strokeText(text, 0, fontSize);
+            ctx.fillText(text, 0, fontSize);
+            cacheDelayText[key] = canvas;
+        }
+    }
+    return cacheDelayText[key];
+};
+/** @private */
+const cacheCircle = {};
+/**
+ * Draw colored circle with black border
+ *
+ * @private
+ */
+export const getCircleCanvas = (origin, radius, color, hasStroke, hasDash, pixelRatio) => {
+    const key = `${origin}, ${radius}, ${color}, ${hasStroke},  ${hasDash}, ${pixelRatio}`;
+    if (!cacheCircle[key]) {
+        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;
+                ctx.strokeStyle = '#000000';
+            }
+            ctx.beginPath();
+            ctx.arc(origin, origin, radius, 0, 2 * Math.PI, false);
+            ctx.fill();
+            if (hasDash) {
+                ctx.setLineDash([5, 3]);
+            }
+            if (hasStroke) {
+                ctx.stroke();
+            }
+            cacheCircle[key] = canvas;
+        }
+    }
+    return cacheCircle[key];
+};
+/** @private */
+const cacheText = {};
+/**
+ * Draw text in the circle
+ *
+ * @private
+ */
+export const getTextCanvas = (text, origin, textSize, fillColor, strokeColor, hasStroke, pixelRatio) => {
+    const key = `${text}, ${origin}, ${textSize}, ${fillColor},${strokeColor}, ${hasStroke}, ${pixelRatio}`;
+    if (!cacheText[key]) {
+        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();
+                ctx.textBaseline = 'middle';
+                ctx.textAlign = 'center';
+                ctx.font = `bold ${textSize + 2}px Arial`;
+                ctx.strokeStyle = strokeColor;
+                ctx.strokeText(text, origin, origin);
+                ctx.restore();
+            }
+            // Draw a text
+            ctx.textBaseline = 'middle';
+            ctx.textAlign = 'center';
+            ctx.fillStyle = fillColor;
+            ctx.font = `bold ${textSize}px Arial`;
+            ctx.strokeStyle = strokeColor;
+            ctx.strokeText(text, origin, origin);
+            ctx.fillText(text, origin, origin);
+            cacheText[key] = canvas;
+        }
+    }
+    return cacheText[key];
+};
+/** @private */
+const cache = {};
+/**
+ * A tracker style that take in account the delay.
+ *
+ * @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 = () => 0, getBgColor = () => '#000', getDelayColor = () => '#000', getDelayText = () => null, getTextColor = () => '#000', getTextSize = () => 0, getMaxRadiusForText = () => 10, getMaxRadiusForStrokeAndDelay = () => 7, } = 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 || {};
+    const cancelled = state === 'JOURNEY_CANCELLED';
+    if (!type) {
+        type = 'Rail';
+    }
+    if (!name) {
+        name = 'I';
+    }
+    if (!textColor) {
+        textColor = '#000000';
+    }
+    if (color && color[0] !== '#') {
+        color = `#${color}`;
+    }
+    if (textColor[0] !== '#') {
+        textColor = `#${textColor}`;
+    }
+    const z = Math.min(Math.floor(zoom || 1), 16);
+    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 >= getMaxRadiusForStrokeAndDelay() * pixelRatio;
+    if (hover || selected) {
+        radius = isDisplayStrokeAndDelay
+            ? radius + 5 * pixelRatio
+            : 14 * pixelRatio;
+    }
+    const isDisplayText = radius > getMaxRadiusForText() * pixelRatio;
+    // Optimize the cache key, very important in high zoom level
+    let key = `${radius}${hover || selected}`;
+    if (useDelayStyle) {
+        key += `${operatorProvidesRealtime}${delay}`;
+        if (isDisplayStrokeAndDelay) {
+            key += `${cancelled}`;
+        }
+    }
+    else {
+        key += `${color || type}`;
+        if (isDisplayStrokeAndDelay) {
+            key += `${cancelled}${delay}`;
+        }
+    }
+    if (isDisplayText) {
+        key += `${name}${textColor}`;
+    }
+    if (!cache[key]) {
+        if (radius === 0) {
+            return null;
+        }
+        const margin = 1 * pixelRatio;
+        const radiusDelay = radius + 2 * pixelRatio;
+        const markerSize = radius * 2;
+        const size = radiusDelay * 2 + margin * 2;
+        const origin = size / 2;
+        // Draw circle delay background
+        let delayBg = null;
+        if (isDisplayStrokeAndDelay && delay !== null) {
+            delayBg = getDelayBgCanvas(origin, radiusDelay, getDelayColor(delay, cancelled));
+        }
+        // Show delay if feature is hovered or if delay is above 5mins.
+        let delayText = null;
+        let fontSize = 0;
+        if (isDisplayStrokeAndDelay &&
+            (hover || (delay || 0) >= delayDisplay || cancelled)) {
+            // Draw delay text
+            fontSize =
+                Math.max(cancelled ? 19 : 14, Math.min(cancelled ? 19 : 17, radius * 1.2)) * pixelRatio;
+            const text = getDelayText(delay, cancelled);
+            if (text) {
+                delayText = getDelayTextCanvas(text, fontSize, `bold ${fontSize}px arial, sans-serif`, getDelayColor(delay, cancelled, true), delayOutlineColor, pixelRatio);
+            }
+        }
+        // Draw colored circle with black border
+        let circleFillColor;
+        if (useDelayStyle) {
+            circleFillColor = getDelayColor(delay, cancelled);
+        }
+        else {
+            circleFillColor = color || getBgColor(type);
+        }
+        const hasStroke = isDisplayStrokeAndDelay || hover || selected;
+        const hasDash = !!isDisplayStrokeAndDelay &&
+            !!useDelayStyle &&
+            delay === null &&
+            operatorProvidesRealtime === 'yes';
+        const circle = getCircleCanvas(origin, radius, circleFillColor, hasStroke, hasDash, pixelRatio);
+        // Create the canvas
+        const width = size + ((delayText === null || delayText === void 0 ? void 0 : delayText.width) || 0) * 2;
+        const height = size;
+        const canvas = createCanvas(width, height);
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return null;
+            }
+            // The renderTrajectories will center the image on the vehicle positions.
+            const originX = (delayText === null || delayText === void 0 ? void 0 : delayText.width) || 0;
+            if (delayBg) {
+                ctx.drawImage(delayBg, originX, 0);
+            }
+            if (circle) {
+                ctx.drawImage(circle, originX, 0);
+            }
+            // Draw text in the circle
+            let circleText = null;
+            if (isDisplayText) {
+                const fontSize2 = Math.max(radius, 10);
+                const textSize = getTextSize(ctx, markerSize, name, fontSize2);
+                const textColor2 = !useDelayStyle
+                    ? textColor || getTextColor(type)
+                    : '#000000';
+                const hasStroke2 = !!useDelayStyle &&
+                    delay === null &&
+                    operatorProvidesRealtime === 'yes';
+                circleText = getTextCanvas(name, origin, textSize, textColor2, circleFillColor, hasStroke2, pixelRatio);
+            }
+            if (circleText) {
+                ctx.drawImage(circleText, originX, 0);
+            }
+            if (delayText) {
+                ctx.drawImage(delayText, originX + Math.ceil(origin + radiusDelay) + margin, Math.ceil(origin - fontSize));
+            }
+            cache[key] = canvas;
+        }
+    }
+    return cache[key];
+};
+export default realtimeDefaultStyle;

package/common/styles/realtimeDelayStyle.d.ts

@@ -0,0 +1,12 @@
+import type { RealtimeStyleFunction } from '../../types';
+/**
+ * A tracker style that display the delay as backgroundColor.
+ *
+ * @param {*} trajectory The trajectory to render.
+ * @param {*} viewState The view state of the map.
+ * @param {*} options Some options to change the rendering
+ * @return a canvas
+ */
+declare const realtimeDelayStyle: RealtimeStyleFunction;
+export default realtimeDelayStyle;
+//# sourceMappingURL=realtimeDelayStyle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"realtimeDelayStyle.d.ts","sourceRoot":"","sources":["../../../src/common/styles/realtimeDelayStyle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAIV,qBAAqB,EACtB,MAAM,aAAa,CAAC;AACrB;;;;;;;GAOG;AACH,QAAA,MAAM,kBAAkB,EAAE,qBASzB,CAAC;AACF,eAAe,kBAAkB,CAAC"}

package/common/styles/realtimeDelayStyle.js

@@ -0,0 +1,13 @@
+import realtimeDefaultStyle from './realtimeDefaultStyle';
+/**
+ * A tracker style that display the delay as backgroundColor.
+ *
+ * @param {*} trajectory The trajectory to render.
+ * @param {*} viewState The view state of the map.
+ * @param {*} options Some options to change the rendering
+ * @return a canvas
+ */
+const realtimeDelayStyle = (trajectory, viewState, options) => {
+    return realtimeDefaultStyle(trajectory, viewState, Object.assign(Object.assign({}, options), { useDelayStyle: true }));
+};
+export default realtimeDelayStyle;