openlayers 9.2.3

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 => {

src/sidebar/RoutingResults.tsx

@@ -413,7 +413,8 @@ function RHButton(p: {
                     else if (p.type == 'border') tmpDescription = p.description + ': ' + p.values[index]
                     else if (p.values && p.values[index]) {
                         if (p.type.includes('rating'))
-                            tmpDescription = p.description + ': ' + p.value + ' (' + p.type + ':' + p.values[index] + ')'
+                            tmpDescription =
+                                p.description + ': ' + p.value + ' (' + p.type + ':' + p.values[index] + ')'
                         else if (p.type.includes('steep')) tmpDescription = p.description + ': ' + p.values[index]
                         else tmpDescription = p.description + ': ' + p.value + ' ' + p.values[index]
                     } else tmpDescription = p.description + ': ' + p.value

src/sidebar/search/routingProfiles/RoutingProfiles.tsx

@@ -76,7 +76,7 @@ export default function ({
     // Now add the profiles to each key e.g. 'car_avoid_ferry' to the 'car_' key.
     // Create a special key '_' for profile names with an unknown icon.
     routingProfiles.forEach(p => {
-        const key = (Object.keys(icons).find(k => p.name.startsWith(k + '_')) || "") + "_"
+        const key = (Object.keys(icons).find(k => p.name.startsWith(k + '_')) || '') + '_'
         if (!icons[p.name]) customProfiles[key] = [...(customProfiles[key] || []), p.name]
     })
 

src/stores/QueryStore.ts

@@ -344,7 +344,8 @@ export default class QueryStore extends Store<QueryStoreState> {
                 if (
                     state.queryPoints.length === 2 &&
                     state.maxAlternativeRoutes > 1 &&
-                    (ApiImpl.isMotorVehicle(state.routingProfile.name) && maxDistance < 7_000_000 || maxDistance < 500_000)
+                    ((ApiImpl.isMotorVehicle(state.routingProfile.name) && maxDistance < 7_000_000) ||
+                        maxDistance < 500_000)
                 )
                     requests.push(QueryStore.buildRouteRequest(state))
             }