feat: use offscreen canvas and web workers

doc/pages/example/[example].js

@@ -10,6 +10,7 @@ const useStyles = makeStyles({
     paddingBottom: 115,
     margin: 'auto',
     marginTop: 30,
+    maxWidth: '100% !important',
   },
 });
 

doc/public/static/examples/ol-tracker-worker.html

@@ -0,0 +1 @@
+<div id="map" style="width: 100%; height: 100%"></div>

doc/public/static/examples/ol-tracker-worker.js

@@ -0,0 +1,46 @@
+import { Map, View } from 'ol';
+import {
+  RealtimeLayer,
+  MaplibreLayer,
+  CopyrightControl,
+} from 'mobility-toolbox-js/ol';
+import 'ol/ol.css';
+
+export default () => {
+  const map = new Map({
+    target: 'map',
+    view: new View({
+      center: [831634, 5933959],
+      zoom: 13,
+      minZoom: 5,
+    }),
+    controls: [],
+  });
+
+  const control = new CopyrightControl();
+  control.attachToMap(map);
+
+  const layer = new MaplibreLayer({
+    url: 'https://maps.geops.io/styles/travic_v2/style.json',
+    apiKey: window.apiKey,
+  });
+  layer.attachToMap(map);
+
+  const tracker = new RealtimeLayer({
+    url: 'wss://api.geops.io/tracker-ws/v1/',
+    apiKey: window.apiKey,
+    allowRenderWhenAnimating:
+      new URL(window.location.href)?.searchParams?.get(
+        'allowRenderWhenAnimating',
+      ) === 'true',
+    useWorker: true,
+  });
+  tracker.attachToMap(map);
+
+  tracker.onClick(([feature]) => {
+    if (feature) {
+      // eslint-disable-next-line no-console
+      console.log(feature.getProperties());
+    }
+  });
+};

doc/public/static/examples/ol-tracker-worker.md

@@ -0,0 +1 @@
+Follow [this link](https://developer.geops.io/) to get information about the API and how to get an API key.

doc/public/static/examples/ol-tracker.js

@@ -29,6 +29,10 @@ export default () => {
   const tracker = new RealtimeLayer({
     url: 'wss://api.geops.io/tracker-ws/v1/',
     apiKey: window.apiKey,
+    allowRenderWhenAnimating:
+      new URL(window.location.href)?.searchParams?.get(
+        'allowRenderWhenAnimating',
+      ) === 'true',
   });
   tracker.attachToMap(map);
 

doc/src/components/CodeSandboxButton.js

@@ -41,7 +41,7 @@ function CodeSandboxButton({ html, js, extraFiles, ...props }) {
             'mapbox-gl': '1',
             'maplibre-gl': '2',
             'mobility-toolbox-js': 'latest@beta',
-            ol: '6.3.1',
+            ol: '6',
           },
           devDependencies: {
             '@babel/core': '7.2.0',

doc/src/components/Example.js

@@ -9,7 +9,7 @@ const useStyles = makeStyles((theme) => ({
     padding: 12,
   },
   htmlContainer: {
-    height: 500,
+    height: 900,
   },
   noPointer: {
     // Remove pointer events for mobile devices on load

doc/src/examples.js

@@ -1,5 +1,6 @@
 // We load statically the readme to have the content when the page use server side rendering.
 import olTrackerReadme from '../public/static/examples/ol-tracker.md';
+import olTrackerWorkerReadme from '../public/static/examples/ol-tracker-worker.md';
 import mbTrackerReadme from '../public/static/examples/mb-tracker.md';
 import olRoutingReadme from '../public/static/examples/ol-routing.md';
 import olStopFinderReadme from '../public/static/examples/ol-stop-finder.md';
@@ -22,7 +23,15 @@ export default [
     name: 'Live tracker with OpenLayers',
     key: 'ol-tracker',
     description:
-      'Use the [geOps Realtime API](https://developer.geops.io/apis/realtime/) to show moving trains in a Mapbox map.',
+      'Use the [geOps Realtime API](https://developer.geops.io/apis/realtime/) to show moving trains in a Openlayers map.',
+    img: '/static/img/live_tracker_ol.jpg',
+    readme: olTrackerReadme,
+  },
+  {
+    name: 'Live tracker with OpenLayers using web worker',
+    key: 'ol-tracker-worker',
+    description:
+      'Use the [geOps Realtime API](https://developer.geops.io/apis/realtime/) to show moving trains in a Openlayers map.',
     img: '/static/img/live_tracker_ol.jpg',
     readme: olTrackerReadme,
   },

src/api/trajserv/fetchTrajectories.worker.js

@@ -0,0 +1,23 @@
+import { translateTrajCollResponse } from './TrajservAPIUtils';
+
+let abortController = new AbortController();
+
+// eslint-disable-next-line no-restricted-globals, func-names
+self.onmessage = function (evt) {
+  // console.log('Worker: Message received from main script', evt.data);
+  abortController.abort();
+  abortController = new AbortController();
+  fetch(evt.data, {
+    signal: abortController.signal,
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      const a = translateTrajCollResponse(data.features);
+      // eslint-disable-next-line no-restricted-globals
+      self.postMessage(a);
+    })
+    .catch(() => {
+      // eslint-disable-next-line no-restricted-globals
+      // self.postMessage(null);
+    });
+};

src/common/mixins/RealtimeLayerMixin.ts

@@ -957,6 +957,10 @@ function RealtimeLayerMixin<T extends AnyLayerClass>(Base: T) {
         this.trajectories = {};
       }
       this.trajectories[trajectory.properties.train_id] = trajectory;
+      this.worker?.postMessage({
+        action: 'addTrajectory',
+        trajectory,
+      });
       // @ts-ignore the parameter are set by subclasses
       this.renderTrajectories();
     }
@@ -971,6 +975,10 @@ function RealtimeLayerMixin<T extends AnyLayerClass>(Base: T) {
       if (this.trajectories) {
         delete this.trajectories[id];
       }
+      this.worker?.postMessage({
+        action: 'removeTrajectory',
+        trajectoryId: id,
+      });
     }
 
     /**
@@ -1045,7 +1053,7 @@ function RealtimeLayerMixin<T extends AnyLayerClass>(Base: T) {
             this.map.getView().getProjection(),
           ),
         };
-      } else {
+      } else if (!this.worker) {
         trajectory.properties.olGeometry = this.format.readGeometry(geometry);
       }
 

src/common/tracker.worker.ts

@@ -0,0 +1,113 @@
+/// <reference no-default-lib="true"/>
+/// <reference lib="ES2015" />
+/// <reference lib="webworker" />
+/// <reference lib="dom" />
+
+import GeoJSON from 'ol/format/GeoJSON';
+import type { RealtimeStyleOptions, RealtimeTrajectories } from '../types';
+import { realtimeDefaultStyle } from './styles';
+import { renderTrajectories, realtimeConfig } from './utils';
+
+const debug = false;
+const trajectories: RealtimeTrajectories = {};
+
+// Default type of `self` is `WorkerGlobalScope & typeof globalThis`
+// https://github.com/microsoft/TypeScript/issues/14877
+declare let self: DedicatedWorkerGlobalScope;
+
+export type RealtimeWorkerRenderEvent = {
+  data: {
+    viewState: ViewState;
+    options: RealtimeStyleOptions;
+  };
+};
+
+let renderTimeout: number | null;
+let count = 0;
+const format = new GeoJSON();
+const canvas = new OffscreenCanvas(1, 1);
+
+const render = (evt: RealtimeWorkerRenderEvent) => {
+  // eslint-disable-next-line no-console
+  if (debug) console.time('render');
+  // eslint-disable-next-line no-console
+  if (debug) console.log('render', evt.data.viewState);
+  count = 0;
+  const { viewState, options } = evt.data;
+
+  const { renderedTrajectories } = renderTrajectories(
+    canvas,
+    Object.values(trajectories),
+    realtimeDefaultStyle,
+    viewState,
+    {
+      ...options,
+      getRadius: realtimeConfig.getRadius,
+      getTextColor: realtimeConfig.getTextColor,
+      getBgColor: realtimeConfig.getBgColor,
+      getDelayColor: realtimeConfig.getDelayColor,
+      getTextSize: realtimeConfig.getTextSize,
+    },
+  );
+
+  if (debug) console.timeEnd('render');
+  if (debug) console.log('NUMBER OF STYLES CREATED', count);
+
+  const imageData = canvas.transferToImageBitmap();
+
+  // eslint-disable-next-line no-restricted-globals
+  self.postMessage(
+    {
+      action: 'rendered',
+      imageData,
+      viewState,
+      nbRenderedTRajectories: renderedTrajectories?.length || 0,
+    },
+    [imageData],
+  );
+  renderTimeout = null;
+};
+
+// eslint-disable-next-line no-restricted-globals
+self.onmessage = (evt) => {
+  // debugger;
+  if (evt.data.action === 'addTrajectory') {
+    const { trajectory } = evt.data;
+    const id = trajectory.properties.train_id;
+    trajectories[id] = trajectory;
+    trajectories[id].properties.olGeometry = format.readGeometry(
+      trajectory.geometry,
+    );
+    return;
+  }
+
+  if (evt.data.action === 'removeTrajectory') {
+    delete trajectories[evt.data.trajectoryId];
+    return;
+  }
+
+  // if (evt.data.action === 'sendData') {
+  //   // eslint-disable-next-line no-console
+  //   if (debug) console.log('sendData', evt.data);
+  //   if (debug) console.time('sendData');
+  //   trajectories = evt.data.trajectories;
+  //   if (debug) console.timeEnd('sendData');
+  //   return;
+  // }
+
+  if (evt.data.action !== 'render') {
+    return;
+  }
+
+  if (renderTimeout) {
+    clearTimeout(renderTimeout);
+  }
+
+  // eslint-disable-next-line no-restricted-globals
+  renderTimeout = self.setTimeout(() => {
+    render(evt);
+  }, 0);
+};
+
+// We need an export to force this file to act like a module, so TS will let us re-type `self`
+// export default null;

src/common/utils/index.js

@@ -4,6 +4,7 @@ export { default as removeDuplicate } from './removeDuplicate';
 export { default as createRealtimeFilters } from './createRealtimeFilters';
 export { default as getLayersAsFlatArray } from './getLayersAsFlatArray';
 export * from './timeUtils';
+export { default as getVehiclePosition } from './getVehiclePosition';
 export { default as sortByDelay } from './sortByDelay';
 export { default as renderTrajectories } from './renderTrajectories';
 export { default as getMaplibreRender } from './getMaplibreRender';