New translations file.mdx (Ukrainian)

.github/workflows/deploy.yml

@@ -31,7 +31,7 @@ jobs:
             - name: Create env file
               run: |
                   touch website/.env
-                  echo PUBLIC_MAPTILER_KEY=${{ secrets.PUBLIC_MAPTILER_KEY }} >> website/.env
+                  echo PUBLIC_MAPBOX_TOKEN=${{ secrets.PUBLIC_MAPBOX_TOKEN }} >> website/.env
                   cat website/.env
 
             - name: Build website

README.md

@@ -27,8 +27,8 @@ Any help is greatly appreciated!
 
 The code is split into two parts:
 
-- `gpx`: a Typescript library for parsing and manipulating GPX files,
-- `website`: the website itself, which is a [SvelteKit](https://kit.svelte.dev/) application.
+-   `gpx`: a Typescript library for parsing and manipulating GPX files,
+-   `website`: the website itself, which is a [SvelteKit](https://kit.svelte.dev/) application.
 
 You will need [Node.js](https://nodejs.org/) to build and run these two parts.
 
@@ -42,11 +42,11 @@ npm run build
 
 ### Running the website
 
-To be able to load the map, you will need to create your own <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> and store it in a `.env` file in the `website` directory.
+To be able to load the map, you will need to create your own <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> and store it in a `.env` file in the `website` directory.
 
 ```bash
 cd website
-echo PUBLIC_MAPTILER_KEY={YOUR_MAPTILER_KEY} >> .env
+echo PUBLIC_MAPBOX_TOKEN={YOUR_MAPBOX_TOKEN} >> .env
 npm install
 npm run dev
 ```
@@ -55,25 +55,25 @@ npm run dev
 
 This project has been made possible thanks to the following open source projects:
 
-- Development:
-    - [Svelte](https://github.com/sveltejs/svelte) and [SvelteKit](https://github.com/sveltejs/kit) — seamless development experience
-    - [MDsveX](https://github.com/pngwn/MDsveX) — allowing a Markdown-based documentation
-- Design:
-    - [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) — beautiful components
-    - [@lucide/svelte](https://github.com/lucide-icons/lucide/tree/main/packages/svelte) — beautiful icons
-    - [tailwindcss](https://github.com/tailwindlabs/tailwindcss) — easy styling
-    - [Chart.js](https://github.com/chartjs/Chart.js) — beautiful and fast charts
-- Logic:
-    - [immer](https://github.com/immerjs/immer) — complex state management
-    - [Dexie.js](https://github.com/dexie/Dexie.js) — IndexedDB wrapper
-    - [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser) — fast GPX file parsing
-    - [SortableJS](https://github.com/SortableJS/Sortable) — creating a sortable file tree
-- Mapping:
-    - [MapLibre GL JS](https://github.com/maplibre/maplibre-gl-js) — beautiful and fast interactive maps
-    - [brouter](https://github.com/abrensch/brouter) — routing engine
-    - [OpenStreetMap](https://www.openstreetmap.org) — map data used by most of the map layers, and by the routing engine
-- Search:
-    - [DocSearch](https://github.com/algolia/docsearch) — search engine for the documentation
+-   Development:
+    -   [Svelte](https://github.com/sveltejs/svelte) and [SvelteKit](https://github.com/sveltejs/kit) — seamless development experience
+    -   [MDsveX](https://github.com/pngwn/MDsveX) — allowing a Markdown-based documentation
+-   Design:
+    -   [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) — beautiful components
+    -   [@lucide/svelte](https://github.com/lucide-icons/lucide/tree/main/packages/svelte) — beautiful icons
+    -   [tailwindcss](https://github.com/tailwindlabs/tailwindcss) — easy styling
+    -   [Chart.js](https://github.com/chartjs/Chart.js) — beautiful and fast charts
+-   Logic:
+    -   [immer](https://github.com/immerjs/immer) — complex state management
+    -   [Dexie.js](https://github.com/dexie/Dexie.js) — IndexedDB wrapper
+    -   [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser) — fast GPX file parsing
+    -   [SortableJS](https://github.com/SortableJS/Sortable) — creating a sortable file tree
+-   Mapping:
+    -   [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) — beautiful and fast interactive maps
+    -   [brouter](https://github.com/abrensch/brouter) — routing engine
+    -   [OpenStreetMap](https://www.openstreetmap.org) — map data used by Mapbox and brouter
+-   Search:
+    -   [DocSearch](https://github.com/algolia/docsearch) — search engine for the documentation
 
 ## License
 

website/.env.example

@@ -1 +1 @@
-PUBLIC_MAPTILER_KEY=YOUR_MAPTILER_KEY
+PUBLIC_MAPBOX_TOKEN=YOUR_MAPBOX_TOKEN

website/package.json

@@ -23,9 +23,10 @@
         "@types/eslint": "^9.6.1",
         "@types/events": "^3.0.3",
         "@types/file-saver": "^2.0.7",
-        "@types/mapbox__sphericalmercator": "^1.2.3",
         "@types/mapbox__tilebelt": "^1.0.4",
+        "@types/mapbox-gl": "^3.4.1",
         "@types/node": "^22.15.30",
+        "@types/png.js": "^0.2.3",
         "@types/sanitize-html": "^2.16.0",
         "@types/sortablejs": "^1.15.8",
         "@typescript-eslint/eslint-plugin": "^8.33.1",
@@ -61,9 +62,10 @@
     "dependencies": {
         "@docsearch/js": "^3.9.0",
         "@internationalized/date": "^3.8.2",
+        "@mapbox/mapbox-gl-geocoder": "^5.0.3",
         "@mapbox/sphericalmercator": "^2.0.1",
         "@mapbox/tilebelt": "^2.0.2",
-        "@maplibre/maplibre-gl-geocoder": "^1.9.4",
+        "@types/mapbox__sphericalmercator": "^1.2.3",
         "chart.js": "^4.5.1",
         "chartjs-plugin-zoom": "^2.2.0",
         "clsx": "^2.1.1",
@@ -72,8 +74,9 @@
         "gpx": "file:../gpx",
         "immer": "^10.1.1",
         "jszip": "^3.10.1",
+        "mapbox-gl": "^3.17.0",
         "mapillary-js": "^4.1.2",
-        "maplibre-gl": "^5.16.0",
+        "png.js": "^0.2.1",
         "sanitize-html": "^2.17.0",
         "sortablejs": "^1.15.6",
         "tailwind-merge": "^3.3.0"

website/src/lib/assets/layers.ts

@@ -22,18 +22,15 @@ import {
     Binoculars,
     Toilet,
 } from 'lucide-static';
-import { type RasterDEMSourceSpecification, type StyleSpecification } from 'maplibre-gl';
+import { type RasterDEMSourceSpecification, type StyleSpecification } from 'mapbox-gl';
 import ignFrTopo from './custom/ign-fr-topo.json';
 import ignFrPlan from './custom/ign-fr-plan.json';
 import ignFrSatellite from './custom/ign-fr-satellite.json';
 import bikerouterGravel from './custom/bikerouter-gravel.json';
 
-export const maptilerKeyPlaceHolder = 'MAPTILER_KEY';
-
 export const basemaps: { [key: string]: string | StyleSpecification } = {
-    maptilerTopo: `https://api.maptiler.com/maps/topo-v4/style.json?key=${maptilerKeyPlaceHolder}`,
-    maptilerOutdoors: `https://api.maptiler.com/maps/outdoor-v4/style.json?key=${maptilerKeyPlaceHolder}`,
-    maptilerSatellite: `https://api.maptiler.com/maps/hybrid-v4/style.json?key=${maptilerKeyPlaceHolder}`,
+    mapboxOutdoors: 'mapbox://styles/mapbox/outdoors-v12',
+    mapboxSatellite: 'mapbox://styles/mapbox/satellite-streets-v12',
     openStreetMap: {
         version: 8,
         sources: {
@@ -776,9 +773,8 @@ export type LayerTreeType = { [key: string]: LayerTreeType | boolean };
 export const basemapTree: LayerTreeType = {
     basemaps: {
         world: {
-            maptilerTopo: true,
-            maptilerOutdoors: true,
-            maptilerSatellite: true,
+            mapboxOutdoors: true,
+            mapboxSatellite: true,
             openStreetMap: true,
             openTopoMap: true,
             openHikingMap: true,
@@ -911,7 +907,7 @@ export const overpassTree: LayerTreeType = {
 };
 
 // Default basemap used
-export const defaultBasemap = 'maptilerTopo';
+export const defaultBasemap = 'mapboxOutdoors';
 
 // Default overlays used (none)
 export const defaultOverlays: LayerTreeType = {
@@ -1000,9 +996,8 @@ export const defaultOverpassQueries: LayerTreeType = {
 export const defaultBasemapTree: LayerTreeType = {
     basemaps: {
         world: {
-            maptilerTopo: true,
-            maptilerOutdoors: true,
-            maptilerSatellite: true,
+            mapboxOutdoors: true,
+            mapboxSatellite: true,
             openStreetMap: true,
             openTopoMap: true,
             openHikingMap: true,
@@ -1141,7 +1136,7 @@ export type CustomLayer = {
     maxZoom: number;
     layerType: 'basemap' | 'overlay';
     resourceType: 'raster' | 'vector';
-    value: string | maplibregl.StyleSpecification;
+    value: string | {};
 };
 
 type OverpassQueryData = {
@@ -1460,9 +1455,11 @@ export const overpassQueryData: Record<string, OverpassQueryData> = {
 };
 
 export const terrainSources: { [key: string]: RasterDEMSourceSpecification } = {
-    'maptiler-dem': {
+    'mapbox-dem': {
         type: 'raster-dem',
-        url: `https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=${maptilerKeyPlaceHolder}`,
+        url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+        tileSize: 512,
+        maxzoom: 14,
     },
     mapterhorn: {
         type: 'raster-dem',
@@ -1470,4 +1467,4 @@ export const terrainSources: { [key: string]: RasterDEMSourceSpecification } = {
     },
 };
 
-export const defaultTerrainSource = 'maptiler-dem';
+export const defaultTerrainSource = 'mapbox-dem';

website/src/lib/components/Logo.svelte

@@ -8,7 +8,7 @@
         ...others
     }: {
         iconOnly?: boolean;
-        company?: 'gpx.studio' | 'maptiler' | 'github' | 'crowdin' | 'facebook' | 'reddit';
+        company?: 'gpx.studio' | 'mapbox' | 'github' | 'crowdin' | 'facebook' | 'reddit';
         [key: string]: any;
     } = $props();
 </script>
@@ -19,10 +19,10 @@
         alt="Logo of gpx.studio."
         {...others}
     />
-{:else if company === 'maptiler'}
+{:else if company === 'mapbox'}
     <img
-        src="{base}/maptiler-logo{mode.current === 'dark' ? '-dark' : ''}.svg"
-        alt="Logo of Maptiler."
+        src="{base}/mapbox-logo-{mode.current === 'dark' ? 'white' : 'black'}.svg"
+        alt="Logo of Mapbox."
         {...others}
     />
 {:else if company === 'github'}

website/src/lib/components/docs/DocsLayers.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import maptilerTopoMap from '$lib/assets/img/home/maptiler-topo.png?enhanced';
+    import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
     import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
 </script>
 
 <div class="relative h-80 aspect-square rounded-2xl shadow-xl overflow-clip">
-    <enhanced:img src={maptilerTopoMap} alt="MapTiler Topo map screenshot." class="absolute" />
+    <enhanced:img src={mapboxOutdoorsMap} alt="Mapbox Outdoors map screenshot." class="absolute" />
     <enhanced:img
         src={waymarkedMap}
         alt="Waymarked Trails map screenshot."

website/src/lib/components/elevation-profile/elevation-profile.ts

@@ -20,7 +20,7 @@ import Chart, {
     type ScriptableLineSegmentContext,
     type TooltipItem,
 } from 'chart.js/auto';
-import maplibregl from 'maplibre-gl';
+import mapboxgl from 'mapbox-gl';
 import { get, type Readable, type Writable } from 'svelte/store';
 import { map } from '$lib/components/map/map';
 import type { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
@@ -50,7 +50,7 @@ export class ElevationProfile {
     private _chart: Chart | null = null;
     private _canvas: HTMLCanvasElement;
     private _overlay: HTMLCanvasElement;
-    private _marker: maplibregl.Marker | null = null;
+    private _marker: mapboxgl.Marker | null = null;
     private _dragging = false;
     private _panning = false;
 
@@ -76,7 +76,7 @@ export class ElevationProfile {
 
         let element = document.createElement('div');
         element.className = 'h-4 w-4 rounded-full bg-cyan-500 border-2 border-white';
-        this._marker = new maplibregl.Marker({
+        this._marker = new mapboxgl.Marker({
             element,
         });
 

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

@@ -22,7 +22,7 @@
         getCleanedEmbeddingOptions,
         getMergedEmbeddingOptions,
     } from './embedding';
-    import { PUBLIC_MAPTILER_KEY } from '$env/static/public';
+    import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
     import Embedding from './Embedding.svelte';
     import { onDestroy } from 'svelte';
     import { base } from '$app/paths';
@@ -32,7 +32,7 @@
     let options = $state(
         getMergedEmbeddingOptions(
             {
-                token: 'YOUR_MAPTILER_KEY',
+                token: 'YOUR_MAPBOX_TOKEN',
                 theme: mode.current,
             },
             defaultEmbeddingOptions
@@ -47,9 +47,9 @@
         getMergedEmbeddingOptions(
             {
                 token:
-                    options.key.length === 0 || options.key === 'YOUR_MAPTILER_KEY'
-                        ? PUBLIC_MAPTILER_KEY
-                        : options.key,
+                    options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
+                        ? PUBLIC_MAPBOX_TOKEN
+                        : options.token,
                 files: files.split(',').filter((url) => url.length > 0),
                 ids: driveIds.split(',').filter((id) => id.length > 0),
                 elevation: {
@@ -102,8 +102,8 @@
     </Card.Header>
     <Card.Content>
         <fieldset class="flex flex-col gap-3">
-            <Label for="key">{i18n._('embedding.maptiler_key')}</Label>
-            <Input id="key" type="text" class="h-8" bind:value={options.key} />
+            <Label for="token">{i18n._('embedding.mapbox_token')}</Label>
+            <Input id="token" type="text" class="h-8" bind:value={options.token} />
             <Label for="file_urls">{i18n._('embedding.file_urls')}</Label>
             <Input id="file_urls" type="text" class="h-8" bind:value={files} />
             <Label for="drive_ids">{i18n._('embedding.drive_ids')}</Label>

website/src/lib/components/embedding/embedding.ts

@@ -1,8 +1,8 @@
-import { PUBLIC_MAPTILER_KEY } from '$env/static/public';
+import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
 import { basemaps } from '$lib/assets/layers';
 
 export type EmbeddingOptions = {
-    key: string;
+    token: string;
     files: string[];
     ids: string[];
     basemap: string;
@@ -26,10 +26,10 @@ export type EmbeddingOptions = {
 };
 
 export const defaultEmbeddingOptions = {
-    key: '',
+    token: '',
     files: [],
     ids: [],
-    basemap: 'maptilerTopo',
+    basemap: 'mapboxOutdoors',
     elevation: {
         show: true,
         height: 170,
@@ -107,7 +107,7 @@ export function getURLForGoogleDriveFile(fileId: string): string {
 
 export function convertOldEmbeddingOptions(options: URLSearchParams): any {
     let newOptions: any = {
-        key: PUBLIC_MAPTILER_KEY,
+        token: PUBLIC_MAPBOX_TOKEN,
         files: [],
         ids: [],
     };
@@ -123,7 +123,7 @@ export function convertOldEmbeddingOptions(options: URLSearchParams): any {
     if (options.has('source')) {
         let basemap = options.get('source')!;
         if (basemap === 'satellite') {
-            newOptions.basemap = 'maptilerSatellite';
+            newOptions.basemap = 'mapboxSatellite';
         } else if (basemap === 'otm') {
             newOptions.basemap = 'openTopoMap';
         } else if (basemap === 'ohm') {

website/src/lib/components/map/Map.svelte

@@ -1,25 +1,30 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
+    import mapboxgl from 'mapbox-gl';
+    import 'mapbox-gl/dist/mapbox-gl.css';
+    import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
     import { Button } from '$lib/components/ui/button';
     import { i18n } from '$lib/i18n.svelte';
+    import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
     import { page } from '$app/state';
     import { map } from '$lib/components/map/map';
-    import { PUBLIC_MAPTILER_KEY } from '$env/static/public';
 
     let {
-        maptilerKey = PUBLIC_MAPTILER_KEY,
+        accessToken = PUBLIC_MAPBOX_TOKEN,
         geolocate = true,
         geocoder = true,
         hash = true,
         class: className = '',
     }: {
-        maptilerKey?: string;
+        accessToken?: string;
         geolocate?: boolean;
         geocoder?: boolean;
         hash?: boolean;
         class?: string;
     } = $props();
 
+    mapboxgl.accessToken = accessToken;
+
     let webgl2Supported = $state(true);
     let embeddedApp = $state(false);
 
@@ -43,7 +48,7 @@
             language = 'en';
         }
 
-        map.init(maptilerKey, language, hash, geocoder, geolocate);
+        map.init(language, hash, geocoder, geolocate);
     });
 
     onDestroy(() => {
@@ -76,21 +81,21 @@
 <style lang="postcss">
     @reference "../../../app.css";
 
-    div :global(.maplibregl-map) {
+    div :global(.mapboxgl-map) {
         @apply font-sans;
     }
 
-    div :global(.maplibregl-ctrl-top-right > .maplibregl-ctrl) {
+    div :global(.mapboxgl-ctrl-top-right > .mapboxgl-ctrl) {
         @apply shadow-md;
         @apply bg-background;
         @apply text-foreground;
     }
 
-    div :global(.maplibregl-ctrl-icon) {
+    div :global(.mapboxgl-ctrl-icon) {
         @apply dark:brightness-[4.7];
     }
 
-    div :global(.maplibregl-ctrl-geocoder) {
+    div :global(.mapboxgl-ctrl-geocoder) {
         @apply flex;
         @apply flex-row;
         @apply w-fit;
@@ -105,27 +110,27 @@
         @apply text-foreground;
     }
 
-    div :global(.maplibregl-ctrl-geocoder .suggestions > li > a) {
+    div :global(.mapboxgl-ctrl-geocoder .suggestions > li > a) {
         @apply text-foreground;
         @apply hover:text-accent-foreground;
         @apply hover:bg-accent;
     }
 
-    div :global(.maplibregl-ctrl-geocoder .suggestions > .active > a) {
+    div :global(.mapboxgl-ctrl-geocoder .suggestions > .active > a) {
         @apply bg-background;
     }
 
-    div :global(.maplibregl-ctrl-geocoder--button) {
+    div :global(.mapboxgl-ctrl-geocoder--button) {
         @apply bg-transparent;
         @apply hover:bg-transparent;
     }
 
-    div :global(.maplibregl-ctrl-geocoder--icon) {
+    div :global(.mapboxgl-ctrl-geocoder--icon) {
         @apply fill-foreground;
         @apply hover:fill-accent-foreground;
     }
 
-    div :global(.maplibregl-ctrl-geocoder--icon-search) {
+    div :global(.mapboxgl-ctrl-geocoder--icon-search) {
         @apply relative;
         @apply top-0;
         @apply left-0;
@@ -133,7 +138,7 @@
         @apply w-[29px];
     }
 
-    div :global(.maplibregl-ctrl-geocoder--input) {
+    div :global(.mapboxgl-ctrl-geocoder--input) {
         @apply relative;
         @apply w-64;
         @apply py-0;
@@ -144,12 +149,12 @@
         @apply text-foreground;
     }
 
-    div :global(.maplibregl-ctrl-geocoder--collapsed .maplibregl-ctrl-geocoder--input) {
+    div :global(.mapboxgl-ctrl-geocoder--collapsed .mapboxgl-ctrl-geocoder--input) {
         @apply w-0;
         @apply p-0;
     }
 
-    div :global(.maplibregl-ctrl-top-right) {
+    div :global(.mapboxgl-ctrl-top-right) {
         @apply z-40;
         @apply flex;
         @apply flex-col;
@@ -158,76 +163,77 @@
         @apply overflow-hidden;
     }
 
-    .horizontal :global(.maplibregl-ctrl-bottom-left) {
+    .horizontal :global(.mapboxgl-ctrl-bottom-left) {
         @apply bottom-[42px];
     }
 
-    .horizontal :global(.maplibregl-ctrl-bottom-right) {
+    .horizontal :global(.mapboxgl-ctrl-bottom-right) {
         @apply bottom-[42px];
     }
 
-    div :global(.maplibregl-ctrl-attrib) {
+    div :global(.mapboxgl-ctrl-attrib) {
         @apply dark:bg-transparent;
     }
 
-    div :global(.maplibregl-compact-show.maplibregl-ctrl-attrib) {
+    div :global(.mapboxgl-compact-show.mapboxgl-ctrl-attrib) {
         @apply dark:bg-background;
     }
 
-    div :global(.maplibregl-ctrl-attrib-button) {
+    div :global(.mapboxgl-ctrl-attrib-button) {
         @apply dark:bg-foreground;
     }
 
-    div :global(.maplibregl-compact-show .maplibregl-ctrl-attrib-button) {
+    div :global(.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button) {
         @apply dark:bg-foreground;
     }
 
-    div :global(.maplibregl-ctrl-attrib a) {
+    div :global(.mapboxgl-ctrl-attrib a) {
         @apply text-foreground;
     }
 
-    div :global(.maplibregl-popup) {
+    div :global(.mapboxgl-popup) {
+        @apply w-fit;
         @apply z-50;
     }
 
-    div :global(.maplibregl-popup-content) {
+    div :global(.mapboxgl-popup-content) {
         @apply p-0;
         @apply bg-transparent;
         @apply shadow-none;
     }
 
-    div :global(.maplibregl-popup-anchor-top .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-top .mapboxgl-popup-tip) {
         @apply border-b-background;
     }
 
-    div :global(.maplibregl-popup-anchor-top-left .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip) {
         @apply border-b-background;
     }
 
-    div :global(.maplibregl-popup-anchor-top-right .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip) {
         @apply border-b-background;
     }
 
-    div :global(.maplibregl-popup-anchor-bottom .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip) {
         @apply border-t-background;
         @apply drop-shadow-md;
     }
 
-    div :global(.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip) {
         @apply border-t-background;
         @apply drop-shadow-md;
     }
 
-    div :global(.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip) {
         @apply border-t-background;
         @apply drop-shadow-md;
     }
 
-    div :global(.maplibregl-popup-anchor-left .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-left .mapboxgl-popup-tip) {
         @apply border-r-background;
     }
 
-    div :global(.maplibregl-popup-anchor-right .maplibregl-popup-tip) {
+    div :global(.mapboxgl-popup-anchor-right .mapboxgl-popup-tip) {
         @apply border-l-background;
     }
 </style>

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

@@ -17,7 +17,7 @@
     let control: CustomControl | null = null;
 
     onMount(() => {
-        map.onLoad((map: maplibregl.Map) => {
+        map.onLoad((map: mapboxgl.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/custom-control/custom-control.ts

@@ -1,4 +1,4 @@
-import { type Map, type IControl } from 'maplibre-gl';
+import { type Map, type IControl } from 'mapbox-gl';
 
 export default class CustomControl implements IControl {
     _map: Map | undefined;

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

@@ -1,11 +1,10 @@
 import { settings } from '$lib/logic/settings';
 import { gpxStatistics } from '$lib/logic/statistics';
 import { getConvertedDistanceToKilometers } from '$lib/units';
+import type { GeoJSONSource } from 'mapbox-gl';
 import { get } from 'svelte/store';
-import { map } from '$lib/components/map/map';
+import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
 import { allHidden } from '$lib/logic/hidden';
-import type { GeoJSONSource } from 'maplibre-gl';
-import { ANCHOR_LAYER_KEY } from '../style';
 
 const { distanceMarkers, distanceUnits } = settings;
 
@@ -23,7 +22,7 @@ export class DistanceMarkers {
         this.unsubscribes.push(
             map.subscribe((map_) => {
                 if (map_) {
-                    map_.on('style.load', this.updateBinded);
+                    map_.on('style.import.load', this.updateBinded);
                 }
             })
         );

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

@@ -3,14 +3,13 @@ import { MapPopup } from '$lib/components/map/map-popup';
 export let waypointPopup: MapPopup | null = null;
 export let trackpointPopup: MapPopup | null = null;
 
-export function createPopups(map: maplibregl.Map) {
+export function createPopups(map: mapboxgl.Map) {
     removePopups();
     waypointPopup = new MapPopup(map, {
         closeButton: false,
         focusAfterOpen: false,
         maxWidth: undefined,
         offset: {
-            center: [0, 0],
             top: [0, 0],
             'top-left': [0, 0],
             'top-right': [0, 0],

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

@@ -1,11 +1,6 @@
 import { get, type Readable } from 'svelte/store';
-import maplibregl, {
-    type GeoJSONSource,
-    type FilterSpecification,
-    type MapLayerMouseEvent,
-    type MapLayerTouchEvent,
-} from 'maplibre-gl';
-import { map } from '$lib/components/map/map';
+import mapboxgl, { type FilterSpecification } from 'mapbox-gl';
+import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
 import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
 import {
     ListTrackSegmentItem,
@@ -27,8 +22,7 @@ import { fileActionManager } from '$lib/logic/file-action-manager';
 import { fileActions } from '$lib/logic/file-actions';
 import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
-import { gpxColors } from './gpx-layers';
+import { gpxColors } from '$lib/components/map/gpx-layer/gpx-layers';
 
 const colors = [
     '#ff0000',
@@ -120,28 +114,28 @@ export class GPXLayer {
     selected: boolean = false;
     currentWaypointData: GeoJSON.FeatureCollection | null = null;
     draggedWaypointIndex: number | null = null;
-    draggingStartingPosition: maplibregl.Point = new maplibregl.Point(0, 0);
+    draggingStartingPosition: mapboxgl.Point = new mapboxgl.Point(0, 0);
     unsubscribe: Function[] = [];
 
     updateBinded: () => void = this.update.bind(this);
     layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
     layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
     layerOnMouseMoveBinded: (e: any) => void = this.layerOnMouseMove.bind(this);
-    layerOnClickBinded: (e: MapLayerMouseEvent) => void = this.layerOnClick.bind(this);
-    layerOnContextMenuBinded: (e: MapLayerMouseEvent) => void = this.layerOnContextMenu.bind(this);
-    waypointLayerOnMouseEnterBinded: (e: MapLayerMouseEvent) => void =
+    layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
+    layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.bind(this);
+    waypointLayerOnMouseEnterBinded: (e: mapboxgl.MapMouseEvent) => void =
         this.waypointLayerOnMouseEnter.bind(this);
-    waypointLayerOnMouseLeaveBinded: (e: MapLayerMouseEvent) => void =
+    waypointLayerOnMouseLeaveBinded: (e: mapboxgl.MapMouseEvent) => void =
         this.waypointLayerOnMouseLeave.bind(this);
-    waypointLayerOnClickBinded: (e: MapLayerMouseEvent) => void =
+    waypointLayerOnClickBinded: (e: mapboxgl.MapMouseEvent) => void =
         this.waypointLayerOnClick.bind(this);
-    waypointLayerOnMouseDownBinded: (e: MapLayerMouseEvent) => void =
+    waypointLayerOnMouseDownBinded: (e: mapboxgl.MapMouseEvent) => void =
         this.waypointLayerOnMouseDown.bind(this);
-    waypointLayerOnTouchStartBinded: (e: MapLayerTouchEvent) => void =
+    waypointLayerOnTouchStartBinded: (e: mapboxgl.MapTouchEvent) => void =
         this.waypointLayerOnTouchStart.bind(this);
-    waypointLayerOnMouseMoveBinded: (e: MapLayerMouseEvent | MapLayerTouchEvent) => void =
+    waypointLayerOnMouseMoveBinded: (e: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent) => void =
         this.waypointLayerOnMouseMove.bind(this);
-    waypointLayerOnMouseUpBinded: (e: MapLayerMouseEvent | MapLayerTouchEvent) => void =
+    waypointLayerOnMouseUpBinded: (e: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent) => void =
         this.waypointLayerOnMouseUp.bind(this);
 
     constructor(fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
@@ -151,7 +145,7 @@ export class GPXLayer {
         this.unsubscribe.push(
             map.subscribe(($map) => {
                 if ($map) {
-                    $map.on('style.load', this.updateBinded);
+                    $map.on('style.import.load', this.updateBinded);
                     this.update();
                 }
             })
@@ -191,7 +185,7 @@ export class GPXLayer {
         this.loadIcons();
 
         try {
-            let source = _map.getSource(this.fileId) as GeoJSONSource | undefined;
+            let source = _map.getSource(this.fileId) as mapboxgl.GeoJSONSource | undefined;
             if (source) {
                 source.setData(this.getGeoJSON());
             } else {
@@ -226,8 +220,9 @@ export class GPXLayer {
                 _map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
                 _map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
             }
+
             let waypointSource = _map.getSource(this.fileId + '-waypoints') as
-                | GeoJSONSource
+                | mapboxgl.GeoJSONSource
                 | undefined;
             this.currentWaypointData = this.getWaypointsGeoJSON();
             if (waypointSource) {
@@ -356,7 +351,7 @@ export class GPXLayer {
             _map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
             _map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
             _map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
-            _map.off('style.load', this.updateBinded);
+            _map.off('style.import.load', this.updateBinded);
 
             _map.off(
                 'mouseenter',
@@ -451,7 +446,7 @@ export class GPXLayer {
         }
     }
 
-    layerOnClick(e: MapLayerMouseEvent) {
+    layerOnClick(e: mapboxgl.MapMouseEvent) {
         if (
             get(currentTool) === Tool.ROUTING &&
             get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])
@@ -509,7 +504,7 @@ export class GPXLayer {
         }
     }
 
-    waypointLayerOnMouseEnter(e: MapLayerMouseEvent) {
+    waypointLayerOnMouseEnter(e: mapboxgl.MapMouseEvent) {
         if (this.draggedWaypointIndex !== null) {
             return;
         }
@@ -529,7 +524,7 @@ export class GPXLayer {
         mapCursor.notify(MapCursorState.WAYPOINT_HOVER, false);
     }
 
-    waypointLayerOnClick(e: MapLayerMouseEvent) {
+    waypointLayerOnClick(e: mapboxgl.MapMouseEvent) {
         e.preventDefault();
 
         let waypointIndex = e.features![0].properties!.waypointIndex;
@@ -571,7 +566,7 @@ export class GPXLayer {
         }
     }
 
-    waypointLayerOnMouseDown(e: MapLayerMouseEvent) {
+    waypointLayerOnMouseDown(e: mapboxgl.MapMouseEvent) {
         if (get(currentTool) !== Tool.WAYPOINT || !this.selected) {
             return;
         }
@@ -590,7 +585,7 @@ export class GPXLayer {
         _map.once('mouseup', this.waypointLayerOnMouseUpBinded);
     }
 
-    waypointLayerOnTouchStart(e: MapLayerTouchEvent) {
+    waypointLayerOnTouchStart(e: mapboxgl.MapTouchEvent) {
         if (e.points.length !== 1 || get(currentTool) !== Tool.WAYPOINT || !this.selected) {
             return;
         }
@@ -609,7 +604,7 @@ export class GPXLayer {
         _map.once('touchend', this.waypointLayerOnMouseUpBinded);
     }
 
-    waypointLayerOnMouseMove(e: MapLayerMouseEvent | MapLayerTouchEvent) {
+    waypointLayerOnMouseMove(e: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent) {
         if (this.draggedWaypointIndex === null || e.point.equals(this.draggingStartingPosition)) {
             return;
         }
@@ -621,14 +616,14 @@ export class GPXLayer {
         ).coordinates = [e.lngLat.lng, e.lngLat.lat];
 
         let waypointSource = get(map)?.getSource(this.fileId + '-waypoints') as
-            | GeoJSONSource
+            | mapboxgl.GeoJSONSource
             | undefined;
         if (waypointSource) {
             waypointSource.setData(this.currentWaypointData!);
         }
     }
 
-    waypointLayerOnMouseUp(e: MapLayerMouseEvent | MapLayerTouchEvent) {
+    waypointLayerOnMouseUp(e: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent) {
         mapCursor.notify(MapCursorState.WAYPOINT_DRAGGING, false);
 
         get(map)?.off('mousemove', this.waypointLayerOnMouseMoveBinded);

website/src/lib/components/map/gpx-layer/start-end-markers.ts

@@ -1,13 +1,13 @@
 import { currentTool, Tool } from '$lib/components/toolbar/tools';
 import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
-import maplibregl from 'maplibre-gl';
+import mapboxgl from 'mapbox-gl';
 import { get } from 'svelte/store';
 import { map } from '$lib/components/map/map';
 import { allHidden } from '$lib/logic/hidden';
 
 export class StartEndMarkers {
-    start: maplibregl.Marker;
-    end: maplibregl.Marker;
+    start: mapboxgl.Marker;
+    end: mapboxgl.Marker;
     updateBinded: () => void = this.update.bind(this);
     unsubscribes: (() => void)[] = [];
 
@@ -19,8 +19,8 @@ export class StartEndMarkers {
         endElement.style.background =
             'repeating-conic-gradient(#fff 0 90deg, #000 0 180deg) 0 0/8px 8px round';
 
-        this.start = new maplibregl.Marker({ element: startElement });
-        this.end = new maplibregl.Marker({ element: endElement });
+        this.start = new mapboxgl.Marker({ element: startElement });
+        this.end = new mapboxgl.Marker({ element: endElement });
 
         map.onLoad(() => this.update());
         this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));

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

@@ -42,8 +42,13 @@
     let maxZoom: number = $state(20);
     let layerType: 'basemap' | 'overlay' = $state('basemap');
     let resourceType: 'raster' | 'vector' = $derived.by(() => {
-        if (tileUrls[0].length > 0 && tileUrls[0].includes('.json')) {
-            return 'vector';
+        if (tileUrls[0].length > 0) {
+            if (
+                tileUrls[0].includes('.json') ||
+                (tileUrls[0].includes('api.mapbox.com/styles') && !tileUrls[0].includes('tiles'))
+            ) {
+                return 'vector';
+            }
         }
         return 'raster';
     });

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

@@ -5,8 +5,12 @@
     import { Separator } from '$lib/components/ui/separator';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
     import { Layers } from '@lucide/svelte';
+    import { basemaps, defaultBasemap, overlays } from '$lib/assets/layers';
     import { settings } from '$lib/logic/settings';
     import { map } from '$lib/components/map/map';
+    import { customBasemapUpdate, getLayers } from './utils';
+    import type { ImportSpecification, StyleSpecification } from 'mapbox-gl';
+    import { untrack } from 'svelte';
 
     let container: HTMLDivElement;
     let overpassLayer: OverpassLayer;
@@ -19,14 +23,125 @@
         selectedBasemapTree,
         selectedOverlayTree,
         selectedOverpassTree,
+        customLayers,
+        opacities,
     } = settings;
 
-    map.onLoad((_map: maplibregl.Map) => {
+    function setStyle() {
+        if (!$map) {
+            return;
+        }
+        let basemap = basemaps.hasOwnProperty($currentBasemap)
+            ? basemaps[$currentBasemap]
+            : ($customLayers[$currentBasemap]?.value ?? basemaps[defaultBasemap]);
+        $map.removeImport('basemap');
+        if (typeof basemap === 'string') {
+            $map.addImport({ id: 'basemap', url: basemap }, 'overlays');
+        } else {
+            $map.addImport(
+                {
+                    id: 'basemap',
+                    url: '',
+                    data: basemap as StyleSpecification,
+                },
+                'overlays'
+            );
+        }
+    }
+
+    $effect(() => {
+        if ($map && ($currentBasemap || $customBasemapUpdate)) {
+            untrack(() => setStyle());
+        }
+    });
+
+    function addOverlay(id: string) {
+        if (!$map) {
+            return;
+        }
+        try {
+            let overlay = $customLayers.hasOwnProperty(id) ? $customLayers[id].value : overlays[id];
+            if (typeof overlay === 'string') {
+                $map.addImport({ id, url: overlay });
+            } else {
+                if ($opacities.hasOwnProperty(id)) {
+                    overlay = {
+                        ...overlay,
+                        layers: (overlay as StyleSpecification).layers.map((layer) => {
+                            if (layer.type === 'raster') {
+                                if (!layer.paint) {
+                                    layer.paint = {};
+                                }
+                                layer.paint['raster-opacity'] = $opacities[id];
+                            }
+                            return layer;
+                        }),
+                    };
+                }
+                $map.addImport({
+                    id,
+                    url: '',
+                    data: overlay as StyleSpecification,
+                });
+            }
+        } catch (e) {
+            // No reliable way to check if the map is ready to add sources and layers
+        }
+    }
+
+    function updateOverlays() {
+        if ($map && $currentOverlays && $opacities) {
+            let overlayLayers = getLayers($currentOverlays);
+            try {
+                let activeOverlays =
+                    $map
+                        .getStyle()
+                        .imports?.reduce(
+                            (
+                                acc: Record<string, ImportSpecification>,
+                                imprt: ImportSpecification
+                            ) => {
+                                if (!['basemap', 'overlays'].includes(imprt.id)) {
+                                    acc[imprt.id] = imprt;
+                                }
+                                return acc;
+                            },
+                            {}
+                        ) || {};
+                let toRemove = Object.keys(activeOverlays).filter((id) => !overlayLayers[id]);
+                toRemove.forEach((id) => {
+                    $map?.removeImport(id);
+                });
+                let toAdd = Object.entries(overlayLayers)
+                    .filter(([id, selected]) => selected && !activeOverlays.hasOwnProperty(id))
+                    .map(([id]) => id);
+                toAdd.forEach((id) => {
+                    addOverlay(id);
+                });
+            } catch (e) {
+                // No reliable way to check if the map is ready to add sources and layers
+            }
+        }
+    }
+
+    $effect(() => {
+        if ($map && $currentOverlays && $opacities) {
+            untrack(() => updateOverlays());
+        }
+    });
+
+    map.onLoad((_map: mapboxgl.Map) => {
         if (overpassLayer) {
             overpassLayer.remove();
         }
         overpassLayer = new OverpassLayer(_map);
         overpassLayer.add();
+        let first = true;
+        _map.on('style.import.load', () => {
+            if (!first) return;
+            first = false;
+            updateOverlays();
+        });
     });
 
     let open = $state(false);

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

@@ -213,9 +213,7 @@
                                                     isSelected($currentOverlays, selectedOverlay)
                                                 ) {
                                                     try {
-                                                        if ($map.getLayer(selectedOverlay)) {
-                                                            $map.removeLayer(selectedOverlay);
-                                                        }
+                                                        $map.removeImport(selectedOverlay);
                                                     } catch (e) {
                                                         // No reliable way to check if the map is ready to remove sources and layers
                                                     }

website/src/lib/components/map/layer-control/extension-api.ts

@@ -103,7 +103,7 @@ export class ExtensionAPI {
         if (current && isSelected(current, overlay.id)) {
             show = true;
             try {
-                get(map)?.removeLayer(overlay.id);
+                get(map)?.removeImport(overlay.id);
             } catch (e) {
                 // No reliable way to check if the map is ready to remove sources and layers
             }

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

@@ -6,8 +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 { ANCHOR_LAYER_KEY } from '../style';
+import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 const { currentOverpassQueries } = settings;
 
@@ -22,11 +21,11 @@ liveQuery(() => db.overpassdata.toArray()).subscribe((pois) => {
 });
 
 export class OverpassLayer {
-    overpassUrl = 'https://maps.mail.ru/osm/tools/overpass/api/interpreter';
+    overpassUrl = 'https://overpass.private.coffee/api/interpreter';
     minZoom = 12;
     queryZoom = 12;
     expirationTime = 7 * 24 * 3600 * 1000;
-    map: maplibregl.Map;
+    map: mapboxgl.Map;
     popup: MapPopup;
 
     currentQueries: Set<string> = new Set();
@@ -37,7 +36,7 @@ export class OverpassLayer {
     updateBinded = this.update.bind(this);
     onHoverBinded = this.onHover.bind(this);
 
-    constructor(map: maplibregl.Map) {
+    constructor(map: mapboxgl.Map) {
         this.map = map;
         this.popup = new MapPopup(map, {
             closeButton: false,
@@ -49,7 +48,7 @@ export class OverpassLayer {
 
     add() {
         this.map.on('moveend', this.queryIfNeededBinded);
-        this.map.on('style.load', this.updateBinded);
+        this.map.on('style.import.load', this.updateBinded);
         this.unsubscribes.push(data.subscribe(this.updateBinded));
         this.unsubscribes.push(
             currentOverpassQueries.subscribe(() => {
@@ -76,7 +75,7 @@ export class OverpassLayer {
         let d = get(data);
 
         try {
-            let source = this.map.getSource('overpass') as GeoJSONSource | undefined;
+            let source = this.map.getSource('overpass') as mapboxgl.GeoJSONSource | undefined;
             if (source) {
                 source.setData(d);
             } else {
@@ -116,7 +115,7 @@ export class OverpassLayer {
 
     remove() {
         this.map.off('moveend', this.queryIfNeededBinded);
-        this.map.off('style.load', this.updateBinded);
+        this.map.off('style.import.load', this.updateBinded);
         this.unsubscribes.forEach((unsubscribe) => unsubscribe());
 
         try {

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

@@ -1,5 +1,5 @@
 import { TrackPoint, Waypoint } from 'gpx';
-import maplibregl from 'maplibre-gl';
+import mapboxgl from 'mapbox-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: mapboxgl.Map;
+    popup: mapboxgl.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: mapboxgl.Map, options?: mapboxgl.PopupOptions) {
         this.map = map;
-        this.popup = new maplibregl.Popup(options);
+        this.popup = new mapboxgl.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: mapboxgl.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 mapboxgl.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 mapboxgl.LngLat(item.item.lon, item.item.lat);
     }
 }

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

@@ -1,77 +1,110 @@
-import maplibregl from 'maplibre-gl';
-import 'maplibre-gl/dist/maplibre-gl.css';
-import MaplibreGeocoder, {
-    type MaplibreGeocoderFeatureResults,
-} from '@maplibre/maplibre-gl-geocoder';
-import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
+import mapboxgl from 'mapbox-gl';
+import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import { get, writable, type Writable } from 'svelte/store';
 import { settings } from '$lib/logic/settings';
 import { tick } from 'svelte';
-import { ANCHOR_LAYER_KEY, StyleManager } from '$lib/components/map/style';
+import { terrainSources } from '$lib/assets/layers';
 
-const { treeFileView, elevationProfile, bottomPanelSize, rightPanelSize, distanceUnits } = settings;
+const {
+    treeFileView,
+    elevationProfile,
+    bottomPanelSize,
+    rightPanelSize,
+    distanceUnits,
+    terrainSource,
+} = settings;
 
-let fitBoundsOptions: maplibregl.MapOptions['fitBoundsOptions'] = {
+let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
     maxZoom: 15,
     linear: true,
     easing: () => 1,
 };
 
-export class MapLibreGLMap {
-    private _maptilerKey: string = '';
-    private _map: maplibregl.Map | null = null;
-    private _mapStore: Writable<maplibregl.Map | null> = writable(null);
-    private _styleManager: StyleManager | null = null;
-    private _onLoadCallbacks: ((map: maplibregl.Map) => void)[] = [];
-    private _unsubscribes: (() => void)[] = [];
-    private callOnLoadBinded: () => void = this.callOnLoad.bind(this);
+const emptySource: mapboxgl.GeoJSONSourceSpecification = {
+    type: 'geojson',
+    data: {
+        type: 'FeatureCollection',
+        features: [],
+    },
+};
+export const ANCHOR_LAYER_KEY = {
+    mapillary: 'mapillary-end',
+    tracks: 'tracks-end',
+    directionMarkers: 'direction-markers-end',
+    distanceMarkers: 'distance-markers-end',
+    interactions: 'interactions-end',
+    overpass: 'overpass-end',
+    waypoints: 'waypoints-end',
+};
+const anchorLayers: mapboxgl.LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
+    id: id,
+    type: 'symbol',
+    source: 'empty-source',
+}));
 
-    subscribe(run: (value: maplibregl.Map | null) => void, invalidate?: () => void) {
-        return this._mapStore.subscribe(run, invalidate);
+export class MapboxGLMap {
+    private _map: Writable<mapboxgl.Map | null> = writable(null);
+    private _onLoadCallbacks: ((map: mapboxgl.Map) => void)[] = [];
+    private _unsubscribes: (() => void)[] = [];
+
+    subscribe(run: (value: mapboxgl.Map | null) => void, invalidate?: () => void) {
+        return this._map.subscribe(run, invalidate);
     }
 
-    init(
-        maptilerKey: string,
-        language: string,
-        hash: boolean,
-        geocoder: boolean,
-        geolocate: boolean
-    ) {
-        this._maptilerKey = maptilerKey;
-        this._styleManager = new StyleManager(this._mapStore, this._maptilerKey);
-        const map = new maplibregl.Map({
+    init(language: string, hash: boolean, geocoder: boolean, geolocate: boolean) {
+        const map = new mapboxgl.Map({
             container: 'map',
             style: {
                 version: 8,
-                projection: {
-                    type: 'globe',
+                sources: {
+                    'empty-source': emptySource,
                 },
-                sources: {},
-                layers: [],
+                layers: anchorLayers,
+                imports: [
+                    {
+                        id: 'basemap',
+                        url: '',
+                    },
+                    {
+                        id: 'overlays',
+                        url: '',
+                    },
+                ],
             },
+            projection: 'globe',
             zoom: 0,
             hash: hash,
+            language,
+            attributionControl: false,
+            logoPosition: 'bottom-right',
             boxZoom: false,
-            maxPitch: 85,
         });
         map.addControl(
-            new maplibregl.NavigationControl({
+            new mapboxgl.AttributionControl({
+                compact: true,
+            })
+        );
+        map.addControl(
+            new mapboxgl.NavigationControl({
                 visualizePitch: true,
             })
         );
         if (geocoder) {
-            let geocoder = new MaplibreGeocoder(
-                {
-                    forwardGeocode: async (config) => {
-                        const results: MaplibreGeocoderFeatureResults = {
-                            features: [],
-                            type: 'FeatureCollection',
-                        };
-                        try {
-                            const request = `https://nominatim.openstreetmap.org/search?format=json&q=${config.query}&limit=5&accept-language=${language}`;
-                            const response = await fetch(request);
-                            const geojson = await response.json();
-                            results.features = geojson.map((result: any) => {
+            let geocoder = new MapboxGeocoder({
+                mapboxgl: mapboxgl,
+                enableEventLogging: false,
+                collapsed: true,
+                flyTo: fitBoundsOptions,
+                language,
+                localGeocoder: () => [],
+                localGeocoderOnly: true,
+                externalGeocoder: (query: string) =>
+                    fetch(
+                        `https://nominatim.openstreetmap.org/search?format=json&q=${query}&limit=5&accept-language=${language}`
+                    )
+                        .then((response) => response.json())
+                        .then((data) => {
+                            return data.map((result: any) => {
                                 return {
                                     type: 'Feature',
                                     geometry: {
@@ -81,43 +114,61 @@ export class MapLibreGLMap {
                                     place_name: result.display_name,
                                 };
                             });
-                        } catch (e) {}
-                        return results;
-                    },
-                },
-                {
-                    maplibregl: maplibregl,
-                    enableEventLogging: false,
-                    collapsed: true,
-                    flyTo: fitBoundsOptions,
-                    language,
+                        }),
+            });
+            let onKeyDown = geocoder._onKeyDown;
+            geocoder._onKeyDown = (e: KeyboardEvent) => {
+                // Trigger search on Enter key only
+                if (e.key === 'Enter') {
+                    onKeyDown.apply(geocoder, [{ target: geocoder._inputEl }]);
+                } else if (geocoder._typeahead.data.length > 0) {
+                    geocoder._typeahead.clear();
                 }
-            );
+            };
             map.addControl(geocoder);
         }
         if (geolocate) {
             map.addControl(
-                new maplibregl.GeolocateControl({
+                new mapboxgl.GeolocateControl({
                     positionOptions: {
                         enableHighAccuracy: true,
                     },
                     fitBoundsOptions,
                     trackUserLocation: true,
+                    showUserHeading: true,
                 })
             );
         }
-        const scaleControl = new maplibregl.ScaleControl({
+        const scaleControl = new mapboxgl.ScaleControl({
             unit: get(distanceUnits),
         });
         map.addControl(scaleControl);
+        map.on('style.load', () => {
+            map.setFog({
+                color: 'rgb(186, 210, 235)',
+                'high-color': 'rgb(36, 92, 223)',
+                'horizon-blend': 0.1,
+                'space-color': 'rgb(156, 240, 255)',
+            });
+            map.on('pitch', this.setTerrain.bind(this));
+            this.setTerrain();
+        });
+        map.on('style.import.load', () => {
+            const basemap = map.getStyle().imports?.find((imprt) => imprt.id === 'basemap');
+            if (basemap && basemap.data && basemap.data.glyphs) {
+                map.setGlyphsUrl(basemap.data.glyphs);
+            }
+        });
         map.on('load', () => {
-            this._map = map;
-            this._mapStore.set(map); // only set the store after the map has loaded
+            this._map.set(map); // only set the store after the map has loaded
             window._map = map; // entry point for extensions
             this.resize();
+            this.setTerrain();
             scaleControl.setUnit(get(distanceUnits));
+
+            this._onLoadCallbacks.forEach((callback) => callback(map));
+            this._onLoadCallbacks = [];
         });
-        map.on('style.load', this.callOnLoadBinded);
 
         this._unsubscribes.push(treeFileView.subscribe(() => this.resize()));
         this._unsubscribes.push(elevationProfile.subscribe(() => this.resize()));
@@ -128,50 +179,70 @@ export class MapLibreGLMap {
                 scaleControl.setUnit(units);
             })
         );
+        this._unsubscribes.push(terrainSource.subscribe(() => this.setTerrain()));
+    }
+
+    onLoad(callback: (map: mapboxgl.Map) => void) {
+        const map = get(this._map);
+        if (map) {
+            callback(map);
+        } else {
+            this._onLoadCallbacks.push(callback);
+        }
     }
 
     destroy() {
-        if (this._map) {
-            this._map.remove();
-            this._mapStore.set(null);
+        const map = get(this._map);
+        if (map) {
+            map.remove();
+            this._map.set(null);
         }
         this._unsubscribes.forEach((unsubscribe) => unsubscribe());
         this._unsubscribes = [];
     }
 
     resize() {
-        if (this._map) {
+        const map = get(this._map);
+        if (map) {
             tick().then(() => {
-                this._map?.resize();
+                map.resize();
             });
         }
     }
 
     toggle3D() {
-        if (this._map) {
-            if (this._map.getPitch() === 0) {
-                this._map.easeTo({ pitch: 70 });
+        const map = get(this._map);
+        if (map) {
+            if (map.getPitch() === 0) {
+                map.easeTo({ pitch: 70 });
             } else {
-                this._map.easeTo({ pitch: 0 });
+                map.easeTo({ pitch: 0 });
             }
         }
     }
 
-    onLoad(callback: (map: maplibregl.Map) => void) {
-        if (this._map) {
-            callback(this._map);
-        } else {
-            this._onLoadCallbacks.push(callback);
-        }
-    }
-
-    callOnLoad() {
-        if (this._map && this._map.getLayer(ANCHOR_LAYER_KEY.overlays)) {
-            this._onLoadCallbacks.forEach((callback) => callback(this._map!));
-            this._onLoadCallbacks = [];
-            this._map.off('style.load', this.callOnLoadBinded);
+    setTerrain() {
+        const map = get(this._map);
+        if (map) {
+            const source = get(terrainSource);
+            try {
+                if (!map.getSource(source)) {
+                    map.addSource(source, terrainSources[source]);
+                }
+                if (map.getPitch() > 0) {
+                    map.setTerrain({
+                        source: source,
+                        exaggeration: 1,
+                    });
+                } else {
+                    map.setTerrain(null);
+                }
+            } catch (e) {
+                // No reliable way to check if the map is ready to add sources and layers
+                return;
+            }
         }
     }
 }
 
-export const map = new MapLibreGLMap();
+export const map = new MapboxGLMap();

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

@@ -20,7 +20,7 @@
     let container: HTMLElement;
 
     onMount(() => {
-        map.onLoad((map: maplibregl.Map) => {
+        map.onLoad((map: mapboxgl.Map) => {
             googleRedirect = new GoogleRedirect(map);
             mapillaryLayer = new MapillaryLayer(map, container, mapillaryOpen);
         });

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

@@ -1,10 +1,11 @@
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+import type mapboxgl from 'mapbox-gl';
 
 export class GoogleRedirect {
-    map: maplibregl.Map;
+    map: mapboxgl.Map;
     enabled = false;
 
-    constructor(map: maplibregl.Map) {
+    constructor(map: mapboxgl.Map) {
         this.map = map;
     }
 
@@ -24,7 +25,7 @@ export class GoogleRedirect {
         this.map.off('click', this.openStreetView);
     }
 
-    openStreetView(e: maplibregl.MapMouseEvent) {
+    openStreetView(e: mapboxgl.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,8 +1,8 @@
-import maplibregl, { type LayerSpecification, type VectorSourceSpecification } from 'maplibre-gl';
+import mapboxgl, { type LayerSpecification, type VectorSourceSpecification } from 'mapbox-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';
-import { ANCHOR_LAYER_KEY } from '../style';
+import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 const mapillarySource: VectorSourceSpecification = {
     type: 'vector',
@@ -42,8 +42,8 @@ const mapillaryImageLayer: LayerSpecification = {
 };
 
 export class MapillaryLayer {
-    map: maplibregl.Map;
-    marker: maplibregl.Marker;
+    map: mapboxgl.Map;
+    marker: mapboxgl.Marker;
     viewer: Viewer;
 
     active = false;
@@ -53,7 +53,7 @@ export class MapillaryLayer {
     onMouseEnterBinded = this.onMouseEnter.bind(this);
     onMouseLeaveBinded = this.onMouseLeave.bind(this);
 
-    constructor(map: maplibregl.Map, container: HTMLElement, popupOpen: { value: boolean }) {
+    constructor(map: mapboxgl.Map, container: HTMLElement, popupOpen: { value: boolean }) {
         this.map = map;
 
         this.viewer = new Viewer({
@@ -62,12 +62,15 @@ export class MapillaryLayer {
         });
 
         const element = document.createElement('div');
-        element.className = 'maplibregl-user-location maplibregl-user-location-show-heading';
+        element.className = 'mapboxgl-user-location mapboxgl-user-location-show-heading';
         const dot = document.createElement('div');
-        dot.className = 'maplibregl-user-location-dot';
+        dot.className = 'mapboxgl-user-location-dot';
+        const heading = document.createElement('div');
+        heading.className = 'mapboxgl-user-location-heading';
         element.appendChild(dot);
+        element.appendChild(heading);
 
-        this.marker = new maplibregl.Marker({
+        this.marker = new mapboxgl.Marker({
             rotationAlignment: 'map',
             element,
         });
@@ -132,7 +135,7 @@ export class MapillaryLayer {
         this.popupOpen.value = false;
     }
 
-    onMouseEnter(e: maplibregl.MapLayerMouseEvent) {
+    onMouseEnter(e: mapboxgl.MapMouseEvent) {
         if (
             e.features &&
             e.features.length > 0 &&

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

@@ -1,221 +0,0 @@
-import { settings } from '$lib/logic/settings';
-import { get, type Writable } from 'svelte/store';
-import {
-    basemaps,
-    defaultBasemap,
-    maptilerKeyPlaceHolder,
-    overlays,
-    terrainSources,
-} from '$lib/assets/layers';
-import { customBasemapUpdate, getLayers } from '$lib/components/map/layer-control/utils';
-import { i18n } from '$lib/i18n.svelte';
-
-const { currentBasemap, currentOverlays, customLayers, opacities, terrainSource } = settings;
-
-const emptySource: maplibregl.GeoJSONSourceSpecification = {
-    type: 'geojson',
-    data: {
-        type: 'FeatureCollection',
-        features: [],
-    },
-};
-export const ANCHOR_LAYER_KEY = {
-    overlays: 'overlays-end',
-    mapillary: 'mapillary-end',
-    tracks: 'tracks-end',
-    directionMarkers: 'direction-markers-end',
-    distanceMarkers: 'distance-markers-end',
-    interactions: 'interactions-end',
-    overpass: 'overpass-end',
-    waypoints: 'waypoints-end',
-};
-const anchorLayers: maplibregl.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 _maptilerKey: string;
-    private _pastOverlays: Set<string> = new Set();
-
-    constructor(map: Writable<maplibregl.Map | null>, maptilerKey: string) {
-        this._map = map;
-        this._maptilerKey = maptilerKey;
-        this._map.subscribe((map_) => {
-            if (map_) {
-                this.update();
-                map_.on('style.load', () => this.updateOverlays());
-                map_.on('pitch', () => this.updateTerrain());
-            }
-        });
-        currentBasemap.subscribe(() => this.update());
-        customBasemapUpdate.subscribe(() => this.update());
-        currentOverlays.subscribe(() => this.updateOverlays());
-        opacities.subscribe(() => this.updateOverlays());
-        terrainSource.subscribe(() => this.updateTerrain());
-    }
-
-    update() {
-        const map_ = get(this._map);
-        if (!map_) return;
-        this.build().then((style) => map_.setStyle(style));
-    }
-
-    async updateOverlays() {
-        const map_ = get(this._map);
-        if (!map_) return;
-        if (!map_.getSource('empty-source')) return;
-
-        const custom = get(customLayers);
-        const overlayOpacities = get(opacities);
-        try {
-            const layers = getLayers(get(currentOverlays) ?? {});
-            for (let overlay in layers) {
-                if (!layers[overlay]) {
-                    if (this._pastOverlays.has(overlay)) {
-                        const overlayInfo = custom[overlay]?.value ?? overlays[overlay];
-                        const overlayStyle = await this.get(overlayInfo);
-                        for (let layer of overlayStyle.layers ?? []) {
-                            if (map_.getLayer(layer.id)) {
-                                map_.removeLayer(layer.id);
-                            }
-                        }
-                        this._pastOverlays.delete(overlay);
-                    }
-                } else {
-                    const overlayInfo = custom[overlay]?.value ?? overlays[overlay];
-                    const overlayStyle = await this.get(overlayInfo);
-                    const opacity = overlayOpacities[overlay];
-
-                    for (let sourceId in overlayStyle.sources) {
-                        if (!map_.getSource(sourceId)) {
-                            map_.addSource(sourceId, overlayStyle.sources[sourceId]);
-                        }
-                    }
-
-                    for (let layer of overlayStyle.layers ?? []) {
-                        if (!map_.getLayer(layer.id)) {
-                            if (opacity !== undefined) {
-                                if (layer.type === 'raster') {
-                                    if (!layer.paint) {
-                                        layer.paint = {};
-                                    }
-                                    layer.paint['raster-opacity'] = opacity;
-                                } else if (layer.type === 'hillshade') {
-                                    if (!layer.paint) {
-                                        layer.paint = {};
-                                    }
-                                    layer.paint['hillshade-exaggeration'] = opacity / 2;
-                                }
-                            }
-                            map_.addLayer(layer, ANCHOR_LAYER_KEY.overlays);
-                        }
-                    }
-
-                    this._pastOverlays.add(overlay);
-                }
-            }
-        } catch (e) {}
-    }
-
-    updateTerrain() {
-        const map_ = get(this._map);
-        if (!map_) return;
-
-        const mapTerrain = map_.getTerrain();
-        const terrain = this.getCurrentTerrain();
-        if (JSON.stringify(mapTerrain) !== JSON.stringify(terrain)) {
-            map_.setTerrain(terrain);
-        }
-    }
-
-    async build(): Promise<maplibregl.StyleSpecification> {
-        const custom = get(customLayers);
-
-        const style: maplibregl.StyleSpecification = {
-            version: 8,
-            projection: {
-                type: 'globe',
-            },
-            sources: {
-                'empty-source': emptySource,
-            },
-            layers: [],
-        };
-
-        let basemap = get(currentBasemap);
-        const basemapInfo = basemaps[basemap] ?? custom[basemap]?.value ?? basemaps[defaultBasemap];
-        const basemapStyle = await this.get(basemapInfo);
-
-        this.merge(style, basemapStyle);
-
-        style.terrain = this.getCurrentTerrain();
-        style.sources[style.terrain.source] = terrainSources[style.terrain.source];
-
-        style.layers.push(...anchorLayers);
-
-        return style;
-    }
-
-    async get(
-        styleInfo: maplibregl.StyleSpecification | string
-    ): Promise<maplibregl.StyleSpecification> {
-        if (typeof styleInfo === 'string') {
-            let styleUrl = styleInfo as string;
-            if (styleUrl.includes(maptilerKeyPlaceHolder)) {
-                styleUrl = styleUrl.replace(maptilerKeyPlaceHolder, this._maptilerKey);
-            }
-            const response = await fetch(styleUrl, { cache: 'force-cache' });
-            const style = await response.json();
-            return style;
-        } else {
-            return styleInfo;
-        }
-    }
-
-    merge(style: maplibregl.StyleSpecification, other: maplibregl.StyleSpecification) {
-        style.sources = { ...style.sources, ...other.sources };
-        for (let layer of other.layers ?? []) {
-            if (layer.type === 'symbol' && layer.layout && layer.layout['text-field']) {
-                const textField = layer.layout['text-field'];
-                if (
-                    Array.isArray(textField) &&
-                    textField.length >= 2 &&
-                    textField[0] === 'coalesce' &&
-                    Array.isArray(textField[1]) &&
-                    textField[1][0] === 'get' &&
-                    typeof textField[1][1] === 'string' &&
-                    textField[1][1].startsWith('name')
-                ) {
-                    layer.layout['text-field'] = [
-                        'coalesce',
-                        ['get', `name:${i18n.lang}`],
-                        ['get', 'name'],
-                    ];
-                }
-            }
-            style.layers.push(layer);
-        }
-        if (other.sprite && !style.sprite) {
-            style.sprite = other.sprite;
-        }
-        if (other.glyphs && !style.glyphs) {
-            style.glyphs = other.glyphs;
-        }
-    }
-
-    getCurrentTerrain() {
-        const terrain = get(terrainSource);
-        const source = terrainSources[terrain];
-        if (source.url && source.url.includes(maptilerKeyPlaceHolder)) {
-            source.url = source.url.replace(maptilerKeyPlaceHolder, this._maptilerKey);
-        }
-        const map_ = get(this._map);
-        return {
-            source: terrain,
-            exaggeration: !map_ || map_.getPitch() === 0 ? 0 : 1,
-        };
-    }
-}

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 mapboxgl from 'mapbox-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: mapboxgl.Popup | undefined = $derived.by(() => {
         if (!popupElement) {
             return undefined;
         }
-        let popup = new maplibregl.Popup({
+        let popup = new mapboxgl.Popup({
             closeButton: false,
             maxWidth: undefined,
         });

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

@@ -15,12 +15,11 @@
     import { onDestroy, onMount } from 'svelte';
     import { getURLForLanguage } from '$lib/utils';
     import { Trash2 } from '@lucide/svelte';
-    import { map } from '$lib/components/map/map';
-    import type { GeoJSONSource } from 'maplibre-gl';
+    import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+    import type { GeoJSONSource } from 'mapbox-gl';
     import { selection } from '$lib/logic/selection';
     import { fileActions } from '$lib/logic/file-actions';
     import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
-    import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
 
     let props: {
         class?: string;
@@ -29,7 +28,7 @@
     let cleanType = $state(CleanType.INSIDE);
     let deleteTrackpoints = $state(true);
     let deleteWaypoints = $state(true);
-    let rectangleCoordinates: maplibregl.LngLat[] = $state([]);
+    let rectangleCoordinates: mapboxgl.LngLat[] = $state([]);
 
     $effect(() => {
         if ($map) {

website/src/lib/components/toolbar/tools/reduce/utils.svelte.ts

@@ -1,11 +1,10 @@
 import { ListItem, ListTrackSegmentItem } from '$lib/components/file-list/file-list';
-import { map } from '$lib/components/map/map';
-import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
+import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
 import { fileActions } from '$lib/logic/file-actions';
 import { GPXFileStateCollectionObserver, type GPXFileState } from '$lib/logic/file-state';
 import { selection } from '$lib/logic/selection';
 import { ramerDouglasPeucker, TrackPoint, type SimplifiedTrackPoint } from 'gpx';
-import type { GeoJSONSource } from 'maplibre-gl';
+import type { GeoJSONSource } from 'mapbox-gl';
 import { get, writable } from 'svelte/store';
 
 export const minTolerance = 0.1;

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

@@ -51,7 +51,7 @@
     }: {
         minimized?: boolean;
         minimizable?: boolean;
-        popup?: maplibregl.Popup;
+        popup?: mapboxgl.Popup;
         popupElement?: HTMLDivElement;
         class?: string;
     } = $props();

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

@@ -1,6 +1,6 @@
 import { distance, type Coordinates, TrackPoint, TrackSegment, Track, projectedPoint } from 'gpx';
 import { get, writable, type Readable } from 'svelte/store';
-import maplibregl from 'maplibre-gl';
+import mapboxgl from 'mapbox-gl';
 import { route } from './routing';
 import { toast } from 'svelte-sonner';
 import {
@@ -32,7 +32,7 @@ export class RoutingControls {
     file: Readable<GPXFileWithStatistics | undefined>;
     anchors: AnchorWithMarker[] = [];
     shownAnchors: AnchorWithMarker[] = [];
-    popup: maplibregl.Popup;
+    popup: mapboxgl.Popup;
     popupElement: HTMLElement;
     temporaryAnchor: AnchorWithMarker;
     lastDragEvent = 0;
@@ -43,12 +43,12 @@ export class RoutingControls {
         this.toggleAnchorsForZoomLevelAndBounds.bind(this);
     showTemporaryAnchorBinded: (e: any) => void = this.showTemporaryAnchor.bind(this);
     updateTemporaryAnchorBinded: (e: any) => void = this.updateTemporaryAnchor.bind(this);
-    appendAnchorBinded: (e: maplibregl.MapMouseEvent) => void = this.appendAnchor.bind(this);
+    appendAnchorBinded: (e: mapboxgl.MapMouseEvent) => void = this.appendAnchor.bind(this);
 
     constructor(
         fileId: string,
         file: Readable<GPXFileWithStatistics | undefined>,
-        popup: maplibregl.Popup,
+        popup: mapboxgl.Popup,
         popupElement: HTMLElement
     ) {
         this.fileId = fileId;
@@ -180,7 +180,7 @@ export class RoutingControls {
         let element = document.createElement('div');
         element.className = `h-5 w-5 xs:h-4 xs:w-4 md:h-3 md:w-3 rounded-full bg-white border-2 border-black cursor-pointer`;
 
-        let marker = new maplibregl.Marker({
+        let marker = new mapboxgl.Marker({
             draggable: true,
             className: 'z-10',
             element,
@@ -215,7 +215,7 @@ export class RoutingControls {
         return anchor;
     }
 
-    handleClickForAnchor(anchor: Anchor, marker: maplibregl.Marker) {
+    handleClickForAnchor(anchor: Anchor, marker: mapboxgl.Marker) {
         return (e: any) => {
             e.preventDefault();
             e.stopPropagation();
@@ -607,7 +607,7 @@ export class RoutingControls {
         });
     }
 
-    async appendAnchor(e: maplibregl.MapMouseEvent) {
+    async appendAnchor(e: mapboxgl.MapMouseEvent) {
         // Add a new anchor to the end of the last segment
         if (get(streetViewEnabled) && get(streetViewSource) === 'google') {
             return;
@@ -858,6 +858,6 @@ type Anchor = {
 };
 
 type AnchorWithMarker = Anchor & {
-    marker: maplibregl.Marker;
+    marker: mapboxgl.Marker;
     inZoom: boolean;
 };

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

@@ -8,18 +8,17 @@ 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 { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
+import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 export class SplitControls {
-    map: maplibregl.Map;
+    map: mapboxgl.Map;
     unsubscribes: Function[] = [];
 
     layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
     layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
     layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
 
-    constructor(map: maplibregl.Map) {
+    constructor(map: mapboxgl.Map) {
         this.map = map;
 
         if (!this.map.hasImage('split-control')) {
@@ -99,7 +98,7 @@ export class SplitControls {
         }, false);
 
         try {
-            let source = this.map.getSource('split-controls') as GeoJSONSource | undefined;
+            let source = this.map.getSource('split-controls') as mapboxgl.GeoJSONSource | undefined;
             if (source) {
                 source.setData(data);
             } else {
@@ -160,7 +159,7 @@ export class SplitControls {
         mapCursor.notify(MapCursorState.SPLIT_CONTROL, false);
     }
 
-    layerOnClick(e: maplibregl.MapLayerMouseEvent) {
+    layerOnClick(e: mapboxgl.MapMouseEvent) {
         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 mapboxgl from 'mapbox-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: mapboxgl.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 mapboxgl.Marker({
                         element,
                         anchor: 'bottom',
                     })

website/src/lib/docs/ca/menu/file.mdx

@@ -29,13 +29,13 @@ Pots arrossegar y deixar arxius directament des del seu sistema d'arxius cap a l
 
 Crear una còpia dels arxius seleccionats.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Esborra
 
-Delete the currently selected files.
+Esborra l'arxiu seleccinat.
 
-### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
+### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Esborra-ho tot
 
-Delete all files.
+Esborra tots els fitxers.
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportar...
 

website/src/lib/docs/de/home/mapbox.mdx

@@ -1,5 +1,5 @@
-Mapbox ist das Unternehmen, das einige der schönen Karten auf dieser Website zur Verfügung stellt.
-Sie entwickeln auch die <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">Karten-Engine</a> welche **gpx.studio** unterstützt.
+Mapbox stellt einige der auf dieser Website verwendeten Karten bereit.
+Sie entwickeln auch die <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">Karten-Engine</a>, die **gpx.studio** unterstützt.
 
-Wir sind äußerst glücklich und dankbar, Teil ihres <a href="https://mapbox.com/community" target="_blank">Community</a> Programms zu sein, das gemeinnützige Organisationen, Bildungseinrichtungen und Organisationen mit positivem Einfluss unterstützt.
+Wir sind froh und dankbar, Teil ihres <a href="https://mapbox.com/community" target="_blank">Community</a> Programms zu sein, das gemeinnützige Organisationen, Bildungseinrichtungen und Organisationen unterstützt.
 Diese Partnerschaft ermöglicht es **gpx.studio**, von den Mapbox-Tools zu ermäßigten Preisen zu profitieren, was erheblich zur finanziellen Tragfähigkeit des Projekts beiträgt und es uns ermöglicht, die bestmögliche Benutzererfahrung zu bieten.

website/src/lib/docs/en/home/funding.mdx

@@ -5,7 +5,7 @@
 ## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)
 
 Each time you add or move GPS points, our servers calculate the best route on the road network.
-We also use APIs from <a href="https://maptiler.com" target="_blank">MapTiler</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
+We also use APIs from <a href="https://mapbox.com" target="_blank">Mapbox</a> to display beautiful maps, retrieve elevation data and allow you to search for places.
 
 Unfortunately, this is expensive.
 If you enjoy using this tool and find it valuable, please consider making a small donation to help keep the website free and ad-free.

website/src/lib/docs/en/home/mapbox.mdx

@@ -0,0 +1,5 @@
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the <a href="https://github.com/mapbox/mapbox-gl-js" target="_blank">map engine</a> which powers **gpx.studio**.
+
+We are incredibly fortunate and grateful to be part of their <a href="https://mapbox.com/community" target="_blank">Community</a> program, which supports nonprofits, educational institutions, and positive impact organizations.
+This partnership allows **gpx.studio** to benefit from Mapbox tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.

website/src/lib/docs/en/home/maptiler.mdx

@@ -1,2 +0,0 @@
-MapTiler is the company that provides some of the beautiful maps on this website.
-This partnership allows **gpx.studio** to benefit from MapTiler tools at discounted prices, greatly contributing to the financial viability of the project and enabling us to offer the best possible user experience.

website/src/lib/docs/en/integration.mdx

@@ -12,7 +12,7 @@ title: Integration
 You can use **gpx.studio** to create maps showing your GPX files and embed them in your website.
 
 All you need is:
-1. A <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load the map, and
+1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
 1. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
 
 You can then play with the configurator below to customize your map and generate the corresponding HTML code.

website/src/lib/docs/en/map-controls.mdx

@@ -58,7 +58,7 @@ Only one basemap can be displayed at a time.
 <div class="flex flex-col items-center">
     <DocsLayers />
     <span class="text-sm text-center mt-2">
-        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.maptiler.com/maps/outdoor-topo/" target="_blank">MapTiler Topo</a> basemap.
+        Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
     </span>
 </div>
 
@@ -67,4 +67,4 @@ They can be enabled in the [map layer settings dialog](./menu/settings).
 
 In these settings, you can also manage the opacity of the overlays.
 
-For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://maplibre.org/maplibre-style-spec/" target="_blank">MapLibre style JSON</a> URLs.
+For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.

website/src/lib/docs/en/toolbar/elevation.mdx

@@ -18,7 +18,7 @@ This tool allows you to add elevation data to traces and [points of interest](..
 
 <DocsNote>
 
-Elevation data is provided by <a href="https://maptiler.com" target="_blank">MapTiler</a>.
-You can learn more about its origin and accuracy in the <a href="https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler/" target="_blank">documentation</a>.
+Elevation data is provided by <a href="https://mapbox.com" target="_blank">Mapbox</a>.
+You can learn more about its origin and accuracy in the <a href="https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/#elevation-data" target="_blank">documentation</a>.
 
 </DocsNote>

website/src/lib/docs/fr/menu/file.mdx

@@ -35,7 +35,7 @@ Supprimer les fichiers sélectionnés.
 
 ### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Supprimer tout
 
-Supprimer toutes les fichiers.
+Supprimer tous les fichiers.
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exporter...
 

website/src/lib/docs/pt-BR/files-and-stats.mdx

@@ -50,7 +50,7 @@ Clicando com o botão direito em uma aba arquivo, você pode acessar as mesmas a
 
 As mentioned in the [view options section](./menu/view), you can switch to a tree layout for the files list.
 This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
-In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](./gpx) contained inside the files through collapsible sections.
+Além disso, a exibição de árvore de arquivos permite que você inspecione as [faixas, segmentos, e pontos de interesse](./gpx) contidos dentro dos arquivos através de seções recolhidas.
 
 Você também pode aplicar as [ações de edição](./menu/edit) e [ferramentas](./toolbar) para itens de arquivos internos.
 Além disso, você pode arrastar e soltar os itens internos para reordená-los, ou movê-los na hierarquia ou até mesmo para outro arquivo.
@@ -105,6 +105,6 @@ Using the <kbd><ChartNoAxesColumn size="16" class="inline-block" style="margin-b
 
 - **slope** information computed from the elevation data, or
 - **surface** or **category** data coming from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>'s <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> and <a href="https://wiki.openstreetmap.org/wiki/Key:highway" target="_blank">highway</a> tags.
-  This is only available for files created with **gpx.studio**.
+  Isso só está disponível para arquivos criados com **gpx.studio**.
 
 If your selection includes it, you can also visualize: **speed**, **heart rate**, **cadence**, **temperature** and **power** data on the elevation profile.

website/src/lib/docs/pt-BR/menu/file.mdx

@@ -35,7 +35,7 @@ Delete the currently selected files.
 
 ### <FileX size="16" class="inline-block" style="margin-bottom: 2px" /> Delete all
 
-Delete all files.
+Apagar todos os arquivos.
 
 ### <Download size="16" class="inline-block" style="margin-bottom: 2px" /> Exportar...
 

website/src/lib/docs/uk/home/funding.mdx

@@ -2,7 +2,8 @@
     import { HeartHandshake } from '@lucide/svelte';
 </script>
 
-## <HeartHandshake size="18" class="inline-block align-baseline" /> Help keep the website free (and ad-free)
+## <HeartHandshake size="18" class="inline-block align-baseline" /> 
+Допоможіть нам залишати цей сайт безкоштовним (та без реклами)
 
 Кожного разу, коли ви додаєте або переміщуєте GPS точки, наші сервери обчислюють найкращий маршрут на мережі доріг.
 Ми також використовуємо API від <a href="https://mapbox.com" target="_blank">Mapbox</a> для зображення красивих карт, отримання даних висот та можливості пошуку місць.

website/src/lib/docs/uk/home/translation.mdx

@@ -2,7 +2,7 @@
     import { Languages } from '@lucide/svelte';
 </script>
 
-## <Languages size="18" class="inline-block align-baseline" /> Translation
+## <Languages size="18" class="inline-block align-baseline" /> Переклад
 
 Сайт перекладається волонтерами з використанням платформи для спільного перекладу.
 Ви можете зробити свій внесок, додаючи або покращуючи переклади в нашому <a href="https://crowdin.com/project/gpxstudio" target="_blank">проєкті Crowdin</a>.

website/src/lib/docs/uk/menu/file.mdx

@@ -47,6 +47,6 @@ Open the export dialog to save all files to your computer.
 
 <DocsNote type="warning">
 
-If your download does not start after clicking the download button, please check your browser settings to allow downloads from <b>gpx.studio</b>.
+Якщо завантаження не починається після натискання кнопки завантаження, будь ласка, перевірте налаштування браузера, щоб дозволити завантаження з <b>gpx.studio</b>.
 
 </DocsNote>

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 mapboxgl from 'mapbox-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: mapboxgl.LngLatBounds = new mapboxgl.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 mapboxgl.LngLatBounds([180, 90, -180, -90]);
     }
 
     centerMapOnSelection() {
         let selected = get(selection).getSelected();
-        let bounds = new maplibregl.LngLatBounds();
+        let bounds = new mapboxgl.LngLatBounds();
 
         if (selected.find((item) => item instanceof ListWaypointItem)) {
             selection.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {

website/src/lib/utils.ts

@@ -3,11 +3,12 @@ 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 mapboxgl from 'mapbox-gl';
 import { pointToTile, pointToTileFraction } from '@mapbox/tilebelt';
+import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
+import PNGReader from 'png.js';
 import type { GPXStatisticsTree } from '$lib/logic/statistics-tree';
 import { ListTrackSegmentItem } from '$lib/components/file-list/file-list';
-import { PUBLIC_MAPTILER_KEY } from '$env/static/public';
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
@@ -61,7 +62,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 mapboxgl.LngLatBounds(southWest, northEast);
         if (bounds.contains(point)) {
             segmentBoundsDistances.push([0, trackIndex, segmentIndex]);
         } else {
@@ -109,49 +110,33 @@ 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 mapboxgl.LngLatBounds();
     coordinates.forEach((coord) => bbox.extend(coord));
 
     let tiles = coordinates.map((coord) => pointToTile(coord.lon, coord.lat, ELEVATION_ZOOM));
     let uniqueTiles = Array.from(new Set(tiles.map((tile) => tile.join(',')))).map((tile) =>
         tile.split(',').map((x) => parseInt(x))
     );
-    let images = new Map<string, ImageData>();
-
-    const getPixelFromImageData = (imageData: ImageData, x: number, y: number): number[] => {
-        const index = (y * imageData.width + x) * 4;
-        return [imageData.data[index], imageData.data[index + 1], imageData.data[index + 2]];
-    };
+    let pngs = new Map<string, any>();
 
     let promises = uniqueTiles.map((tile) =>
         fetch(
-            `https://api.maptiler.com/tiles/terrain-rgb-v2/${ELEVATION_ZOOM}/${tile[0]}/${tile[1]}.webp?key=${PUBLIC_MAPTILER_KEY}`,
+            `https://api.mapbox.com/v4/mapbox.mapbox-terrain-dem-v1/${ELEVATION_ZOOM}/${tile[0]}/${tile[1]}@2x.pngraw?access_token=${PUBLIC_MAPBOX_TOKEN}`,
             { cache: 'force-cache' }
         )
-            .then((response) => response.blob())
+            .then((response) => response.arrayBuffer())
             .then(
-                (blob) =>
-                    new Promise<void>((resolve) => {
-                        const url = URL.createObjectURL(blob);
-                        const img = new Image();
-                        img.onload = () => {
-                            const canvas = document.createElement('canvas');
-                            canvas.width = img.width;
-                            canvas.height = img.height;
-                            const ctx = canvas.getContext('2d');
-                            if (ctx) {
-                                ctx.drawImage(img, 0, 0);
-                                const imageData = ctx.getImageData(0, 0, img.width, img.height);
-                                images.set(tile.join(','), imageData);
+                (buffer) =>
+                    new Promise((resolve) => {
+                        let png = new PNGReader(new Uint8Array(buffer));
+                        png.parse((err, png) => {
+                            if (err) {
+                                resolve(false); // Also resolve so that Promise.all doesn't fail
+                            } else {
+                                pngs.set(tile.join(','), png);
+                                resolve(true);
                             }
-                            URL.revokeObjectURL(url);
-                            resolve();
-                        };
-                        img.onerror = () => {
-                            URL.revokeObjectURL(url);
-                            resolve();
-                        };
-                        img.src = url;
+                        });
                     })
             )
     );
@@ -159,9 +144,9 @@ export function getElevation(
     return Promise.all(promises).then(() =>
         coordinates.map((coord, index) => {
             let tile = tiles[index];
-            let imageData = images.get(tile.join(','));
+            let png = pngs.get(tile.join(','));
 
-            if (!imageData) {
+            if (!png) {
                 return 0;
             }
 
@@ -173,11 +158,10 @@ export function getElevation(
             let dx = x - _x;
             let dy = y - _y;
 
-            const p00 = getPixelFromImageData(imageData, _x, _y);
-            const p01 = getPixelFromImageData(imageData, _x, _y + (_y + 1 == tileSize ? 0 : 1));
-            const p10 = getPixelFromImageData(imageData, _x + (_x + 1 == tileSize ? 0 : 1), _y);
-            const p11 = getPixelFromImageData(
-                imageData,
+            const p00 = png.getPixel(_x, _y);
+            const p01 = png.getPixel(_x, _y + (_y + 1 == tileSize ? 0 : 1));
+            const p10 = png.getPixel(_x + (_x + 1 == tileSize ? 0 : 1), _y);
+            const p11 = png.getPixel(
                 _x + (_x + 1 == tileSize ? 0 : 1),
                 _y + (_y + 1 == tileSize ? 0 : 1)
             );

website/src/locales/ca.json

@@ -28,7 +28,7 @@
         "undo": "Desfer",
         "redo": "Refer",
         "delete": "Elimina el track",
-        "delete_all": "Delete all",
+        "delete_all": "Esborra-ho tot",
         "select_all": "Seleccionar-ho tot",
         "view": "Vista",
         "elevation_profile": "Perfil d’elevacions",
@@ -80,7 +80,7 @@
         "center": "Centrar",
         "open_in": "Obrir amb",
         "copy_coordinates": "Copiar coordenades",
-        "edit_osm": "Edit in OpenStreetMap"
+        "edit_osm": "Edita a OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -282,7 +282,7 @@
             "update": "Actualitza la capa"
         },
         "opacity": "Opacitat de la superposició",
-        "terrain": "Terrain source",
+        "terrain": "Terreny",
         "label": {
             "basemaps": "Mapes base",
             "overlays": "Capes",
@@ -356,7 +356,7 @@
             "water": "Aigua",
             "shower": "Dutxa",
             "shelter": "Refugi",
-            "cemetery": "Cemetery",
+            "cemetery": "Cementiri",
             "motorized": "Cotxes i motos",
             "fuel-station": "Gasolinera",
             "parking": "Aparcament",

website/src/locales/de.json

@@ -21,14 +21,14 @@
         "export_all": "Alle exportieren...",
         "export_options": "Export-Einstellungen",
         "support_message": "Das Tool darf frei benutzt werden, aber es darf nicht woanders aufgesetzt werden. Bitte unterstützen Sie die Website, wenn Sie sie häufig benutzen. Vielen Dank!",
-        "support_button": "Hilf dabei, die Webseite kostenlos zu belassen",
+        "support_button": "Hilf uns, die Website weiterhin kostenlos bereitzustellen",
         "download_file": "Datei herunterladen",
         "download_files": "Dateien herunterladen",
         "edit": "Bearbeiten",
         "undo": "Rückgängig",
         "redo": "Wiederholen",
         "delete": "Löschen",
-        "delete_all": "Delete all",
+        "delete_all": "Alle löschen",
         "select_all": "Alle auswählen",
         "view": "Ansicht",
         "elevation_profile": "Höhenprofil",
@@ -80,7 +80,7 @@
         "center": "Zentrieren",
         "open_in": "Öffnen in",
         "copy_coordinates": "Koordinaten kopieren",
-        "edit_osm": "Edit in OpenStreetMap"
+        "edit_osm": "In OpenStreetMap bearbeiten"
     },
     "toolbar": {
         "routing": {
@@ -282,7 +282,7 @@
             "update": "Layer aktualisieren"
         },
         "opacity": "Deckkraft der Überlagerung",
-        "terrain": "Terrain source",
+        "terrain": "Geländequelle",
         "label": {
             "basemaps": "Basiskarte",
             "overlays": "Ebenen",
@@ -326,7 +326,7 @@
             "usgs": "USGS",
             "bikerouterGravel": "bikerouter.de Gravel",
             "cyclOSMlite": "CyclOSM Lite",
-            "mapterhornHillshade": "Mapterhorn Hillshade",
+            "mapterhornHillshade": "MapTiler Hillshade",
             "openRailwayMap": "OpenRailwayMap",
             "swisstopoSlope": "swisstopo Neigung",
             "swisstopoHiking": "swisstopo Wandern",
@@ -356,7 +356,7 @@
             "water": "Trinkwasser",
             "shower": "Dusche",
             "shelter": "Unterstand",
-            "cemetery": "Cemetery",
+            "cemetery": "Friedhof",
             "motorized": "Autos und Motorräder",
             "fuel-station": "Tankstelle",
             "parking": "Parken",

website/src/locales/en.json

@@ -231,7 +231,7 @@
         },
         "elevation": {
             "button": "Request elevation data",
-            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from MapTiler.",
+            "help": "Requesting elevation data will erase the existing elevation data, if any, and replace it with data from Mapbox.",
             "help_no_selection": "Select a file item to request elevation data."
         },
         "waypoint": {
@@ -273,7 +273,7 @@
             "new": "New custom layer",
             "edit": "Edit custom layer",
             "urls": "URL(s)",
-            "url_placeholder": "WMTS, WMS or MapLibre style JSON",
+            "url_placeholder": "WMTS, WMS or Mapbox style JSON",
             "max_zoom": "Max zoom",
             "layer_type": "Layer type",
             "basemap": "Basemap",
@@ -300,9 +300,8 @@
             "switzerland": "Switzerland",
             "united_kingdom": "United Kingdom",
             "united_states": "United States",
-            "maptilerTopo": "MapTiler Topo",
-            "maptilerOutdoors": "MapTiler Outdoors",
-            "maptilerSatellite": "MapTiler Satellite",
+            "mapboxOutdoors": "Mapbox Outdoors",
+            "mapboxSatellite": "Mapbox Satellite",
             "openStreetMap": "OpenStreetMap",
             "openTopoMap": "OpenTopoMap",
             "openHikingMap": "OpenHikingMap",
@@ -382,7 +381,7 @@
             "tram-stop": "Tram Stop",
             "bus-stop": "Bus Stop",
             "ferry": "Ferry",
-            "maptiler-dem": "MapTiler DEM",
+            "mapbox-dem": "Mapbox DEM",
             "mapterhorn": "Mapterhorn"
         }
     },
@@ -524,7 +523,7 @@
     },
     "embedding": {
         "title": "Create your own map",
-        "maptiler_key": "MapTiler key",
+        "mapbox_token": "Mapbox access token",
         "file_urls": "File URLs (separated by commas)",
         "drive_ids": "Google Drive file IDs (separated by commas)",
         "basemap": "Basemap",

website/src/locales/eu.json

@@ -282,7 +282,7 @@
             "update": "Eguneratu geruza"
         },
         "opacity": "Geruzaren opakutasuna",
-        "terrain": "Terrain source",
+        "terrain": "Lurrazala",
         "label": {
             "basemaps": "Oinarrizko mapak",
             "overlays": "Geruzak",

website/src/locales/hu.json

@@ -235,13 +235,13 @@
             "help_no_selection": "Select a file item to request elevation data."
         },
         "waypoint": {
-            "tooltip": "Create and edit points of interest",
-            "icon": "Icon",
+            "tooltip": "PoI létrehozása és módosítása",
+            "icon": "Ikon",
             "link": "Link",
-            "longitude": "Longitude",
+            "longitude": "Földrajzi hosszúság",
             "latitude": "Szélesség",
             "create": "POI fájlba mentése",
-            "add": "Add point of interest to file",
+            "add": "PoI fájlhoz adása",
             "help": "Töltsd ki az űrlapot egy új POI létrehozásához, vagy kattints egy meglévőre a szerkesztéshez. Kattints a térképre a koordináták megadásához, vagy áthelyezéshez egérrel húzd el a POI-kat.",
             "help_no_selection": "Select a file to create or edit points of interest."
         },
@@ -249,8 +249,8 @@
             "tooltip": "Reduce the number of GPS points",
             "tolerance": "Tűréshatár",
             "number_of_points": "GPS pontok száma",
-            "button": "Minify",
-            "help": "Use the slider to choose the number of GPS points to keep.",
+            "button": "Minimalizálás",
+            "help": "",
             "help_no_selection": "Select a trace to reduce the number of its GPS points."
         },
         "clean": {

website/src/locales/id.json

@@ -491,7 +491,7 @@
         "support_button": "Support gpx.studio on Ko-fi",
         "route_planning": "Route planning",
         "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
-        "file_processing": "Advanced file processing",
+        "file_processing": "Pengolahan file lanjutan",
         "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
         "maps": "Global and local maps",
         "maps_description": "A large collection of basemaps, overlays and points of interest to help you craft your next outdoor adventure, or visualize your latest achievement.",

website/src/locales/nl.json

@@ -54,7 +54,7 @@
         "mapillary": "Mapillary",
         "google": "Google",
         "toggle_street_view": "Street view",
-        "layers": "Kaart lagen...",
+        "layers": "Kaartlagen...",
         "distance_markers": "Afstandsmarkeringen",
         "direction_markers": "Richtingspijlen",
         "help": "Help",

website/src/locales/no.json

@@ -28,7 +28,7 @@
         "undo": "Angre",
         "redo": "Gjenta",
         "delete": "Slett",
-        "delete_all": "Delete all",
+        "delete_all": "Slett alle",
         "select_all": "Velg alle",
         "view": "Visning",
         "elevation_profile": "Høydeprofil",
@@ -80,7 +80,7 @@
         "center": "Sentrer",
         "open_in": "Åpne I",
         "copy_coordinates": "Kopier koordinater",
-        "edit_osm": "Edit in OpenStreetMap"
+        "edit_osm": "Rediger i OpenStreetMap"
     },
     "toolbar": {
         "routing": {
@@ -356,7 +356,7 @@
             "water": "Vann",
             "shower": "Dusj",
             "shelter": "Ly",
-            "cemetery": "Cemetery",
+            "cemetery": "Gravplass",
             "motorized": "Biler og motorsykler",
             "fuel-station": "Bensinstasjon",
             "parking": "Parkering",

website/src/locales/zh.json

@@ -282,7 +282,7 @@
             "update": "更新图层"
         },
         "opacity": "图层透明度",
-        "terrain": "Terrain source",
+        "terrain": "地形来源",
         "label": {
             "basemaps": "底图",
             "overlays": "叠加层",
@@ -326,7 +326,7 @@
             "usgs": "USGS",
             "bikerouterGravel": "bikerouter.de Gravel",
             "cyclOSMlite": "CyclOSM Lite",
-            "mapterhornHillshade": "Mapterhorn Hillshade",
+            "mapterhornHillshade": "山体阴影",
             "openRailwayMap": "OpenRailwayMap",
             "swisstopoSlope": "Swisstopo Slope",
             "swisstopoHiking": "Swisstopo Hiking",

website/src/routes/[[language]]/+page.svelte

@@ -29,7 +29,7 @@
         data: {
             fundingModule: Promise<any>;
             translationModule: Promise<any>;
-            maptilerModule: Promise<any>;
+            mapboxModule: Promise<any>;
         };
     } = $props();
 
@@ -152,14 +152,14 @@
                 class="relative w-full max-w-[320px] aspect-square rounded-2xl shadow-xl overflow-clip"
             >
                 <enhanced:img
-                    src="/src/lib/assets/img/home/maptiler-topo.png"
-                    alt="MapTiler Topo map screenshot."
+                    src="/src/lib/assets/img/home/mapbox-outdoors.png"
+                    alt="Mapbox Outdoors map screenshot."
                     class="absolute"
                     style="clip-path: inset(0 50% 50% 0);"
                 />
                 <enhanced:img
-                    src="/src/lib/assets/img/home/maptiler-satellite.png"
-                    alt="MapTiler Satellite map screenshot."
+                    src="/src/lib/assets/img/home/mapbox-satellite.png"
+                    alt="Mapbox Satellite map screenshot."
                     class="absolute"
                     style="clip-path: inset(0 0 50% 50%);"
                 />
@@ -280,12 +280,12 @@
                 <div class="text-lg font-semibold text-muted-foreground">
                     ❤️ {i18n._('homepage.supported_by')}
                 </div>
-                <a href="https://www.maptiler.com/" target="_blank">
-                    <Logo company="maptiler" class="w-60" />
+                <a href="https://www.mapbox.com/" target="_blank">
+                    <Logo company="mapbox" class="w-60" />
                 </a>
             </div>
-            {#await data.maptilerModule then maptilerModule}
-                <DocsContainer module={maptilerModule.default} />
+            {#await data.mapboxModule then mapboxModule}
+                <DocsContainer module={mapboxModule.default} />
             {/await}
         </div>
     </div>

website/src/routes/[[language]]/+page.ts

@@ -9,6 +9,6 @@ export async function load({ params }) {
     return {
         fundingModule: getModule(language, 'funding'),
         translationModule: getModule(language, 'translation'),
-        maptilerModule: getModule(language, 'maptiler'),
+        mapboxModule: getModule(language, 'mapbox'),
     };
 }

website/static/mapbox-logo-black.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="new" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 180" style="enable-background:new 0 0 800 180;" xml:space="preserve">
+<title>Mapbox_Logo_08</title>
+<g>
+	<g>
+		<path d="M594.6,49.8c-9.9,0-19.4,4.1-26.3,11.3V23c0-1.2-1-2.2-2.2-2.2l0,0h-13.4c-1.2,0-2.2,1-2.2,2.2v103c0,1.2,1,2.2,2.2,2.2
+			h13.4c1.2,0,2.2-1,2.2-2.2v0v-7.1c6.9,7.2,16.3,11.3,26.3,11.3c20.9,0,37.8-18,37.8-40.2S615.5,49.8,594.6,49.8z M591.5,114.1
+			c-12.7,0-23-10.6-23.1-23.8v-0.6c0.2-13.2,10.4-23.8,23.1-23.8c12.8,0,23.1,10.8,23.1,24.1S604.2,114.1,591.5,114.1L591.5,114.1z"
+			/>
+		<path d="M681.7,49.8c-22.6,0-40.9,18-40.9,40.2s18.3,40.2,40.9,40.2c22.6,0,40.9-18,40.9-40.2S704.3,49.8,681.7,49.8z
+			 M681.6,114.1c-12.8,0-23.1-10.8-23.1-24.1s10.4-24.1,23.1-24.1s23.1,10.8,23.1,24.1S694.3,114.1,681.6,114.1L681.6,114.1z"/>
+		<path d="M431.6,51.8h-13.4c-1.2,0-2.2,1-2.2,2.2c0,0,0,0,0,0v7.1c-6.9-7.2-16.3-11.3-26.3-11.3c-20.9,0-37.8,18-37.8,40.2
+			s16.9,40.2,37.8,40.2c9.9,0,19.4-4.1,26.3-11.3v7.1c0,1.2,1,2.2,2.2,2.2l0,0h13.4c1.2,0,2.2-1,2.2-2.2v0V54
+			C433.8,52.8,432.8,51.8,431.6,51.8z M392.8,114.1c-12.8,0-23.1-10.8-23.1-24.1s10.4-24.1,23.1-24.1c12.7,0,23,10.6,23.1,23.8v0.6
+			C415.8,103.5,405.5,114.1,392.8,114.1L392.8,114.1z"/>
+		<path d="M498.5,49.8c-9.9,0-19.4,4.1-26.3,11.3V54c0-1.2-1-2.2-2.2-2.2l0,0h-13.4c-1.2,0-2.2,1-2.2,2.2c0,0,0,0,0,0v103
+			c0,1.2,1,2.2,2.2,2.2l0,0h13.4c1.2,0,2.2-1,2.2-2.2v0v-38.1c6.9,7.2,16.3,11.3,26.3,11.3c20.9,0,37.8-18,37.8-40.2
+			S519.4,49.8,498.5,49.8z M495.4,114.1c-12.7,0-23-10.6-23.1-23.8v-0.6c0.2-13.2,10.4-23.8,23.1-23.8c12.8,0,23.1,10.8,23.1,24.1
+			S508.2,114.1,495.4,114.1L495.4,114.1z"/>
+		<path d="M311.8,49.8c-10,0.1-19.1,5.9-23.4,15c-4.9-9.3-14.7-15.1-25.2-15c-8.2,0-15.9,4-20.7,10.6V54c0-1.2-1-2.2-2.2-2.2l0,0
+			h-13.4c-1.2,0-2.2,1-2.2,2.2c0,0,0,0,0,0v72c0,1.2,1,2.2,2.2,2.2h0h13.4c1.2,0,2.2-1,2.2-2.2v0V82.9c0.5-9.6,7.2-17.3,15.4-17.3
+			c8.5,0,15.6,7.1,15.6,16.4v44c0,1.2,1,2.2,2.2,2.2l13.5,0c1.2,0,2.2-1,2.2-2.2c0,0,0,0,0,0l-0.1-44.8c1.2-8.8,7.5-15.6,15.2-15.6
+			c8.5,0,15.6,7.1,15.6,16.4v44c0,1.2,1,2.2,2.2,2.2l13.5,0c1.2,0,2.2-1,2.2-2.2c0,0,0,0,0,0l-0.1-49.5
+			C339.9,61.7,327.3,49.8,311.8,49.8z"/>
+		<path d="M794.7,125.1l-23.2-35.3l23-35c0.6-0.9,0.3-2.2-0.6-2.8c-0.3-0.2-0.7-0.3-1.1-0.3h-15.5c-1.2,0-2.3,0.6-2.9,1.6L760.9,76
+			l-13.5-22.6c-0.6-1-1.7-1.6-2.9-1.6h-15.5c-1.1,0-2,0.9-2,2c0,0.4,0.1,0.8,0.3,1.1l23,35l-23.2,35.3c-0.6,0.9-0.3,2.2,0.6,2.8
+			c0.3,0.2,0.7,0.3,1.1,0.3h15.5c1.2,0,2.3-0.6,2.9-1.6l13.8-23l13.8,23c0.6,1,1.7,1.6,2.9,1.6H793c1.1,0,2-0.9,2-2
+			C795,125.9,794.9,125.5,794.7,125.1z"/>
+	</g>
+	<g>
+		<path d="M93.9,1.1C44.8,1.1,5,40.9,5,90s39.8,88.9,88.9,88.9s88.9-39.8,88.9-88.9C182.8,40.9,143,1.1,93.9,1.1z M136.1,111.8
+			c-30.4,30.4-84.7,20.7-84.7,20.7s-9.8-54.2,20.7-84.7C89,30.9,117,31.6,134.7,49.2S153,94.9,136.1,111.8L136.1,111.8z"/>
+		<polygon points="104.1,53.2 95.4,71.1 77.5,79.8 95.4,88.5 104.1,106.4 112.8,88.5 130.7,79.8 112.8,71.1 		"/>
+	</g>
+</g>
+</svg>

website/static/mapbox-logo-white.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="new" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 180" style="enable-background:new 0 0 800 180;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<title>Mapbox_Logo_08</title>
+<g>
+	<g>
+		<path class="st0" d="M594.6,49.8c-9.9,0-19.4,4.1-26.3,11.3V23c0-1.2-1-2.2-2.2-2.2l0,0h-13.4c-1.2,0-2.2,1-2.2,2.2v103
+			c0,1.2,1,2.2,2.2,2.2h13.4c1.2,0,2.2-1,2.2-2.2v0v-7.1c6.9,7.2,16.3,11.3,26.3,11.3c20.9,0,37.8-18,37.8-40.2
+			S615.5,49.8,594.6,49.8z M591.5,114.1c-12.7,0-23-10.6-23.1-23.8v-0.6c0.2-13.2,10.4-23.8,23.1-23.8c12.8,0,23.1,10.8,23.1,24.1
+			S604.2,114.1,591.5,114.1L591.5,114.1z"/>
+		<path class="st0" d="M681.7,49.8c-22.6,0-40.9,18-40.9,40.2s18.3,40.2,40.9,40.2c22.6,0,40.9-18,40.9-40.2S704.3,49.8,681.7,49.8z
+			 M681.6,114.1c-12.8,0-23.1-10.8-23.1-24.1s10.4-24.1,23.1-24.1s23.1,10.8,23.1,24.1S694.3,114.1,681.6,114.1L681.6,114.1z"/>
+		<path class="st0" d="M431.6,51.8h-13.4c-1.2,0-2.2,1-2.2,2.2c0,0,0,0,0,0v7.1c-6.9-7.2-16.3-11.3-26.3-11.3
+			c-20.9,0-37.8,18-37.8,40.2s16.9,40.2,37.8,40.2c9.9,0,19.4-4.1,26.3-11.3v7.1c0,1.2,1,2.2,2.2,2.2l0,0h13.4c1.2,0,2.2-1,2.2-2.2
+			v0V54C433.8,52.8,432.8,51.8,431.6,51.8z M392.8,114.1c-12.8,0-23.1-10.8-23.1-24.1s10.4-24.1,23.1-24.1c12.7,0,23,10.6,23.1,23.8
+			v0.6C415.8,103.5,405.5,114.1,392.8,114.1L392.8,114.1z"/>
+		<path class="st0" d="M498.5,49.8c-9.9,0-19.4,4.1-26.3,11.3V54c0-1.2-1-2.2-2.2-2.2l0,0h-13.4c-1.2,0-2.2,1-2.2,2.2c0,0,0,0,0,0
+			v103c0,1.2,1,2.2,2.2,2.2l0,0h13.4c1.2,0,2.2-1,2.2-2.2v0v-38.1c6.9,7.2,16.3,11.3,26.3,11.3c20.9,0,37.8-18,37.8-40.2
+			S519.4,49.8,498.5,49.8z M495.4,114.1c-12.7,0-23-10.6-23.1-23.8v-0.6c0.2-13.2,10.4-23.8,23.1-23.8c12.8,0,23.1,10.8,23.1,24.1
+			S508.2,114.1,495.4,114.1L495.4,114.1z"/>
+		<path class="st0" d="M311.8,49.8c-10,0.1-19.1,5.9-23.4,15c-4.9-9.3-14.7-15.1-25.2-15c-8.2,0-15.9,4-20.7,10.6V54
+			c0-1.2-1-2.2-2.2-2.2l0,0h-13.4c-1.2,0-2.2,1-2.2,2.2c0,0,0,0,0,0v72c0,1.2,1,2.2,2.2,2.2h0h13.4c1.2,0,2.2-1,2.2-2.2v0V82.9
+			c0.5-9.6,7.2-17.3,15.4-17.3c8.5,0,15.6,7.1,15.6,16.4v44c0,1.2,1,2.2,2.2,2.2l13.5,0c1.2,0,2.2-1,2.2-2.2c0,0,0,0,0,0l-0.1-44.8
+			c1.2-8.8,7.5-15.6,15.2-15.6c8.5,0,15.6,7.1,15.6,16.4v44c0,1.2,1,2.2,2.2,2.2l13.5,0c1.2,0,2.2-1,2.2-2.2c0,0,0,0,0,0l-0.1-49.5
+			C339.9,61.7,327.3,49.8,311.8,49.8z"/>
+		<path class="st0" d="M794.7,125.1l-23.2-35.3l23-35c0.6-0.9,0.3-2.2-0.6-2.8c-0.3-0.2-0.7-0.3-1.1-0.3h-15.5
+			c-1.2,0-2.3,0.6-2.9,1.6L760.9,76l-13.5-22.6c-0.6-1-1.7-1.6-2.9-1.6h-15.5c-1.1,0-2,0.9-2,2c0,0.4,0.1,0.8,0.3,1.1l23,35
+			l-23.2,35.3c-0.6,0.9-0.3,2.2,0.6,2.8c0.3,0.2,0.7,0.3,1.1,0.3h15.5c1.2,0,2.3-0.6,2.9-1.6l13.8-23l13.8,23c0.6,1,1.7,1.6,2.9,1.6
+			H793c1.1,0,2-0.9,2-2C795,125.9,794.9,125.5,794.7,125.1z"/>
+	</g>
+	<g>
+		<path class="st0" d="M93.9,1.1C44.8,1.1,5,40.9,5,90s39.8,88.9,88.9,88.9s88.9-39.8,88.9-88.9C182.8,40.9,143,1.1,93.9,1.1z
+			 M136.1,111.8c-30.4,30.4-84.7,20.7-84.7,20.7s-9.8-54.2,20.7-84.7C89,30.9,117,31.6,134.7,49.2S153,94.9,136.1,111.8L136.1,111.8
+			z"/>
+		<polygon class="st0" points="104.1,53.2 95.4,71.1 77.5,79.8 95.4,88.5 104.1,106.4 112.8,88.5 130.7,79.8 112.8,71.1 		"/>
+	</g>
+</g>
+</svg>

website/static/maptiler-logo-dark.svg

@@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Vrstva_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 812 212" style="enable-background:new 0 0 812 212;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#3A1888;}
-	.st1{fill:#03A1C4;}
-	.st2{fill:#05D0DF;}
-	.st3{fill:#761FE8;}
-	.st4{fill:#FFAA01;}
-	.st5{fill:#F1175D;}
-	.st6{fill:#FB3A1B;}
-	.st7{fill:#FBC935;}
-	.st8{fill:#FFFFFF;}
-</style>
-<g>
-	<path class="st0" d="M94.3,164.2c9.2,9.2,33.8,34.3,33.8,34.3c-0.1,0.2,24.4-24.5,34.2-34.2l-34.1-34.1L94.3,164.2z"/>
-	<path class="st1" d="M128.3,130.2l34.1,34.1c0.1-0.1,0.1-0.1,0.2-0.2l34-34L162.5,96L128.3,130.2z"/>
-	<path class="st2" d="M196.6,130.1L196.6,130.1c18.9-18.9,18.9-49.4,0.1-68.3L162.5,96L196.6,130.1z"/>
-	<path class="st3" d="M94.1,96l-34,34c0,0,0,0,0,0l34.1,34.1c0,0,0,0,0.1,0.1l34-34L94.1,96z"/>
-	<path class="st4" d="M128.3,61.8L162.5,96l34.2-34.2c0,0,0,0-0.1-0.1l-34.1-34.1c0,0,0,0,0,0L128.3,61.8z"/>
-	<path class="st5" d="M60,61.9c-18.7,18.9-18.6,49.3,0.1,68.1l34-34L60,61.9z"/>
-	<path class="st6" d="M128.3,61.8L94.2,27.7l-34,34c-0.1,0.1-0.1,0.1-0.2,0.2L94.1,96L128.3,61.8z"/>
-	<path class="st7" d="M162.5,27.6c-18.9-18.8-49.4-18.8-68.2,0l-0.1,0.1l34.1,34.1L162.5,27.6z"/>
-</g>
-<path class="st8" d="M303.8,138.6v-34.9c0-8.6-4.5-16.4-13.3-16.4c-8.7,0-13.9,7.8-13.9,16.4v34.9h-16.1V73.4h14.9l1.2,7.9
-	c3.4-6.6,11-9,17.2-9c7.8,0,15.6,3.2,19.3,12.2c5.8-9.2,13.3-11.9,21.8-11.9c18.5,0,27.6,11.4,27.6,30.9v35.1h-16.1v-35.1
-	c0-8.6-3.6-15.9-12.3-15.9c-8.7,0-14.1,7.5-14.1,16.1v34.9H303.8z"/>
-<path class="st8" d="M430.5,73.5h15.5v65.1h-15.2l-0.8-9.5c-3.7,7.7-13.9,11.4-21.1,11.5c-19.3,0.1-33.6-11.8-33.6-34.6
-	c0-22.5,14.9-34.2,34-34.1c8.7,0,17,4.1,20.7,10.6L430.5,73.5z M391.4,106c0,12.4,8.6,19.8,19.3,19.8c25.4,0,25.4-39.5,0-39.5
-	C399.9,86.3,391.4,93.6,391.4,106z"/>
-<path class="st8" d="M459.5,165.8V73.5h15.1l1.1,9c5-7.3,13.7-10.4,21.1-10.4c20.1,0,33.4,14.9,33.4,34.1c0,19-12,34.1-32.9,34.1
-	c-6.9,0-17-2.1-21.7-9.3v34.9H459.5z M514.1,106.1c0-10.2-6.9-18.5-18.5-18.5c-11.6,0-18.5,8.3-18.5,18.5c0,10.2,7.5,18.5,18.5,18.5
-	C506.6,124.6,514.1,116.3,514.1,106.1z"/>
-<path class="st8" d="M559,53.7v19.7h22.2v5.4H559v39.8c0,8.8,1.9,15.1,12,15.1c3.2,0,6.7-1.1,10-2.6l2.2,5.3
-	c-4.1,2-8.2,3.3-12.3,3.3c-13.9,0-18.4-8.2-18.4-21V78.8h-13.9v-5.4h13.9v-19L559,53.7z"/>
-<path class="st8" d="M604.7,52.1c0,6.9-10.4,6.9-10.4,0C594.3,45.2,604.7,45.2,604.7,52.1z M596.1,73.1v65.5h6.5V73.1H596.1z"/>
-<path class="st8" d="M627.6,46.2v92.5h-6.5V46.2H627.6z"/>
-<path class="st8" d="M730.2,73.4l0.3,11.6c4.1-8.9,13.3-12.3,21.7-12.3c4.9-0.1,9.6,1.2,14,3.8l-2.9,5.3c-3.4-2.1-7.3-3-11.1-3
-	c-12.2,0.1-21.5,9.9-21.5,21.8v38h-6.5V73.4H730.2z"/>
-<g>
-	<path class="st8" d="M675.1,134.7c-11.5,0-21.4-7.2-25.5-17.4l0,0l0,0c0,0,0,0,0,0l52.8-14c0,0,0,0,0,0.1l5.6-1.5
-		c-2.3-16.5-16.2-29.3-33-29.3c-18.4,0-33.3,15.2-33.3,34c0,18.8,14.9,34,33.3,34c13.8,0,25.6-8.5,30.6-20.7l-5.3-2.3
-		C696.2,127.6,686.4,134.7,675.1,134.7z M647.5,106.6c0-15.5,12.3-28.1,27.5-28.1c11.9,0,22,7.7,25.9,18.5L647.9,111
-		C647.6,109.5,647.5,108.1,647.5,106.6z"/>
-</g>
-</svg>

website/static/maptiler-logo.svg

@@ -1,45 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Vrstva_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 812 212" style="enable-background:new 0 0 812 212;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#3A1888;}
-	.st1{fill:#03A1C4;}
-	.st2{fill:#05D0DF;}
-	.st3{fill:#761FE8;}
-	.st4{fill:#FFAA01;}
-	.st5{fill:#F1175D;}
-	.st6{fill:#FB3A1B;}
-	.st7{fill:#FBC935;}
-	.st8{fill:#333359;}
-</style>
-<path class="st0" d="M94.3,164.2c9.2,9.2,33.8,34.3,33.8,34.3c-0.1,0.2,24.4-24.5,34.2-34.2l-34.1-34.1L94.3,164.2z"/>
-<path class="st1" d="M128.3,130.2l34.1,34.1c0.1-0.1,0.1-0.1,0.2-0.2l34-34L162.5,96L128.3,130.2z"/>
-<path class="st2" d="M196.6,130.1L196.6,130.1c18.9-18.9,18.9-49.4,0.1-68.3L162.5,96L196.6,130.1z"/>
-<path class="st3" d="M94.1,96l-34,34c0,0,0,0,0,0l34.1,34.1c0,0,0,0,0.1,0.1l34-34L94.1,96z"/>
-<path class="st4" d="M128.3,61.8L162.5,96l34.2-34.2c0,0,0,0-0.1-0.1l-34.1-34.1c0,0,0,0,0,0L128.3,61.8z"/>
-<path class="st5" d="M60,61.9c-18.7,18.9-18.6,49.3,0.1,68.1l34-34L60,61.9z"/>
-<path class="st6" d="M128.3,61.8L94.2,27.7l-34,34c-0.1,0.1-0.1,0.1-0.2,0.2L94.1,96L128.3,61.8z"/>
-<path class="st7" d="M162.5,27.6c-18.9-18.8-49.4-18.8-68.2,0l-0.1,0.1l34.1,34.1L162.5,27.6z"/>
-<path class="st8" d="M303.7,138.6v-34.9c0-8.6-4.5-16.4-13.3-16.4c-8.7,0-13.9,7.8-13.9,16.4v34.9h-16.1V73.4h14.9l1.2,7.9
-	c3.4-6.6,11-9,17.2-9c7.8,0,15.6,3.2,19.3,12.2c5.8-9.2,13.3-11.9,21.8-11.9c18.5,0,27.6,11.4,27.6,30.9v35.1h-16.1v-35.1
-	c0-8.6-3.6-15.9-12.3-15.9c-8.7,0-14.1,7.5-14.1,16.1v34.9H303.7z"/>
-<path class="st8" d="M430.3,73.5h15.5v65.1h-15.2l-0.8-9.5c-3.7,7.7-13.9,11.4-21.1,11.5c-19.3,0.1-33.6-11.8-33.6-34.6
-	c0-22.5,14.9-34.2,34-34.1c8.7,0,17,4.1,20.7,10.6L430.3,73.5z M391.2,106c0,12.4,8.6,19.8,19.3,19.8c25.4,0,25.4-39.5,0-39.5
-	C399.8,86.3,391.2,93.6,391.2,106z"/>
-<path class="st8" d="M459.4,165.8V73.5h15.1l1.1,9c5-7.3,13.7-10.4,21.1-10.4c20.1,0,33.4,14.9,33.4,34.1c0,19-12,34.1-32.9,34.1
-	c-6.9,0-17-2.1-21.7-9.3v34.9H459.4z M514,106.1c0-10.2-6.9-18.5-18.5-18.5c-11.6,0-18.5,8.3-18.5,18.5c0,10.2,7.5,18.5,18.5,18.5
-	C506.4,124.6,514,116.3,514,106.1z"/>
-<path class="st8" d="M558.9,53.7v19.7h22.2v5.4h-22.2v39.8c0,8.8,1.9,15.1,12,15.1c3.2,0,6.7-1.1,10-2.6l2.2,5.3
-	c-4.1,2-8.2,3.3-12.3,3.3c-13.9,0-18.4-8.2-18.4-21V78.8h-13.9v-5.4h13.9v-19L558.9,53.7z"/>
-<path class="st8" d="M604.6,52.1c0,6.9-10.4,6.9-10.4,0C594.1,45.2,604.6,45.2,604.6,52.1z M596,73.1v65.5h6.5V73.1H596z"/>
-<path class="st8" d="M627.4,46.2v92.5H621V46.2H627.4z"/>
-<path class="st8" d="M730.1,73.4l0.3,11.6c4.1-8.9,13.3-12.3,21.7-12.3c4.9-0.1,9.6,1.2,14,3.8l-2.9,5.3c-3.4-2.1-7.3-3-11.1-3
-	c-12.2,0.1-21.5,9.9-21.5,21.8v38H724V73.4H730.1z"/>
-<g>
-	<path class="st8" d="M674.9,134.7c-11.5,0-21.4-7.2-25.5-17.4l0,0l0,0c0,0,0,0,0,0l52.8-14c0,0,0,0,0,0.1l5.6-1.5
-		c-2.3-16.5-16.2-29.3-33-29.3c-18.4,0-33.3,15.2-33.3,34c0,18.8,14.9,34,33.3,34c13.8,0,25.6-8.5,30.6-20.7l-5.3-2.3
-		C696.1,127.6,686.3,134.7,674.9,134.7z M647.4,106.6c0-15.5,12.3-28.1,27.5-28.1c11.9,0,22,7.7,25.9,18.5L647.7,111
-		C647.5,109.5,647.4,108.1,647.4,106.6z"/>
-</g>
-</svg>