openlayers 9.2.3 (#391)

package.json

@@ -18,8 +18,8 @@
         "custom-model-editor": "github:graphhopper/custom-model-editor#3a46b6981d170b7eb70d621bbb92caed149e5a97",
         "geojson": "^0.5.0",
         "heightgraph": "github:easbar/Leaflet.Heightgraph#5f4f0b1fff3646aa071981381f5955c9e6f111f0",
-        "ol": "8.1.0",
-        "ol-mapbox-style": "12.2.1",
+        "ol": "9.2.3",
+        "ol-mapbox-style": "12.3.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-responsive": "^9.0.0"

src/layers/UseExternalMVTLayer.tsx

@@ -10,6 +10,7 @@ import Dispatcher from '@/stores/Dispatcher'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import * as config from 'config'
+import RenderFeature from 'ol/render/Feature'
 
 export default function useExternalMVTLayer(map: Map, externalMVTLayerEnabled: boolean) {
     useEffect(() => {
@@ -19,7 +20,7 @@ export default function useExternalMVTLayer(map: Map, externalMVTLayerEnabled: b
                 attributions: '',
                 format: new MVT({
                     // without this we won't be able to simply add the features to the selectionSource below, see: https://gis.stackexchange.com/a/407634
-                    featureClass: Feature,
+                    featureClass: RenderFeature,
                 }),
                 url: config.externalMVTLayer ? config.externalMVTLayer.url : '',
                 maxZoom: config.externalMVTLayer ? config.externalMVTLayer.maxZoom : 14,

src/layers/UseQueryPointsLayer.tsx

@@ -3,7 +3,7 @@ import { QueryPoint, QueryPointType } from '@/stores/QueryStore'
 import { useEffect } from 'react'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
-import { Point } from 'ol/geom'
+import { Geometry, Point } from 'ol/geom'
 import { fromLonLat, toLonLat } from 'ol/proj'
 import { Modify } from 'ol/interaction'
 import Dispatcher from '@/stores/Dispatcher'
@@ -35,7 +35,7 @@ function removeQueryPoints(map: Map) {
 }
 
 function addQueryPointsLayer(map: Map, queryPoints: QueryPoint[]) {
-    const features = queryPoints
+    const features: Feature<Geometry>[] = queryPoints
         .map((point, i) => {
             return { index: i, point: point }
         })
@@ -85,10 +85,12 @@ function removeDragInteractions(map: Map) {
         .forEach(i => map.removeInteraction(i))
 }
 
-function addDragInteractions(map: Map, queryPointsLayer: VectorLayer<any>) {
+function addDragInteractions(map: Map, queryPointsLayer: VectorLayer<Feature<Geometry>>) {
+    let tmp = queryPointsLayer.getSource()
+    if (tmp == null) throw new Error('source must not be null') // typescript requires this
     const modify = new Modify({
         hitDetection: queryPointsLayer,
-        source: queryPointsLayer.getSource(),
+        source: tmp,
         style: [],
     })
     modify.on('modifystart', e => {