fix: handle one or more features selected

Author: oterral

src/ol/layers/Layer.ts

@@ -1,10 +1,12 @@
 import debounce from 'lodash.debounce';
 import OLLayer from 'ol/layer/Layer';
+import { unByKey } from 'ol/Observable';
 import LayerRenderer from 'ol/renderer/Layer';
 
 import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
 
 import type { Map } from 'ol';
+import type { EventsKey } from 'ol/events';
 import type { Options } from 'ol/layer/Layer';
 
 export type MobilityLayerOptions = {
@@ -46,10 +48,15 @@ class EmptyLayerRenderer extends LayerRenderer<OLLayer> {
  * @deprecated Use an OpenLayers Layer instead.
  */
 class Layer extends OLLayer {
+  olEventsKeys: EventsKey[] = [];
+
   constructor(options: MobilityLayerOptions = {}) {
     super(options);
     defineDeprecatedProperties(this, options);
     deprecated('Layer is deprecated. Use an OpenLayers Layer instead.');
+
+    // Backward compatibility
+    this.olEventsKeys = [];
   }
 
   clone(newOptions: MobilityLayerOptions): Layer {
@@ -63,6 +70,11 @@ class Layer extends OLLayer {
   createRenderer(): LayerRenderer<OLLayer> {
     return new EmptyLayerRenderer(this);
   }
+
+  detachFromMap() {
+    // Backward compatibility
+    unByKey(this.olEventsKeys);
+  }
 }
 
 export default Layer;

src/ol/layers/MaplibreLayer.ts

@@ -1,20 +1,21 @@
-import type {
-  MapLibreLayerOptions,
-  MapLibreOptions,
-} from '@geoblocks/ol-maplibre-layer/lib/MapLibreLayer';
-import type { QueryRenderedFeaturesOptions } from 'maplibre-gl';
-
 import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer/lib';
 import debounce from 'lodash.debounce';
-import { EventsKey } from 'ol/events';
-import Map from 'ol/Map';
-import { ObjectEvent } from 'ol/Object';
 import { unByKey } from 'ol/Observable';
 
 import { getUrlWithParams } from '../../common/utils';
 import MaplibreLayerRenderer from '../renderers/MaplibreLayerRenderer';
 import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
-import { MobilityLayerOptions } from './Layer';
+
+import type {
+  MapLibreLayerOptions,
+  MapLibreOptions,
+} from '@geoblocks/ol-maplibre-layer/lib/MapLibreLayer';
+import type { QueryRenderedFeaturesOptions } from 'maplibre-gl';
+import type { EventsKey } from 'ol/events';
+import type Map from 'ol/Map';
+import type { ObjectEvent } from 'ol/Object';
+
+import type { MobilityLayerOptions } from './Layer';
 
 export type MaplibreLayerOptions = {
   apiKey?: string;
@@ -150,6 +151,13 @@ class MaplibreLayer extends MapLibreLayer {
    * @param {string} [options.url="https://maps.geops.io"] The [geOps Maps API](https://developer.geops.io/apis/maps) url.
    */
   constructor(options: MaplibreLayerOptions) {
+    // Backward compatibility
+    if (options.mapOptions && !options.mapLibreOptions) {
+      deprecated(
+        'MaplibreLayer.mapOptions is deprecated. Use mapLibreOptions instead.',
+      );
+      options.mapLibreOptions = options.mapOptions;
+    }
     const newOptions = {
       apiKeyName: 'key',
       style: 'travic_v2',

src/ol/layers/RealtimeLayer.ts

@@ -1,34 +1,37 @@
-import { DebouncedFunc } from 'lodash';
 import debounce from 'lodash.debounce';
-import { Map, MapEvent } from 'ol';
-import { EventsKey } from 'ol/events';
 import { getIntersection, isEmpty } from 'ol/extent';
-import Feature, { FeatureLike } from 'ol/Feature';
 import GeoJSON from 'ol/format/GeoJSON';
 import Layer from 'ol/layer/Layer';
 import VectorLayer from 'ol/layer/Vector';
-import { ObjectEvent } from 'ol/Object';
 import { unByKey } from 'ol/Observable';
 import { Vector as VectorSource } from 'ol/source';
 import Source from 'ol/source/Source';
-import { State } from 'ol/View';
-
-import { FilterFunction, SortFunction } from '../../common/typedefs';
-import RealtimeEngine, {
-  RealtimeEngineOptions,
-} from '../../common/utils/RealtimeEngine';
-import { RealtimeAPI } from '../../maplibre';
-import {
+
+import RealtimeEngine from '../../common/utils/RealtimeEngine';
+import RealtimeLayerRenderer from '../renderers/RealtimeLayerRenderer';
+import { fullTrajectoryStyle } from '../styles';
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
+
+import type { DebouncedFunc } from 'lodash';
+import type { Map, MapEvent } from 'ol';
+import type { EventsKey } from 'ol/events';
+import type { FeatureLike } from 'ol/Feature';
+import type Feature from 'ol/Feature';
+import type { ObjectEvent } from 'ol/Object';
+import type { State } from 'ol/View';
+
+import type { FilterFunction, SortFunction } from '../../common/typedefs';
+import type { RealtimeEngineOptions } from '../../common/utils/RealtimeEngine';
+import type { RealtimeAPI } from '../../maplibre';
+import type {
   RealtimeMode,
   RealtimeRenderState,
   RealtimeStopSequence,
   RealtimeTrainId,
   ViewState,
 } from '../../types';
-import RealtimeLayerRenderer from '../renderers/RealtimeLayerRenderer';
-import { fullTrajectoryStyle } from '../styles';
-import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
-import { MobilityLayerOptions } from './Layer';
+
+import type { MobilityLayerOptions } from './Layer';
 
 const format = new GeoJSON();
 
@@ -356,8 +359,9 @@ class RealtimeLayer extends Layer {
     };
   }
 
-  highlight(feature: Feature) {
-    const id = feature?.get('train_id');
+  highlight(features: Feature | Feature[]) {
+    const feat = Array.isArray(features) ? features[0] : features;
+    const id: null | string | undefined = feat?.get('train_id') as string;
     if (this.hoverVehicleId !== id) {
       this.hoverVehicleId = id;
       this.engine.renderTrajectories(true);
@@ -437,18 +441,19 @@ class RealtimeLayer extends Layer {
     }
 
     if (this.selectedVehicleId) {
-      this.highlightTrajectory(this.selectedVehicleId);
+      void this.highlightTrajectory(this.selectedVehicleId);
     }
   }
 
-  select(feature: Feature) {
-    const id = feature?.get('train_id');
+  select(features: Feature | Feature[]) {
+    const feat = Array.isArray(features) ? features[0] : features;
+    const id: null | string | undefined = feat?.get('train_id') as string;
     if (this.selectedVehicleId !== id) {
       this.cleanVectorLayer();
       this.selectedVehicleId = id;
       this.engine.renderTrajectories(true);
     }
-    this.highlightTrajectory(id);
+    void this.highlightTrajectory(id);
   }
 
   override setMapInternal(map: Map) {

src/ol/utils/defineDeprecatedProperties.ts

@@ -193,6 +193,23 @@ const defineDeprecatedProperties = (
         );
       },
     },
+    olListenersKeys: {
+      /** @deprecated */
+      get() {
+        deprecated(
+          'Layer.olListenersKeys is deprecated. Use the Layer.olEventsKeys instead.',
+        );
+        //@ts-expect-error Property just there for backward compatibility
+        return obj.olEventsKeys || [];
+      },
+      set(newValue: string[]) {
+        deprecated(
+          'Layer.olListenersKeys is deprecated. Use the Layer.olEventsKeys instead.',
+        );
+
+        //@ts-expect-error Property just there for backward compatibility
+        obj.olEventsKeys = newValue;
+    },
     options: {
       /** @deprecated */
       get(): MobilityLayerOptions {
@@ -241,6 +258,7 @@ const defineDeprecatedProperties = (
         obj.setProperties(newValue);
       },
     },
+
     visible: {
       /** @deprecated */
       get(): boolean {