From b875da9f84e3f6604503063e8141c4f43a51992d Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Tue, 16 Jun 2020 11:34:31 +0200
Subject: [PATCH 01/36] Fix pixel ratio

---
 doc/index.html                    | 4 ++--
 src/mapbox/layers/TrackerLayer.js | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/doc/index.html b/doc/index.html
index 3f7f4fd4..8eac573f 100644
--- a/doc/index.html
+++ b/doc/index.html
@@ -4733,7 +4733,7 @@ <h3 class='fl m0' id='stopsapi'>
     <div class='py1 quiet mt1 prose-big'>Example</div>
     
       
-      <pre class='p1 overflow-auto round fill-light'><span class="hljs-keyword">import</span> { StopsAPI } <span class="hljs-keyword">from</span> <span class="hljs-string">'mobility-toolbox-js/api'</span>;</pre>
+      <pre class='p1 overflow-auto round fill-light'><span class="hljs-keyword">import</span> { StopsAPI } <span class="hljs-keyword">from</span> <span class="hljs-string">'mobility-toolbox-js/src/api'</span>;</pre>
     
   
 
@@ -4881,7 +4881,7 @@ <h3 class='fl m0' id='trajservapi'>
     <div class='py1 quiet mt1 prose-big'>Example</div>
     
       
-      <pre class='p1 overflow-auto round fill-light'><span class="hljs-keyword">import</span> { TrajservAPI } <span class="hljs-keyword">from</span> <span class="hljs-string">'mobility-toolbox-js/api'</span>;</pre>
+      <pre class='p1 overflow-auto round fill-light'><span class="hljs-keyword">import</span> { TrajservAPI } <span class="hljs-keyword">from</span> <span class="hljs-string">'mobility-toolbox-js/src/api'</span>;</pre>
     
   
 
diff --git a/src/mapbox/layers/TrackerLayer.js b/src/mapbox/layers/TrackerLayer.js
index f2b02d6c..e3f25855 100644
--- a/src/mapbox/layers/TrackerLayer.js
+++ b/src/mapbox/layers/TrackerLayer.js
@@ -92,9 +92,10 @@ class TrackerLayer extends Layer {
       width,
       height,
       getPixelFromCoordinate: (coord) => {
+        const pixelRatio = window.devicePixelRatio || 1;
         const [lng, lat] = toLonLat(coord);
         const { x, y } = this.map.project({ lng, lat });
-        return [x, y];
+        return [x * pixelRatio, y * pixelRatio];
       },
     });
     this.tracker.setStyle((props, r) => this.style(props, r));

From a0c3d52d5e8bd894f8b8bcc9ac67a92e0d713227 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Tue, 16 Jun 2020 12:04:51 +0200
Subject: [PATCH 02/36] v1.0.0-beta.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9aab6c1d..84dae64f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mobility-toolbox-js",
   "license": "MIT",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "main": "build/index.js",
   "module": "src/index.js",
   "files": [

From bec6f3a3b368c490513ff3df625079643860dad4 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Wed, 17 Jun 2020 09:14:07 +0200
Subject: [PATCH 03/36] Fix trajectories.length is undefined error

---
 src/common/Tracker.js             | 4 ++--
 src/mapbox/layers/TrackerLayer.js | 2 +-
 src/ol/layers/TrackerLayer.js     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/common/Tracker.js b/src/common/Tracker.js
index 176831eb..d0361a93 100644
--- a/src/common/Tracker.js
+++ b/src/common/Tracker.js
@@ -51,7 +51,7 @@ export default class Tracker {
    * Define the trajectories.
    * @param {array<ol.feature>} trajectories
    */
-  setTrajectories(trajectories) {
+  setTrajectories(trajectories = []) {
     if (this.sort) {
       trajectories.sort(this.sort);
     }
@@ -127,7 +127,7 @@ export default class Tracker {
     let hoverVehicleImg;
     let hoverVehiclePx;
 
-    for (let i = this.trajectories.length - 1; i >= 0; i -= 1) {
+    for (let i = (this.trajectories || []).length - 1; i >= 0; i -= 1) {
       const traj = this.trajectories[i];
 
       // We simplify the traj object
diff --git a/src/mapbox/layers/TrackerLayer.js b/src/mapbox/layers/TrackerLayer.js
index e3f25855..cbab3ab5 100644
--- a/src/mapbox/layers/TrackerLayer.js
+++ b/src/mapbox/layers/TrackerLayer.js
@@ -283,7 +283,7 @@ class TrackerLayer extends Layer {
     const ext = buffer([...coordinate, ...coordinate], 10 * resolution);
     const trajectories = this.tracker.getTrajectories();
     const vehicles = [];
-    for (let i = 0; i < trajectories.length; i += 1) {
+    for (let i = 0; i < (this.trajectories || []).length; i += 1) {
       if (
         trajectories[i].coordinate &&
         containsCoordinate(ext, trajectories[i].coordinate)
diff --git a/src/ol/layers/TrackerLayer.js b/src/ol/layers/TrackerLayer.js
index 0c690cdb..f379dc49 100644
--- a/src/ol/layers/TrackerLayer.js
+++ b/src/ol/layers/TrackerLayer.js
@@ -277,7 +277,7 @@ class TrackerLayer extends Layer {
     const ext = buffer([...coordinate, ...coordinate], 10 * res);
     const trajectories = this.tracker.getTrajectories();
     const vehicles = [];
-    for (let i = 0; i < trajectories.length; i += 1) {
+    for (let i = 0; i < (this.trajectories || []).length; i += 1) {
       if (
         trajectories[i].coordinate &&
         containsCoordinate(ext, trajectories[i].coordinate)

From 7f380135854b1fdaaaeb20c13b8d3c4385867b25 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Wed, 17 Jun 2020 09:14:39 +0200
Subject: [PATCH 04/36] v1.0.0-beta.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 84dae64f..65cebeb8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mobility-toolbox-js",
   "license": "MIT",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "main": "build/index.js",
   "module": "src/index.js",
   "files": [

From c94a6f768b37b0078734e2ba9add342956f35197 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 18 Jun 2020 11:03:54 +0200
Subject: [PATCH 05/36] Use web worker for mouse over

---
 .neutrinorc.js                     | 24 +++++++++++++++++++
 doc/index.html                     |  4 ++--
 package.json                       |  3 ++-
 src/mapbox/layers/TrackerLayer.js  | 33 +++++++++++++-------------
 src/mapbox/layers/TrajservLayer.js | 12 +++++-----
 src/ol/layers/TrackerLayer.js      | 38 ++++++++++++++++++++----------
 yarn.lock                          | 18 +++++++++++++-
 7 files changed, 92 insertions(+), 40 deletions(-)

diff --git a/.neutrinorc.js b/.neutrinorc.js
index 067c17b5..962760e5 100644
--- a/.neutrinorc.js
+++ b/.neutrinorc.js
@@ -19,6 +19,18 @@ if (process.env.REACT_APP_LIB_MODE) {
       },
     },
     use: [
+      (neutrino) => {
+        neutrino.config.output
+          .globalObject('this') // will prevent `window`
+          .end()
+          .module.rule('worker')
+          .test(neutrino.regexFromExtensions(['worker.js']))
+          .use('worker')
+          .loader(require.resolve('worker-loader'))
+          .options({
+            // See: https://github.com/webpack-contrib/worker-loader#options
+          });
+      },
       library({
         name: 'mobility-toolbox-js',
       }),
@@ -83,6 +95,18 @@ if (process.env.REACT_APP_LIB_MODE) {
           },
         ],
       }),
+      (neutrino) => {
+        neutrino.config.output
+          .globalObject('this') // will prevent `window`
+          .end()
+          .module.rule('worker')
+          .test(neutrino.regexFromExtensions(['worker.js']))
+          .use('worker')
+          .loader(require.resolve('worker-loader'))
+          .options({
+            // See: https://github.com/webpack-contrib/worker-loader#options
+          });
+      },
     ],
   };
 }
diff --git a/doc/index.html b/doc/index.html
index 8eac573f..4447e0cf 100644
--- a/doc/index.html
+++ b/doc/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset='utf-8'>
-  <title>mobility-toolbox-js 1.0.0-beta.3 | Documentation</title>
+  <title>mobility-toolbox-js 1.0.0-beta.5 | Documentation</title>
   <meta name='viewport' content='width=device-width,initial-scale=1'>
   <link href='assets/bass.css' rel='stylesheet'>
   <link href='assets/style.css' rel='stylesheet'>
@@ -14,7 +14,7 @@
       <div id='split-left' class='overflow-auto fs0 height-viewport-100'>
         <div class='py1 px2'>
           <h3 class='mb0 no-anchor'>mobility-toolbox-js</h3>
-          <div class='mb1'><code>1.0.0-beta.3</code></div>
+          <div class='mb1'><code>1.0.0-beta.5</code></div>
           <input
             placeholder='Filter'
             id='filter-input'
diff --git a/package.json b/package.json
index 65cebeb8..545e4a7c 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,8 @@
     "stylelint-scss": "^3.12.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.0",
+    "worker-loader": "^2.0.0"
   },
   "scripts": {
     "apidoc": "documentation build src/ol/index.js src/mapbox/index.js --config documentation.yml --format html -o doc",
diff --git a/src/mapbox/layers/TrackerLayer.js b/src/mapbox/layers/TrackerLayer.js
index cbab3ab5..3885f2b8 100644
--- a/src/mapbox/layers/TrackerLayer.js
+++ b/src/mapbox/layers/TrackerLayer.js
@@ -1,10 +1,10 @@
 import { unByKey } from 'ol/Observable';
 import { toLonLat, fromLonLat } from 'ol/proj';
-import { buffer, containsCoordinate } from 'ol/extent';
 import Layer from './Layer';
 import Tracker from '../../common/Tracker';
 import { timeSteps } from '../../common/trackerConfig';
 import { getResolution } from '../utils';
+import GetVehicleAtCoordinateW from '../../common/workers/getVehicleAtCoordinate.worker';
 
 /**
  * Responsible for loading tracker data.
@@ -86,6 +86,7 @@ class TrackerLayer extends Layer {
     if (!this.map) {
       return;
     }
+    this.getVehicleAtCoordinateWorker = new GetVehicleAtCoordinateW();
 
     const { width, height } = map.getCanvas();
     this.tracker = new Tracker({
@@ -202,13 +203,18 @@ class TrackerLayer extends Layer {
           this.map.getContainer().style.cursor = 'auto';
           return;
         }
-        const [vehicle] = this.getVehiclesAtCoordinate(
+        this.getVehiclesAtCoordinate(
           fromLonLat([evt.lngLat.lng, evt.lngLat.lat]),
         );
-        this.map.getContainer().style.cursor = vehicle ? 'pointer' : 'auto';
-        this.tracker.setHoverVehicleId(vehicle && vehicle.id);
       }),
     ];
+    this.getVehicleAtCoordinateWorker.onmessage = (e) => {
+      const [vehicle] = e.data;
+      // eslint-disable-next-line no-console
+      console.log(vehicle);
+      this.map.getContainer().style.cursor = vehicle ? 'pointer' : 'auto';
+      this.tracker.setHoverVehicleId(vehicle && vehicle.id);
+    };
   }
 
   /**
@@ -279,20 +285,13 @@ class TrackerLayer extends Layer {
    * @private
    */
   getVehiclesAtCoordinate(coordinate) {
-    const resolution = getResolution(this.map);
-    const ext = buffer([...coordinate, ...coordinate], 10 * resolution);
-    const trajectories = this.tracker.getTrajectories();
-    const vehicles = [];
-    for (let i = 0; i < (this.trajectories || []).length; i += 1) {
-      if (
-        trajectories[i].coordinate &&
-        containsCoordinate(ext, trajectories[i].coordinate)
-      ) {
-        vehicles.push(trajectories[i]);
-      }
-    }
+    const res = getResolution(this.map);
 
-    return vehicles;
+    // const ext = buffer([...coordinate, ...coordinate], 10 * res);
+    const trajectories = this.tracker.getTrajectories();
+    this.getVehicleAtCoordinateWorker.postMessage(
+      JSON.stringify([trajectories, coordinate, res]),
+    );
   }
 
   /**
diff --git a/src/mapbox/layers/TrajservLayer.js b/src/mapbox/layers/TrajservLayer.js
index 29ba488e..8ee8d947 100644
--- a/src/mapbox/layers/TrajservLayer.js
+++ b/src/mapbox/layers/TrajservLayer.js
@@ -165,12 +165,12 @@ class MapboxTrajservLayer extends TrackerLayer {
     const { regexPublishedLineName } = this.options;
 
     if (lineParam || routeParam || opParam || regexPublishedLineName) {
-      this.filterFc = MapboxTrajservLayer.createFilter(
-        lineParam ? lineParam.split(',') : undefined,
-        routeParam ? routeParam.split(',') : undefined,
-        opParam ? opParam.split(',') : undefined,
-        regexPublishedLineName,
-      );
+      // this.filterFc = MapboxTrajservLayer.createFilter(
+      //   lineParam ? lineParam.split(',') : undefined,
+      //   routeParam ? routeParam.split(',') : undefined,
+      //   opParam ? opParam.split(',') : undefined,
+      //   regexPublishedLineName,
+      // );
     } else {
       this.filterFc = null;
     }
diff --git a/src/ol/layers/TrackerLayer.js b/src/ol/layers/TrackerLayer.js
index f379dc49..549d8d60 100644
--- a/src/ol/layers/TrackerLayer.js
+++ b/src/ol/layers/TrackerLayer.js
@@ -1,9 +1,9 @@
 import OLLayer from 'ol/layer/Layer';
 import { unByKey } from 'ol/Observable';
-import { buffer, containsCoordinate } from 'ol/extent';
 import Layer from './Layer';
 import Tracker from '../../common/Tracker';
 import { timeSteps } from '../../common/trackerConfig';
+import GetVehicleAtCoordinateW from '../../common/workers/getVehicleAtCoordinate.worker';
 
 /**
  * Responsible for loading tracker data.
@@ -99,6 +99,7 @@ class TrackerLayer extends Layer {
     if (!this.map) {
       return;
     }
+    this.getVehicleAtCoordinateWorker = new GetVehicleAtCoordinateW();
 
     this.tracker = new Tracker({
       getPixelFromCoordinate: this.map.getPixelFromCoordinate.bind(this.map),
@@ -198,11 +199,20 @@ class TrackerLayer extends Layer {
         if (this.map.getView().getInteracting() || !this.isHoverActive) {
           return;
         }
+        this.getVehiclesAtCoordinate(evt.coordinate);
         const [vehicle] = this.getVehiclesAtCoordinate(evt.coordinate);
         this.map.getTargetElement().style.cursor = vehicle ? 'pointer' : 'auto';
         this.tracker.setHoverVehicleId(vehicle && vehicle.id);
       }),
     ];
+
+    this.getVehicleAtCoordinateWorker.onmessage = (e) => {
+      const [vehicle] = e.data;
+      // eslint-disable-next-line no-console
+      console.log(vehicle);
+      this.map.getTargetElement().style.cursor = vehicle ? 'pointer' : 'auto';
+      this.tracker.setHoverVehicleId(vehicle && vehicle.id);
+    };
   }
 
   /**
@@ -274,19 +284,21 @@ class TrackerLayer extends Layer {
    */
   getVehiclesAtCoordinate(coordinate) {
     const res = this.map.getView().getResolution();
-    const ext = buffer([...coordinate, ...coordinate], 10 * res);
     const trajectories = this.tracker.getTrajectories();
-    const vehicles = [];
-    for (let i = 0; i < (this.trajectories || []).length; i += 1) {
-      if (
-        trajectories[i].coordinate &&
-        containsCoordinate(ext, trajectories[i].coordinate)
-      ) {
-        vehicles.push(trajectories[i]);
-      }
-    }
-
-    return vehicles;
+    this.getVehicleAtCoordinateWorker.postMessage(
+      JSON.stringify([trajectories, coordinate, res]),
+    );
+    // const vehicles = [];
+    // for (let i = 0; i < (trajectories || []).length; i += 1) {
+    //   if (
+    //     trajectories[i].coordinate &&
+    //     containsCoordinate(ext, trajectories[i].coordinate)
+    //   ) {
+    //     vehicles.push(trajectories[i]);
+    //   }
+    // }
+
+    // return vehicles;
   }
 
   /**
diff --git a/yarn.lock b/yarn.lock
index 6fe7cb2b..360b747c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8298,7 +8298,7 @@ loader-utils@1.2.3:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
-loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.0.0, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -11441,6 +11441,14 @@ scheduler@^0.19.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+schema-utils@^0.4.0:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
+  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -13687,6 +13695,14 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
+worker-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
+  integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==
+  dependencies:
+    loader-utils "^1.0.0"
+    schema-utils "^0.4.0"
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"

From 7ae8b453f681f6c2a657ffb595898347602ff52e Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 18 Jun 2020 11:51:27 +0200
Subject: [PATCH 06/36] Use web worker for mouse over

---
 .../workers/getVehicleAtCoordinate.worker.js  | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/common/workers/getVehicleAtCoordinate.worker.js

diff --git a/src/common/workers/getVehicleAtCoordinate.worker.js b/src/common/workers/getVehicleAtCoordinate.worker.js
new file mode 100644
index 00000000..9fff37b9
--- /dev/null
+++ b/src/common/workers/getVehicleAtCoordinate.worker.js
@@ -0,0 +1,26 @@
+import { buffer, containsCoordinate } from 'ol/extent';
+
+const getVehicleAtCoordinate = (e) => {
+  // console.log('Worker: Message received from main script', e.data);
+  try {
+    const [trajectories, coordinate, resolution] = JSON.parse(e.data);
+    const ext = buffer([...coordinate, ...coordinate], 10 * resolution);
+    const vehicles = [];
+    for (let i = 0; i < (trajectories || []).length; i += 1) {
+      if (
+        trajectories[i].coordinate &&
+        containsCoordinate(ext, trajectories[i].coordinate)
+      ) {
+        vehicles.push(trajectories[i]);
+      }
+    }
+
+    postMessage(vehicles);
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.log('Error', err);
+  }
+};
+
+// eslint-disable-next-line no-restricted-globals
+self.addEventListener('message', getVehicleAtCoordinate);

From 9bf41e38e16c93401c554410479fdb7257f4a395 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 18 Jun 2020 14:14:01 +0200
Subject: [PATCH 07/36] Fix blurry icon

---
 doc/index.html                      | 4 ++--
 package.json                        | 2 +-
 src/doc/components/Documentation.js | 2 +-
 src/doc/examples/mapboxtracker.js   | 4 ++--
 src/mapbox/layers/TrackerLayer.js   | 2 +-
 src/mapbox/layers/TrajservLayer.js  | 4 +++-
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/doc/index.html b/doc/index.html
index 4447e0cf..b63d5549 100644
--- a/doc/index.html
+++ b/doc/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset='utf-8'>
-  <title>mobility-toolbox-js 1.0.0-beta.5 | Documentation</title>
+  <title>mobility-toolbox-js 1.0.0-beta.6 | Documentation</title>
   <meta name='viewport' content='width=device-width,initial-scale=1'>
   <link href='assets/bass.css' rel='stylesheet'>
   <link href='assets/style.css' rel='stylesheet'>
@@ -14,7 +14,7 @@
       <div id='split-left' class='overflow-auto fs0 height-viewport-100'>
         <div class='py1 px2'>
           <h3 class='mb0 no-anchor'>mobility-toolbox-js</h3>
-          <div class='mb1'><code>1.0.0-beta.5</code></div>
+          <div class='mb1'><code>1.0.0-beta.6</code></div>
           <input
             placeholder='Filter'
             id='filter-input'
diff --git a/package.json b/package.json
index 20220e12..030474b9 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "worker-loader": "^2.0.0"
   },
   "scripts": {
-    "apidoc": "documentation build src/ol/index.js src/mapbox/index.js --config documentation.yml --format html -o doc",
+    "apidoc": "documentation build src/ol/index.js src/mapbox/index.js --config documentation.yml --format json -o doc.json",
     "build": "yarn lib",
     "coverage": "yarn test  --watchAll=false  --coverage --coverageDirectory=coverage",
     "cy:open": "cypress open",
diff --git a/src/doc/components/Documentation.js b/src/doc/components/Documentation.js
index 5f8169de..5fac2895 100644
--- a/src/doc/components/Documentation.js
+++ b/src/doc/components/Documentation.js
@@ -20,7 +20,7 @@ const Documentation = () => {
 
   return (
     <div className={classes.root}>
-      <iframe title="API documentation" src="doc" className={classes.iframe} />
+      <iframe title="API documentation" src="doc/" className={classes.iframe} />
     </div>
   );
 };
diff --git a/src/doc/examples/mapboxtracker.js b/src/doc/examples/mapboxtracker.js
index f1d22573..b214af33 100644
--- a/src/doc/examples/mapboxtracker.js
+++ b/src/doc/examples/mapboxtracker.js
@@ -16,9 +16,9 @@ export default () => {
     apiKey: window.apiKey,
   });
 
-  tracker.onClick((vehicle) => {
+  tracker.onClick((vehicles) => {
     // eslint-disable-next-line no-console
-    console.log(vehicle);
+    console.log(vehicles);
   });
 
   map.on('load', () => {
diff --git a/src/mapbox/layers/TrackerLayer.js b/src/mapbox/layers/TrackerLayer.js
index 1a96c6a3..f3410db5 100644
--- a/src/mapbox/layers/TrackerLayer.js
+++ b/src/mapbox/layers/TrackerLayer.js
@@ -211,7 +211,7 @@ class TrackerLayer extends Layer {
     this.getVehicleAtCoordinateWorker.onmessage = (e) => {
       const [vehicle] = e.data;
       // eslint-disable-next-line no-console
-      console.log(vehicle);
+      // console.log(e.data);
       this.map.getContainer().style.cursor = vehicle ? 'pointer' : 'auto';
       this.tracker.setHoverVehicleId(vehicle && vehicle.id);
     };
diff --git a/src/mapbox/layers/TrajservLayer.js b/src/mapbox/layers/TrajservLayer.js
index 62a144cd..8042807d 100644
--- a/src/mapbox/layers/TrajservLayer.js
+++ b/src/mapbox/layers/TrajservLayer.js
@@ -150,6 +150,7 @@ class MapboxTrajservLayer extends TrackerLayer {
         paint: {
           'raster-opacity': 1,
           'raster-fade-duration': 0,
+          'raster-resampling': 'nearest', // important otherwise it looks blurry
         },
       },
       beforeLayerId,
@@ -226,7 +227,8 @@ class MapboxTrajservLayer extends TrackerLayer {
    * @private
    */
   onMoveEnd() {
-    this.updateTrajectories();
+    this.onMove();
+    // this.updateTrajectories();
     if (this.selectedVehicleId && this.journeyId) {
       this.highlightTrajectory();
     }

From abf4f34e53e78dbf661f7ac94540e344e65e0711 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Wed, 18 Aug 2021 13:50:24 +0200
Subject: [PATCH 08/36] Adapt doc

---
 src/api/tralis/TralisAPI.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/api/tralis/TralisAPI.js b/src/api/tralis/TralisAPI.js
index f2c2a3d6..afc6c008 100644
--- a/src/api/tralis/TralisAPI.js
+++ b/src/api/tralis/TralisAPI.js
@@ -413,7 +413,7 @@ class TralisAPI {
   /**
    * Get a full trajectory of a vehicule .
    *
-   * @param {number} id A vehicle id.
+   * @param {string} id A vehicle id.
    * @param {TralisMode} mode Tralis mode.
    * @returns {Promise<FullTrajectory>} Return a full trajectory.
    */
@@ -434,7 +434,7 @@ class TralisAPI {
   /**
    * Get full trajectories of a vehicules .
    *
-   * @param {number[]} ids List of vehicles ids.
+   * @param {string[]} ids List of vehicles ids.
    * @param {TralisMode} mode Tralis mode.
    * @returns {Promise<FullTrajectory[]>} Return an array of full trajectories.
    */
@@ -448,7 +448,7 @@ class TralisAPI {
   /**
    * Subscribe to full_trajectory channel of a given vehicle.
    *
-   * @param {number} id A vehicle id.
+   * @param {string} id A vehicle id.
    * @param {TralisMode} mode Tralis mode.
    */
   subscribeFullTrajectory(id, mode) {
@@ -470,7 +470,7 @@ class TralisAPI {
   /**
    * Unsubscribe from full_trajectory channel
    *
-   * @param {number} id A vehicle id.
+   * @param {string} id A vehicle id.
    * @param {function} cb Callback function to unsubscribe. If null all subscriptions for the channel will be unsubscribed.
    */
   unsubscribeFullTrajectory(id, cb) {
@@ -480,7 +480,7 @@ class TralisAPI {
   /**
    * Get the list of stops for this vehicle.
    *
-   * @param {number} id A vehicle id.
+   * @param {string} id A vehicle id.
    * @returns {Promise<StopSequence>} Returns a stop sequence object.
    */
   getStopSequence(id) {
@@ -491,7 +491,7 @@ class TralisAPI {
       this.conn.get(
         params,
         (data) => {
-          // Remove the delay from arrivalTime nad departureTime
+          // Remove the delay from arrivalTime nnd departureTime
           resolve(cleanStopTime(data.content && data.content[0]));
         },
         (err) => {
@@ -504,7 +504,7 @@ class TralisAPI {
   /**
    * Get a list of stops for a list of vehicles.
    *
-   * @param {number[]} ids List of vehicles ids.
+   * @param {string[]} ids List of vehicles ids.
    * @returns {Promise<StopSequence[]>} Return an array of stop sequences.
    */
   getStopSequences(ids) {
@@ -517,7 +517,7 @@ class TralisAPI {
   /**
    * Subscribe to stopsequence channel of a given vehicle.
    *
-   * @param {number} id A vehicle id.
+   * @param {string} id A vehicle id.
    * @param {function(stopSequence: StopSequence)} onMessage Function called on each message of the channel.
    */
   subscribeStopSequence(id, onMessage) {
@@ -540,7 +540,7 @@ class TralisAPI {
   /**
    * Unsubscribe from stopsequence channel
    *
-   * @param {number} id A vehicle id.
+   * @param {string} id A vehicle id.
    * @param {function} cb Callback function to unsubscribe. If null all subscriptions for the channel will be unsubscribed.
    */
   unsubscribeStopSequence(id, cb) {

From da3c2edef6348a1d425d6987c5e8afd8efb8758d Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 19 Aug 2021 13:49:55 +0200
Subject: [PATCH 09/36] Clean tracker doc and constructor

---
 src/common/Tracker.js                  | 54 ++++++++++++-------
 src/common/mixins/TrackerLayerMixin.js | 74 ++++++++++++++++++++------
 2 files changed, 94 insertions(+), 34 deletions(-)

diff --git a/src/common/Tracker.js b/src/common/Tracker.js
index 21ca939a..e8cc9b61 100644
--- a/src/common/Tracker.js
+++ b/src/common/Tracker.js
@@ -30,8 +30,8 @@ export default class Tracker {
     this.renderedTrajectories = [];
 
     /**
-     * Array of ol events key, returned by on() or once().
-     * @type {Array<key>}
+     * Active interpolation calcultion or not. If false, the train will not move until we receive the next message for the websocket.
+     * @type {boolean}
      */
     this.interpolate = !!opts.interpolate;
 
@@ -45,13 +45,13 @@ export default class Tracker {
      * Id of the trajectory which is hovered.
      * @type {string}
      */
-    this.hoverVehicleId = null;
+    this.hoverVehicleId = opts.hoverVehicleId;
 
     /**
      * Id of the trajectory which is selected.
      * @type {string}
      */
-    this.selectedVehicleId = null;
+    this.selectedVehicleId = opts.selectedVehicleId;
 
     /**
      * Scale the vehicle icons with this value.
@@ -59,6 +59,24 @@ export default class Tracker {
      */
     this.iconScale = opts.iconScale;
 
+    /**
+     * Function use to filter the features displayed.
+     * @type {function}
+     */
+    this.filter = opts.filter;
+
+    /**
+     * Function use to sort the features displayed.
+     * @type {function}
+     */
+    this.sort = opts.sort;
+
+    /**
+     * Function use to style the features displayed.
+     * @type {function}
+     */
+    this.style = opts.style;
+
     // we draw directly on the canvas since openlayers is too slow.
     /**
      * HTML <canvas> element.
@@ -140,24 +158,20 @@ export default class Tracker {
   /**
    * Set the filter for tracker features.
    * @param {function} filter Filter function.
+   * @private
+   * @deprecated Set the property this.filter directly.
    */
   setFilter(filter) {
-    /**
-     * Current filter function.
-     * @type {function}
-     */
     this.filter = filter;
   }
 
   /**
    * Set the sort for tracker features.
    * @param {function} sort Sort function.
+   * @private
+   * @deprecated Set the property this.sort directly.
    */
   setSort(sort) {
-    /**
-     * The sort function for tracker features.
-     * @type {function}
-     */
     this.sort = sort;
   }
 
@@ -165,6 +179,7 @@ export default class Tracker {
    * Set the id of the trajectory which is hovered.
    * @param {string} id Id of a vehicle.
    * @private
+   * @deprecated Set the property this.hoverVehicleId directly.
    */
   setHoverVehicleId(id) {
     if (id !== this.hoverVehicleId) {
@@ -176,6 +191,7 @@ export default class Tracker {
    * Set the id of the trajectory which is selected.
    * @param {string} id Id of a vehicle.
    * @private
+   * @deprecated Set the property this.selectedVehicleId directly.
    */
   setSelectedVehicleId(id) {
     if (id !== this.selectedVehicleId) {
@@ -186,6 +202,8 @@ export default class Tracker {
   /**
    * set the scale of the vehicle icons.
    * @param {number} iconScale Scale value.
+   * @private
+   * @deprecated Set the property this.iconScale directly.
    */
   setIconScale(iconScale) {
     this.iconScale = iconScale;
@@ -193,14 +211,12 @@ export default class Tracker {
 
   /**
    * Set the tracker style.
-   * @param {function} s OpenLayers style function.
+   * @param {function} style OpenLayers style function.
+   * @private
+   * @deprecated Set the property this.style directly.
    */
-  setStyle(s) {
-    /**
-     * Style function.
-     * @type {function}
-     */
-    this.style = s;
+  setStyle(style) {
+    this.style = style;
   }
 
   /**
diff --git a/src/common/mixins/TrackerLayerMixin.js b/src/common/mixins/TrackerLayerMixin.js
index d8819d62..aedda2f4 100644
--- a/src/common/mixins/TrackerLayerMixin.js
+++ b/src/common/mixins/TrackerLayerMixin.js
@@ -123,8 +123,33 @@ const TrackerLayerMixin = (Base) =>
         isHoverActive: true,
         ...options,
       };
+
+      // Tracker options use to build the tracker.
+      const {
+        interpolate,
+        hoverVehicleId,
+        selectedVehicleId,
+        filter,
+        sort,
+      } = options;
+      const initTrackerOptions = {
+        interpolate,
+        hoverVehicleId,
+        selectedVehicleId,
+        filter,
+        sort,
+        style,
+      };
+      Object.keys(initTrackerOptions).forEach(
+        (key) =>
+          initTrackerOptions[key] === undefined &&
+          delete initTrackerOptions[key],
+      );
+
       let cuurSpeed = speed || 1;
+
       super.defineProperties(options);
+
       Object.defineProperties(this, {
         isTrackerLayer: { value: true },
         isHoverActive: {
@@ -143,17 +168,17 @@ const TrackerLayerMixin = (Base) =>
         },
         filter: {
           get: () => this.tracker.filter,
-          set: (filter) => {
+          set: (newFilter) => {
             if (this.tracker) {
-              this.tracker.setFilter(filter);
+              this.tracker.filter = newFilter;
             }
           },
         },
         sort: {
           get: () => this.tracker.sort,
-          set: (sort) => {
+          set: (newSort) => {
             if (this.sort) {
-              this.tracker.setSort(sort);
+              this.tracker.sort = newSort;
             }
           },
         },
@@ -199,8 +224,8 @@ const TrackerLayerMixin = (Base) =>
           get: () => {
             return this.tracker.hoverVehicleId;
           },
-          set: (hoverVehicleId) => {
-            this.tracker.hoverVehicleId = hoverVehicleId;
+          set: (newHoverVehicleId) => {
+            this.tracker.hoverVehicleId = newHoverVehicleId;
           },
         },
 
@@ -211,10 +236,18 @@ const TrackerLayerMixin = (Base) =>
           get: () => {
             return this.tracker.selectedVehicleId;
           },
-          set: (selectedVehicleId) => {
-            this.tracker.selectedVehicleId = selectedVehicleId;
+          set: (newSelectedVehicleId) => {
+            this.tracker.selectedVehicleId = newSelectedVehicleId;
           },
         },
+
+        /**
+         * Options used by the constructor of the Tracker class.
+         */
+        initTrackerOptions: {
+          value: initTrackerOptions,
+          writable: false,
+        },
       });
     }
 
@@ -222,14 +255,25 @@ const TrackerLayerMixin = (Base) =>
      * Initalize the Tracker.
      * @param {ol/Map~Map} map
      * @param {Object} options
-     * @param {Number} [options.width] Canvas's width.
-     * @param {Number} [options.height] Canvas's height.
+     * @param {number} [options.width] Canvas's width.
+     * @param {number} [options.height] Canvas's height.
+     * @param {bool} [options.interpolate] Convert an EPSG:3857 coordinate to a canvas pixel (origin top-left).
+     * @param {string} [options.hoverVehicleId] Id of the trajectory which is hovered.
+     * @param {string} [options.selectedVehicleId] Id of the trajectory which is selected.
+     * @param {number} [options.iconScale] Scale the vehicle icons with this value.
      * @param {function} [options.getPixelFromCoordinate] Convert an EPSG:3857 coordinate to a canvas pixel (origin top-left).
+     * @param {function} [options.filter] Function use to filter the features displayed.
+     * @param {function} [options.sort] Function use to sort the features displayed.
+     * @param {function} [options.style] Function use to style the features displayed.
      */
-    init(map, options) {
+    init(map, options = {}) {
       super.init(map);
-      this.tracker = new Tracker(options);
-      this.tracker.setStyle((props, r) => this.style(props, r));
+      console.log(options);
+      this.tracker = new Tracker({
+        style: (props, r) => this.style(props, r),
+        ...this.initTrackerOptions,
+        ...options,
+      });
 
       if (this.visible) {
         this.start();
@@ -261,8 +305,8 @@ const TrackerLayerMixin = (Base) =>
      * Start the clock.
      *
      * @param {Array<Number>} size Map's size: [width, height].
-     * @param {Number} zoom Map's zoom level.
-     * @param {Number} resolution Map's resolution.
+     * @param {number} zoom Map's zoom level.
+     * @param {number} resolution Map's resolution.
      */
     start(size, zoom, resolution) {
       this.stop();

From 6c4972555265ffe80cacb0af75c3523709d80835 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 19 Aug 2021 13:52:37 +0200
Subject: [PATCH 10/36] Clean tracker doc and constructor

---
 src/common/mixins/TrackerLayerMixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/mixins/TrackerLayerMixin.js b/src/common/mixins/TrackerLayerMixin.js
index aedda2f4..6ebfe76e 100644
--- a/src/common/mixins/TrackerLayerMixin.js
+++ b/src/common/mixins/TrackerLayerMixin.js
@@ -268,7 +268,7 @@ const TrackerLayerMixin = (Base) =>
      */
     init(map, options = {}) {
       super.init(map);
-      console.log(options);
+
       this.tracker = new Tracker({
         style: (props, r) => this.style(props, r),
         ...this.initTrackerOptions,

From ad1d2c28cf3fe07033d45aa356842c2a1fab19c2 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 19 Aug 2021 13:54:13 +0200
Subject: [PATCH 11/36] v1.3.6-beta.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6b0af743..8443f7d1 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "1.3.5",
+  "version": "1.3.6-beta.0",
   "main": "index.js",
   "module": "module.js",
   "dependencies": {

From 229c2f72b6868c624e478e9a9de352a9032d3b9b Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Wed, 22 Sep 2021 08:46:39 +0200
Subject: [PATCH 12/36] Abort previous requests

---
 src/common/mixins/SearchMixin.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/common/mixins/SearchMixin.js b/src/common/mixins/SearchMixin.js
index 7ae409df..cf5fb56b 100644
--- a/src/common/mixins/SearchMixin.js
+++ b/src/common/mixins/SearchMixin.js
@@ -54,6 +54,7 @@ const SearchMixin = (Base) =>
         apiOptions.url = url;
       }
       this.api = new StopsAPI(apiOptions);
+      this.abortController = new AbortController();
     }
 
     render(suggestions = []) {
@@ -101,7 +102,9 @@ const SearchMixin = (Base) =>
       this.inputElt.placeholder = this.placeholder;
       this.inputElt.autoComplete = 'off';
       this.inputElt.onkeyup = (evt) => {
-        this.search(evt.target.value);
+        this.abortController.abort();
+        this.abortController = new AbortController();
+        this.search(evt.target.value, this.abortController);
       };
       Object.assign(this.inputElt.style, {
         padding: '10px 30px 10px 10px',

From 3c6d8d1231da02a61c343233d2e4911f5594c5a9 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Wed, 22 Sep 2021 09:07:30 +0200
Subject: [PATCH 13/36] Try CODEOWNERS file

---
 .github/CODEOWNERS | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 .github/CODEOWNERS

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 00000000..1df25a82
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1,37 @@
+# This is a comment.
+# Each line is a file pattern followed by one or more owners.
+
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @global-owner1 and @global-owner2 will be requested for
+# review when someone opens a pull request.
+*       @danji90 @friedjoff @gevos @oterral 
+
+# Order is important; the last matching pattern takes the most
+# precedence. When someone opens a pull request that only
+# modifies JS files, only @js-owner and not the global
+# owner(s) will be requested for a review.
+# *.js    @js-owner
+
+# You can also use email addresses if you prefer. They'll be
+# used to look up users just like we do for commit author
+# emails.
+# *.go docs@example.com
+
+# In this example, @doctocat owns any files in the build/logs
+# directory at the root of the repository and any of its
+# subdirectories.
+# /build/logs/ @doctocat
+
+# The `docs/*` pattern will match files like
+# `docs/getting-started.md` but not further nested files like
+# `docs/build-app/troubleshooting.md`.
+# docs/*  docs@example.com
+
+# In this example, @octocat owns any file in an apps directory
+# anywhere in your repository.
+# apps/ @octocat
+
+# In this example, @doctocat owns any file in the `/docs`
+# directory in the root of your repository.
+# /docs/ @doctocat
\ No newline at end of file

From 571478e4eb162a538b6e8c75e4d726c030821551 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Wed, 22 Sep 2021 09:36:30 +0200
Subject: [PATCH 14/36] Remove CODEOWNERS file

---
 .github/CODEOWNERS | 37 -------------------------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 .github/CODEOWNERS

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
deleted file mode 100644
index 1df25a82..00000000
--- a/.github/CODEOWNERS
+++ /dev/null
@@ -1,37 +0,0 @@
-# This is a comment.
-# Each line is a file pattern followed by one or more owners.
-
-# These owners will be the default owners for everything in
-# the repo. Unless a later match takes precedence,
-# @global-owner1 and @global-owner2 will be requested for
-# review when someone opens a pull request.
-*       @danji90 @friedjoff @gevos @oterral 
-
-# Order is important; the last matching pattern takes the most
-# precedence. When someone opens a pull request that only
-# modifies JS files, only @js-owner and not the global
-# owner(s) will be requested for a review.
-# *.js    @js-owner
-
-# You can also use email addresses if you prefer. They'll be
-# used to look up users just like we do for commit author
-# emails.
-# *.go docs@example.com
-
-# In this example, @doctocat owns any files in the build/logs
-# directory at the root of the repository and any of its
-# subdirectories.
-# /build/logs/ @doctocat
-
-# The `docs/*` pattern will match files like
-# `docs/getting-started.md` but not further nested files like
-# `docs/build-app/troubleshooting.md`.
-# docs/*  docs@example.com
-
-# In this example, @octocat owns any file in an apps directory
-# anywhere in your repository.
-# apps/ @octocat
-
-# In this example, @doctocat owns any file in the `/docs`
-# directory in the root of your repository.
-# /docs/ @doctocat
\ No newline at end of file

From 0bf509ad6f89c181841988765ab8359350cbcb9d Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Tue, 28 Sep 2021 09:58:47 +0200
Subject: [PATCH 15/36] v1.3.13-beta.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c363e541..f5415135 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "1.3.12",
+  "version": "1.3.13-beta.1",
   "main": "index.js",
   "module": "module.js",
   "dependencies": {

From ce9b48cb7a19ed9a7efe48bf658093fed26d5f28 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Tue, 28 Sep 2021 10:29:02 +0200
Subject: [PATCH 16/36] Unsubscribe previous call with same callback function

---
 src/api/tralis/TralisAPI.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/tralis/TralisAPI.js b/src/api/tralis/TralisAPI.js
index afc6c008..a6b6abcc 100644
--- a/src/api/tralis/TralisAPI.js
+++ b/src/api/tralis/TralisAPI.js
@@ -395,7 +395,7 @@ class TralisAPI {
    * @param {function(response: { content: Vehicle })} onMessage Function called on each message of the channel.
    */
   subscribeDeletedVehicles(mode, onMessage) {
-    this.unsubscribeDeletedVehicles();
+    this.unsubscribeDeletedVehicles(onMessage);
     this.subscribe(
       `deleted_vehicles${getModeSuffix(mode, TralisModes)}`,
       onMessage,

From 5c4ebdd5a36e6f0e298fcc6b49319269a21729c4 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Tue, 28 Sep 2021 11:24:11 +0200
Subject: [PATCH 17/36] v1.3.13-beta.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f5415135..7147695d 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "1.3.13-beta.1",
+  "version": "1.3.13-beta.2",
   "main": "index.js",
   "module": "module.js",
   "dependencies": {

From 9a5a87a238101c696185064c689d6c3b1d028ace Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Wed, 29 Sep 2021 14:41:56 +0200
Subject: [PATCH 18/36] MAke sure setBBox doesn't read event twice

---
 src/api/tralis/WebSocketConnector.js      | 27 ++++++++++++-
 src/api/tralis/WebSocketConnector.test.js | 47 +++++++++++++++++++++++
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/src/api/tralis/WebSocketConnector.js b/src/api/tralis/WebSocketConnector.js
index f2af9cee..5e1493bc 100644
--- a/src/api/tralis/WebSocketConnector.js
+++ b/src/api/tralis/WebSocketConnector.js
@@ -138,6 +138,9 @@ class WebSocketConnector {
    * @returns {{onMessage: function, errorCb: function}} Object with onMessage and error callbacks
    */
   listen(params, cb, errorCb) {
+    // Remove the previous identical callback
+    this.unlisten(params, cb);
+
     const onMessage = (e) => {
       const data = JSON.parse(e.data);
       let source = params.channel;
@@ -161,6 +164,20 @@ class WebSocketConnector {
     return { onMessageCb: onMessage, onErrorCb: errorCb };
   }
 
+  unlisten(params, cb) {
+    this.subscriptions
+      .filter((s) => {
+        return s.params.channel === params.channel && (!cb || s.cb === cb);
+      })
+      .forEach(({ onMessageCb, onErrorCb }) => {
+        this.websocket.removeEventListener('message', onMessageCb);
+        if (onErrorCb) {
+          this.websocket.removeEventListener('error', onErrorCb);
+          this.websocket.removeEventListener('close', onErrorCb);
+        }
+      });
+  }
+
   /**
    * Subscribe to a given channel.
    * @private
@@ -174,7 +191,15 @@ class WebSocketConnector {
     const reqStr = WebSocketConnector.getRequestString('', params);
 
     if (!quiet) {
-      this.subscriptions.push({ params, cb, errorCb, onMessageCb, onErrorCb });
+      const index = this.subscriptions.findIndex((subcr) => {
+        return params.channel === subcr.params.channel && cb === subcr.cb;
+      });
+      const newSubscr = { params, cb, errorCb, onMessageCb, onErrorCb };
+      if (index > -1) {
+        this.subscriptions[index] = newSubscr;
+      } else {
+        this.subscriptions.push(newSubscr);
+      }
     }
 
     if (!this.subscribed[reqStr]) {
diff --git a/src/api/tralis/WebSocketConnector.test.js b/src/api/tralis/WebSocketConnector.test.js
index 2f794f05..f113922d 100644
--- a/src/api/tralis/WebSocketConnector.test.js
+++ b/src/api/tralis/WebSocketConnector.test.js
@@ -55,19 +55,66 @@ describe('WebSocketConnector', () => {
       test('should unsubscribe all subscriptions related to a channel', () => {
         // eslint-disable-next-line no-unused-vars
         const client = new Connector(`ws://foo:1234`);
+        client.websocket.removeEventListener = jest.fn();
+        client.websocket.addEventListener = jest.fn();
         const params = { channel: 'foo' };
         const params2 = { channel: 'bar' };
         const cb = jest.fn();
         const cb2 = jest.fn();
         client.subscribe(params, cb);
+        client.subscribe(params, cb);
+        client.subscribe(params, cb);
+        client.subscribe(params, cb2);
+        client.subscribe(params2, cb2);
+        expect(client.subscriptions.length).toBe(3);
+        expect(client.websocket.removeEventListener).toBeCalledTimes(2);
+        expect(client.websocket.addEventListener).toBeCalledTimes(9);
+
+        client.unsubscribe('foo');
+        expect(client.subscriptions.length).toBe(1);
+        expect(client.subscriptions[0].params).toBe(params2);
+        expect(client.subscriptions[0].cb).toBe(cb2);
+      });
+    });
+
+    describe('#setBbox', () => {
+      test.only('should remove subscriptions before re adding it ', () => {
+        // eslint-disable-next-line no-unused-vars
+        const client = new Connector(`ws://foo:1234`);
+        client.websocket.removeEventListener = jest.fn();
+        client.websocket.addEventListener = jest.fn();
+        client.send = jest.fn();
+        const params = { channel: 'foo' };
+        const params2 = { channel: 'bar' };
+        const cb = jest.fn();
+        const cb2 = jest.fn();
+        client.subscribe(params, cb);
+        client.subscribe(params, cb);
+        client.subscribe(params, cb);
         client.subscribe(params, cb2);
         client.subscribe(params2, cb2);
         expect(client.subscriptions.length).toBe(3);
+        expect(client.websocket.removeEventListener).toBeCalledTimes(2);
+        expect(client.websocket.addEventListener).toBeCalledTimes(5);
+
+        client.websocket.removeEventListener.mockReset();
+        client.websocket.addEventListener.mockReset();
+
+        client.setBbox([0, 0, 0, 0]);
+
+        expect(client.subscriptions.length).toBe(3);
+        expect(client.websocket.removeEventListener).toBeCalledTimes(3);
+        expect(client.websocket.addEventListener).toBeCalledTimes(3);
 
         client.unsubscribe('foo');
         expect(client.subscriptions.length).toBe(1);
         expect(client.subscriptions[0].params).toBe(params2);
         expect(client.subscriptions[0].cb).toBe(cb2);
+        client.unsubscribe('bar');
+        expect(client.subscriptions.length).toBe(0);
+        client.send.mockRestore();
+        client.websocket.removeEventListener.mockRestore();
+        client.websocket.addEventListener.mockRestore();
       });
     });
   });

From f6c14a327ff7c687278dc5cfd692fa6448c3e26a Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Wed, 29 Sep 2021 14:42:26 +0200
Subject: [PATCH 19/36] v1.3.13-beta.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7147695d..a576487f 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "1.3.13-beta.2",
+  "version": "1.3.13-beta.3",
   "main": "index.js",
   "module": "module.js",
   "dependencies": {

From 84b6e67c625e95913db74c2bb16537dcc2beefa9 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 30 Sep 2021 14:27:36 +0200
Subject: [PATCH 20/36] Fix render in the past activating on new live mode

---
 src/common/mixins/TrackerLayerMixin.js | 53 +++++++++++++++++++++-----
 src/mapbox/layers/TrackerLayer.js      |  2 +-
 src/mapbox/layers/TrajservLayer.js     |  8 +---
 src/mapbox/layers/TralisLayer.js       |  6 +--
 src/ol/layers/TrackerLayer.js          | 11 +-----
 5 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/common/mixins/TrackerLayerMixin.js b/src/common/mixins/TrackerLayerMixin.js
index 629b623c..c376f397 100644
--- a/src/common/mixins/TrackerLayerMixin.js
+++ b/src/common/mixins/TrackerLayerMixin.js
@@ -13,6 +13,7 @@ import { timeSteps } from '../trackerConfig';
  * @classproperty {function} style - Style of the vehicle.
  * @classproperty {FilterFunction} filter - Time speed.
  * @classproperty {function} sort - Set the filter for tracker features.
+ * @classproperty {boolean} live - If true, the layer will always use Date.now() to render trajectories. Default to true.
  * @classproperty {boolean} useRequestAnimationFrame - If true, encapsulates the renderTrajectories calls in a requestAnimationFrame. Experimental.
  */
 export class TrackerLayerInterface {
@@ -160,6 +161,11 @@ const TrackerLayerMixin = (Base) =>
         style: {
           value: style || this.defaultStyle,
         },
+
+        /**
+         * Speed of the wheel of time.
+         * If live property is true. The speed is ignored.
+         */
         speed: {
           get: () => cuurSpeed,
           set: (newSpeed) => {
@@ -194,8 +200,18 @@ const TrackerLayerMixin = (Base) =>
          */
         styleCache: { value: {} },
 
+        /**
+         * If true. The layer will always use Date.now() on the next tick to render the trajectories.
+         * When true, setCurrTime will have no effect.
+         */
+        live: {
+          value: true,
+          writable: true,
+        },
+
         /**
          * Time used to display the trajectories.
+         * If live property is true. This function does nothing execpt rerender the trajectories using Date.now().
          */
         currTime: {
           value: new Date(),
@@ -203,7 +219,7 @@ const TrackerLayerMixin = (Base) =>
         },
 
         /**
-         * Keep track of the last time used to render trajectories.
+         * Keep track of the last update of the interval.
          * Useful when the speed increase.
          */
         lastUpdateTime: {
@@ -320,7 +336,7 @@ const TrackerLayerMixin = (Base) =>
     start(size, zoom, resolution) {
       this.stop();
       this.tracker.setVisible(true);
-      this.renderTrajectories(this.currTime, size, resolution);
+      this.renderTrajectories(size, resolution);
       this.startUpdateTime(zoom);
     }
 
@@ -360,36 +376,55 @@ const TrackerLayerMixin = (Base) =>
       }
     }
 
+    /**
+     * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
+     * @private
+     */
+    renderTrajectoriesInternal(size, resolution, noInterpolate) {
+      if (!this.tracker) {
+        return;
+      }
+
+      const renderTime = this.live ? Date.now() : this.currTime;
+      this.tracker.renderTrajectories(
+        renderTime,
+        size,
+        resolution,
+        noInterpolate,
+      );
+    }
+
     /**
      * Render the trajectories requesting an animation frame and cancelling the previous one
      * @private
      */
-    renderTrajectories(time, size, resolution) {
+    renderTrajectories(size, resolution, noInterpolate) {
       if (this.requestId) {
         cancelAnimationFrame(this.requestId);
       }
+
       if (this.useRequestAnimationFrame) {
         this.requestId = requestAnimationFrame(() => {
-          this.tracker.renderTrajectories(time, size, resolution);
+          this.renderTrajectoriesInternal(size, resolution, noInterpolate);
         });
       } else {
-        this.tracker.renderTrajectories(time, size, resolution);
+        this.renderTrajectoriesInternal(size, resolution, noInterpolate);
       }
     }
 
     /**
      * Set the current time, it triggers a rendering of the trajectories.
+     * If live is true. This function will have no effect.
      * @param {dateString | value} time
      * @param {Array<number>} size
      * @param {number} resolution
      * @param {boolean} [mustRender=true]
      */
     setCurrTime(time, size, resolution, mustRender = true) {
-      const newTime = new Date(time);
-      this.currTime = newTime;
-      this.lastUpdateTime = new Date();
+      this.currTime = new Date(time);
+      this.lastUpdateTime = this.currTime;
       if (mustRender) {
-        this.renderTrajectories(this.currTime, size, resolution);
+        this.renderTrajectories(size, resolution);
       }
     }
 
diff --git a/src/mapbox/layers/TrackerLayer.js b/src/mapbox/layers/TrackerLayer.js
index fb02a88f..0b6f4a5d 100644
--- a/src/mapbox/layers/TrackerLayer.js
+++ b/src/mapbox/layers/TrackerLayer.js
@@ -162,7 +162,7 @@ class TrackerLayer extends mixin(Layer) {
       this.map.getContainer().style.cursor = vehicle ? 'pointer' : 'auto';
       this.hoverVehicleId = id;
       // We doesn´t wait the next render, we force it.
-      this.renderTrajectories(this.currTime);
+      this.renderTrajectories();
     }
   }
 }
diff --git a/src/mapbox/layers/TrajservLayer.js b/src/mapbox/layers/TrajservLayer.js
index 88654d12..58bea539 100644
--- a/src/mapbox/layers/TrajservLayer.js
+++ b/src/mapbox/layers/TrajservLayer.js
@@ -133,14 +133,8 @@ class TrajservLayer extends mixin(TrackerLayer) {
    */
   onMove() {
     this.map.getSource(this.key).setCoordinates(getSourceCoordinates(this.map));
-
     const { width, height } = this.map.getCanvas();
-
-    this.renderTrajectories(
-      this.currTime,
-      [width, height],
-      getResolution(this.map),
-    );
+    this.renderTrajectories([width, height], getResolution(this.map));
   }
 
   /**
diff --git a/src/mapbox/layers/TralisLayer.js b/src/mapbox/layers/TralisLayer.js
index 1686669d..5dc9e84b 100644
--- a/src/mapbox/layers/TralisLayer.js
+++ b/src/mapbox/layers/TralisLayer.js
@@ -93,11 +93,7 @@ class TralisLayer extends mixin(TrackerLayer) {
       .getSource('canvas-source')
       .setCoordinates(getSourceCoordinates(this.map));
     const { width, height } = this.map.getCanvas();
-    this.renderTrajectories(
-      this.currTime,
-      [width, height],
-      getResolution(this.map),
-    );
+    this.renderTrajectories([width, height], getResolution(this.map));
   }
 
   /**
diff --git a/src/ol/layers/TrackerLayer.js b/src/ol/layers/TrackerLayer.js
index b57aed34..6aeb8442 100644
--- a/src/ol/layers/TrackerLayer.js
+++ b/src/ol/layers/TrackerLayer.js
@@ -53,12 +53,7 @@ class TrackerLayer extends mixin(Layer) {
                   return this.tracker.canvas;
                 }
 
-                this.renderTrajectories(
-                  this.currTime,
-                  frameState.size,
-                  resolution,
-                  true,
-                );
+                this.renderTrajectories(frameState.size, resolution, true);
               } else if (
                 this.renderState.center[0] !== center[0] ||
                 this.renderState.center[1] !== center[1]
@@ -162,9 +157,7 @@ class TrackerLayer extends mixin(Layer) {
             ? 'pointer'
             : 'auto';
           this.hoverVehicleId = id;
-
-          // We doesn´t wait the next render, we force it.
-          this.renderTrajectories(this.currTime);
+          this.renderTrajectories();
         }
       }),
     ];

From 1e205b76998cc0ff736f4cd10ac1ad850e2776c8 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 30 Sep 2021 14:28:46 +0200
Subject: [PATCH 21/36] v1.3.13-beta.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a576487f..0ebd8a22 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "1.3.13-beta.3",
+  "version": "1.3.13-beta.4",
   "main": "index.js",
   "module": "module.js",
   "dependencies": {

From 1205ea6fa04089e9b0faa167c2878d25dcf3a57b Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 30 Sep 2021 15:51:54 +0200
Subject: [PATCH 22/36] Test pixelRatio

---
 src/common/Tracker.js                  | 32 ++++++++++++++++++--------
 src/common/mixins/TrackerLayerMixin.js |  2 ++
 src/mapbox/layers/TrajservLayer.js     |  7 +-----
 src/mapbox/layers/TralisLayer.js       |  4 ----
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/common/Tracker.js b/src/common/Tracker.js
index ec46d7d8..acc10d0e 100644
--- a/src/common/Tracker.js
+++ b/src/common/Tracker.js
@@ -17,6 +17,11 @@ export default class Tracker {
       ...options,
     };
 
+    /**
+     * Pixel ratio to use to draw the canvas. Default to window.devicePixelRatio
+     * @type {Array<trajectory>}
+     */
+    this.pixelRatio = options.pixelRatio || window.devicePixelRatio || 1;
     /**
      * Array of trajectories.
      * @type {Array<trajectory>}
@@ -83,16 +88,16 @@ export default class Tracker {
      * @type {Canvas}
      */
     this.canvas = opts.canvas || document.createElement('canvas');
-    this.canvas.width = opts.width;
-    this.canvas.height = opts.height;
+    this.canvas.width = opts.width * this.pixelRatio;
+    this.canvas.height = opts.height * this.pixelRatio;
     this.canvas.setAttribute(
       'style',
       [
         'position: absolute',
         'top: 0',
         'bottom: 0',
-        'width: 100%',
-        'height: 100%',
+        `width: ${opts.width}px`,
+        `height: ${opts.height}px`,
         'pointer-events: none',
         'visibility: visible',
         'margin-top: inherit', // for scrolling behavior.
@@ -248,8 +253,6 @@ export default class Tracker {
     noInterpolate = false,
   ) {
     this.clear();
-    this.canvas.style.left = '0px';
-    this.canvas.style.top = '0px';
 
     const [width, height] = size;
     if (
@@ -257,13 +260,21 @@ export default class Tracker {
       height &&
       (this.canvas.width !== width || this.canvas.height !== height)
     ) {
-      [this.canvas.width, this.canvas.height] = [width, height];
+      [this.canvas.width, this.canvas.height] = [
+        width * this.pixelRatio,
+        height * this.pixelRatio,
+      ];
     }
+
+    this.canvas.style.left = '0px';
+    this.canvas.style.top = '0px';
+    this.canvas.style.width = `${this.canvas.width / this.pixelRatio}px`;
+    this.canvas.style.height = `${this.canvas.height / this.pixelRatio}px`;
     /**
      * Current resolution.
      * @type {number}
      */
-    this.currResolution = resolution || this.currResolution;
+    (this.currResolution = resolution || this.currResolution);
     let hoverVehicleImg;
     let hoverVehiclePx;
     let hoverVehicleWidth;
@@ -358,12 +369,15 @@ export default class Tracker {
       if (coord) {
         // We set the rotation of the trajectory (used by tralis).
         this.trajectories[i].coordinate = coord;
-        const px = this.getPixelFromCoordinate(coord);
+        let px = this.getPixelFromCoordinate(coord);
 
         if (!px) {
           // eslint-disable-next-line no-continue
           continue;
         }
+        px = px.map((p) => {
+          return p * this.pixelRatio;
+        });
         // Trajectory with pixel (i.e. within map extent) will be in renderedTrajectories.
         this.trajectories[i].rendered = true;
         this.renderedTrajectories.push(this.trajectories[i]);
diff --git a/src/common/mixins/TrackerLayerMixin.js b/src/common/mixins/TrackerLayerMixin.js
index c376f397..5411ae5f 100644
--- a/src/common/mixins/TrackerLayerMixin.js
+++ b/src/common/mixins/TrackerLayerMixin.js
@@ -128,6 +128,7 @@ const TrackerLayerMixin = (Base) =>
 
       // Tracker options use to build the tracker.
       const {
+        pixelRatio,
         interpolate,
         hoverVehicleId,
         selectedVehicleId,
@@ -135,6 +136,7 @@ const TrackerLayerMixin = (Base) =>
         sort,
       } = options;
       const initTrackerOptions = {
+        pixelRatio,
         interpolate,
         hoverVehicleId,
         selectedVehicleId,
diff --git a/src/mapbox/layers/TrajservLayer.js b/src/mapbox/layers/TrajservLayer.js
index 58bea539..9a2b6b62 100644
--- a/src/mapbox/layers/TrajservLayer.js
+++ b/src/mapbox/layers/TrajservLayer.js
@@ -45,10 +45,6 @@ class TrajservLayer extends mixin(TrackerLayer) {
 
     super.init(map);
 
-    const { width, height } = map.getCanvas();
-    this.tracker.canvas.width = width;
-    this.tracker.canvas.height = height;
-
     const source = {
       type: 'canvas',
       canvas: this.tracker.canvas,
@@ -133,8 +129,7 @@ class TrajservLayer extends mixin(TrackerLayer) {
    */
   onMove() {
     this.map.getSource(this.key).setCoordinates(getSourceCoordinates(this.map));
-    const { width, height } = this.map.getCanvas();
-    this.renderTrajectories([width, height], getResolution(this.map));
+    this.renderTrajectories(undefined, getResolution(this.map));
   }
 
   /**
diff --git a/src/mapbox/layers/TralisLayer.js b/src/mapbox/layers/TralisLayer.js
index 5dc9e84b..1db13056 100644
--- a/src/mapbox/layers/TralisLayer.js
+++ b/src/mapbox/layers/TralisLayer.js
@@ -46,10 +46,6 @@ class TralisLayer extends mixin(TrackerLayer) {
     this.map.on('move', this.onMove);
     this.map.on('moveend', this.onMoveEnd);
 
-    const { width, height } = this.map.getCanvas();
-    this.tracker.canvas.width = width;
-    this.tracker.canvas.height = height;
-
     this.map.addSource('canvas-source', {
       type: 'canvas',
       canvas: this.tracker.canvas,

From 69a0fc039149516fcb923f01388ff65f31aa7d38 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 30 Sep 2021 16:23:00 +0200
Subject: [PATCH 23/36] Fix style with pixelRatio

---
 src/common/Tracker.js                   | 11 ++++++++---
 src/common/mixins/TrajservLayerMixin.js | 20 +++++++++++---------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/common/Tracker.js b/src/common/Tracker.js
index acc10d0e..4dd66fcd 100644
--- a/src/common/Tracker.js
+++ b/src/common/Tracker.js
@@ -16,6 +16,7 @@ export default class Tracker {
       interpolate: true,
       ...options,
     };
+    console.log(window.devicePixelRatio);
 
     /**
      * Pixel ratio to use to draw the canvas. Default to window.devicePixelRatio
@@ -381,7 +382,11 @@ export default class Tracker {
         // Trajectory with pixel (i.e. within map extent) will be in renderedTrajectories.
         this.trajectories[i].rendered = true;
         this.renderedTrajectories.push(this.trajectories[i]);
-        const vehicleImg = this.style(traj, this.currResolution);
+        const vehicleImg = this.style(
+          traj,
+          this.currResolution,
+          this.pixelRatio,
+        );
 
         if (!vehicleImg) {
           // eslint-disable-next-line no-continue
@@ -392,8 +397,8 @@ export default class Tracker {
         let imgHeight = vehicleImg.height;
 
         if (this.iconScale) {
-          imgHeight = Math.floor(imgHeight * this.iconScale);
-          imgWidth = Math.floor(imgWidth * this.iconScale);
+          imgHeight = Math.floor(imgHeight * this.iconScale * this.pixelRatio);
+          imgWidth = Math.floor(imgWidth * this.iconScale * this.pixelRatio);
         }
 
         if (
diff --git a/src/common/mixins/TrajservLayerMixin.js b/src/common/mixins/TrajservLayerMixin.js
index 3401ef98..a9793552 100644
--- a/src/common/mixins/TrajservLayerMixin.js
+++ b/src/common/mixins/TrajservLayerMixin.js
@@ -418,7 +418,7 @@ const TrajservLayerMixin = (TrackerLayer) =>
         });
     }
 
-    defaultStyle(props, zoom) {
+    defaultStyle(props, zoom, pixelRatio = 3) {
       const {
         type,
         name,
@@ -435,8 +435,8 @@ const TrajservLayerMixin = (TrackerLayer) =>
       const key = `${z}${type}${name}${operatorProvidesRealtime}${delay}${hover}${selected}${cancelled}`;
 
       if (!this.styleCache[key]) {
-        let radius = getRadius(type, z);
-        const isDisplayStrokeAndDelay = radius >= 7;
+        let radius = getRadius(type, z) * pixelRatio;
+        const isDisplayStrokeAndDelay = radius >= 7 * pixelRatio;
 
         if (radius === 0) {
           this.styleCache[key] = null;
@@ -444,16 +444,18 @@ const TrajservLayerMixin = (TrackerLayer) =>
         }
 
         if (hover || selected) {
-          radius = isDisplayStrokeAndDelay ? radius + 5 : 14;
+          radius = isDisplayStrokeAndDelay
+            ? radius + 5 * pixelRatio
+            : 14 * pixelRatio;
         }
-        const margin = 1;
+        const margin = 1 * pixelRatio;
         const radiusDelay = radius + 2;
         const markerSize = radius * 2;
 
         const canvas = document.createElement('canvas');
         // add space for delay information
-        canvas.width = radiusDelay * 2 + margin * 2 + 100;
-        canvas.height = radiusDelay * 2 + margin * 2 + 100;
+        canvas.width = radiusDelay * 2 + margin * 2 + 100 * pixelRatio;
+        canvas.height = radiusDelay * 2 + margin * 2 + 100 * pixelRatio;
         const ctx = canvas.getContext('2d');
         const origin = canvas.width / 2;
 
@@ -484,7 +486,7 @@ const TrajservLayerMixin = (TrackerLayer) =>
           ctx.fillStyle = getDelayColor(delay, cancelled, true);
 
           ctx.strokeStyle = this.delayOutlineColor;
-          ctx.lineWidth = 1.5;
+          ctx.lineWidth = 1.5 * pixelRatio;
           const delayText = getDelayText(delay, cancelled);
           ctx.strokeText(delayText, origin + radiusDelay + margin, origin);
           ctx.fillText(delayText, origin + radiusDelay + margin, origin);
@@ -501,7 +503,7 @@ const TrajservLayerMixin = (TrackerLayer) =>
 
         ctx.save();
         if (isDisplayStrokeAndDelay || hover || selected) {
-          ctx.lineWidth = 1;
+          ctx.lineWidth = 1 * pixelRatio;
           ctx.strokeStyle = '#000000';
         }
         ctx.fillStyle = circleFillColor;

From 636cde89c8ed9f958b72a5e931a0e7057781b8f6 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 30 Sep 2021 17:07:15 +0200
Subject: [PATCH 24/36] Fix pixelRatio

---
 src/common/mixins/TrackerLayerMixin.js  | 20 ++++++++++++++++-
 src/common/mixins/TrajservLayerMixin.js | 20 ++++++++---------
 src/mapbox/layers/TrackerLayer.js       | 29 +++++--------------------
 3 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/src/common/mixins/TrackerLayerMixin.js b/src/common/mixins/TrackerLayerMixin.js
index 5411ae5f..62550c2d 100644
--- a/src/common/mixins/TrackerLayerMixin.js
+++ b/src/common/mixins/TrackerLayerMixin.js
@@ -136,7 +136,7 @@ const TrackerLayerMixin = (Base) =>
         sort,
       } = options;
       const initTrackerOptions = {
-        pixelRatio,
+        pixelRatio: pixelRatio || window.devicePixelRatio || 1,
         interpolate,
         hoverVehicleId,
         selectedVehicleId,
@@ -260,6 +260,24 @@ const TrackerLayerMixin = (Base) =>
           },
         },
 
+        /**
+         * Pixel ratio use for the rendering. Default to window.devicePixelRatio.
+         */
+        pixelRatio: {
+          get: () => {
+            return this.tracker
+              ? this.tracker.pixelRatio
+              : this.initTrackerOptions.pixelRatio;
+          },
+          set: (newPixelRatio) => {
+            if (!this.tracker) {
+              this.tracker.pixelRatio = newPixelRatio;
+            } else {
+              this.initTrackerOptions.pixelRatio = newPixelRatio;
+            }
+          },
+        },
+
         /**
          * Options used by the constructor of the Tracker class.
          */
diff --git a/src/common/mixins/TrajservLayerMixin.js b/src/common/mixins/TrajservLayerMixin.js
index a9793552..f0e33d89 100644
--- a/src/common/mixins/TrajservLayerMixin.js
+++ b/src/common/mixins/TrajservLayerMixin.js
@@ -418,7 +418,7 @@ const TrajservLayerMixin = (TrackerLayer) =>
         });
     }
 
-    defaultStyle(props, zoom, pixelRatio = 3) {
+    defaultStyle(props, zoom) {
       const {
         type,
         name,
@@ -435,8 +435,8 @@ const TrajservLayerMixin = (TrackerLayer) =>
       const key = `${z}${type}${name}${operatorProvidesRealtime}${delay}${hover}${selected}${cancelled}`;
 
       if (!this.styleCache[key]) {
-        let radius = getRadius(type, z) * pixelRatio;
-        const isDisplayStrokeAndDelay = radius >= 7 * pixelRatio;
+        let radius = getRadius(type, z) * this.pixelRatio;
+        const isDisplayStrokeAndDelay = radius >= 7 * this.pixelRatio;
 
         if (radius === 0) {
           this.styleCache[key] = null;
@@ -445,17 +445,17 @@ const TrajservLayerMixin = (TrackerLayer) =>
 
         if (hover || selected) {
           radius = isDisplayStrokeAndDelay
-            ? radius + 5 * pixelRatio
-            : 14 * pixelRatio;
+            ? radius + 5 * this.pixelRatio
+            : 14 * this.pixelRatio;
         }
-        const margin = 1 * pixelRatio;
+        const margin = 1 * this.pixelRatio;
         const radiusDelay = radius + 2;
         const markerSize = radius * 2;
 
         const canvas = document.createElement('canvas');
         // add space for delay information
-        canvas.width = radiusDelay * 2 + margin * 2 + 100 * pixelRatio;
-        canvas.height = radiusDelay * 2 + margin * 2 + 100 * pixelRatio;
+        canvas.width = radiusDelay * 2 + margin * 2 + 100 * this.pixelRatio;
+        canvas.height = radiusDelay * 2 + margin * 2 + 100 * this.pixelRatio;
         const ctx = canvas.getContext('2d');
         const origin = canvas.width / 2;
 
@@ -486,7 +486,7 @@ const TrajservLayerMixin = (TrackerLayer) =>
           ctx.fillStyle = getDelayColor(delay, cancelled, true);
 
           ctx.strokeStyle = this.delayOutlineColor;
-          ctx.lineWidth = 1.5 * pixelRatio;
+          ctx.lineWidth = 1.5 * this.pixelRatio;
           const delayText = getDelayText(delay, cancelled);
           ctx.strokeText(delayText, origin + radiusDelay + margin, origin);
           ctx.fillText(delayText, origin + radiusDelay + margin, origin);
@@ -503,7 +503,7 @@ const TrajservLayerMixin = (TrackerLayer) =>
 
         ctx.save();
         if (isDisplayStrokeAndDelay || hover || selected) {
-          ctx.lineWidth = 1 * pixelRatio;
+          ctx.lineWidth = 1 * this.pixelRatio;
           ctx.strokeStyle = '#000000';
         }
         ctx.fillStyle = circleFillColor;
diff --git a/src/mapbox/layers/TrackerLayer.js b/src/mapbox/layers/TrackerLayer.js
index 0b6f4a5d..b404c480 100644
--- a/src/mapbox/layers/TrackerLayer.js
+++ b/src/mapbox/layers/TrackerLayer.js
@@ -21,14 +21,6 @@ class TrackerLayer extends mixin(Layer) {
     this.onMapMouseMove = this.onMapMouseMove.bind(this);
   }
 
-  /**
-   * Update the icon scale if the window (and probably the canvas) is resized.
-   * @private
-   */
-  updateIconScale(canvas) {
-    this.tracker.setIconScale(canvas.width / canvas.clientWidth);
-  }
-
   /**
    * Initialize the layer.
    *
@@ -41,29 +33,18 @@ class TrackerLayer extends mixin(Layer) {
     }
 
     const canvas = map.getCanvas();
-    const iconScale = canvas.width / canvas.clientWidth;
-    map.on('resize', this.updateIconScale.bind(this, canvas));
 
     super.init(map, {
-      width: canvas.width,
-      height: canvas.height,
-      iconScale,
+      width: canvas.width / this.pixelRatio,
+      height: canvas.height / this.pixelRatio,
       getPixelFromCoordinate: (coord) => {
-        const pixelRatio = window.devicePixelRatio || 1;
         const [lng, lat] = toLonLat(coord);
         const { x, y } = this.map.project({ lng, lat });
-        return [x * pixelRatio, y * pixelRatio];
+        return [x, y];
       },
     });
   }
 
-  terminate() {
-    if (this.map) {
-      this.map.off('resize', this.updateIconScale);
-    }
-    return super.terminate();
-  }
-
   /**
    * Set the current time, it triggers a rendering of the trajectories.
    *
@@ -73,7 +54,7 @@ class TrackerLayer extends mixin(Layer) {
     const canvas = this.map.getCanvas();
     super.setCurrTime(
       time,
-      [canvas.width, canvas.height],
+      [canvas.width / this.pixelRatio, canvas.height / this.pixelRatio],
       getResolution(this.map),
       !this.map.isMoving() && !this.map.isRotating() && !this.map.isZooming(),
     );
@@ -89,7 +70,7 @@ class TrackerLayer extends mixin(Layer) {
   start() {
     const canvas = this.map.getCanvas();
     super.start(
-      [canvas.width, canvas.height],
+      [canvas.width / this.pixelRatio, canvas.height / this.pixelRatio],
       this.map.getZoom(),
       getResolution(this.map),
     );

From a907785699d65844a64c02f93c3aec54eee342e1 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 30 Sep 2021 17:15:02 +0200
Subject: [PATCH 25/36] Fix pixelRatio for tralis

---
 src/common/Tracker.js                               | 1 -
 src/doc/examples/assets/tralis-live-map/s1kreis.svg | 8 ++++----
 src/doc/examples/tralis-live-map.js                 | 2 ++
 src/mapbox/layers/TralisLayer.js                    | 5 ++++-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/common/Tracker.js b/src/common/Tracker.js
index 4dd66fcd..4ee4e920 100644
--- a/src/common/Tracker.js
+++ b/src/common/Tracker.js
@@ -16,7 +16,6 @@ export default class Tracker {
       interpolate: true,
       ...options,
     };
-    console.log(window.devicePixelRatio);
 
     /**
      * Pixel ratio to use to draw the canvas. Default to window.devicePixelRatio
diff --git a/src/doc/examples/assets/tralis-live-map/s1kreis.svg b/src/doc/examples/assets/tralis-live-map/s1kreis.svg
index a0ab07a4..8a588815 100644
--- a/src/doc/examples/assets/tralis-live-map/s1kreis.svg
+++ b/src/doc/examples/assets/tralis-live-map/s1kreis.svg
@@ -73,7 +73,7 @@
        cy="48.799999"
        r="12.499999"
        fill="#00b6e2"
-       style="stroke-width:0.322997" />
+       style="stroke-width: 0.322997;" />
     <rect
        id="Rechteck_43"
        data-name="Rechteck 43"
@@ -89,17 +89,17 @@
      data-name="Pfad 473"
      d="m 3.8435878,14.696072 h 2.196336 c 0.1937943,1.324261 0.8397756,1.808747 2.4547286,1.808747 1.1304671,0 2.0994386,-0.387588 2.0994386,-1.421158 0,-1.03357 -1.0335697,-1.227364 -2.6485227,-1.614953 -1.9056445,-0.484486 -3.7143918,-0.936672 -3.7143918,-3.229906 0,-2.1963362 1.7118502,-3.2299061 4.1665787,-3.2299061 2.4547288,0 4.0050838,1.2273643 4.1665788,3.4237001 H 10.464895 C 10.367998,9.3021292 9.5282222,8.8176433 8.3654562,8.8176433 c -1.1627662,0 -2.0025418,0.4844859 -2.0025418,1.2273637 0,0.839776 0.7751774,1.130467 2.3901305,1.518056 2.2932331,0.484486 4.0696821,1.03357 4.0696821,3.326804 0,2.196336 -1.808748,3.4237 -4.2634765,3.4237 -3.0038126,-0.0323 -4.6187655,-1.35656 -4.7156627,-3.617495 z"
      fill="#ffffff"
-     style="stroke-width:0.32299" />
+     style="stroke-width: 0.32299;" />
   <path
      id="Pfad_474"
      data-name="Pfad 474"
      d="M 17.409193,10.594091 H 15.148259 V 9.4636244 c 1.130467,0 2.260934,-0.3875887 2.648523,-1.9056445 h 1.905645 V 18.152072 h -2.260935 z"
      fill="#ffffff"
-     style="stroke-width:0.32299" />
+     style="stroke-width: 0.32299;" />
   <path
      id="Pfad_472"
      data-name="Pfad 472"
      d="M 12.499736,1.5180558 A 10.557917,10.557917 0 0 1 23.093828,12.039797 v 0.07235 c 0,5.684635 -4.909458,10.981681 -10.594092,10.981681 -5.6846348,0 -10.5940917,-4.909458 -10.5940917,-10.981681 v 0 A 10.578265,10.578265 0 0 1 12.467437,1.5180558 h 0.0323 M 12.499737,0 a 12.499736,12.499736 0 1 0 12.499736,12.499736 v 0 A 12.386043,12.386043 0 0 0 12.728413,0 Z"
      fill="#00b6e2"
-     style="stroke-width:0.32299" />
+     style="stroke-width: 0.32299;" />
 </svg>
diff --git a/src/doc/examples/tralis-live-map.js b/src/doc/examples/tralis-live-map.js
index 490724f5..27e699b3 100644
--- a/src/doc/examples/tralis-live-map.js
+++ b/src/doc/examples/tralis-live-map.js
@@ -21,6 +21,8 @@ export default () => {
     style: (props) => {
       const img = new Image();
       img.src = LINE_IMAGES[(props.line || {}).name || 'unknown'];
+      img.width = 25 * tracker.pixelRatio;
+      img.height = 25 * tracker.pixelRatio;
       return img;
     },
   });
diff --git a/src/mapbox/layers/TralisLayer.js b/src/mapbox/layers/TralisLayer.js
index 1db13056..aed7b770 100644
--- a/src/mapbox/layers/TralisLayer.js
+++ b/src/mapbox/layers/TralisLayer.js
@@ -89,7 +89,10 @@ class TralisLayer extends mixin(TrackerLayer) {
       .getSource('canvas-source')
       .setCoordinates(getSourceCoordinates(this.map));
     const { width, height } = this.map.getCanvas();
-    this.renderTrajectories([width, height], getResolution(this.map));
+    this.renderTrajectories(
+      [width / this.pixelRatio, height / this.pixelRatio],
+      getResolution(this.map),
+    );
   }
 
   /**

From a5a51d658f98452b81625960a70fc8794b023206 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Thu, 30 Sep 2021 17:15:42 +0200
Subject: [PATCH 26/36] v1.3.13-beta.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0ebd8a22..29dd5e40 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "1.3.13-beta.4",
+  "version": "1.3.13-beta.5",
   "main": "index.js",
   "module": "module.js",
   "dependencies": {

From 201f9b3a11c25f56b37a3ed6c4f15b6d16abbdf6 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Fri, 1 Oct 2021 13:53:45 +0200
Subject: [PATCH 27/36] Clean TrackerLayerMixin

---
 src/common/mixins/TrackerLayerMixin.js | 64 +++++++++++++++++++-------
 1 file changed, 48 insertions(+), 16 deletions(-)

diff --git a/src/common/mixins/TrackerLayerMixin.js b/src/common/mixins/TrackerLayerMixin.js
index 62550c2d..ef4f5c18 100644
--- a/src/common/mixins/TrackerLayerMixin.js
+++ b/src/common/mixins/TrackerLayerMixin.js
@@ -156,10 +156,18 @@ const TrackerLayerMixin = (Base) =>
 
       Object.defineProperties(this, {
         isTrackerLayer: { value: true },
+
+        /**
+         * Active on hover effect.
+         */
         isHoverActive: {
           value: !!isHoverActive,
           writable: true,
         },
+
+        /**
+         * Style function used to render a vehicle.
+         */
         style: {
           value: style || this.defaultStyle,
         },
@@ -175,19 +183,33 @@ const TrackerLayerMixin = (Base) =>
             this.start();
           },
         },
+
+        /**
+         * Function to filter which vehicles to display.
+         */
         filter: {
-          get: () => this.tracker.filter,
+          get: () =>
+            this.tracker ? this.tracker.filter : this.initTrackerOptions.filter,
           set: (newFilter) => {
             if (this.tracker) {
               this.tracker.filter = newFilter;
+            } else {
+              this.initTrackerOptions.filter = newFilter;
             }
           },
         },
+
+        /**
+         * Function to sort the vehicles to display.
+         */
         sort: {
-          get: () => this.tracker.sort,
+          get: () =>
+            this.tracker ? this.tracker.sort : this.initTrackerOptions.sort,
           set: (newSort) => {
-            if (this.sort) {
+            if (this.tracker) {
               this.tracker.sort = newSort;
+            } else {
+              this.initTrackerOptions.sort = newSort;
             }
           },
         },
@@ -233,7 +255,7 @@ const TrackerLayerMixin = (Base) =>
          * Keep track of which trajectories are currently drawn.
          */
         renderedTrajectories: {
-          get: () => this.tracker.renderedTrajectories,
+          get: () => this.tracker?.renderedTrajectories || [],
         },
 
         /**
@@ -241,10 +263,16 @@ const TrackerLayerMixin = (Base) =>
          */
         hoverVehicleId: {
           get: () => {
-            return this.tracker.hoverVehicleId;
+            return this.tracker
+              ? this.tracker.hoverVehicleId
+              : this.initTrackerOptions.hoverVehicleId;
           },
           set: (newHoverVehicleId) => {
-            this.tracker.hoverVehicleId = newHoverVehicleId;
+            if (this.tracker) {
+              this.tracker.hoverVehicleId = newHoverVehicleId;
+            } else {
+              this.initTrackerOptions.hoverVehicleId = newHoverVehicleId;
+            }
           },
         },
 
@@ -252,11 +280,16 @@ const TrackerLayerMixin = (Base) =>
          * Id of the selected vehicle.
          */
         selectedVehicleId: {
-          get: () => {
-            return this.tracker.selectedVehicleId;
-          },
+          get: () =>
+            this.tracker
+              ? this.tracker.selectedVehicleId
+              : this.initTrackerOptions.selectedVehicleId,
           set: (newSelectedVehicleId) => {
-            this.tracker.selectedVehicleId = newSelectedVehicleId;
+            if (this.tracker) {
+              this.tracker.selectedVehicleId = newSelectedVehicleId;
+            } else {
+              this.initTrackerOptions.selectedVehicleId = newSelectedVehicleId;
+            }
           },
         },
 
@@ -264,13 +297,12 @@ const TrackerLayerMixin = (Base) =>
          * Pixel ratio use for the rendering. Default to window.devicePixelRatio.
          */
         pixelRatio: {
-          get: () => {
-            return this.tracker
+          get: () =>
+            this.tracker
               ? this.tracker.pixelRatio
-              : this.initTrackerOptions.pixelRatio;
-          },
+              : this.initTrackerOptions.pixelRatio,
           set: (newPixelRatio) => {
-            if (!this.tracker) {
+            if (this.tracker) {
               this.tracker.pixelRatio = newPixelRatio;
             } else {
               this.initTrackerOptions.pixelRatio = newPixelRatio;
@@ -287,7 +319,7 @@ const TrackerLayerMixin = (Base) =>
         },
 
         /**
-         * If true, encapsulates the renderTrajectories calls in a requestAnimationFrame
+         * If true, encapsulates the renderTrajectories calls in a requestAnimationFrame.
          */
         useRequestAnimationFrame: {
           default: false,

From ab127df27c0dad8a5693fd3a7b38390245937fbd Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Fri, 1 Oct 2021 14:02:17 +0200
Subject: [PATCH 28/36] Remove useless property

---
 src/common/Tracker.js                  | 88 +-------------------------
 src/common/mixins/TrackerLayerMixin.js |  1 -
 2 files changed, 2 insertions(+), 87 deletions(-)

diff --git a/src/common/Tracker.js b/src/common/Tracker.js
index 4ee4e920..1519bb59 100644
--- a/src/common/Tracker.js
+++ b/src/common/Tracker.js
@@ -58,12 +58,6 @@ export default class Tracker {
      */
     this.selectedVehicleId = opts.selectedVehicleId;
 
-    /**
-     * Scale the vehicle icons with this value.
-     * @type {number}
-     */
-    this.iconScale = opts.iconScale;
-
     /**
      * Function use to filter the features displayed.
      * @type {function}
@@ -140,15 +134,6 @@ export default class Tracker {
     return this.trajectories || [];
   }
 
-  /**
-   * Return rendered trajectories.
-   * Use this to avoid race conditions while rendering.
-   * @returns {array<trajectory>} trajectories
-   */
-  getRenderedTrajectories() {
-    return this.renderedTrajectories;
-  }
-
   /**
    * Clear the canvas.
    * @private
@@ -159,70 +144,6 @@ export default class Tracker {
     }
   }
 
-  /**
-   * Set the filter for tracker features.
-   * @param {function} filter Filter function.
-   * @private
-   * @deprecated Set the property this.filter directly.
-   */
-  setFilter(filter) {
-    this.filter = filter;
-  }
-
-  /**
-   * Set the sort for tracker features.
-   * @param {function} sort Sort function.
-   * @private
-   * @deprecated Set the property this.sort directly.
-   */
-  setSort(sort) {
-    this.sort = sort;
-  }
-
-  /**
-   * Set the id of the trajectory which is hovered.
-   * @param {string} id Id of a vehicle.
-   * @private
-   * @deprecated Set the property this.hoverVehicleId directly.
-   */
-  setHoverVehicleId(id) {
-    if (id !== this.hoverVehicleId) {
-      this.hoverVehicleId = id;
-    }
-  }
-
-  /**
-   * Set the id of the trajectory which is selected.
-   * @param {string} id Id of a vehicle.
-   * @private
-   * @deprecated Set the property this.selectedVehicleId directly.
-   */
-  setSelectedVehicleId(id) {
-    if (id !== this.selectedVehicleId) {
-      this.selectedVehicleId = id;
-    }
-  }
-
-  /**
-   * set the scale of the vehicle icons.
-   * @param {number} iconScale Scale value.
-   * @private
-   * @deprecated Set the property this.iconScale directly.
-   */
-  setIconScale(iconScale) {
-    this.iconScale = iconScale;
-  }
-
-  /**
-   * Set the tracker style.
-   * @param {function} style OpenLayers style function.
-   * @private
-   * @deprecated Set the property this.style directly.
-   */
-  setStyle(style) {
-    this.style = style;
-  }
-
   /**
    * Move the canvas.
    * @param {number} offsetX Offset X.
@@ -392,13 +313,8 @@ export default class Tracker {
           continue;
         }
 
-        let imgWidth = vehicleImg.width;
-        let imgHeight = vehicleImg.height;
-
-        if (this.iconScale) {
-          imgHeight = Math.floor(imgHeight * this.iconScale * this.pixelRatio);
-          imgWidth = Math.floor(imgWidth * this.iconScale * this.pixelRatio);
-        }
+        const imgWidth = vehicleImg.width;
+        const imgHeight = vehicleImg.height;
 
         if (
           this.hoverVehicleId !== traj.id &&
diff --git a/src/common/mixins/TrackerLayerMixin.js b/src/common/mixins/TrackerLayerMixin.js
index ef4f5c18..757371f7 100644
--- a/src/common/mixins/TrackerLayerMixin.js
+++ b/src/common/mixins/TrackerLayerMixin.js
@@ -337,7 +337,6 @@ const TrackerLayerMixin = (Base) =>
      * @param {bool} [options.interpolate] Convert an EPSG:3857 coordinate to a canvas pixel (origin top-left).
      * @param {string} [options.hoverVehicleId] Id of the trajectory which is hovered.
      * @param {string} [options.selectedVehicleId] Id of the trajectory which is selected.
-     * @param {number} [options.iconScale] Scale the vehicle icons with this value.
      * @param {function} [options.getPixelFromCoordinate] Convert an EPSG:3857 coordinate to a canvas pixel (origin top-left).
      * @param {function} [options.filter] Function use to filter the features displayed.
      * @param {function} [options.sort] Function use to sort the features displayed.

From bfcad675639d8ab1711cc30094b42ae08996c4db Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Fri, 1 Oct 2021 15:40:15 +0200
Subject: [PATCH 29/36] Allow rotation on mapbox tralis layer

---
 __mocks__/mapbox-gl.js                |  9 +++++++++
 src/common/mixins/TralisLayerMixin.js |  8 --------
 src/doc/examples/tralis-live-map.js   |  7 +++----
 src/mapbox/layers/TralisLayer.js      |  1 +
 src/mapbox/utils.js                   | 15 ++++++++++-----
 5 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/__mocks__/mapbox-gl.js b/__mocks__/mapbox-gl.js
index 61182453..80f820f3 100644
--- a/__mocks__/mapbox-gl.js
+++ b/__mocks__/mapbox-gl.js
@@ -41,6 +41,15 @@ class Map {
   loaded() {}
 
   remove() {}
+
+  unproject() {
+    return [
+      [0, 0],
+      [0, 0],
+      [0, 0],
+      [0, 0],
+    ];
+  }
 }
 module.exports = {
   Map,
diff --git a/src/common/mixins/TralisLayerMixin.js b/src/common/mixins/TralisLayerMixin.js
index 07319463..229e1b23 100644
--- a/src/common/mixins/TralisLayerMixin.js
+++ b/src/common/mixins/TralisLayerMixin.js
@@ -19,8 +19,6 @@ export class TralisLayerInterface {
    * @param {string} options.apiKey Access key for [geOps services](https://developer.geops.io/).
    * @param {boolean} [options.debug=false] Display additional debug informations.
    * @param {TralisMode} [options.mode=TralisMode.TOPOGRAPHIC] - Mode.
-   * @param {number} [options.dfltIconScale=0.6] - Scale of vehicle icons.
-   * @param {number} [options.dfltIconHighlightScale=0.8] - Scale of vehicle icons when they are highlighted.
    */
   constructor(options = {}) {}
 
@@ -89,12 +87,6 @@ const TralisLayerMixin = (TrackerLayer) =>
       this.onDeleteMessage = this.onDeleteMessage.bind(this);
       this.api = options.api || new TralisAPI(options);
       this.format = new GeoJSON();
-
-      // These scales depends from the size specifed in the svgs.
-      // For some reason the size must be specified in the svg (../img/lines) for firefox.
-      this.dfltIconScale = options.dfltIconScale || 0.6;
-      this.dfltIconHighlightScale = options.dfltIconHighlightScale || 0.8;
-      this.minIconScale = this.dfltIconScale * 0.75;
     }
 
     init(map) {
diff --git a/src/doc/examples/tralis-live-map.js b/src/doc/examples/tralis-live-map.js
index 27e699b3..4496afe1 100644
--- a/src/doc/examples/tralis-live-map.js
+++ b/src/doc/examples/tralis-live-map.js
@@ -11,18 +11,17 @@ export default () => {
     zoom: 10,
     touchPitch: false,
     pitchWithRotate: false,
-    dragRotate: false,
-    touchZoomRotate: false,
   });
 
   const tracker = new TralisLayer({
     url: 'wss://api.geops.io/realtime-ws/v1/',
     apiKey: window.apiKey,
+    bbox: [1152072, 6048052, 1433666, 6205578],
     style: (props) => {
       const img = new Image();
       img.src = LINE_IMAGES[(props.line || {}).name || 'unknown'];
-      img.width = 25 * tracker.pixelRatio;
-      img.height = 25 * tracker.pixelRatio;
+      img.width = 25 * window.devicePixelRatio;
+      img.height = 25 * window.devicePixelRatio;
       return img;
     },
   });
diff --git a/src/mapbox/layers/TralisLayer.js b/src/mapbox/layers/TralisLayer.js
index aed7b770..47afd2ba 100644
--- a/src/mapbox/layers/TralisLayer.js
+++ b/src/mapbox/layers/TralisLayer.js
@@ -88,6 +88,7 @@ class TralisLayer extends mixin(TrackerLayer) {
     this.map
       .getSource('canvas-source')
       .setCoordinates(getSourceCoordinates(this.map));
+
     const { width, height } = this.map.getCanvas();
     this.renderTrajectories(
       [width / this.pixelRatio, height / this.pixelRatio],
diff --git a/src/mapbox/utils.js b/src/mapbox/utils.js
index adf1f9dc..23ba4c37 100644
--- a/src/mapbox/utils.js
+++ b/src/mapbox/utils.js
@@ -21,12 +21,17 @@ export const getResolution = (map) => {
  * @private
  */
 export const getSourceCoordinates = (map) => {
-  const bounds = map.getBounds().toArray();
+  // Requesting getBounds is not enough when we rotate the map, so we request manually each corner.
+  const { width, height } = map.getCanvas();
+  const leftTop = map.unproject({ x: 0, y: 0 });
+  const leftBottom = map.unproject({ x: 0, y: height }); // southWest
+  const rightBottom = map.unproject({ x: width, y: height });
+  const rightTop = map.unproject({ x: width, y: 0 }); // north east
   return [
-    [bounds[0][0], bounds[1][1]],
-    [...bounds[1]],
-    [bounds[1][0], bounds[0][1]],
-    [...bounds[0]],
+    [leftTop.lng, leftTop.lat],
+    [rightTop.lng, rightTop.lat],
+    [rightBottom.lng, rightBottom.lat],
+    [leftBottom.lng, leftBottom.lat],
   ];
 };
 

From 5ffeb24cc2404711dc963d96e779a2a401e344cf Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Fri, 1 Oct 2021 15:44:10 +0200
Subject: [PATCH 30/36] Allow rotation on mapbox tralis layer

---
 src/mapbox/layers/TrajservLayer.js |  6 ++++--
 src/mapbox/layers/TralisLayer.js   |  4 ++--
 src/mapbox/utils.js                | 11 +++++++----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/mapbox/layers/TrajservLayer.js b/src/mapbox/layers/TrajservLayer.js
index 9a2b6b62..e9e02be8 100644
--- a/src/mapbox/layers/TrajservLayer.js
+++ b/src/mapbox/layers/TrajservLayer.js
@@ -48,7 +48,7 @@ class TrajservLayer extends mixin(TrackerLayer) {
     const source = {
       type: 'canvas',
       canvas: this.tracker.canvas,
-      coordinates: getSourceCoordinates(map),
+      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,
@@ -128,7 +128,9 @@ class TrajservLayer extends mixin(TrackerLayer) {
    * @private
    */
   onMove() {
-    this.map.getSource(this.key).setCoordinates(getSourceCoordinates(this.map));
+    this.map
+      .getSource(this.key)
+      .setCoordinates(getSourceCoordinates(this.map, this.pixelRatio));
     this.renderTrajectories(undefined, getResolution(this.map));
   }
 
diff --git a/src/mapbox/layers/TralisLayer.js b/src/mapbox/layers/TralisLayer.js
index 47afd2ba..1154b8a7 100644
--- a/src/mapbox/layers/TralisLayer.js
+++ b/src/mapbox/layers/TralisLayer.js
@@ -49,7 +49,7 @@ class TralisLayer extends mixin(TrackerLayer) {
     this.map.addSource('canvas-source', {
       type: 'canvas',
       canvas: this.tracker.canvas,
-      coordinates: getSourceCoordinates(this.map),
+      coordinates: getSourceCoordinates(this.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,
     });
@@ -87,7 +87,7 @@ class TralisLayer extends mixin(TrackerLayer) {
   onMove() {
     this.map
       .getSource('canvas-source')
-      .setCoordinates(getSourceCoordinates(this.map));
+      .setCoordinates(getSourceCoordinates(this.map, this.pixelRatio));
 
     const { width, height } = this.map.getCanvas();
     this.renderTrajectories(
diff --git a/src/mapbox/utils.js b/src/mapbox/utils.js
index 23ba4c37..53c80426 100644
--- a/src/mapbox/utils.js
+++ b/src/mapbox/utils.js
@@ -20,13 +20,16 @@ export const getResolution = (map) => {
  * @param {mapboxgl.Map} map A map object.
  * @private
  */
-export const getSourceCoordinates = (map) => {
+export const getSourceCoordinates = (map, pixelRatio) => {
   // Requesting getBounds is not enough when we rotate the map, so we request manually each corner.
   const { width, height } = map.getCanvas();
   const leftTop = map.unproject({ x: 0, y: 0 });
-  const leftBottom = map.unproject({ x: 0, y: height }); // southWest
-  const rightBottom = map.unproject({ x: width, y: height });
-  const rightTop = map.unproject({ x: width, y: 0 }); // north east
+  const leftBottom = map.unproject({ x: 0, y: height / pixelRatio }); // southWest
+  const rightBottom = map.unproject({
+    x: width / pixelRatio,
+    y: height / pixelRatio,
+  });
+  const rightTop = map.unproject({ x: width / pixelRatio, y: 0 }); // north east
   return [
     [leftTop.lng, leftTop.lat],
     [rightTop.lng, rightTop.lat],

From 016035d78050d761646ccda171a683318c1ada61 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Fri, 1 Oct 2021 16:11:07 +0200
Subject: [PATCH 31/36] Allow rotation for tracke rwith ol

---
 src/common/Tracker.js          | 14 +---------
 src/doc/examples/mb-tracker.js |  2 --
 src/ol/layers/TrackerLayer.js  | 47 +++++++++++++++++++++++++++++-----
 3 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/common/Tracker.js b/src/common/Tracker.js
index 1519bb59..2347cfcd 100644
--- a/src/common/Tracker.js
+++ b/src/common/Tracker.js
@@ -144,19 +144,6 @@ export default class Tracker {
     }
   }
 
-  /**
-   * Move the canvas.
-   * @param {number} offsetX Offset X.
-   * @param {number} offsetY Offset Y.
-   * @private
-   */
-  moveCanvas(offsetX, offsetY) {
-    const oldLeft = parseFloat(this.canvas.style.left);
-    const oldTop = parseFloat(this.canvas.style.top);
-    this.canvas.style.left = `${oldLeft - offsetX}px`;
-    this.canvas.style.top = `${oldTop - offsetY}px`;
-  }
-
   /**
    * Draw all the trajectories available to the canvas.
    * @param {Date} currTime The date to render.
@@ -189,6 +176,7 @@ export default class Tracker {
 
     this.canvas.style.left = '0px';
     this.canvas.style.top = '0px';
+    this.canvas.style.transform = ``;
     this.canvas.style.width = `${this.canvas.width / this.pixelRatio}px`;
     this.canvas.style.height = `${this.canvas.height / this.pixelRatio}px`;
     /**
diff --git a/src/doc/examples/mb-tracker.js b/src/doc/examples/mb-tracker.js
index 6798d79f..10852312 100644
--- a/src/doc/examples/mb-tracker.js
+++ b/src/doc/examples/mb-tracker.js
@@ -10,8 +10,6 @@ export default () => {
     zoom: 12,
     touchPitch: false,
     pitchWithRotate: false,
-    dragRotate: false,
-    touchZoomRotate: false,
   });
 
   const tracker = new TrajservLayer({
diff --git a/src/ol/layers/TrackerLayer.js b/src/ol/layers/TrackerLayer.js
index 6aeb8442..bd710c84 100644
--- a/src/ol/layers/TrackerLayer.js
+++ b/src/ol/layers/TrackerLayer.js
@@ -27,11 +27,18 @@ class TrackerLayer extends mixin(Layer) {
 
     /**
      * Function to define  when allowing the render of trajectories depending on the zoom level. Default the fundtion return true.
-     * It's useful to avoid rendering the map when the map is animating or interacting
+     * It's useful to avoid rendering the map when the map is animating or interacting.
      * @type {function}
      */
     this.renderWhenZooming = options.renderWhenZooming || (() => true);
 
+    /**
+     * Function to define  when allowing the render of trajectories depending on the rotation. Default the fundtion return true.
+     * It's useful to avoid rendering the map when the map is animating or interacting.
+     * @type {function}
+     */
+    this.renderWhenRotating = options.renderWhenRotating || (() => true);
+
     this.olLayer =
       options.olLayer ||
       new Group({
@@ -42,13 +49,27 @@ class TrackerLayer extends mixin(Layer) {
               if (!this.tracker || !this.tracker.canvas) {
                 return null;
               }
-              const { zoom, center, resolution } = frameState.viewState;
-
-              if (zoom !== this.renderState.zoom) {
+              const {
+                zoom,
+                center,
+                resolution,
+                rotation,
+              } = frameState.viewState;
+
+              if (
+                zoom !== this.renderState.zoom ||
+                rotation !== this.renderState.rotation
+              ) {
                 this.renderState.zoom = zoom;
                 this.renderState.center = center;
-
-                if (!this.renderWhenZooming(zoom)) {
+                this.renderState.rotation = rotation;
+
+                if (
+                  (zoom !== this.renderState.zoom &&
+                    !this.renderWhenZooming(zoom)) ||
+                  (rotation !== this.renderState.rotation &&
+                    !this.renderWhenRotating(rotation))
+                ) {
                   this.tracker.clear();
                   return this.tracker.canvas;
                 }
@@ -62,8 +83,19 @@ class TrackerLayer extends mixin(Layer) {
                 const oldPx = this.map.getPixelFromCoordinate(
                   this.renderState.center,
                 );
-                this.tracker.moveCanvas(px[0] - oldPx[0], px[1] - oldPx[1]);
+
+                // We move the canvas to avoid re render the trajectories
+                const oldLeft = parseFloat(this.tracker.canvas.style.left);
+                const oldTop = parseFloat(this.tracker.canvas.style.top);
+                this.tracker.canvas.style.left = `${
+                  oldLeft - (px[0] - oldPx[0])
+                }px`;
+                this.tracker.canvas.style.top = `${
+                  oldTop - (px[1] - oldPx[1])
+                }px`;
+
                 this.renderState.center = center;
+                this.renderState.rotation = rotation;
               }
 
               return this.tracker.canvas;
@@ -78,6 +110,7 @@ class TrackerLayer extends mixin(Layer) {
     this.renderState = {
       center: [0, 0],
       zoom: null,
+      rotation: 0,
     };
 
     /**

From d1e70be3a29f689ead32c05e4950e697862a6975 Mon Sep 17 00:00:00 2001
From: oterral <oterral@users.noreply.github.com>
Date: Mon, 4 Oct 2021 10:54:32 +0200
Subject: [PATCH 32/36] Update src/common/Tracker.js

---
 src/common/Tracker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/Tracker.js b/src/common/Tracker.js
index 2347cfcd..9df3c334 100644
--- a/src/common/Tracker.js
+++ b/src/common/Tracker.js
@@ -183,7 +183,7 @@ export default class Tracker {
      * Current resolution.
      * @type {number}
      */
-    (this.currResolution = resolution || this.currResolution);
+    this.currResolution = resolution || this.currResolution;
     let hoverVehicleImg;
     let hoverVehiclePx;
     let hoverVehicleWidth;

From b242bd04465b8d73a30ab470dfa10a34ac765142 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Mon, 4 Oct 2021 13:29:59 +0200
Subject: [PATCH 33/36] Clean TrackerLayer

---
 __mocks__/mapbox-gl.js                  |   2 +
 src/common/Tracker.js                   |   2 +
 src/common/mixins/TrackerLayerMixin.js  | 124 ++++++++++++------------
 src/common/mixins/TrajservLayerMixin.js |   4 +-
 src/mapbox/layers/TrackerLayer.js       |  44 +++++----
 src/mapbox/layers/TrajservLayer.js      |   6 +-
 src/mapbox/layers/TralisLayer.js        |   1 +
 src/ol/layers/TrackerLayer.js           |  52 +++++-----
 8 files changed, 121 insertions(+), 114 deletions(-)

diff --git a/__mocks__/mapbox-gl.js b/__mocks__/mapbox-gl.js
index 80f820f3..4644903a 100644
--- a/__mocks__/mapbox-gl.js
+++ b/__mocks__/mapbox-gl.js
@@ -32,6 +32,8 @@ class Map {
 
   getZoom() {}
 
+  getBearing() {}
+
   once() {}
 
   on() {}
diff --git a/src/common/Tracker.js b/src/common/Tracker.js
index 2347cfcd..9fc09711 100644
--- a/src/common/Tracker.js
+++ b/src/common/Tracker.js
@@ -284,9 +284,11 @@ export default class Tracker {
           // eslint-disable-next-line no-continue
           continue;
         }
+
         px = px.map((p) => {
           return p * this.pixelRatio;
         });
+
         // Trajectory with pixel (i.e. within map extent) will be in renderedTrajectories.
         this.trajectories[i].rendered = true;
         this.renderedTrajectories.push(this.trajectories[i]);
diff --git a/src/common/mixins/TrackerLayerMixin.js b/src/common/mixins/TrackerLayerMixin.js
index 757371f7..cb6f4000 100644
--- a/src/common/mixins/TrackerLayerMixin.js
+++ b/src/common/mixins/TrackerLayerMixin.js
@@ -35,16 +35,11 @@ export class TrackerLayerInterface {
 
   /**
    * Start the clock.
-   *
-   * @param {Array<number>} size Map's size: [width, height].
-   * @param {number} zoom Map's zoom level.
-   * @param {number} resolution Map's resolution.
    */
-  // eslint-disable-next-line no-unused-vars
-  start(size, zoom, resolution) {}
+  start() {}
 
   /**
-   * Stop the time.
+   * Start the timeout for the next update.
    * @private
    * @param {number} zoom
    */
@@ -56,17 +51,6 @@ export class TrackerLayerInterface {
    */
   stop() {}
 
-  /**
-   * Set the current time, it triggers a rendering of the trajectories.
-   *
-   * @param {Date} time The date to render.
-   * @param {number[2]} size Size of the canvas to render.
-   * @param {number} resolution Map's resolution to render.
-   * @param {boolean} [mustRender=true] If false bypass the rendering of vehicles.
-   */
-  // eslint-disable-next-line no-unused-vars
-  setCurrTime(time, size, resolution, mustRender = true) {}
-
   /**
    * Get vehicle.
    * @param {function} filterFc A function use to filter results.
@@ -134,7 +118,9 @@ const TrackerLayerMixin = (Base) =>
         selectedVehicleId,
         filter,
         sort,
+        time,
       } = options;
+
       const initTrackerOptions = {
         pixelRatio: pixelRatio || window.devicePixelRatio || 1,
         interpolate,
@@ -144,13 +130,15 @@ const TrackerLayerMixin = (Base) =>
         sort,
         style,
       };
+
       Object.keys(initTrackerOptions).forEach(
         (key) =>
           initTrackerOptions[key] === undefined &&
           delete initTrackerOptions[key],
       );
 
-      let cuurSpeed = speed || 1;
+      let currSpeed = speed || 1;
+      let currTime = time || new Date();
 
       super.defineProperties(options);
 
@@ -177,9 +165,9 @@ const TrackerLayerMixin = (Base) =>
          * If live property is true. The speed is ignored.
          */
         speed: {
-          get: () => cuurSpeed,
+          get: () => currSpeed,
           set: (newSpeed) => {
-            cuurSpeed = newSpeed;
+            currSpeed = newSpeed;
             this.start();
           },
         },
@@ -226,7 +214,7 @@ const TrackerLayerMixin = (Base) =>
 
         /**
          * If true. The layer will always use Date.now() on the next tick to render the trajectories.
-         * When true, setCurrTime will have no effect.
+         * When true, setting the time property has no effect.
          */
         live: {
           value: true,
@@ -234,12 +222,15 @@ const TrackerLayerMixin = (Base) =>
         },
 
         /**
-         * Time used to display the trajectories.
-         * If live property is true. This function does nothing execpt rerender the trajectories using Date.now().
+         * Time used to display the trajectories. Can be a Date or a number in ms representing a Date.
+         * If live property is true. The setter does nothing.
          */
-        currTime: {
-          value: new Date(),
-          writable: true,
+        time: {
+          get: () => currTime,
+          set: (newTime) => {
+            currTime = newTime.getTime ? newTime : new Date(newTime);
+            this.renderTrajectories();
+          },
         },
 
         /**
@@ -378,36 +369,34 @@ const TrackerLayerMixin = (Base) =>
     }
 
     /**
-     * Start the clock.
+     * Start the trajectories rendering.
      *
      * @param {Array<Number>} size Map's size: [width, height].
      * @param {number} zoom Map's zoom level.
      * @param {number} resolution Map's resolution.
+     * @param {number} rotation Map's rotation.
      */
-    start(size, zoom, resolution) {
+    start() {
       this.stop();
       this.tracker.setVisible(true);
-      this.renderTrajectories(size, resolution);
-      this.startUpdateTime(zoom);
+      this.renderTrajectories();
+      this.startUpdateTime();
     }
 
     /**
-     * Start the time.
+     * Start the clock.
      * @private
-     * @param {number} zoom
      */
-    startUpdateTime(zoom) {
+    startUpdateTime() {
       this.stopUpdateTime();
+      this.updateTimeDelay = this.getRefreshTimeInMs();
       this.updateTimeInterval = setInterval(() => {
-        const newTime =
-          this.currTime.getTime() +
-          (new Date() - this.lastUpdateTime) * this.speed;
-        this.setCurrTime(newTime);
-      }, this.getRefreshTimeInMs(zoom));
+        this.time = this.time.getTime() + (new Date() - this.time) * this.speed;
+      }, this.updateTimeDelay);
     }
 
     /**
-     * Stop the clock.
+     * Stop the trajectories rendering.
      */
     stop() {
       this.stopUpdateTime();
@@ -418,7 +407,7 @@ const TrackerLayerMixin = (Base) =>
     }
 
     /**
-     * Stop the time.
+     * Stop the clock.
      * @private
      */
     stopUpdateTime() {
@@ -431,12 +420,26 @@ const TrackerLayerMixin = (Base) =>
      * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
      * @private
      */
-    renderTrajectoriesInternal(size, resolution, noInterpolate) {
+    renderTrajectoriesInternal(size, resolution, rotation, noInterpolate) {
       if (!this.tracker) {
         return;
       }
 
-      const renderTime = this.live ? Date.now() : this.currTime;
+      const renderTime = this.live ? Date.now() : this.time;
+
+      // Avoid useless render before the next tick.
+      if (
+        this.live &&
+        resolution === this.lastRenderResolution &&
+        rotation === this.lastRenderRotation &&
+        renderTime - this.lastRenderTime < this.updateTimeDelay
+      ) {
+        return;
+      }
+
+      this.lastRenderTime = renderTime;
+      this.lastRenderResolution = resolution;
+
       this.tracker.renderTrajectories(
         renderTime,
         size,
@@ -446,36 +449,31 @@ const TrackerLayerMixin = (Base) =>
     }
 
     /**
-     * Render the trajectories requesting an animation frame and cancelling the previous one
+     * Render the trajectories requesting an animation frame and cancelling the previous one.
+     * This function must be overrided by children to provide the correct parameters.
      * @private
      */
-    renderTrajectories(size, resolution, noInterpolate) {
+    renderTrajectories(size, resolution, rotation, noInterpolate) {
       if (this.requestId) {
         cancelAnimationFrame(this.requestId);
       }
 
       if (this.useRequestAnimationFrame) {
         this.requestId = requestAnimationFrame(() => {
-          this.renderTrajectoriesInternal(size, resolution, noInterpolate);
+          this.renderTrajectoriesInternal(
+            size,
+            resolution,
+            rotation,
+            noInterpolate,
+          );
         });
       } else {
-        this.renderTrajectoriesInternal(size, resolution, noInterpolate);
-      }
-    }
-
-    /**
-     * Set the current time, it triggers a rendering of the trajectories.
-     * If live is true. This function will have no effect.
-     * @param {dateString | value} time
-     * @param {Array<number>} size
-     * @param {number} resolution
-     * @param {boolean} [mustRender=true]
-     */
-    setCurrTime(time, size, resolution, mustRender = true) {
-      this.currTime = new Date(time);
-      this.lastUpdateTime = this.currTime;
-      if (mustRender) {
-        this.renderTrajectories(size, resolution);
+        this.renderTrajectoriesInternal(
+          size,
+          resolution,
+          rotation,
+          noInterpolate,
+        );
       }
     }
 
diff --git a/src/common/mixins/TrajservLayerMixin.js b/src/common/mixins/TrajservLayerMixin.js
index f0e33d89..522fcdb5 100644
--- a/src/common/mixins/TrajservLayerMixin.js
+++ b/src/common/mixins/TrajservLayerMixin.js
@@ -337,7 +337,7 @@ const TrajservLayerMixin = (TrackerLayer) =>
       // The 5 seconds more are used as a buffer if the request takes too long.
       const requestIntervalInMs = (this.requestIntervalSeconds + 5) * 1000;
       const intervalMs = this.speed * requestIntervalInMs;
-      const now = this.currTime;
+      const now = this.time;
 
       let diff = true;
 
@@ -367,7 +367,7 @@ const TrajservLayerMixin = (TrackerLayer) =>
         cd: 1,
         nm: 1,
         fl: 1,
-        // toff: this.currTime.getTime() / 1000,
+        // toff: this.time.getTime() / 1000,
       };
 
       // Allow to load only differences between the last request,
diff --git a/src/mapbox/layers/TrackerLayer.js b/src/mapbox/layers/TrackerLayer.js
index b404c480..2e6d5b29 100644
--- a/src/mapbox/layers/TrackerLayer.js
+++ b/src/mapbox/layers/TrackerLayer.js
@@ -45,21 +45,6 @@ class TrackerLayer extends mixin(Layer) {
     });
   }
 
-  /**
-   * Set the current time, it triggers a rendering of the trajectories.
-   *
-   * @param {Date} time  The current time.
-   */
-  setCurrTime(time) {
-    const canvas = this.map.getCanvas();
-    super.setCurrTime(
-      time,
-      [canvas.width / this.pixelRatio, canvas.height / this.pixelRatio],
-      getResolution(this.map),
-      !this.map.isMoving() && !this.map.isRotating() && !this.map.isZooming(),
-    );
-  }
-
   /**
    * Start updating vehicles position.
    *
@@ -68,12 +53,7 @@ class TrackerLayer extends mixin(Layer) {
    * @override
    */
   start() {
-    const canvas = this.map.getCanvas();
-    super.start(
-      [canvas.width / this.pixelRatio, canvas.height / this.pixelRatio],
-      this.map.getZoom(),
-      getResolution(this.map),
-    );
+    super.start();
 
     this.map.on('zoomend', this.onMapZoomEnd);
 
@@ -95,6 +75,28 @@ class TrackerLayer extends mixin(Layer) {
     }
   }
 
+  /**
+   * 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) {
+    const canvas = this.map.getCanvas();
+    super.renderTrajectories(
+      [canvas.width / this.pixelRatio, canvas.height / this.pixelRatio],
+      getResolution(this.map),
+      this.map.getBearing(),
+      noInterpolate,
+    );
+  }
+
+  /**
+   * Return the delay in ms before the next rendering.
+   */
+  getRefreshTimeInMs() {
+    return super.getRefreshTimeInMs(this.map.getZoom());
+  }
+
   /**
    * Returns an array of vehicles located at the given coordinate.
    *
diff --git a/src/mapbox/layers/TrajservLayer.js b/src/mapbox/layers/TrajservLayer.js
index e9e02be8..1ca39071 100644
--- a/src/mapbox/layers/TrajservLayer.js
+++ b/src/mapbox/layers/TrajservLayer.js
@@ -131,7 +131,11 @@ class TrajservLayer extends mixin(TrackerLayer) {
     this.map
       .getSource(this.key)
       .setCoordinates(getSourceCoordinates(this.map, this.pixelRatio));
-    this.renderTrajectories(undefined, getResolution(this.map));
+    this.renderTrajectories(
+      undefined,
+      getResolution(this.map),
+      this.map.getBearing(),
+    );
   }
 
   /**
diff --git a/src/mapbox/layers/TralisLayer.js b/src/mapbox/layers/TralisLayer.js
index 1154b8a7..7a2b3300 100644
--- a/src/mapbox/layers/TralisLayer.js
+++ b/src/mapbox/layers/TralisLayer.js
@@ -93,6 +93,7 @@ class TralisLayer extends mixin(TrackerLayer) {
     this.renderTrajectories(
       [width / this.pixelRatio, height / this.pixelRatio],
       getResolution(this.map),
+      this.map.getBearing(),
     );
   }
 
diff --git a/src/ol/layers/TrackerLayer.js b/src/ol/layers/TrackerLayer.js
index bd710c84..f1165a29 100644
--- a/src/ol/layers/TrackerLayer.js
+++ b/src/ol/layers/TrackerLayer.js
@@ -49,12 +49,7 @@ class TrackerLayer extends mixin(Layer) {
               if (!this.tracker || !this.tracker.canvas) {
                 return null;
               }
-              const {
-                zoom,
-                center,
-                resolution,
-                rotation,
-              } = frameState.viewState;
+              const { zoom, center, rotation } = frameState.viewState;
 
               if (
                 zoom !== this.renderState.zoom ||
@@ -74,7 +69,7 @@ class TrackerLayer extends mixin(Layer) {
                   return this.tracker.canvas;
                 }
 
-                this.renderTrajectories(frameState.size, resolution, true);
+                this.renderTrajectories(true);
               } else if (
                 this.renderState.center[0] !== center[0] ||
                 this.renderState.center[1] !== center[1]
@@ -136,31 +131,12 @@ class TrackerLayer extends mixin(Layer) {
     });
   }
 
-  /**
-   * Set the current time, it triggers a rendering of the trajectories.
-   * @param {dateString | value} time
-   */
-  setCurrTime(time) {
-    const view = this.map.getView();
-    super.setCurrTime(
-      time,
-      this.map.getSize(),
-      view.getResolution(),
-      !this.map.getView().getAnimating() &&
-        !this.map.getView().getInteracting(),
-    );
-  }
-
   /**
    * Trackerlayer is started.
    * @private
    */
   start() {
-    super.start(
-      this.map.getSize(),
-      this.currentZoom || this.map.getView().getZoom(),
-      this.map.getView().getResolution(),
-    );
+    super.start();
 
     this.olEventsKeys = [
       this.map.on('moveend', () => {
@@ -206,6 +182,28 @@ class TrackerLayer extends mixin(Layer) {
     this.olEventsKeys = [];
   }
 
+  /**
+   * 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) {
+    const view = this.map.getView();
+    super.renderTrajectories(
+      this.map.getSize(),
+      view.getResolution(),
+      view.getRotation(),
+      noInterpolate,
+    );
+  }
+
+  /**
+   * Return the delay in ms before the next rendering.
+   */
+  getRefreshTimeInMs() {
+    return super.getRefreshTimeInMs(this.map.getView().getZoom());
+  }
+
   /**
    * Returns the vehicle which are at the given coordinates.
    * Returns null when no vehicle is located at the given coordinates.

From 9dd0c129ad03fd6a6462a43f162428796c12ca71 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Mon, 4 Oct 2021 13:30:55 +0200
Subject: [PATCH 34/36] v1.3.13-beta.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 29dd5e40..08814129 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "1.3.13-beta.5",
+  "version": "1.3.13-beta.6",
   "main": "index.js",
   "module": "module.js",
   "dependencies": {

From b18e2569fcf0d30c78da391eda7199521e1761a3 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Mon, 4 Oct 2021 13:32:47 +0200
Subject: [PATCH 35/36] Clean TrackerLayer

---
 src/common/mixins/TrackerLayerMixin.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/common/mixins/TrackerLayerMixin.js b/src/common/mixins/TrackerLayerMixin.js
index cb6f4000..9cbe15fa 100644
--- a/src/common/mixins/TrackerLayerMixin.js
+++ b/src/common/mixins/TrackerLayerMixin.js
@@ -439,6 +439,7 @@ const TrackerLayerMixin = (Base) =>
 
       this.lastRenderTime = renderTime;
       this.lastRenderResolution = resolution;
+      this.lastRenderRotation = rotation;
 
       this.tracker.renderTrajectories(
         renderTime,

From d517ecf00a453f277ec9c52d98cf0275cbbc12c3 Mon Sep 17 00:00:00 2001
From: Olivier Terral <olivier.terral@geops.de>
Date: Mon, 4 Oct 2021 13:33:13 +0200
Subject: [PATCH 36/36] v1.3.13-beta.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 08814129..be453b30 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "1.3.13-beta.6",
+  "version": "1.3.13-beta.7",
   "main": "index.js",
   "module": "module.js",
   "dependencies": {