Merge branch 'maplibre' into dev

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

@@ -29,12 +29,12 @@
         data: {
             fundingModule: Promise<any>;
             translationModule: Promise<any>;
-            mapboxModule: Promise<any>;
         };
     } = $props();
 
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
+    let hoveredPoint = writable(null);
     let additionalDatasets = writable(['speed', 'atemp']);
     let elevationFill = writable(undefined);
 
@@ -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/mapbox-outdoors.png"
-                    alt="Mapbox Outdoors map screenshot."
+                    src="/src/lib/assets/img/home/maptiler-topo.png"
+                    alt="MapTiler Topo map screenshot."
                     class="absolute"
                     style="clip-path: inset(0 50% 50% 0);"
                 />
                 <enhanced:img
-                    src="/src/lib/assets/img/home/mapbox-satellite.png"
-                    alt="Mapbox Satellite map screenshot."
+                    src="/src/lib/assets/img/home/maptiler-satellite.png"
+                    alt="MapTiler Satellite map screenshot."
                     class="absolute"
                     style="clip-path: inset(0 0 50% 50%);"
                 />
@@ -197,6 +197,7 @@
             <ElevationProfile
                 {gpxStatistics}
                 {slicedGPXStatistics}
+                {hoveredPoint}
                 {additionalDatasets}
                 {elevationFill}
             />
@@ -270,23 +271,4 @@
             </Button>
         </div>
     </div>
-    <div class="px-12 md:px-24 flex flex-col items-center">
-        <div
-            class="max-w-4xl flex flex-col lg:flex-row items-center justify-center gap-x-12 gap-y-6 p-6 border rounded-2xl shadow-xl bg-secondary"
-        >
-            <div
-                class="shrink-0 flex flex-col sm:flex-row lg:flex-col items-center gap-x-4 gap-y-2"
-            >
-                <div class="text-lg font-semibold text-muted-foreground">
-                    ❤️ {i18n._('homepage.supported_by')}
-                </div>
-                <a href="https://www.mapbox.com/" target="_blank">
-                    <Logo company="mapbox" class="w-60" />
-                </a>
-            </div>
-            {#await data.mapboxModule then mapboxModule}
-                <DocsContainer module={mapboxModule.default} />
-            {/await}
-        </div>
-    </div>
 </div>

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

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

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

@@ -16,7 +16,7 @@
     import { loadFiles } from '$lib/logic/file-actions';
     import { onDestroy, onMount } from 'svelte';
     import { page } from '$app/state';
-    import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
+    import { gpxStatistics, hoveredPoint, slicedGPXStatistics } from '$lib/logic/statistics';
     import { getURLForGoogleDriveFile } from '$lib/components/embedding/embedding';
     import { db } from '$lib/db';
     import { fileStateCollection } from '$lib/logic/file-state';
@@ -30,6 +30,11 @@
         elevationFill,
     } = settings;
 
+    let bottomPanelWidth: number | undefined = $state();
+    let bottomPanelOrientation = $derived(
+        bottomPanelWidth && bottomPanelWidth >= 540 && $elevationProfile ? 'horizontal' : 'vertical'
+    );
+
     onMount(async () => {
         settings.connectToDatabase(db);
         fileStateCollection.connectToDatabase(db).then(() => {
@@ -127,19 +132,23 @@
             />
         {/if}
         <div
-            class="{$elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
+            bind:offsetWidth={bottomPanelWidth}
+            class="flex {bottomPanelOrientation == 'vertical'
+                ? 'flex-col'
+                : 'flex-row py-2'} gap-1 px-2"
             style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
         >
             <GPXStatistics
                 {gpxStatistics}
                 {slicedGPXStatistics}
                 panelSize={$bottomPanelSize}
-                orientation={$elevationProfile ? 'vertical' : 'horizontal'}
+                orientation={bottomPanelOrientation == 'horizontal' ? 'vertical' : 'horizontal'}
             />
             {#if $elevationProfile}
                 <ElevationProfile
                     {gpxStatistics}
                     {slicedGPXStatistics}
+                    {hoveredPoint}
                     {additionalDatasets}
                     {elevationFill}
                 />