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);
 

src/components/trkseg/Trkseg.tsx

@@ -37,7 +37,7 @@ export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
               type: 'Point',
               coordinates: [trkseg().trkpt[0].$.lon, trkseg().trkpt[0].$.lat],
             },
-            properties: { type: 'trkseg-start' },
+            properties: { type: 'trkseg-start', id: trksegId },
           },
           {
             type: 'Feature',
@@ -48,7 +48,7 @@ export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
                 trkpt.$.lat,
               ]),
             },
-            properties: { type: 'trkseg' },
+            properties: { type: 'trkseg', id: trksegId },
           },
           {
             type: 'Feature',
@@ -59,7 +59,7 @@ export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
                 trkseg().trkpt.at(-1).$.lat,
               ],
             },
-            properties: { type: 'trkseg-finish' },
+            properties: { type: 'trkseg-finish', id: trksegId },
           },
         ],
       };

src/components/wpt/Wpt.tsx

@@ -37,7 +37,7 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
               type: 'Point',
               coordinates: [wpt().$.lon, wpt().$.lat],
             },
-            properties: { type: 'wpt', ...wpt() },
+            properties: { type: 'wpt', ...wpt(), id: wptId },
           },
         ],
       };