upgrade to maplibre v6

website/src/lib/components/map/street-view-control/StreetViewControl.svelte

@@ -9,6 +9,7 @@
     import { i18n } from '$lib/i18n.svelte';
     import { onMount } from 'svelte';
     import ButtonWithTooltip from '$lib/components/ButtonWithTooltip.svelte';
+    import type { Map } from 'maplibre-gl';
 
     const { streetViewSource } = settings;
 
@@ -20,7 +21,7 @@
     let container: HTMLElement;
 
     onMount(() => {
-        map.onLoad((map_: maplibregl.Map) => {
+        map.onLoad((map_: Map) => {
             googleRedirect = new GoogleRedirect(map_);
             mapillaryLayer = new MapillaryLayer(
                 map_,

website/src/lib/components/map/street-view-control/google.ts

@@ -1,10 +1,11 @@
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+import type { Map, MapMouseEvent } from 'maplibre-gl';
 
 export class GoogleRedirect {
-    map: maplibregl.Map;
+    map: Map;
     enabled = false;
 
-    constructor(map: maplibregl.Map) {
+    constructor(map: Map) {
         this.map = map;
     }
 
@@ -24,7 +25,7 @@ export class GoogleRedirect {
         this.map.off('click', this.openStreetView);
     }
 
-    openStreetView(e: maplibregl.MapMouseEvent) {
+    openStreetView(e: MapMouseEvent) {
         window.open(
             `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${e.lngLat.lat},${e.lngLat.lng}`
         );

website/src/lib/components/map/street-view-control/mapillary.ts

@@ -1,4 +1,10 @@
-import maplibregl, { type LayerSpecification, type VectorSourceSpecification } from 'maplibre-gl';
+import {
+    Map,
+    Marker,
+    type LayerSpecification,
+    type MapLayerMouseEvent,
+    type VectorSourceSpecification,
+} from 'maplibre-gl';
 import { Viewer, type ViewerBearingEvent } from 'mapillary-js/dist/mapillary.module';
 import 'mapillary-js/dist/mapillary.css';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
@@ -43,9 +49,9 @@ const mapillaryImageLayer: LayerSpecification = {
 };
 
 export class MapillaryLayer {
-    map: maplibregl.Map;
+    map: Map;
     layerEventManager: MapLayerEventManager;
-    marker: maplibregl.Marker;
+    marker: Marker;
     viewer: Viewer;
 
     active = false;
@@ -56,7 +62,7 @@ export class MapillaryLayer {
     onMouseLeaveBinded = this.onMouseLeave.bind(this);
 
     constructor(
-        map: maplibregl.Map,
+        map: Map,
         layerEventManager: MapLayerEventManager,
         container: HTMLElement,
         popupOpen: { value: boolean }
@@ -75,7 +81,7 @@ export class MapillaryLayer {
         dot.className = 'maplibregl-user-location-dot';
         element.appendChild(dot);
 
-        this.marker = new maplibregl.Marker({
+        this.marker = new Marker({
             rotationAlignment: 'map',
             element,
         });
@@ -140,7 +146,7 @@ export class MapillaryLayer {
         this.popupOpen.value = false;
     }
 
-    onMouseEnter(e: maplibregl.MapLayerMouseEvent) {
+    onMouseEnter(e: MapLayerMouseEvent) {
         if (
             e.features &&
             e.features.length > 0 &&