Adding a selectHandler (not functional yet).

src/components/map/Map.tsx

@@ -12,6 +12,7 @@ import ScaleLine from 'ol/control/ScaleLine';
 import Control from 'ol/control/Control';
 import OSM from 'ol/source/OSM';
 import { useGeographic as olUseGeographic } from 'ol/proj';
+import DragRotate from 'ol/interaction/DragRotate';
 
 import 'ol/ol.css';
 import './Map.css';
@@ -24,6 +25,16 @@ import { Back, Forward } from '../back-forward';
 import GpxImport from '../gpx-import';
 import AllGpxes from '../all-gpxes';
 import MapTileProvider, { mapTileProviders } from '../map-tile-provider';
+import Interaction from 'ol/interaction/Interaction';
+import DoubleClickZoom from 'ol/interaction/DoubleClickZoom';
+import DragPan from 'ol/interaction/DragPan';
+import PinchRotate from 'ol/interaction/PinchRotate';
+import PinchZoom from 'ol/interaction/PinchZoom';
+import KeyboardPan from 'ol/interaction/KeyboardPan';
+import KeyboardZoom from 'ol/interaction/KeyboardZoom';
+import MouseWheelZoom from 'ol/interaction/MouseWheelZoom';
+import DragZoom from 'ol/interaction/DragZoom';
+import Select from 'ol/interaction/Select';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -115,6 +126,10 @@ const Map: Component = () => {
     }
   });
 
+  const selectHandler = (event: any) => {
+    console.log({ caller: 'selectHandler', event });
+  };
+
   onMount(() => {
     olUseGeographic();
 
@@ -144,6 +159,9 @@ const Map: Component = () => {
     });
     tileLayer.set('provider', params.provider, true);
 
+    const selectInteraction = new Select({ multi: true });
+    selectInteraction.on('select', selectHandler);
+
     const olMap = new OlMap({
       view: new View({
         center: [+getState().lon, +getState().lat],
@@ -157,6 +175,18 @@ const Map: Component = () => {
         new Rotate(),
         new ScaleLine({ bar: true }),
       ]),
+      interactions: new Collection<Interaction>([
+        new DragRotate(),
+        new DoubleClickZoom(),
+        new DragPan(),
+        new PinchRotate(),
+        new PinchZoom(),
+        new KeyboardPan(),
+        new KeyboardZoom(),
+        new MouseWheelZoom(),
+        new DragZoom(),
+        selectInteraction,
+      ]),
     });
     olMap.on(['moveend'], changeListener);