embedding progress

2025-09-01 08:12:32 +00:00 · 2024-07-11 18:42:49 +02:00
parent 24cf98d68f
commit 030f08abfd
21 changed files with 760 additions and 251 deletions
--- a/website/src/lib/components/App.svelte
+++ b/website/src/lib/components/App.svelte
@@ -1,91 +0,0 @@
-<script lang="ts">
-	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
-	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
-	import FileList from '$lib/components/file-list/FileList.svelte';
-	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
-	import Map from '$lib/components/Map.svelte';
-	import Menu from '$lib/components/Menu.svelte';
-	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
-	import StreetViewControl from '$lib/components/street-view-control/StreetViewControl.svelte';
-	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
-	import Resizer from '$lib/components/Resizer.svelte';
-	import { Toaster } from '$lib/components/ui/sonner';
-
-	import { settings } from '$lib/db';
-	import { gpxStatistics, slicedGPXStatistics } from '$lib/stores';
-
-	const {
-		verticalFileView,
-		elevationProfile,
-		bottomPanelSize,
-		rightPanelSize,
-		distanceUnits,
-		velocityUnits,
-		temperatureUnits,
-		additionalDatasets,
-		elevationFill
-	} = settings;
-</script>
-
-<div class="fixed flex flex-row w-screen h-screen h-dvh">
-	<div class="flex flex-col grow h-full min-w-0">
-		<div class="grow relative">
-			<Menu />
-			<div
-				class="absolute top-0 bottom-0 left-0 z-20 flex flex-col justify-center pointer-events-none"
-			>
-				<Toolbar />
-			</div>
-			<Map class="h-full {$verticalFileView ? '' : 'horizontal'}" />
-			<StreetViewControl />
-			<LayerControl />
-			<GPXLayers />
-			<Toaster richColors />
-			{#if !$verticalFileView}
-				<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
-					<FileList orientation="horizontal" />
-				</div>
-			{/if}
-		</div>
-		{#if $elevationProfile}
-			<Resizer orientation="row" bind:after={$bottomPanelSize} minAfter={100} maxAfter={300} />
-		{/if}
-		<div
-			class="{$elevationProfile ? '' : 'h-10'} flex flex-row gap-2"
-			style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
-		>
-			<GPXStatistics
-				{gpxStatistics}
-				{slicedGPXStatistics}
-				panelSize={$bottomPanelSize}
-				orientation={$elevationProfile ? 'vertical' : 'horizontal'}
-				velocityUnits={$velocityUnits}
-			/>
-			{#if $elevationProfile}
-				<ElevationProfile
-					{gpxStatistics}
-					{slicedGPXStatistics}
-					bind:additionalDatasets={$additionalDatasets}
-					bind:elevationFill={$elevationFill}
-					panelSize={$bottomPanelSize}
-					distanceUnits={$distanceUnits}
-					velocityUnits={$velocityUnits}
-					temperatureUnits={$temperatureUnits}
-					class="py-2 pr-4"
-				/>
-			{/if}
-		</div>
-	</div>
-	{#if $verticalFileView}
-		<Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
-		<FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" />
-	{/if}
-</div>
-
-<style lang="postcss">
-	div :global(.toaster.group) {
-		@apply absolute;
-		@apply right-2;
-		--offset: 50px !important;
-	}
-</style>
--- a/website/src/lib/components/ElevationProfile.svelte
+++ b/website/src/lib/components/ElevationProfile.svelte
@@ -39,15 +39,16 @@
 	import type { Writable } from 'svelte/store';
 	import { DateFormatter } from '@internationalized/date';
 	import type { GPXStatistics } from 'gpx';
+	import { settings } from '$lib/db';

 	export let gpxStatistics: Writable<GPXStatistics>;
 	export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
-	export let distanceUnits: 'metric' | 'imperial';
-	export let velocityUnits: 'speed' | 'pace';
-	export let temperatureUnits: 'celsius' | 'fahrenheit';
 	export let panelSize: number;
 	export let additionalDatasets: string[];
 	export let elevationFill: 'slope' | 'surface' | undefined;
+	export let showControls: boolean = true;
+
+	const { distanceUnits, velocityUnits, temperatureUnits } = settings;

 	let df: DateFormatter;

@@ -61,7 +62,7 @@
 	let canvas: HTMLCanvasElement;
 	let showAdditionalScales = true;
 	let updateShowAdditionalScales = () => {
-		showAdditionalScales = canvas.width >= 1200;
+		showAdditionalScales = canvas.width >= 600;
 	};
 	let overlay: HTMLCanvasElement;
 	let chart: Chart;
@@ -135,7 +136,7 @@
 							}
 							return `${$_('quantities.elevation')}: ${getElevationWithUnits(point.y, false)}`;
 						} else if (context.datasetIndex === 1) {
-							return `${velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')}: ${getVelocityWithUnits(point.y, false)}`;
+							return `${$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')}: ${getVelocityWithUnits(point.y, false)}`;
 						} else if (context.datasetIndex === 2) {
 							return `${$_('quantities.heartrate')}: ${getHeartRateWithUnits(point.y)}`;
 						} else if (context.datasetIndex === 3) {
@@ -194,7 +195,7 @@
 	} = {
 		speed: {
 			id: 'speed',
-			getLabel: () => (velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')),
+			getLabel: () => ($velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')),
 			getUnits: () => getVelocityUnits()
 		},
 		hr: {
@@ -234,13 +235,13 @@
 			grid: {
 				display: false
 			},
-			reverse: () => id === 'speed' && velocityUnits === 'pace',
+			reverse: () => id === 'speed' && $velocityUnits === 'pace',
 			display: false
 		};
 	}
 	options.scales.yspeed['ticks'] = {
 		callback: function (value: number) {
-			if (velocityUnits === 'speed') {
+			if ($velocityUnits === 'speed') {
 				return value;
 			} else {
 				return secondsToHHMMSS(value);
@@ -342,7 +343,7 @@
 		canvas.addEventListener('pointerup', onMouseUp);
 	});

-	$: if (chart && distanceUnits && velocityUnits && temperatureUnits) {
+	$: if (chart && $distanceUnits && $velocityUnits && $temperatureUnits) {
 		let data = $gpxStatistics;

 		// update data
@@ -548,66 +549,68 @@
 		<canvas bind:this={overlay} class=" w-full h-full absolute pointer-events-none"></canvas>
 		<canvas bind:this={canvas} class="w-full h-full"></canvas>
 	</div>
-	<div class="h-full flex flex-col justify-center" style="width: {panelSize > 158 ? 22 : 42}px">
-		<ToggleGroup.Root
-			class="{panelSize > 158
-				? 'flex-col'
-				: 'flex-row'} flex-wrap gap-0 min-h-0 content-center border rounded-t-md"
-			type="single"
-			bind:value={elevationFill}
-		>
-			<ToggleGroup.Item class="p-0 w-5 h-5" value="slope">
-				<Tooltip side="left">
-					<TriangleRight slot="data" size="15" />
-					<span slot="tooltip">{$_('chart.show_slope')}</span>
-				</Tooltip>
-			</ToggleGroup.Item>
-			<ToggleGroup.Item class="p-0 w-5 h-5" value="surface">
-				<Tooltip side="left">
-					<BrickWall slot="data" size="15" />
-					<span slot="tooltip">{$_('chart.show_surface')}</span>
-				</Tooltip>
-			</ToggleGroup.Item>
-		</ToggleGroup.Root>
-		<ToggleGroup.Root
-			class="{panelSize > 158
-				? 'flex-col'
-				: 'flex-row'} flex-wrap gap-0 min-h-0 content-center border rounded-b-md -mt-[1px]"
-			type="multiple"
-			bind:value={additionalDatasets}
-		>
-			<ToggleGroup.Item class="p-0 w-5 h-5" value="speed">
-				<Tooltip side="left">
-					<Zap slot="data" size="15" />
-					<span slot="tooltip"
-						>{velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}</span
-					>
-				</Tooltip>
-			</ToggleGroup.Item>
-			<ToggleGroup.Item class="p-0 w-5 h-5" value="hr">
-				<Tooltip side="left">
-					<HeartPulse slot="data" size="15" />
-					<span slot="tooltip">{$_('chart.show_heartrate')}</span>
-				</Tooltip>
-			</ToggleGroup.Item>
-			<ToggleGroup.Item class="p-0 w-5 h-5" value="cad">
-				<Tooltip side="left">
-					<Orbit slot="data" size="15" />
-					<span slot="tooltip">{$_('chart.show_cadence')}</span>
-				</Tooltip>
-			</ToggleGroup.Item>
-			<ToggleGroup.Item class="p-0 w-5 h-5" value="atemp">
-				<Tooltip side="left">
-					<Thermometer slot="data" size="15" />
-					<span slot="tooltip">{$_('chart.show_temperature')}</span>
-				</Tooltip>
-			</ToggleGroup.Item>
-			<ToggleGroup.Item class="p-0 w-5 h-5" value="power">
-				<Tooltip side="left">
-					<SquareActivity slot="data" size="15" />
-					<span slot="tooltip">{$_('chart.show_power')}</span>
-				</Tooltip>
-			</ToggleGroup.Item>
-		</ToggleGroup.Root>
-	</div>
+	{#if showControls}
+		<div class="h-full flex flex-col justify-center" style="width: {panelSize > 158 ? 22 : 42}px">
+			<ToggleGroup.Root
+				class="{panelSize > 158
+					? 'flex-col'
+					: 'flex-row'} flex-wrap gap-0 min-h-0 content-center border rounded-t-md"
+				type="single"
+				bind:value={elevationFill}
+			>
+				<ToggleGroup.Item class="p-0 w-5 h-5" value="slope">
+					<Tooltip side="left">
+						<TriangleRight slot="data" size="15" />
+						<span slot="tooltip">{$_('chart.show_slope')}</span>
+					</Tooltip>
+				</ToggleGroup.Item>
+				<ToggleGroup.Item class="p-0 w-5 h-5" value="surface">
+					<Tooltip side="left">
+						<BrickWall slot="data" size="15" />
+						<span slot="tooltip">{$_('chart.show_surface')}</span>
+					</Tooltip>
+				</ToggleGroup.Item>
+			</ToggleGroup.Root>
+			<ToggleGroup.Root
+				class="{panelSize > 158
+					? 'flex-col'
+					: 'flex-row'} flex-wrap gap-0 min-h-0 content-center border rounded-b-md -mt-[1px]"
+				type="multiple"
+				bind:value={additionalDatasets}
+			>
+				<ToggleGroup.Item class="p-0 w-5 h-5" value="speed">
+					<Tooltip side="left">
+						<Zap slot="data" size="15" />
+						<span slot="tooltip"
+							>{$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}</span
+						>
+					</Tooltip>
+				</ToggleGroup.Item>
+				<ToggleGroup.Item class="p-0 w-5 h-5" value="hr">
+					<Tooltip side="left">
+						<HeartPulse slot="data" size="15" />
+						<span slot="tooltip">{$_('chart.show_heartrate')}</span>
+					</Tooltip>
+				</ToggleGroup.Item>
+				<ToggleGroup.Item class="p-0 w-5 h-5" value="cad">
+					<Tooltip side="left">
+						<Orbit slot="data" size="15" />
+						<span slot="tooltip">{$_('chart.show_cadence')}</span>
+					</Tooltip>
+				</ToggleGroup.Item>
+				<ToggleGroup.Item class="p-0 w-5 h-5" value="atemp">
+					<Tooltip side="left">
+						<Thermometer slot="data" size="15" />
+						<span slot="tooltip">{$_('chart.show_temperature')}</span>
+					</Tooltip>
+				</ToggleGroup.Item>
+				<ToggleGroup.Item class="p-0 w-5 h-5" value="power">
+					<Tooltip side="left">
+						<SquareActivity slot="data" size="15" />
+						<span slot="tooltip">{$_('chart.show_power')}</span>
+					</Tooltip>
+				</ToggleGroup.Item>
+			</ToggleGroup.Root>
+		</div>
+	{/if}
 </div>
--- a/website/src/lib/components/EmbeddingPlayground.svelte
+++ b/website/src/lib/components/EmbeddingPlayground.svelte
@@ -0,0 +1,209 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Label } from '$lib/components/ui/label';
+	import { Input } from '$lib/components/ui/input';
+	import * as Select from '$lib/components/ui/select';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import * as RadioGroup from '$lib/components/ui/radio-group';
+	import { basemaps } from '$lib/assets/layers';
+	import { Zap, HeartPulse, Orbit, Thermometer, SquareActivity } from 'lucide-svelte';
+	import { _ } from 'svelte-i18n';
+
+	let options = {
+		files: ['https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx'],
+		basemap: 'mapboxOutdoors',
+		elevation: {
+			show: true,
+			height: 170,
+			data: [],
+			fill: undefined,
+			controls: true
+		},
+		distanceUnits: 'metric',
+		velocityUnits: 'speed',
+		temperatureUnits: 'celsius'
+	};
+
+	let files =
+		'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx';
+
+	$: if (files) {
+		options.files = files.split(',');
+	}
+
+	let additionalData = {
+		speed: false,
+		hr: false,
+		cad: false,
+		temp: false,
+		power: false
+	};
+
+	$: if (additionalData) {
+		options.elevation.data = Object.keys(additionalData).filter((key) => additionalData[key]);
+	}
+
+	let manualCamera = false;
+
+	let zoom = 0;
+	let lat = 0;
+	let lon = 0;
+	let bearing = 0;
+	let pitch = 0;
+
+	$: hash = manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '';
+
+	$: console.log(options);
+</script>
+
+<iframe
+	src={`../../embed?options=${encodeURIComponent(JSON.stringify(options))}${hash}`}
+	style="width: 100%; height: 600px;"
+></iframe>
+
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Card Title</Card.Title>
+		<Card.Description>Card Description</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<fieldset class="flex flex-col gap-3">
+			<Label for="file_urls">{$_('embedding.file_urls')}</Label>
+			<Input id="file_urls" type="text" class="h-8" bind:value={files} />
+			<Label for="basemap">{$_('embedding.basemap')}</Label>
+			<Select.Root
+				onSelectedChange={(selected) => {
+					if (selected?.value) {
+						options.basemap = selected?.value;
+					}
+				}}
+			>
+				<Select.Trigger id="basemap" class="w-[180px] h-8">
+					<Select.Value />
+				</Select.Trigger>
+				<Select.Content class="max-h-60 overflow-y-scroll">
+					{#each Object.keys(basemaps) as basemap}
+						<Select.Item value={basemap}>{$_(`layers.label.${basemap}`)}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<div class="flex flex-row items-center gap-2">
+				<Label for="profile">{$_('menu.elevation_profile')}</Label>
+				<Checkbox id="profile" bind:checked={options.elevation.show} />
+			</div>
+			{#if options.elevation.show}
+				<div class="grid grid-cols-2 gap-x-6 gap-y-3 rounded-md border p-3 mt-1">
+					<Label class="flex flex-row items-center gap-2">
+						{$_('embedding.height')}
+						<Input type="number" bind:value={options.elevation.height} class="h-8 w-20" />
+					</Label>
+					<div class="flex flex-row items-center gap-2">
+						<span class="shrink-0">
+							{$_('embedding.fill_by')}
+						</span>
+						<Select.Root
+							onSelectedChange={(selected) => {
+								if (selected?.value) {
+									if (selected?.value === 'none') {
+										options.elevation.fill = undefined;
+									} else {
+										options.elevation.fill = selected?.value;
+									}
+								}
+							}}
+						>
+							<Select.Trigger class="grow h-8">
+								<Select.Value />
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="slope">{$_('quantities.slope')}</Select.Item>
+								<Select.Item value="surface">{$_('quantities.surface')}</Select.Item>
+								<Select.Item value="none">{$_('embedding.none')}</Select.Item>
+							</Select.Content>
+						</Select.Root>
+					</div>
+					<div class="flex flex-row items-center gap-2">
+						<Checkbox id="controls" bind:checked={options.elevation.controls} />
+						<Label for="controls">{$_('embedding.show_controls')}</Label>
+					</div>
+					<div class="flex flex-row items-center gap-2">
+						<Checkbox id="show-speed" bind:checked={additionalData.speed} />
+						<Label for="show-speed" class="flex flex-row items-center gap-1">
+							<Zap size="16" />
+							{$_('chart.show_speed')}
+						</Label>
+					</div>
+					<div class="flex flex-row items-center gap-2">
+						<Checkbox id="show-hr" bind:checked={additionalData.hr} />
+						<Label for="show-hr" class="flex flex-row items-center gap-1">
+							<HeartPulse size="16" />
+							{$_('chart.show_heartrate')}
+						</Label>
+					</div>
+					<div class="flex flex-row items-center gap-2">
+						<Checkbox id="show-cad" bind:checked={additionalData.cad} />
+						<Label for="show-cad" class="flex flex-row items-center gap-1">
+							<Orbit size="16" />
+							{$_('chart.show_cadence')}
+						</Label>
+					</div>
+					<div class="flex flex-row items-center gap-2">
+						<Checkbox id="show-temp" bind:checked={additionalData.temp} />
+						<Label for="show-temp" class="flex flex-row items-center gap-1">
+							<Thermometer size="16" />
+							{$_('chart.show_temperature')}
+						</Label>
+					</div>
+					<div class="flex flex-row items-center gap-2">
+						<Checkbox id="show-power" bind:checked={additionalData.power} />
+						<Label for="show-power" class="flex flex-row items-center gap-1">
+							<SquareActivity size="16" />
+							{$_('chart.show_power')}
+						</Label>
+					</div>
+				</div>
+			{/if}
+			<div class="flex flex-row flex-wrap justify-between gap-3">
+				<Label class="flex flex-col items-start gap-2">
+					{$_('menu.distance_units')}
+					<RadioGroup.Root bind:value={options.distanceUnits}>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="metric" id="metric" />
+							<Label for="metric">{$_('menu.metric')}</Label>
+						</div>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="imperial" id="imperial" />
+							<Label for="imperial">{$_('menu.imperial')}</Label>
+						</div>
+					</RadioGroup.Root>
+				</Label>
+				<Label class="flex flex-col items-start gap-2">
+					{$_('menu.velocity_units')}
+					<RadioGroup.Root bind:value={options.velocityUnits}>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="speed" id="speed" />
+							<Label for="speed">{$_('quantities.speed')}</Label>
+						</div>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="pace" id="pace" />
+							<Label for="pace">{$_('quantities.pace')}</Label>
+						</div>
+					</RadioGroup.Root>
+				</Label>
+				<Label class="flex flex-col items-start gap-2">
+					{$_('menu.temperature_units')}
+					<RadioGroup.Root bind:value={options.temperatureUnits}>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="celsius" id="celsius" />
+							<Label for="celsius">{$_('menu.celsius')}</Label>
+						</div>
+						<div class="flex items-center space-x-2">
+							<RadioGroup.Item value="fahrenheit" id="fahrenheit" />
+							<Label for="fahrenheit">{$_('menu.fahrenheit')}</Label>
+						</div>
+					</RadioGroup.Root>
+				</Label>
+			</div>
+		</fieldset>
+	</Card.Content>
+</Card.Root>
--- a/website/src/lib/components/Export.svelte
+++ b/website/src/lib/components/Export.svelte
@@ -9,7 +9,7 @@
 		exportState
 	} from '$lib/stores';
 	import { fileObservers } from '$lib/db';
-	import { Cloud, Download } from 'lucide-svelte';
+	import { Download } from 'lucide-svelte';
 	import { _ } from 'svelte-i18n';
 	import { selection } from './file-list/Selection';

--- a/website/src/lib/components/GPXStatistics.svelte
+++ b/website/src/lib/components/GPXStatistics.svelte
@@ -8,13 +8,15 @@
 	import { _ } from 'svelte-i18n';
 	import type { GPXStatistics } from 'gpx';
 	import type { Writable } from 'svelte/store';
+	import { settings } from '$lib/db';

 	export let gpxStatistics: Writable<GPXStatistics>;
 	export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
-	export let velocityUnits: 'speed' | 'pace';
 	export let orientation: 'horizontal' | 'vertical';
 	export let panelSize: number;

+	const { velocityUnits } = settings;
+
 	let statistics: GPXStatistics;

 	$: if ($slicedGPXStatistics !== undefined) {
@@ -26,8 +28,8 @@

 <Card.Root
 	class="h-full {orientation === 'vertical'
-		? 'min-w-52'
-		: 'w-full pr-4'} border-none shadow-none pl-4"
+		? 'min-w-44 sm:min-w-52 text-sm sm:text-base'
+		: 'w-full'} border-none shadow-none"
 >
 	<Card.Content
 		class="h-full flex {orientation === 'vertical'
@@ -59,7 +61,7 @@
 					<WithUnits value={statistics.global.speed.total} type="speed" />
 				</span>
 				<span slot="tooltip"
-					>{velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
+					>{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
 						'quantities.moving'
 					)} / {$_('quantities.total')})</span
 				>
--- a/website/src/lib/components/Head.svelte
+++ b/website/src/lib/components/Head.svelte
@@ -4,7 +4,7 @@
 	import { languages } from '$lib/languages';
 	import { _, isLoading } from 'svelte-i18n';

-	$: location = $page.route.id?.split('/').slice(1).at(1) ?? 'home';
+	$: location = $page.route.id?.split('/')[2] ?? 'home';
 </script>

 <svelte:head>
--- a/website/src/lib/components/Map.svelte
+++ b/website/src/lib/components/Map.svelte
@@ -15,6 +15,8 @@

 	mapboxgl.accessToken = mapboxAccessToken;

+	export let geocoder = true;
+
 	let fitBoundsOptions: mapboxgl.FitBoundsOptions = {
 		maxZoom: 15,
 		linear: true,
@@ -51,15 +53,17 @@

 		newMap.addControl(new mapboxgl.NavigationControl());

-		newMap.addControl(
-			new MapboxGeocoder({
-				accessToken: mapboxgl.accessToken,
-				mapboxgl: mapboxgl,
-				collapsed: true,
-				flyTo: fitBoundsOptions,
-				language: get(locale)
-			})
-		);
+		if (geocoder) {
+			newMap.addControl(
+				new MapboxGeocoder({
+					accessToken: mapboxgl.accessToken,
+					mapboxgl: mapboxgl,
+					collapsed: true,
+					flyTo: fitBoundsOptions,
+					language: get(locale)
+				})
+			);
+		}

 		newMap.addControl(
 			new mapboxgl.GeolocateControl({
--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -124,7 +124,7 @@
 	<div
 		class="w-fit flex flex-row items-center justify-center p-1 bg-background rounded-b-md md:rounded-md pointer-events-auto shadow-md"
 	>
-		<a href={getURLForLanguage($locale, '/')} target="_blank">
+		<a href="../" target="_blank">
 			<Logo class="h-5 mt-0.5 mx-2 md:hidden" iconOnly={true} />
 			<Logo class="h-5 mt-0.5 mx-2 hidden md:block" />
 		</a>
@@ -416,7 +416,7 @@
 		<div class="h-fit flex flex-row items-center ml-1 gap-1">
 			<Button
 				variant="ghost"
-				href={getURLForLanguage($locale, '/help')}
+				href="../help"
 				target="_blank"
 				class="cursor-default h-fit rounded-sm px-3 py-0.5"
 			>
--- a/website/src/lib/components/OpenIn.svelte
+++ b/website/src/lib/components/OpenIn.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import Logo from '$lib/components/Logo.svelte';
+	import { _ } from 'svelte-i18n';
+
+	export let files: string[];
+</script>
+
+<Button
+	variant="ghost"
+	class="absolute top-0 flex-wrap h-fit bg-background font-semibold rounded-md py-1 px-2 gap-1.5 xs:text-base mt-2.5 ml-2.5 mr-12"
+	href="../app?files={encodeURIComponent(JSON.stringify(files))}"
+	target="_blank"
+>
+	{$_('menu.open_in')}
+	<Logo class="h-[18px] xs:h-5 translate-y-[1px]" />
+</Button>
--- a/website/src/lib/components/docs/DocsLoader.svelte
+++ b/website/src/lib/components/docs/DocsLoader.svelte
@@ -80,6 +80,11 @@
 		@apply pl-4;
 	}

+	:global(.markdown ol) {
+		@apply list-decimal;
+		@apply pl-4;
+	}
+
 	:global(.markdown li) {
 		@apply mt-1;
 		@apply first:mt-0;
--- a/website/src/lib/components/docs/docs.ts
+++ b/website/src/lib/components/docs/docs.ts
@@ -8,6 +8,7 @@ export const guides: Record<string, string[]> = {
    toolbar: ['routing', 'poi', 'scissors', 'time', 'merge', 'extract', 'minify', 'clean'],
    'map-controls': [],
    'gpx': [],
+    'integration': [],
 };

 export const guideIcons: Record<string, string | ComponentType<Icon>> = {
@@ -29,6 +30,7 @@ export const guideIcons: Record<string, string | ComponentType<Icon>> = {
    "clean": SquareDashedMousePointer,
    "map-controls": "🗺",
    "gpx": "💾",
+    "integration": "{ 👩‍💻 }",
 };

 export function getPreviousGuide(currentGuide: string): string | undefined {
@@ -40,7 +42,7 @@ export function getPreviousGuide(currentGuide: string): string | undefined {
        if (index === 0) {
            return undefined;
        }
-        let previousGuide = keys.at(index - 1);
+        let previousGuide = keys[index - 1];
        if (previousGuide === undefined) {
            return undefined;
        } else if (guides[previousGuide].length === 0) {
@@ -65,7 +67,7 @@ export function getNextGuide(currentGuide: string): string | undefined {
        if (guides[currentGuide].length === 0) {
            let keys = Object.keys(guides);
            let index = keys.indexOf(currentGuide);
-            return keys.at(index + 1);
+            return keys[index + 1];
        } else {
            return `${currentGuide}/${guides[currentGuide][0]}`;
        }
@@ -76,7 +78,7 @@ export function getNextGuide(currentGuide: string): string | undefined {
        } else {
            let keys = Object.keys(guides);
            let index = keys.indexOf(subguides[0]);
-            return keys.at(index + 1);
+            return keys[index + 1];
        }
    }
 }
--- a/website/src/lib/components/file-list/FileListNodeLabel.svelte
+++ b/website/src/lib/components/file-list/FileListNodeLabel.svelte
@@ -2,7 +2,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as ContextMenu from '$lib/components/ui/context-menu';
 	import Shortcut from '$lib/components/Shortcut.svelte';
-	import { dbUtils, getFile, settings } from '$lib/db';
+	import { dbUtils, getFile } from '$lib/db';
 	import {
 		Copy,
 		Info,
@@ -38,7 +38,7 @@
 	} from './Selection';
 	import { getContext } from 'svelte';
 	import { get } from 'svelte/store';
-	import { allHidden, editMetadata, editStyle, gpxLayers, map } from '$lib/stores';
+	import { allHidden, editMetadata, editStyle, embedding, gpxLayers, map } from '$lib/stores';
 	import {
 		GPXTreeElement,
 		Track,
@@ -57,8 +57,6 @@

 	let orientation = getContext<'vertical' | 'horizontal'>('orientation');

-	const { verticalFileView } = settings;
-
 	$: singleSelection = $selection.size === 1;

 	let nodeColors: string[] = [];
@@ -131,10 +129,12 @@
 			{/if}
 			{#if item.level === ListLevel.FILE || item.level === ListLevel.TRACK}
 				<div
-					class="absolute {$verticalFileView
+					class="absolute {orientation === 'vertical'
 						? 'top-0 bottom-0 right-1 w-1'
 						: 'top-0 h-1 left-0 right-0'}"
-					style="background:linear-gradient(to {$verticalFileView ? 'bottom' : 'right'},{nodeColors
+					style="background:linear-gradient(to {orientation === 'vertical'
+						? 'bottom'
+						: 'right'},{nodeColors
 						.map(
 							(c, i) =>
 								`${c} ${Math.floor((100 * i) / nodeColors.length)}% ${Math.floor((100 * (i + 1)) / nodeColors.length)}%`
@@ -147,6 +147,11 @@
 					? 'text-muted-foreground'
 					: ''}"
 				on:contextmenu={(e) => {
+					if ($embedding) {
+						e.preventDefault();
+						e.stopPropagation();
+						return;
+					}
 					if (e.ctrlKey) {
 						// Add to selection instead of opening context menu
 						e.preventDefault();
@@ -181,13 +186,13 @@
 				{:else if item.level === ListLevel.WAYPOINT}
 					<MapPin size="16" class="mr-1 shrink-0" />
 				{/if}
-				<span class="grow select-none truncate {$verticalFileView ? 'last:mr-2' : ''}">
+				<span class="grow select-none truncate {orientation === 'vertical' ? 'last:mr-2' : ''}">
 					{label}
 				</span>
 				{#if hidden}
 					<EyeOff
 						size="12"
-						class="shrink-0 mt-1 ml-1 {$verticalFileView ? 'mr-2' : ''} {item.level ===
+						class="shrink-0 mt-1 ml-1 {orientation === 'vertical' ? 'mr-2' : ''} {item.level ===
 							ListLevel.SEGMENT || item.level === ListLevel.WAYPOINT
 							? 'mr-3'
 							: ''}"
@@ -227,7 +232,7 @@
 			<Shortcut key="H" ctrl={true} />
 		</ContextMenu.Item>
 		<ContextMenu.Separator />
-		{#if $verticalFileView}
+		{#if orientation === 'vertical'}
 			{#if item instanceof ListFileItem}
 				<ContextMenu.Item
 					disabled={!singleSelection}
@@ -269,13 +274,13 @@
 			</ContextMenu.Item>
 			<ContextMenu.Separator />
 		{/if}
-		{#if $verticalFileView}
+		{#if orientation === 'vertical'}
 			<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
 				<Copy size="16" class="mr-1" />
 				{$_('menu.duplicate')}
 				<Shortcut key="D" ctrl={true} /></ContextMenu.Item
 			>
-			{#if $verticalFileView}
+			{#if orientation === 'vertical'}
 				<ContextMenu.Item on:click={copySelection}>
 					<ClipboardCopy size="16" class="mr-1" />
 					{$_('menu.copy')}
--- a/website/src/lib/db.ts
+++ b/website/src/lib/db.ts
@@ -280,47 +280,49 @@ function commitFileStateChange(newFileState: ReadonlyMap<string, GPXFile>, patch
    });
 }

-export const fileObservers: Writable<Map<string, Readable<GPXFileWithStatistics | undefined> & { destroy: () => void }>> = writable(new Map());
+export const fileObservers: Writable<Map<string, Readable<GPXFileWithStatistics | undefined> & { destroy?: () => void }>> = writable(new Map());
 const fileState: Map<string, GPXFile> = new Map(); // Used to generate patches

 // Observe the file ids in the database, and maintain a map of file observers for the corresponding files
-liveQuery(() => db.fileids.toArray()).subscribe(dbFileIds => {
-    // Find new files to observe
-    let newFiles = dbFileIds.filter(id => !get(fileObservers).has(id)).sort((a, b) => parseInt(a.split('-')[1]) - parseInt(b.split('-')[1]));
-    // Find deleted files to stop observing
-    let deletedFiles = Array.from(get(fileObservers).keys()).filter(id => !dbFileIds.find(fileId => fileId === id));
+export function observeFilesFromDatabase() {
+    liveQuery(() => db.fileids.toArray()).subscribe(dbFileIds => {
+        // Find new files to observe
+        let newFiles = dbFileIds.filter(id => !get(fileObservers).has(id)).sort((a, b) => parseInt(a.split('-')[1]) - parseInt(b.split('-')[1]));
+        // Find deleted files to stop observing
+        let deletedFiles = Array.from(get(fileObservers).keys()).filter(id => !dbFileIds.find(fileId => fileId === id));

-    // Update the store
-    if (newFiles.length > 0 || deletedFiles.length > 0) {
-        fileObservers.update($files => {
-            if (newFiles.length > 0) { // Reset the target map bounds when new files are added
-                initTargetMapBounds($files.size === 0);
-            }
-            newFiles.forEach(id => {
-                $files.set(id, dexieGPXFileStore(id));
-            });
-            deletedFiles.forEach(id => {
-                $files.get(id)?.destroy();
-                $files.delete(id);
-            });
-            return $files;
-        });
-        settings.fileOrder.update((order) => {
-            newFiles.forEach((fileId) => {
-                if (!order.includes(fileId)) {
-                    order.push(fileId);
+        // Update the store
+        if (newFiles.length > 0 || deletedFiles.length > 0) {
+            fileObservers.update($files => {
+                if (newFiles.length > 0) { // Reset the target map bounds when new files are added
+                    initTargetMapBounds($files.size === 0);
                }
+                newFiles.forEach(id => {
+                    $files.set(id, dexieGPXFileStore(id));
+                });
+                deletedFiles.forEach(id => {
+                    $files.get(id)?.destroy?.();
+                    $files.delete(id);
+                });
+                return $files;
            });
-            deletedFiles.forEach((fileId) => {
-                let index = order.indexOf(fileId);
-                if (index !== -1) {
-                    order.splice(index, 1);
-                }
+            settings.fileOrder.update((order) => {
+                newFiles.forEach((fileId) => {
+                    if (!order.includes(fileId)) {
+                        order.push(fileId);
+                    }
+                });
+                deletedFiles.forEach((fileId) => {
+                    let index = order.indexOf(fileId);
+                    if (index !== -1) {
+                        order.splice(index, 1);
+                    }
+                });
+                return order;
            });
-            return order;
-        });
-    }
-});
+        }
+    });
+}

 export function getFile(fileId: string): GPXFile | undefined {
    let fileStore = get(fileObservers).get(fileId);
--- a/website/src/lib/docs/en/integration.mdx
+++ b/website/src/lib/docs/en/integration.mdx
@@ -0,0 +1,11 @@
+---
+title: Integration
+---
+
+<script>
+    import EmbeddingPlaygound from '$lib/components/EmbeddingPlayground.svelte';
+</script>
+
+# { title }
+
+<EmbeddingPlaygound />
--- a/website/src/lib/stores.ts
+++ b/website/src/lib/stores.ts
@@ -14,6 +14,7 @@ import { SplitType } from '$lib/components/toolbar/tools/Scissors.svelte';
 const { fileOrder } = settings;

 export const map = writable<mapboxgl.Map | null>(null);
+export const embedding = writable(false);
 export const selectFiles = writable<{ [key: string]: (fileId?: string) => void }>({});

 export const gpxStatistics: Writable<GPXStatistics> = writable(new GPXStatistics());
@@ -178,7 +179,7 @@ export function triggerFileInput() {
    input.click();
 }

-export async function loadFiles(list: FileList) {
+export async function loadFiles(list: FileList | File[]) {
    let files = [];
    for (let i = 0; i < list.length; i++) {
        let file = await loadFile(list[i]);
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -2,6 +2,7 @@
    "metadata": {
        "home_title": "home",
        "app_title": "the online GPX file editor",
+        "embed_title": "the online GPX file editor",
        "help_title": "help",
        "description": "View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
    },
@@ -70,7 +71,8 @@
            "width": "Width"
        },
        "hide": "Hide",
-        "unhide": "Unhide"
+        "unhide": "Unhide",
+        "open_in": "Open in"
    },
    "toolbar": {
        "routing": {
@@ -368,5 +370,20 @@
        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.",
        "identity": "Free, ad-free and open-source",
        "identity_description": "The website is free to use, without ads, and the source code is publicly available on GitHub. This is only possible thanks to the incredible support of the community."
+    },
+    "embedding": {
+        "file_urls": "File URLs (separated by commas)",
+        "basemap": "Basemap",
+        "height": "Height",
+        "fill_by": "Fill by",
+        "none": "None",
+        "show_controls": "Show controls",
+        "manual_camera": "Manual camera",
+        "manual_camera_description": "You can move the map below to adjust the camera position.",
+        "zoom": "Zoom",
+        "latitude": "Latitude",
+        "longitude": "Longitude",
+        "pitch": "Pitch",
+        "bearing": "Bearing"
    }
 }
--- a/website/src/routes/[...language]/+layout.svelte
+++ b/website/src/routes/[...language]/+layout.svelte
@@ -12,14 +12,14 @@
 		locale.set($page.params.language.replace('/', ''));
 	}

-	const appRoute = '/[...language]/app';
+	const appRoutes = ['/[...language]/app', '/[...language]/embed'];
 </script>

 <Head />
 <ModeWatcher />

 {#if !$isLoading}
-	{#if $page.route.id === appRoute}
+	{#if $page.route.id !== null && appRoutes.includes($page.route.id)}
 		<slot />
 	{:else}
 		<Nav />
--- a/website/src/routes/[...language]/+page.svelte
+++ b/website/src/routes/[...language]/+page.svelte
@@ -5,15 +5,13 @@
 	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
 	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
 	import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
-	import { settings } from '$lib/db';
 	import { BookOpenText, Heart, LineChart, Map, PencilRuler, Route, Scale } from 'lucide-svelte';
-	import { _, locale } from 'svelte-i18n';
+	import { _ } from 'svelte-i18n';
 	import { exampleGPXFile } from '$lib/assets/example';
 	import { writable } from 'svelte/store';
 	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
 	import { currentTool, Tool } from '$lib/stores';
 	import { onDestroy, onMount } from 'svelte';
-	import { getURLForLanguage } from '$lib/utils';
 	import routingScreenshot from '$lib/assets/img/home/routing.png?enhanced';
 	import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
 	import mapboxSatelliteMap from '$lib/assets/img/home/mapbox-satellite.png?enhanced';
@@ -27,8 +25,6 @@
 	let additionalDatasets = writable(['speed', 'atemp']);
 	let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);

-	const { distanceUnits, velocityUnits, temperatureUnits } = settings;
-
 	onMount(() => {
 		currentTool.set(Tool.SCISSORS);
 	});
@@ -46,15 +42,11 @@
 				{$_('metadata.description')}
 			</div>
 			<div class="w-full flex flex-row justify-center gap-3">
-				<Button href={getURLForLanguage($locale, '/app')} class="w-1/3 min-w-fit">
+				<Button href="./app" class="w-1/3 min-w-fit">
 					<Map size="18" class="mr-1.5" />
 					{$_('homepage.app')}
 				</Button>
-				<Button
-					variant="secondary"
-					href={getURLForLanguage($locale, '/help')}
-					class="w-1/3 min-w-fit"
-				>
+				<Button variant="secondary" href="./help" class="w-1/3 min-w-fit">
 					<BookOpenText size="18" class="mr-1.5" />
 					<span>{$_('menu.help')}</span>
 				</Button>
@@ -161,9 +153,6 @@
 				additionalDatasets={$additionalDatasets}
 				elevationFill={$elevationFill}
 				panelSize={200}
-				distanceUnits={$distanceUnits}
-				velocityUnits={$velocityUnits}
-				temperatureUnits={$temperatureUnits}
 			/>
 		</div>
 		<div class="flex flex-col items-center">
@@ -173,7 +162,6 @@
 					{slicedGPXStatistics}
 					panelSize={192}
 					orientation={'horizontal'}
-					velocityUnits={$velocityUnits}
 				/>
 			</div>
 		</div>
--- a/website/src/routes/[...language]/app/+page.svelte
+++ b/website/src/routes/[...language]/app/+page.svelte
@@ -1,5 +1,108 @@
 <script lang="ts">
-	import App from '$lib/components/App.svelte';
+	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
+	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+	import FileList from '$lib/components/file-list/FileList.svelte';
+	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+	import Map from '$lib/components/Map.svelte';
+	import Menu from '$lib/components/Menu.svelte';
+	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+	import StreetViewControl from '$lib/components/street-view-control/StreetViewControl.svelte';
+	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
+	import Resizer from '$lib/components/Resizer.svelte';
+	import { Toaster } from '$lib/components/ui/sonner';
+
+	import { observeFilesFromDatabase, settings } from '$lib/db';
+	import { gpxStatistics, loadFiles, slicedGPXStatistics } from '$lib/stores';
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+
+	const {
+		verticalFileView,
+		elevationProfile,
+		bottomPanelSize,
+		rightPanelSize,
+		additionalDatasets,
+		elevationFill
+	} = settings;
+
+	onMount(() => {
+		observeFilesFromDatabase();
+
+		let files = JSON.parse($page.url.searchParams.get('files') || '[]');
+
+		if (files.length > 0) {
+			let downloads: Promise<File | null>[] = [];
+			files.forEach((url) => {
+				downloads.push(
+					fetch(url)
+						.then((response) => response.blob())
+						.then((blob) => new File([blob], url.split('/').pop()))
+				);
+			});
+
+			Promise.all(downloads).then((files) => {
+				files = files.filter((file) => file !== null);
+				loadFiles(files);
+			});
+		}
+	});
 </script>

-<App />
+<div class="fixed flex flex-row w-screen h-screen h-dvh">
+	<div class="flex flex-col grow h-full min-w-0">
+		<div class="grow relative">
+			<Menu />
+			<div
+				class="absolute top-0 bottom-0 left-0 z-20 flex flex-col justify-center pointer-events-none"
+			>
+				<Toolbar />
+			</div>
+			<Map class="h-full {$verticalFileView ? '' : 'horizontal'}" />
+			<StreetViewControl />
+			<LayerControl />
+			<GPXLayers />
+			<Toaster richColors />
+			{#if !$verticalFileView}
+				<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
+					<FileList orientation="horizontal" />
+				</div>
+			{/if}
+		</div>
+		{#if $elevationProfile}
+			<Resizer orientation="row" bind:after={$bottomPanelSize} minAfter={100} maxAfter={300} />
+		{/if}
+		<div
+			class="{$elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
+			style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
+		>
+			<GPXStatistics
+				{gpxStatistics}
+				{slicedGPXStatistics}
+				panelSize={$bottomPanelSize}
+				orientation={$elevationProfile ? 'vertical' : 'horizontal'}
+			/>
+			{#if $elevationProfile}
+				<ElevationProfile
+					{gpxStatistics}
+					{slicedGPXStatistics}
+					bind:additionalDatasets={$additionalDatasets}
+					bind:elevationFill={$elevationFill}
+					panelSize={$bottomPanelSize}
+					class="py-2"
+				/>
+			{/if}
+		</div>
+	</div>
+	{#if $verticalFileView}
+		<Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
+		<FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" />
+	{/if}
+</div>
+
+<style lang="postcss">
+	div :global(.toaster.group) {
+		@apply absolute;
+		@apply right-2;
+		--offset: 50px !important;
+	}
+</style>
--- a/website/src/routes/[...language]/embed/+page.svelte
+++ b/website/src/routes/[...language]/embed/+page.svelte
@@ -0,0 +1,231 @@
+<script lang="ts">
+	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
+	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+	import FileList from '$lib/components/file-list/FileList.svelte';
+	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+	import MapComponent from '$lib/components/Map.svelte';
+	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
+	import OpenIn from '$lib/components/OpenIn.svelte';
+
+	import { gpxStatistics, slicedGPXStatistics, embedding, loadFile, map } from '$lib/stores';
+	import { page } from '$app/stores';
+	import { onDestroy, onMount } from 'svelte';
+	import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
+	import { readable } from 'svelte/store';
+	import type { GPXFile } from 'gpx';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { ListFileItem } from '$lib/components/file-list/FileList';
+
+	$embedding = true;
+
+	const { currentBasemap, distanceUnits, velocityUnits, temperatureUnits } = settings;
+
+	let elevationProfile = true;
+	let bottomPanelSize = 170;
+	let additionalDatasets: string[] = [];
+	let elevationFill: 'slope' | 'surface' | undefined = undefined;
+	let elevationControls = true;
+
+	let files: string[] = [];
+
+	let prevUnits = {
+		distance: '',
+		velocity: '',
+		temperature: ''
+	};
+
+	onMount(() => {
+		let options = $page.url.searchParams.get('options');
+		if (options === null) {
+			return;
+		}
+		options = JSON.parse(options);
+		if (options === null) {
+			return;
+		}
+
+		if (options.files && Array.isArray(options.files)) {
+			files = options.files;
+			let downloads: Promise<GPXFile | null>[] = [];
+			options.files.forEach((url) => {
+				downloads.push(
+					fetch(url)
+						.then((response) => response.blob())
+						.then((blob) => new File([blob], url.split('/').pop()))
+						.then(loadFile)
+				);
+			});
+
+			Promise.all(downloads).then((files) => {
+				let ids: string[] = [];
+				let bounds = {
+					southWest: {
+						lat: 90,
+						lon: 180
+					},
+					northEast: {
+						lat: -90,
+						lon: -180
+					}
+				};
+
+				files.forEach((file, index) => {
+					if (file === null) {
+						return;
+					}
+
+					let id = `gpx-${index}`;
+					file._data.id = id;
+					let statistics = new GPXStatisticsTree(file);
+
+					fileObservers.update(($fileObservers) => {
+						$fileObservers.set(
+							id,
+							readable({
+								file,
+								statistics
+							})
+						);
+						return $fileObservers;
+					});
+
+					ids.push(id);
+					let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global.bounds;
+
+					bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
+					bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
+					bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
+					bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
+				});
+
+				selection.update(($selection) => {
+					$selection.clear();
+					ids.forEach((id) => {
+						$selection.toggle(new ListFileItem(id));
+					});
+					return $selection;
+				});
+
+				if ($page.url.hash.length === 0) {
+					map.subscribe(($map) => {
+						if ($map) {
+							$map.fitBounds(
+								[
+									bounds.southWest.lon,
+									bounds.southWest.lat,
+									bounds.northEast.lon,
+									bounds.northEast.lat
+								],
+								{
+									padding: 80,
+									linear: true,
+									easing: () => 1
+								}
+							);
+						}
+					});
+				}
+			});
+		}
+
+		if (options.basemap !== undefined && typeof options.basemap === 'string') {
+			currentBasemap.set(options.basemap);
+		}
+
+		if (options.elevation !== undefined && typeof options.elevation === 'object') {
+			const elevationOptions = options.elevation;
+			if (elevationOptions.show !== undefined && typeof elevationOptions.show === 'boolean') {
+				elevationProfile = elevationOptions.show;
+			}
+
+			if (elevationOptions.data && Array.isArray(elevationOptions.data)) {
+				elevationOptions.data.forEach((dataset) => {
+					if (['speed', 'hr', 'cad', 'temp', 'power'].includes(dataset)) {
+						additionalDatasets.push(dataset);
+					}
+				});
+			}
+
+			if (elevationOptions.fill === 'slope' || elevationOptions.fill === 'surface') {
+				elevationFill = elevationOptions.fill;
+			}
+
+			if (elevationOptions.height !== undefined && typeof elevationOptions.height === 'number') {
+				bottomPanelSize = elevationOptions.height;
+			}
+
+			if (
+				elevationOptions.controls !== undefined &&
+				typeof elevationOptions.controls === 'boolean'
+			) {
+				elevationControls = elevationOptions.controls;
+			}
+		}
+
+		prevUnits.distance = $distanceUnits;
+		prevUnits.velocity = $velocityUnits;
+		prevUnits.temperature = $temperatureUnits;
+
+		if (options.distanceUnits === 'metric' || options.distanceUnits === 'imperial') {
+			$distanceUnits = options.distanceUnits;
+		}
+
+		if (options.velocityUnits === 'speed' || options.velocityUnits === 'pace') {
+			$velocityUnits = options.velocityUnits;
+		}
+
+		if (options.temperatureUnits === 'celsius' || options.temperatureUnits === 'fahrenheit') {
+			$temperatureUnits = options.temperatureUnits;
+		}
+	});
+
+	onDestroy(() => {
+		if ($distanceUnits !== prevUnits.distance) {
+			$distanceUnits = prevUnits.distance;
+		}
+
+		if ($velocityUnits !== prevUnits.velocity) {
+			$velocityUnits = prevUnits.velocity;
+		}
+
+		if ($temperatureUnits !== prevUnits.temperature) {
+			$temperatureUnits = prevUnits.temperature;
+		}
+	});
+</script>
+
+<div class="fixed flex flex-col h-full w-full border rounded-xl overflow-clip">
+	<div class="grow relative">
+		<MapComponent class="h-full {$fileObservers.size > 1 ? 'horizontal' : ''}" geocoder={false} />
+		<OpenIn bind:files />
+		<LayerControl />
+		<GPXLayers />
+		{#if $fileObservers.size > 1}
+			<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
+				<FileList orientation="horizontal" />
+			</div>
+		{/if}
+	</div>
+	<div
+		class="{elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
+		style={elevationProfile ? `height: ${bottomPanelSize}px` : ''}
+	>
+		<GPXStatistics
+			{gpxStatistics}
+			{slicedGPXStatistics}
+			panelSize={bottomPanelSize}
+			orientation={elevationProfile ? 'vertical' : 'horizontal'}
+		/>
+		{#if elevationProfile}
+			<ElevationProfile
+				{gpxStatistics}
+				{slicedGPXStatistics}
+				{additionalDatasets}
+				{elevationFill}
+				panelSize={bottomPanelSize}
+				showControls={elevationControls}
+				class="py-2"
+			/>
+		{/if}
+	</div>
+</div>
--- a/website/src/routes/[...language]/help/+layout.svelte
+++ b/website/src/routes/[...language]/help/+layout.svelte
@@ -8,12 +8,12 @@
 </script>

 <div class="p-12 flex flex-row gap-24">
-	<div class="hidden md:flex flex-col gap-1 w-40 sticky top-[105px] self-start">
+	<div class="hidden md:flex flex-col gap-2 w-40 sticky top-[105px] self-start shrink-0">
 		{#each Object.keys(guides) as guide}
 			<Button
 				variant="link"
 				href={getURLForLanguage($locale, `/help/${guide}`)}
-				class="h-6 p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start {$page
+				class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {$page
 					.params.guide === guide
 					? 'font-semibold text-foreground'
 					: ''}"
@@ -24,7 +24,7 @@
 				<Button
 					variant="link"
 					href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
-					class="h-6 p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start ml-3 {$page
+					class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {$page
 						.params.guide ===
 					guide + '/' + subGuide
 						? 'font-semibold text-foreground'