Merge branch 'dev'

* New translations en.json (German)

[ci skip]

* New translations view.mdx (German)

[ci skip]

website/package-lock.json

@@ -20,7 +20,7 @@
                 "immer": "^10.1.1",
                 "jszip": "^3.10.1",
                 "mapillary-js": "^4.1.2",
-                "maplibre-gl": "^5.21.1",
+                "maplibre-gl": "^6.0.0",
                 "sanitize-html": "^2.17.0",
                 "sortablejs": "^1.15.6"
             },
@@ -3236,13 +3236,18 @@
             }
         },
         "node_modules/@mapbox/jsonlint-lines-primitives": {
-            "version": "2.0.2",
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.3.tgz",
+            "integrity": "sha512-0SElaV0uMxEnxzBhhX9WTuPyUeMsAN/SS0i16tjuba4/mio63MG9khjC1a0JAiPGXAwvwm4UfHJURCN7nyudQg==",
+            "license": "MIT",
             "engines": {
-                "node": ">= 0.6"
+                "node": ">= 22"
             }
         },
         "node_modules/@mapbox/point-geometry": {
             "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
+            "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
             "license": "ISC"
         },
         "node_modules/@mapbox/sphericalmercator": {
@@ -3253,24 +3258,32 @@
             "license": "MIT"
         },
         "node_modules/@mapbox/tiny-sdf": {
-            "version": "2.0.7",
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.2.0.tgz",
+            "integrity": "sha512-LVL4wgI9YAum5V+LNVQO6QgFBPw7/MIIY4XJPNsPDMrjEwcE+JfKk1LuIl8GnF197ejVdC9QdPaxrx5gfgdGXg==",
             "license": "BSD-2-Clause"
         },
         "node_modules/@mapbox/unitbezier": {
-            "version": "0.0.1",
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-1.0.0.tgz",
+            "integrity": "sha512-fqd515fjBmANKGGsQ286E2Wvj/XvDFpGzwJxq4CI6jMQue6Oy04uCKp+JWKF00xRTmk6cEu1jPJ9p3xqH8YWqQ==",
             "license": "BSD-2-Clause"
         },
         "node_modules/@mapbox/vector-tile": {
-            "version": "2.0.4",
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-3.0.0.tgz",
+            "integrity": "sha512-Qf10S1uIHMk20ri/IVBnpS+esUEkVaR5Hftmz88jTInrpmWgPGJfPe3LVjjlE77trLx8tH6qjTG7uWH9hIq/0Q==",
             "license": "BSD-3-Clause",
             "dependencies": {
                 "@mapbox/point-geometry": "~1.1.0",
                 "@types/geojson": "^7946.0.16",
-                "pbf": "^4.0.1"
+                "pbf": "^5.0.0"
             }
         },
         "node_modules/@mapbox/vector-tile/node_modules/pbf": {
-            "version": "4.0.1",
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-5.1.2.tgz",
+            "integrity": "sha512-mnvGdvOrIvJOBGUEdGkrVXjN8E/VkIJCkf2eS1DH2yv82ORUlLttmDt0rWY38yYZmVwciZwBUvHM20qxBZf40w==",
             "license": "BSD-3-Clause",
             "dependencies": {
                 "resolve-protobuf-schema": "^2.1.0"
@@ -3279,18 +3292,13 @@
                 "pbf": "bin/pbf"
             }
         },
-        "node_modules/@mapbox/whoots-js": {
-            "version": "3.1.0",
-            "license": "ISC",
-            "engines": {
-                "node": ">=6.0.0"
-            }
-        },
         "node_modules/@maplibre/geojson-vt": {
-            "version": "6.0.4",
+            "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/@maplibre/geojson-vt/-/geojson-vt-6.1.1.tgz",
+            "integrity": "sha512-FVMOcmSP/yqol45t7StApEyTL5/vmqBCuFhH9n+fFuINenhaX+YgHHIt1yJ86S8kln3uJLcMvmEU2cfn6E2eCQ==",
             "license": "ISC",
             "dependencies": {
-                "kdbush": "^4.0.2"
+                "kdbush": "^4.1.0"
             }
         },
         "node_modules/@maplibre/maplibre-gl-geocoder": {
@@ -3311,15 +3319,16 @@
             }
         },
         "node_modules/@maplibre/maplibre-gl-style-spec": {
-            "version": "24.8.1",
+            "version": "26.2.1",
+            "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-26.2.1.tgz",
+            "integrity": "sha512-QFKCXkOeSzOr8jF75jm6kySOg+dUvOehPhRi68gcOYPHb7U5JloUq0dJW0Y5/fZV8ygfT0Vp2RWodvq+fyxFWA==",
             "license": "ISC",
             "dependencies": {
-                "@mapbox/jsonlint-lines-primitives": "~2.0.2",
-                "@mapbox/unitbezier": "^0.0.1",
+                "@mapbox/jsonlint-lines-primitives": "^2.0.3",
+                "@mapbox/unitbezier": "^1.0.0",
                 "json-stringify-pretty-compact": "^4.0.0",
                 "minimist": "^1.2.8",
                 "quickselect": "^3.0.0",
-                "rw": "^1.3.3",
                 "tinyqueue": "^3.0.0"
             },
             "bin": {
@@ -3329,31 +3338,29 @@
             }
         },
         "node_modules/@maplibre/mlt": {
-            "version": "1.1.8",
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/@maplibre/mlt/-/mlt-1.1.12.tgz",
+            "integrity": "sha512-ZeK5w2TTeHOajcLaEQs1KZXw2V9wIKo1PmThlxlsHoXsQsYlBqLJzPOd6tJHRtGTChUY3DPPmjXRArYVvAbmZw==",
             "license": "(MIT OR Apache-2.0)",
             "dependencies": {
                 "@mapbox/point-geometry": "^1.1.0"
             }
         },
         "node_modules/@maplibre/vt-pbf": {
-            "version": "4.3.0",
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@maplibre/vt-pbf/-/vt-pbf-4.3.2.tgz",
+            "integrity": "sha512-j6p0AdjvAR19Z3XaCysle7A4ZSo08tYOzxD0Y9NQylwPAkwJJeYub5b2eVucdeDh7erhv69DahoLOevDRERRUw==",
             "license": "MIT",
             "dependencies": {
                 "@mapbox/point-geometry": "^1.1.0",
-                "@mapbox/vector-tile": "^2.0.4",
-                "@maplibre/geojson-vt": "^5.0.4",
                 "@types/geojson": "^7946.0.16",
-                "@types/supercluster": "^7.1.3",
-                "pbf": "^4.0.1",
-                "supercluster": "^8.0.1"
+                "pbf": "^5.1.0"
             }
         },
-        "node_modules/@maplibre/vt-pbf/node_modules/@maplibre/geojson-vt": {
-            "version": "5.0.4",
-            "license": "ISC"
-        },
         "node_modules/@maplibre/vt-pbf/node_modules/pbf": {
-            "version": "4.0.1",
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-5.1.2.tgz",
+            "integrity": "sha512-mnvGdvOrIvJOBGUEdGkrVXjN8E/VkIJCkf2eS1DH2yv82ORUlLttmDt0rWY38yYZmVwciZwBUvHM20qxBZf40w==",
             "license": "BSD-3-Clause",
             "dependencies": {
                 "resolve-protobuf-schema": "^2.1.0"
@@ -4289,13 +4296,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/@types/supercluster": {
-            "version": "7.1.3",
-            "license": "MIT",
-            "dependencies": {
-                "@types/geojson": "*"
-            }
-        },
         "node_modules/@types/three": {
             "version": "0.134.0",
             "license": "MIT"
@@ -5720,6 +5720,8 @@
         },
         "node_modules/json-stringify-pretty-compact": {
             "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz",
+            "integrity": "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==",
             "license": "MIT"
         },
         "node_modules/jszip": {
@@ -5733,7 +5735,9 @@
             }
         },
         "node_modules/kdbush": {
-            "version": "4.0.2",
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.1.0.tgz",
+            "integrity": "sha512-e9vurzrXJQrFX6ckpHP3bvj5l+9CnYzkxDNnNQ1h2QTqdWsUAJgXiKdGNcOa1EY85dU8KbQ+z/FdQdB7P+9yfQ==",
             "license": "ISC"
         },
         "node_modules/keyv": {
@@ -6154,25 +6158,25 @@
             "license": "(MIT AND Zlib)"
         },
         "node_modules/maplibre-gl": {
-            "version": "5.22.0",
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-6.0.0.tgz",
+            "integrity": "sha512-1wBgEhzTZfA+cDpFdt0fM1mJA5mJ90fifORJ7D8JcKLJCvPT/iTx9bNxkP7DqEYde65DJd7gE7h83khwNRqdyg==",
             "license": "BSD-3-Clause",
             "dependencies": {
-                "@mapbox/jsonlint-lines-primitives": "^2.0.2",
                 "@mapbox/point-geometry": "^1.1.0",
-                "@mapbox/tiny-sdf": "^2.0.7",
-                "@mapbox/unitbezier": "^0.0.1",
-                "@mapbox/vector-tile": "^2.0.4",
-                "@mapbox/whoots-js": "^3.1.0",
-                "@maplibre/geojson-vt": "^6.0.4",
-                "@maplibre/maplibre-gl-style-spec": "^24.8.1",
-                "@maplibre/mlt": "^1.1.8",
-                "@maplibre/vt-pbf": "^4.3.0",
+                "@mapbox/tiny-sdf": "^2.2.0",
+                "@mapbox/unitbezier": "^1.0.0",
+                "@mapbox/vector-tile": "^3.0.0",
+                "@maplibre/geojson-vt": "^6.1.1",
+                "@maplibre/maplibre-gl-style-spec": "^26.1.0",
+                "@maplibre/mlt": "^1.1.12",
+                "@maplibre/vt-pbf": "^4.3.2",
                 "@types/geojson": "^7946.0.16",
-                "earcut": "^3.0.2",
+                "earcut": "^3.2.3",
                 "gl-matrix": "^3.4.4",
-                "kdbush": "^4.0.2",
+                "kdbush": "^4.1.0",
                 "murmurhash-js": "^1.0.0",
-                "pbf": "^4.0.1",
+                "pbf": "^5.1.2",
                 "potpack": "^2.1.0",
                 "quickselect": "^3.0.0",
                 "tinyqueue": "^3.0.0"
@@ -6186,11 +6190,15 @@
             }
         },
         "node_modules/maplibre-gl/node_modules/earcut": {
-            "version": "3.0.2",
+            "version": "3.2.3",
+            "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.2.3.tgz",
+            "integrity": "sha512-vnS4AVwp1KHAF13i1vp1/2D5evWy3k5u/iW/B81QVsUZtV8cv2tU0b2VNFlqvh4kYwrFMDdjPCfAmfyJW9y14Q==",
             "license": "ISC"
         },
         "node_modules/maplibre-gl/node_modules/pbf": {
-            "version": "4.0.1",
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-5.1.2.tgz",
+            "integrity": "sha512-mnvGdvOrIvJOBGUEdGkrVXjN8E/VkIJCkf2eS1DH2yv82ORUlLttmDt0rWY38yYZmVwciZwBUvHM20qxBZf40w==",
             "license": "BSD-3-Clause",
             "dependencies": {
                 "resolve-protobuf-schema": "^2.1.0"
@@ -6251,6 +6259,8 @@
         },
         "node_modules/minimist": {
             "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+            "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -6785,6 +6795,8 @@
         },
         "node_modules/quickselect": {
             "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+            "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
             "license": "ISC"
         },
         "node_modules/rbush": {
@@ -6920,10 +6932,6 @@
                 }
             }
         },
-        "node_modules/rw": {
-            "version": "1.3.3",
-            "license": "BSD-3-Clause"
-        },
         "node_modules/rxjs": {
             "version": "7.8.2",
             "license": "Apache-2.0",
@@ -7157,13 +7165,6 @@
                 "xtend": "^4.0.0"
             }
         },
-        "node_modules/supercluster": {
-            "version": "8.0.1",
-            "license": "ISC",
-            "dependencies": {
-                "kdbush": "^4.0.2"
-            }
-        },
         "node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -7405,6 +7406,8 @@
         },
         "node_modules/tinyqueue": {
             "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+            "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
             "license": "ISC"
         },
         "node_modules/totalist": {

website/package.json

@@ -75,7 +75,7 @@
         "immer": "^10.1.1",
         "jszip": "^3.10.1",
         "mapillary-js": "^4.1.2",
-        "maplibre-gl": "^5.21.1",
+        "maplibre-gl": "^6.0.0",
         "sanitize-html": "^2.17.0",
         "sortablejs": "^1.15.6"
     }

website/src/lib/assets/layers.ts

@@ -1168,7 +1168,7 @@ export type CustomLayer = {
     maxZoom: number;
     layerType: 'basemap' | 'overlay';
     resourceType: 'raster' | 'vector';
-    value: string | maplibregl.StyleSpecification;
+    value: string | StyleSpecification;
 };
 
 type OverpassQueryData = {

website/src/lib/components/embedding/Embedding.svelte

@@ -21,6 +21,7 @@
     import { selection } from '$lib/logic/selection';
     import { untrack } from 'svelte';
     import { isSelected, toggle } from '$lib/components/map/layer-control/utils';
+    import { boundsManager } from '$lib/logic/bounds';
 
     let {
         useHash = true,
@@ -90,6 +91,7 @@
             fileStateCollection.setEmbeddedFiles(files);
             $fileOrder = ids;
             selection.selectAll();
+            boundsManager.fitBoundsOnLoad(ids);
         });
     }
 

website/src/lib/components/map/custom-control/CustomControl.svelte

@@ -2,6 +2,7 @@
     import CustomControl from './custom-control';
     import { map } from '$lib/components/map/map';
     import { onMount, type Snippet } from 'svelte';
+    import type { Map } from 'maplibre-gl';
 
     let {
         position = 'top-right',
@@ -17,7 +18,7 @@
     let control: CustomControl | null = null;
 
     onMount(() => {
-        map.onLoad((map: maplibregl.Map) => {
+        map.onLoad((map: Map) => {
             if (position.includes('right')) container.classList.add('float-right');
             else container.classList.add('float-left');
             container.classList.remove('hidden');

website/src/lib/components/map/gpx-layer/gpx-layer-popup.ts

@@ -1,9 +1,10 @@
 import { MapPopup } from '$lib/components/map/map-popup';
+import type { Map } from 'maplibre-gl';
 
 export let waypointPopup: MapPopup | null = null;
 export let trackpointPopup: MapPopup | null = null;
 
-export function createPopups(map: maplibregl.Map) {
+export function createPopups(map: Map) {
     removePopups();
     waypointPopup = new MapPopup(map, {
         closeButton: false,

website/src/lib/components/map/gpx-layer/gpx-layer.ts

@@ -1,9 +1,10 @@
 import { get, type Readable } from 'svelte/store';
-import maplibregl, {
+import {
     type GeoJSONSource,
     type FilterSpecification,
     type MapLayerMouseEvent,
     type MapLayerTouchEvent,
+    Point,
 } from 'maplibre-gl';
 import { map } from '$lib/components/map/map';
 import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
@@ -120,7 +121,7 @@ export class GPXLayer {
     selected: boolean = false;
     currentWaypointData: GeoJSON.FeatureCollection | null = null;
     draggedWaypointIndex: number | null = null;
-    draggingStartingPosition: maplibregl.Point = new maplibregl.Point(0, 0);
+    draggingStartingPosition: Point = new Point(0, 0);
     unsubscribe: Function[] = [];
 
     updateBinded: () => void = this.update.bind(this);

website/src/lib/components/map/layer-control/LayerControl.svelte

@@ -7,6 +7,7 @@
     import { Layers } from '@lucide/svelte';
     import { settings } from '$lib/logic/settings';
     import { map } from '$lib/components/map/map';
+    import type { Map } from 'maplibre-gl';
 
     let container: HTMLDivElement;
     let overpassLayer: OverpassLayer;
@@ -21,7 +22,7 @@
         selectedOverpassTree,
     } = settings;
 
-    map.onLoad((_map: maplibregl.Map) => {
+    map.onLoad((_map: Map) => {
         if (overpassLayer) {
             overpassLayer.remove();
         }

website/src/lib/components/map/layer-control/OverpassPopup.svelte

@@ -15,7 +15,9 @@
         poi: PopupItem<any>;
     } = $props();
 
-    let tags: Record<string, string> = $derived(poi ? JSON.parse(poi.item.tags) : {});
+    let tags: Record<string, string> = $derived(
+        poi ? (typeof poi.item.tags == 'object' ? poi.item.tags : JSON.parse(poi.item.tags)) : {}
+    );
     let name = $derived.by(() => {
         if (poi) {
             if (tags.name !== undefined && tags.name !== '') {

website/src/lib/components/map/layer-control/overpass-layer.ts

@@ -6,7 +6,7 @@ import { overpassQueryData } from '$lib/assets/layers';
 import { MapPopup } from '$lib/components/map/map-popup';
 import { settings } from '$lib/logic/settings';
 import { db } from '$lib/db';
-import type { GeoJSONSource } from 'maplibre-gl';
+import type { Map as MapLibreMap, GeoJSONSource } from 'maplibre-gl';
 import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
 import type { MapLayerEventManager } from '$lib/components/map/map-layer-event-manager';
 import { loadSVGIcon } from '$lib/utils';
@@ -28,7 +28,7 @@ export class OverpassLayer {
     minZoom = 12;
     queryZoom = 12;
     expirationTime = 7 * 24 * 3600 * 1000;
-    map: maplibregl.Map;
+    map: MapLibreMap;
     layerEventManager: MapLayerEventManager;
     popup: MapPopup;
 
@@ -40,7 +40,7 @@ export class OverpassLayer {
     updateBinded = this.update.bind(this);
     onHoverBinded = this.onHover.bind(this);
 
-    constructor(map: maplibregl.Map, layerEventManager: MapLayerEventManager) {
+    constructor(map: MapLibreMap, layerEventManager: MapLayerEventManager) {
         this.map = map;
         this.layerEventManager = layerEventManager;
         this.popup = new MapPopup(map, {

website/src/lib/components/map/map-layer-event-manager.ts

@@ -1,10 +1,19 @@
 import { fileStateCollection } from '$lib/logic/file-state';
-import maplibregl from 'maplibre-gl';
+import {
+    LngLatBounds,
+    MapMouseEvent,
+    MapTouchEvent,
+    Point,
+    type Map,
+    type MapGeoJSONFeature,
+    type MapLayerMouseEvent,
+    type MapLayerTouchEvent,
+} from 'maplibre-gl';
 
-type MapLayerMouseEventListener = (e: maplibregl.MapLayerMouseEvent) => void;
-type MapLayerTouchEventListener = (e: maplibregl.MapLayerTouchEvent) => void;
+type MapLayerMouseEventListener = (e: MapLayerMouseEvent) => void;
+type MapLayerTouchEventListener = (e: MapLayerTouchEvent) => void;
 type MapLayerListener = {
-    features: maplibregl.MapGeoJSONFeature[];
+    features: MapGeoJSONFeature[];
     mousemoves: MapLayerMouseEventListener[];
     mouseenters: MapLayerMouseEventListener[];
     mouseleaves: MapLayerMouseEventListener[];
@@ -15,10 +24,10 @@ type MapLayerListener = {
 };
 
 export class MapLayerEventManager {
-    private _map: maplibregl.Map;
+    private _map: Map;
     private _listeners: Record<string, MapLayerListener> = {};
 
-    constructor(map: maplibregl.Map) {
+    constructor(map: Map) {
         this._map = map;
         this._map.on('mousemove', this._handleMouseMove.bind(this));
         this._map.on('click', this._handleMouseClick.bind(this, 'click'));
@@ -141,7 +150,7 @@ export class MapLayerEventManager {
         }
     }
 
-    private _handleMouseMove(e: maplibregl.MapMouseEvent) {
+    private _handleMouseMove(e: MapMouseEvent) {
         if (e.originalEvent.buttons > 0) return;
         const featuresByLayer = this._getRenderedFeaturesByLayer(e);
         Object.keys(this._listeners).forEach((layerId) => {
@@ -150,29 +159,20 @@ export class MapLayerEventManager {
             if ((features.length == 0) != (listener.features.length == 0)) {
                 if (features.length > 0) {
                     if (listener.mouseenters.length > 0) {
-                        const event = new maplibregl.MapMouseEvent(
-                            'mouseenter',
-                            e.target,
-                            e.originalEvent,
-                            {
-                                features: featuresByLayer[layerId]!,
-                            }
-                        );
+                        const event = new MapMouseEvent('mouseenter', e.target, e.originalEvent, {
+                            features: featuresByLayer[layerId]!,
+                        });
                         listener.mouseenters.forEach((l) => l(event));
                     }
                 } else {
                     if (listener.mouseleaves.length > 0) {
-                        const event = new maplibregl.MapMouseEvent(
-                            'mouseleave',
-                            e.target,
-                            e.originalEvent
-                        );
+                        const event = new MapMouseEvent('mouseleave', e.target, e.originalEvent);
                         listener.mouseleaves.forEach((l) => l(event));
                     }
                 }
             }
             if (features.length > 0 && listener.mousemoves.length > 0) {
-                const event = new maplibregl.MapMouseEvent('mousemove', e.target, e.originalEvent, {
+                const event = new MapMouseEvent('mousemove', e.target, e.originalEvent, {
                     features: featuresByLayer[layerId]!,
                 });
                 listener.mousemoves.forEach((l) => l(event));
@@ -181,49 +181,39 @@ export class MapLayerEventManager {
         });
     }
 
-    private _handleMouseClick(type: string, e: maplibregl.MapMouseEvent) {
+    private _handleMouseClick(type: string, e: MapMouseEvent) {
         const featuresByLayer = this._getRenderedFeaturesByLayer(e);
         Object.keys(this._listeners).forEach((layerId) => {
             const features = featuresByLayer[layerId] || [];
             const listener = this._listeners[layerId];
             if (features.length > 0) {
                 if (type === 'click' && listener.clicks.length > 0) {
-                    const event = new maplibregl.MapMouseEvent('click', e.target, e.originalEvent, {
+                    const event = new MapMouseEvent('click', e.target, e.originalEvent, {
                         features: features,
                     });
                     listener.clicks.forEach((l) => l(event));
                 } else if (type === 'contextmenu' && listener.contextmenus.length > 0) {
-                    const event = new maplibregl.MapMouseEvent(
-                        'contextmenu',
-                        e.target,
-                        e.originalEvent,
-                        {
-                            features: features,
-                        }
-                    );
+                    const event = new MapMouseEvent('contextmenu', e.target, e.originalEvent, {
+                        features: features,
+                    });
                     listener.contextmenus.forEach((l) => l(event));
                 } else if (type === 'mousedown' && listener.mousedowns.length > 0) {
-                    const event = new maplibregl.MapMouseEvent(
-                        'mousedown',
-                        e.target,
-                        e.originalEvent,
-                        {
-                            features: features,
-                        }
-                    );
+                    const event = new MapMouseEvent('mousedown', e.target, e.originalEvent, {
+                        features: features,
+                    });
                     listener.mousedowns.forEach((l) => l(event));
                 }
             }
         });
     }
 
-    private _handleTouchStart(e: maplibregl.MapTouchEvent) {
+    private _handleTouchStart(e: MapTouchEvent) {
         const featuresByLayer = this._getRenderedFeaturesByLayer(e);
         Object.keys(this._listeners).forEach((layerId) => {
             const features = featuresByLayer[layerId] || [];
             const listener = this._listeners[layerId];
             if (features.length > 0) {
-                const event: maplibregl.MapLayerTouchEvent = new maplibregl.MapTouchEvent(
+                const event: MapLayerTouchEvent = new MapTouchEvent(
                     'touchstart',
                     e.target,
                     e.originalEvent
@@ -234,18 +224,15 @@ export class MapLayerEventManager {
         });
     }
 
-    private _getBounds(point: maplibregl.Point) {
+    private _getBounds(point: Point) {
         const delta = 30;
-        return new maplibregl.LngLatBounds(
+        return new LngLatBounds(
             this._map.unproject([point.x - delta, point.y + delta]),
             this._map.unproject([point.x + delta, point.y - delta])
         );
     }
 
-    private _filterLayersIntersectingBounds(
-        layerIds: string[],
-        bounds: maplibregl.LngLatBounds
-    ): string[] {
+    private _filterLayersIntersectingBounds(layerIds: string[], bounds: LngLatBounds): string[] {
         let result = layerIds.filter((layerId) => {
             if (!this._map.getLayer(layerId)) return false;
             const fileId = layerId.replace('-waypoints', '');
@@ -261,7 +248,7 @@ export class MapLayerEventManager {
         return result;
     }
 
-    private _getRenderedFeaturesByLayer(e: maplibregl.MapMouseEvent | maplibregl.MapTouchEvent) {
+    private _getRenderedFeaturesByLayer(e: MapMouseEvent | MapTouchEvent) {
         const layerIds = this._filterLayersIntersectingBounds(
             Object.keys(this._listeners),
             this._getBounds(e.point)
@@ -270,7 +257,7 @@ export class MapLayerEventManager {
             layerIds.length > 0
                 ? this._map.queryRenderedFeatures(e.point, { layers: layerIds })
                 : [];
-        const featuresByLayer: Record<string, maplibregl.MapGeoJSONFeature[]> = {};
+        const featuresByLayer: Record<string, MapGeoJSONFeature[]> = {};
         features.forEach((f) => {
             if (!featuresByLayer[f.layer.id]) {
                 featuresByLayer[f.layer.id] = [];

website/src/lib/components/map/map-popup.ts

@@ -1,5 +1,5 @@
 import { TrackPoint, Waypoint } from 'gpx';
-import maplibregl from 'maplibre-gl';
+import { LngLat, Map, MapMouseEvent, Popup, type PopupOptions } from 'maplibre-gl';
 import { mount, tick, unmount } from 'svelte';
 import { get, writable, type Writable } from 'svelte/store';
 import MapPopupComponent from '$lib/components/map/MapPopup.svelte';
@@ -11,15 +11,15 @@ export type PopupItem<T = Waypoint | TrackPoint | any> = {
 };
 
 export class MapPopup {
-    map: maplibregl.Map;
-    popup: maplibregl.Popup;
+    map: Map;
+    popup: Popup;
     item: Writable<PopupItem | null> = writable(null);
     component: ReturnType<typeof mount>;
     maybeHideBinded = this.maybeHide.bind(this);
 
-    constructor(map: maplibregl.Map, options?: maplibregl.PopupOptions) {
+    constructor(map: Map, options?: PopupOptions) {
         this.map = map;
-        this.popup = new maplibregl.Popup(options);
+        this.popup = new Popup(options);
         this.component = mount(MapPopupComponent, {
             target: document.body,
             props: {
@@ -51,7 +51,7 @@ export class MapPopup {
         this.map.on('mousemove', this.maybeHideBinded);
     }
 
-    maybeHide(e: maplibregl.MapMouseEvent) {
+    maybeHide(e: MapMouseEvent) {
         const item = get(this.item);
         if (item === null) {
             this.hide();
@@ -75,10 +75,10 @@ export class MapPopup {
     getCoordinates() {
         const item = get(this.item);
         if (item === null) {
-            return new maplibregl.LngLat(0, 0);
+            return new LngLat(0, 0);
         }
         return item.item instanceof Waypoint || item.item instanceof TrackPoint
             ? item.item.getCoordinates()
-            : new maplibregl.LngLat(item.item.lon, item.item.lat);
+            : new LngLat(item.item.lon, item.item.lat);
     }
 }

website/src/lib/components/map/map.ts

@@ -1,5 +1,6 @@
-import maplibregl from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
+import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
 import MaplibreGeocoder, {
     type MaplibreGeocoderFeatureResults,
 } from '@maplibre/maplibre-gl-geocoder';
@@ -39,6 +40,7 @@ export class MapLibreGLMap {
         geocoder: boolean,
         geolocate: boolean
     ) {
+        maplibregl.setWorkerUrl(workerUrl);
         this._maptilerKey = maptilerKey;
         this._styleManager = new StyleManager(this._mapStore, this._maptilerKey);
         const map = new maplibregl.Map({

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 &&

website/src/lib/components/map/style.ts

@@ -9,11 +9,17 @@ import {
 } from '$lib/assets/layers';
 import { getLayers } from '$lib/components/map/layer-control/utils';
 import { i18n } from '$lib/i18n.svelte';
+import type {
+    Map,
+    GeoJSONSourceSpecification,
+    LayerSpecification,
+    StyleSpecification,
+} from 'maplibre-gl';
 
 const { currentBasemap, currentOverlays, customLayers, opacities, terrainSource, distanceUnits } =
     settings;
 
-const emptySource: maplibregl.GeoJSONSourceSpecification = {
+const emptySource: GeoJSONSourceSpecification = {
     type: 'geojson',
     data: {
         type: 'FeatureCollection',
@@ -32,18 +38,18 @@ export const ANCHOR_LAYER_KEY = {
     waypoints: 'waypoints-end',
     routingControls: 'routing-controls-end',
 };
-const anchorLayers: maplibregl.LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
+const anchorLayers: LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
     id: id,
     type: 'symbol',
     source: 'empty-source',
 }));
 
 export class StyleManager {
-    private _map: Writable<maplibregl.Map | null>;
+    private _map: Writable<Map | null>;
     private _maptilerKey: string;
     private _pastOverlays: Set<string> = new Set();
 
-    constructor(map: Writable<maplibregl.Map | null>, maptilerKey: string) {
+    constructor(map: Writable<Map | null>, maptilerKey: string) {
         this._map = map;
         this._maptilerKey = maptilerKey;
         this._map.subscribe((map_) => {
@@ -58,6 +64,7 @@ export class StyleManager {
         opacities.subscribe(() => this.updateOverlays());
         terrainSource.subscribe(() => this.updateTerrain());
         customLayers.subscribe(() => this.updateBasemap());
+        i18n.subscribe(() => this.updateBasemap());
         distanceUnits.subscribe(() => {
             const map = get(this._map);
             if (map && (map.getLayer('contours_m') || map.getLayer('contours_ft'))) {
@@ -75,10 +82,10 @@ export class StyleManager {
         });
     }
 
-    async buildStyle(basemap: string): Promise<maplibregl.StyleSpecification> {
+    async buildStyle(basemap: string): Promise<StyleSpecification> {
         const custom = get(customLayers);
 
-        const style: maplibregl.StyleSpecification = {
+        const style: StyleSpecification = {
             version: 8,
             projection: {
                 type: 'globe',
@@ -91,7 +98,7 @@ export class StyleManager {
 
         const basemapInfo = basemaps[basemap] ?? custom[basemap]?.value ?? basemaps[defaultBasemap];
 
-        let basemapStyle = basemaps.openStreetMap as maplibregl.StyleSpecification;
+        let basemapStyle = basemaps.openStreetMap as StyleSpecification;
         try {
             basemapStyle = await this.get(basemapInfo);
             for (const source in basemapStyle.sources) {
@@ -202,9 +209,7 @@ export class StyleManager {
         }
     }
 
-    async get(
-        styleInfo: maplibregl.StyleSpecification | string
-    ): Promise<maplibregl.StyleSpecification> {
+    async get(styleInfo: StyleSpecification | string): Promise<StyleSpecification> {
         if (typeof styleInfo === 'string') {
             let styleUrl = styleInfo as string;
             const response = await fetch(styleUrl, { cache: 'force-cache' });
@@ -218,7 +223,7 @@ export class StyleManager {
         }
     }
 
-    merge(style: maplibregl.StyleSpecification, other: maplibregl.StyleSpecification) {
+    merge(style: StyleSpecification, other: StyleSpecification) {
         style.sources = { ...style.sources, ...other.sources };
         const units = get(distanceUnits);
         for (let layer of other.layers ?? []) {

website/src/lib/components/toolbar/ToolbarItemMenu.svelte

@@ -11,7 +11,7 @@
     import Clean from '$lib/components/toolbar/tools/Clean.svelte';
     import Reduce from '$lib/components/toolbar/tools/reduce/Reduce.svelte';
     import RoutingControlPopup from '$lib/components/toolbar/tools/routing/RoutingControlPopup.svelte';
-    import maplibregl from 'maplibre-gl';
+    import { Popup } from 'maplibre-gl';
     import { settings } from '$lib/logic/settings';
 
     let {
@@ -23,11 +23,11 @@
     const { minimizeRoutingMenu } = settings;
 
     let popupElement: HTMLDivElement | undefined = $state(undefined);
-    let popup: maplibregl.Popup | undefined = $derived.by(() => {
+    let popup: Popup | undefined = $derived.by(() => {
         if (!popupElement) {
             return undefined;
         }
-        let popup = new maplibregl.Popup({
+        let popup = new Popup({
             closeButton: false,
             maxWidth: undefined,
         });

website/src/lib/components/toolbar/tools/Clean.svelte

@@ -16,7 +16,7 @@
     import { getURLForLanguage } from '$lib/utils';
     import { Trash2 } from '@lucide/svelte';
     import { map } from '$lib/components/map/map';
-    import type { GeoJSONSource } from 'maplibre-gl';
+    import type { GeoJSONSource, LngLat } from 'maplibre-gl';
     import { selection } from '$lib/logic/selection';
     import { fileActions } from '$lib/logic/file-actions';
     import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
@@ -29,7 +29,7 @@
     let cleanType = $state(CleanType.INSIDE);
     let deleteTrackpoints = $state(true);
     let deleteWaypoints = $state(true);
-    let rectangleCoordinates: maplibregl.LngLat[] = $state([]);
+    let rectangleCoordinates: LngLat[] = $state([]);
 
     $effect(() => {
         if ($map) {

website/src/lib/components/toolbar/tools/routing/Routing.svelte

@@ -41,6 +41,7 @@
     import { fileActions, getFileIds, newGPXFile } from '$lib/logic/file-actions';
     import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
     import { RoutingControls, routingControls } from './routing-controls';
+    import type { Popup } from 'maplibre-gl';
 
     let {
         minimized = $bindable(false),
@@ -51,7 +52,7 @@
     }: {
         minimized?: boolean;
         minimizable?: boolean;
-        popup?: maplibregl.Popup;
+        popup?: Popup;
         popupElement?: HTMLDivElement;
         class?: string;
     } = $props();

website/src/lib/components/toolbar/tools/routing/routing-controls.ts

@@ -1,10 +1,12 @@
 import { distance, type Coordinates, TrackPoint, TrackSegment, Track, projectedPoint } from 'gpx';
 import { get, writable, type Readable } from 'svelte/store';
-import maplibregl, {
+import {
     type MapMouseEvent,
     type GeoJSONSource,
     type MapLayerMouseEvent,
     type MapLayerTouchEvent,
+    Popup,
+    Point,
 } from 'maplibre-gl';
 import { route } from './routing';
 import { toast } from 'svelte-sonner';
@@ -50,7 +52,7 @@ export class RoutingControls {
         }
     > = new Map();
     anchors: GeoJSON.Feature<GeoJSON.Point, AnchorProperties>[] = [];
-    popup: maplibregl.Popup;
+    popup: Popup;
     popupElement: HTMLElement;
     fileUnsubscribe: () => void = () => {};
     unsubscribes: Function[] = [];
@@ -61,7 +63,7 @@ export class RoutingControls {
 
     draggedAnchorIndex: number | null = null;
     lastDraggedAnchorEventTime: number = 0;
-    draggingStartingPosition: maplibregl.Point = new maplibregl.Point(0, 0);
+    draggingStartingPosition: Point = new Point(0, 0);
     onMouseEnterBinded: () => void = this.onMouseEnter.bind(this);
     onMouseLeaveBinded: () => void = this.onMouseLeave.bind(this);
     onClickBinded: (e: MapLayerMouseEvent) => void = this.onClick.bind(this);
@@ -80,7 +82,7 @@ export class RoutingControls {
     constructor(
         fileId: string,
         file: Readable<GPXFileWithStatistics | undefined>,
-        popup: maplibregl.Popup,
+        popup: Popup,
         popupElement: HTMLElement
     ) {
         this.fileId = fileId;
@@ -183,7 +185,7 @@ export class RoutingControls {
 
         this.layers.forEach((layer, zoom) => {
             try {
-                let source = map_.getSource(layer.id) as maplibregl.GeoJSONSource | undefined;
+                let source = map_.getSource(layer.id) as GeoJSONSource | undefined;
                 if (source) {
                     source.setData({
                         type: 'FeatureCollection',
@@ -520,7 +522,7 @@ export class RoutingControls {
         });
     }
 
-    async appendAnchor(e: maplibregl.MapMouseEvent) {
+    async appendAnchor(e: MapMouseEvent) {
         // Add a new anchor to the end of the last segment
         if (get(streetViewEnabled) && get(streetViewSource) === 'google') {
             return;
@@ -609,7 +611,7 @@ export class RoutingControls {
         await this.routeBetweenAnchors([lastAnchor, newAnchor], [lastAnchorPoint, newAnchorPoint]);
     }
 
-    addIntermediateAnchor(e: maplibregl.MapMouseEvent) {
+    addIntermediateAnchor(e: MapMouseEvent) {
         e.preventDefault();
 
         if (this.temporaryAnchor !== null) {

website/src/lib/components/toolbar/tools/scissors/split-controls.ts

@@ -8,13 +8,13 @@ import { get } from 'svelte/store';
 import { fileStateCollection } from '$lib/logic/file-state';
 import { fileActions } from '$lib/logic/file-actions';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
-import type { GeoJSONSource } from 'maplibre-gl';
+import type { Map, GeoJSONSource, MapLayerMouseEvent } from 'maplibre-gl';
 import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
 import type { MapLayerEventManager } from '$lib/components/map/map-layer-event-manager';
 import { loadSVGIcon } from '$lib/utils';
 
 export class SplitControls {
-    map: maplibregl.Map;
+    map: Map;
     layerEventManager: MapLayerEventManager;
     unsubscribes: Function[] = [];
 
@@ -22,7 +22,7 @@ export class SplitControls {
     layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
     layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
 
-    constructor(map: maplibregl.Map, layerEventManager: MapLayerEventManager) {
+    constructor(map: Map, layerEventManager: MapLayerEventManager) {
         this.map = map;
         this.layerEventManager = layerEventManager;
         loadSVGIcon(
@@ -160,7 +160,7 @@ export class SplitControls {
         mapCursor.notify(MapCursorState.SPLIT_CONTROL, false);
     }
 
-    layerOnClick(e: maplibregl.MapLayerMouseEvent) {
+    layerOnClick(e: MapLayerMouseEvent) {
         let coordinates = (e.features![0].geometry as GeoJSON.Point).coordinates;
         fileActions.split(
             get(splitAs),

website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte

@@ -16,7 +16,7 @@
     import { fileActions } from '$lib/logic/file-actions';
     import { map } from '$lib/components/map/map';
     import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
-    import maplibregl from 'maplibre-gl';
+    import { Marker } from 'maplibre-gl';
     import { getSvgForSymbol } from '$lib/components/map/gpx-layer/gpx-layer';
 
     let props: {
@@ -41,7 +41,7 @@
         })
     );
 
-    let marker: maplibregl.Marker | null = null;
+    let marker: Marker | null = null;
 
     function reset() {
         if ($selectedWaypoint) {
@@ -125,7 +125,7 @@
                     let element = document.createElement('div');
                     element.classList.add('w-8', 'h-8');
                     element.innerHTML = getSvgForSymbol(symbolKey);
-                    marker = new maplibregl.Marker({
+                    marker = new Marker({
                         element,
                         anchor: 'bottom',
                     })

website/src/lib/docs/de/menu/view.mdx

@@ -50,5 +50,5 @@ Um die Ausrichtung und Neigung der Karte zu steuern, können Sie die Karte auch
 
 ### <Maximize2 size="16" class="inline-block" style="margin-bottom: 2px" /> Full screen
 
-Enter or exit full screen mode.
-You can also press <kbd>F11</kbd> to toggle, or <kbd>Escape</kbd> to exit.
+Vollbildmodus ein- oder ausschalten.
+Du kannst auch <kbd>F11</kbd> drücken, um zu wechseln, oder <kbd>Escape</kbd> zum Beenden.

website/src/lib/i18n.svelte.ts

@@ -1,3 +1,5 @@
+import { writable } from 'svelte/store';
+
 type Dictionary = {
     [key: string]: string | Dictionary;
 };
@@ -10,6 +12,7 @@ function getDateFormatter(locale: string) {
 }
 
 class Locale {
+    private _store = writable(this);
     private _lang = $state('');
     private _isLoadingInitial = $state(true);
     private _isLoading = $state(true);
@@ -38,6 +41,7 @@ class Locale {
             }
             import(`../locales/${this._lang}.json`).then((module) => {
                 this.dictionary = module.default;
+                this._store.set(this);
                 if (this._isLoadingInitial) {
                     this._isLoadingInitial = false;
                 }
@@ -67,6 +71,10 @@ class Locale {
     public get df() {
         return this._df;
     }
+
+    public subscribe(run: (value: Locale) => void, invalidate?: (value?: Locale) => void) {
+        return this._store.subscribe(run, invalidate);
+    }
 }
 
 export const i18n = new Locale();

website/src/lib/languages.ts

@@ -10,5 +10,6 @@ export const languages: Record<string, string> = {
     nl: 'Nederlands',
     'pt-BR': 'Português (Brasil)',
     tr: 'Türkçe',
+    uk: 'Українська',
     zh: '简体中文',
 };

website/src/lib/logic/bounds.ts

@@ -1,6 +1,6 @@
 import { get } from 'svelte/store';
 import { selection } from '$lib/logic/selection';
-import maplibregl from 'maplibre-gl';
+import { LngLatBounds } from 'maplibre-gl';
 import { ListFileItem, ListWaypointItem } from '$lib/components/file-list/file-list';
 import { fileStateCollection, GPXFileStateCollectionObserver } from '$lib/logic/file-state';
 import { gpxStatistics } from '$lib/logic/statistics';
@@ -10,7 +10,7 @@ import type { Coordinates } from 'gpx';
 import { page } from '$app/state';
 
 export class BoundsManager {
-    private _bounds: maplibregl.LngLatBounds = new maplibregl.LngLatBounds();
+    private _bounds: LngLatBounds = new LngLatBounds();
     private _files: Set<string> = new Set();
     private _fileStateCollectionObserver: GPXFileStateCollectionObserver | null = null;
     private _unsubscribes: (() => void)[] = [];
@@ -87,12 +87,12 @@ export class BoundsManager {
         }
         this._unsubscribes.forEach((unsubscribe) => unsubscribe());
         this._unsubscribes = [];
-        this._bounds = new maplibregl.LngLatBounds([180, 90, -180, -90]);
+        this._bounds = new LngLatBounds([180, 90, -180, -90]);
     }
 
     centerMapOnSelection() {
         let selected = get(selection).getSelected();
-        let bounds = new maplibregl.LngLatBounds();
+        let bounds = new LngLatBounds();
 
         if (selected.find((item) => item instanceof ListWaypointItem)) {
             selection.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {

website/src/lib/logic/statistics-tree.ts

@@ -1,16 +1,16 @@
 import { ListItem, ListLevel } from '$lib/components/file-list/file-list';
 import { GPXFile, GPXStatistics, GPXStatisticsGroup, type Track } from 'gpx';
-import maplibregl from 'maplibre-gl';
+import { LngLatBounds } from 'maplibre-gl';
 
 export class GPXStatisticsTree {
     level: ListLevel;
     statistics: {
         [key: string]: GPXStatisticsTree | GPXStatistics;
     } = {};
-    wptBounds: maplibregl.LngLatBounds;
+    wptBounds: LngLatBounds;
 
     constructor(element: GPXFile | Track) {
-        this.wptBounds = new maplibregl.LngLatBounds();
+        this.wptBounds = new LngLatBounds();
         if (element instanceof GPXFile) {
             this.level = ListLevel.FILE;
             element.children.forEach((child, index) => {
@@ -49,11 +49,11 @@ export class GPXStatisticsTree {
         return statistics;
     }
 
-    intersectsBBox(bounds: maplibregl.LngLatBounds): boolean {
+    intersectsBBox(bounds: LngLatBounds): boolean {
         for (let key in this.statistics) {
             const stats = this.statistics[key];
             if (stats instanceof GPXStatistics) {
-                const bbox = new maplibregl.LngLatBounds(
+                const bbox = new LngLatBounds(
                     stats.global.bounds.southWest,
                     stats.global.bounds.northEast
                 );
@@ -67,7 +67,7 @@ export class GPXStatisticsTree {
         return false;
     }
 
-    intersectsWaypointBBox(bounds: maplibregl.LngLatBounds): boolean {
+    intersectsWaypointBBox(bounds: LngLatBounds): boolean {
         return !this.wptBounds.isEmpty() && this.wptBounds.intersects(bounds);
     }
 }

website/src/lib/utils.ts

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import { base } from '$app/paths';
 import { languages } from '$lib/languages';
 import { TrackPoint, Waypoint, type Coordinates, crossarcDistance, distance, GPXFile } from 'gpx';
-import maplibregl from 'maplibre-gl';
+import { Map as MapLibreMap, LngLatBounds } from 'maplibre-gl';
 import { pointToTile, pointToTileFraction } from '@mapbox/tilebelt';
 import type { GPXStatisticsTree } from '$lib/logic/statistics-tree';
 import { ListTrackSegmentItem } from '$lib/components/file-list/file-list';
@@ -58,7 +58,7 @@ export function getClosestTrackSegments(
         let segmentBounds = segmentStatistics.global.bounds;
         let northEast = segmentBounds.northEast;
         let southWest = segmentBounds.southWest;
-        let bounds = new maplibregl.LngLatBounds(southWest, northEast);
+        let bounds = new LngLatBounds(southWest, northEast);
         if (bounds.contains(point)) {
             segmentBoundsDistances.push([0, trackIndex, segmentIndex]);
         } else {
@@ -106,7 +106,7 @@ export function getElevation(
     let coordinates = points.map((point) =>
         point instanceof TrackPoint || point instanceof Waypoint ? point.getCoordinates() : point
     );
-    let bbox = new maplibregl.LngLatBounds();
+    let bbox = new LngLatBounds();
     coordinates.forEach((coord) => bbox.extend(coord));
 
     let tiles = coordinates.map((coord) => pointToTile(coord.lon, coord.lat, ELEVATION_ZOOM));
@@ -193,7 +193,7 @@ export function getElevation(
     );
 }
 
-export function loadSVGIcon(map: maplibregl.Map, id: string, svg: string, size: number = 100) {
+export function loadSVGIcon(map: MapLibreMap, id: string, svg: string, size: number = 100) {
     if (!map.hasImage(id)) {
         let icon = new Image(size, size);
         icon.onload = () => {

website/src/locales/de.json

@@ -36,7 +36,7 @@
         "switch_basemap": "Zur vorherigen Basemap wechseln",
         "toggle_overlays": "Overlay umschalten",
         "toggle_3d": "3D umschalten",
-        "fullscreen": "Full screen",
+        "fullscreen": "Vollbildmodus",
         "settings": "Einstellungen",
         "distance_units": "Entfernungseinheiten",
         "metric": "Metrisch",
@@ -235,7 +235,7 @@
         },
         "elevation": {
             "button": "Höhendaten anfragen",
-            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapterhorn.",
+            "help": "Das Anfordern von Höhendaten löscht die vorhandenen Höhendaten, falls vorhanden, und ersetzt diese durch Daten von Mapterhorn.",
             "help_no_selection": "Wählen Sie ein Datei-Element, um Höhendaten anzufordern."
         },
         "waypoint": {
@@ -305,7 +305,7 @@
             "united_kingdom": "Großbritannien",
             "united_states": "USA",
             "libertyTopo": "Liberty Topo",
-            "libertySatellite": "Liberty Satellite",
+            "libertySatellite": "Liberty Satellit",
             "osm": "OpenMapTiles OSM",
             "osmTopo": "OpenMapTiles OSM Topo",
             "esriSatellite": "Esri Satellite",

website/src/locales/eu.json

@@ -36,7 +36,7 @@
         "switch_basemap": "Aldatu aurreko mapa erabiltzera",
         "toggle_overlays": "Txandakatu geruzak",
         "toggle_3d": "Txandakatu 3D",
-        "fullscreen": "Full screen",
+        "fullscreen": "Pantaila osoa",
         "settings": "Ezarpenak",
         "distance_units": "Distantzia unitateak",
         "metric": "Metrikoa",
@@ -64,7 +64,7 @@
         "ctrl": "Ctrl",
         "click": "Klik",
         "drag": "Arrastatu",
-        "right_click_drag": "Right-click drag",
+        "right_click_drag": "Eskuin klik eta errestan eraman",
         "metadata": {
             "button": "Informazioa...",
             "name": "Izena",
@@ -192,8 +192,8 @@
                 "from": "Hasiera puntua errepide hurbilenetik oso hurrun dago",
                 "via": "Puntua errepide hurbilenetik oso hurrun dago",
                 "to": "Bukaera puntua errepide hurbilenetik oso hurrun dago",
-                "distance": "The end point is too far from the start point",
-                "connection": "No connection found between the points",
+                "distance": "Bukaera-puntua hasiera-puntutik urrutiegi dago",
+                "connection": "Ez da konexiorik topatu puntuen artean",
                 "timeout": "Ibilbidea kalkulatzea luzeegi joan da, saiatu hurbilago dauden puntuak gehitzen"
             }
         },
@@ -235,7 +235,7 @@
         },
         "elevation": {
             "button": "Eskatu altueraren datuak",
-            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapterhorn.",
+            "help": "Kota-datuak eskatzeak lehendik dauden kota-datuak ezabatuko ditu, halakorik balego, eta Mapterhorn-eko datuekin ordezkatuko dira.",
             "help_no_selection": "Aukeratu fitxategi bat altuera datuak eskatzeko."
         },
         "waypoint": {
@@ -277,7 +277,7 @@
             "new": "Geruza pertsonalizatu berria",
             "edit": "Editatu geruza pertsonalizatua",
             "urls": "URLa(k)",
-            "url_placeholder": "WMTS, WMS or MapLibre style JSON",
+            "url_placeholder": "WMTS, WMS edo MapLibre estiloko JSON",
             "max_zoom": "Zoom max",
             "layer_type": "Geruza mota",
             "basemap": "Oinarrizko-mapa",
@@ -305,7 +305,7 @@
             "united_kingdom": "Erresuma Batua",
             "united_states": "Ameriketako Estatu Batuak",
             "libertyTopo": "Liberty Topo",
-            "libertySatellite": "Liberty Satellite",
+            "libertySatellite": "Liberty Satelitea",
             "osm": "OpenMapTiles OSM",
             "osmTopo": "OpenMapTiles OSM Topo",
             "esriSatellite": "Esri Satellite",
@@ -494,7 +494,7 @@
         "email": "Eposta",
         "contribute": "Lagundu",
         "supported_by": "hauek lagunduta",
-        "features": "Features",
+        "features": "Funtzioak",
         "route_planning": "Bideak planifikatzea",
         "route_planning_description": "OpenStreetMapen datuetan oinarritutako interfaze erabilterraza kirol bakoitzerako ibilbideak sortzeko.",
         "file_processing": "Fitxategien prozesaketa aurreratua",
@@ -503,15 +503,15 @@
         "maps_description": "Oinarrizko mapa, geruza eta interes-puntuen bilduma zabala. Zure aire-libreko ekintzak planifikatzen lagunduko dizu!",
         "data_visualization": "Datuak bistaratzea",
         "data_visualization_description": "Grabatutako ekintzak edo etorkizuneko zure bideak aztertzeko altuera-profil interaktiboa.",
-        "philosophy": "Philosophy",
-        "foss": "Free, ad-free and open source",
-        "foss_description": "The website is free to use, without ads, and the source code is publicly available on GitHub.",
-        "privacy": "Privacy-friendly",
-        "privacy_description": "Your GPX files never leave your browser. No tracking, no data collection.",
-        "community": "Made possible by the community",
-        "community_description": "gpx.studio has an amazing community that has covered its costs through donations for years, while shaping the project through feature suggestions, bug reports, and translations into many languages.",
-        "support_button": "Support gpx.studio on Open Collective",
-        "translate_button": "Help translate the website on Crowdin"
+        "philosophy": "Filosofia",
+        "foss": "Doakoa, propagandarik gabe eta kode irekikoa",
+        "foss_description": "Webgunea doakoa da, iragarkirik gabe, eta iturburu-kodea publikoki eskuragarri dago GitHub-en.",
+        "privacy": "Pribatutasuna zaintzen du",
+        "privacy_description": "Zure GPX fitxategiak ez dira inoiz zure nabigatzailetik irteten. Ez dago jarraipenik, ez datu-bilketarik.",
+        "community": "Komunitateak posible egin du",
+        "community_description": "gpx.studio-k komunitate harrigarri bat du, urte luzez dohaintzen bidez bere kostuak estali dituena, proiektuaren ezaugarri-iradokizunen, akatsen txostenen eta hizkuntza askotarako itzulpenen bidez moldatu dena.",
+        "support_button": "Lagundu gpx.studio Open Collectiveren bidez",
+        "translate_button": "Lagundu webgunea itzultzen Crowdin-en"
     },
     "docs": {
         "translate": "Lagundu itzulpenarekin Crowdinen",
@@ -536,7 +536,7 @@
     },
     "embedding": {
         "title": "Sortu zure mapa",
-        "maptiler_key": "MapTiler key (optional, only required for MapTiler maps)",
+        "maptiler_key": "MapTiler gakoa (aukeran, bakarrik behar da MapTiler mapetan)",
         "file_urls": "Fitxategien URLak (komarekin banatuta)",
         "drive_ids": "Google Drive fitxategien IDak (komarekin banatuta)",
         "basemap": "Oinarrizko-mapa",