fit bounds behaviors

website/src/lib/components/GPX.svelte

@@ -39,9 +39,9 @@
 </script>
 
 <script lang="ts">
-	import { onDestroy } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import { GPXFile } from 'gpx';
-	import { map, selectedFiles, selectFiles } from '$lib/stores';
+	import { map, selectedFiles, selectFiles, files } from '$lib/stores';
 	import { get } from 'svelte/store';
 
 	export let file: GPXFile;
@@ -114,8 +114,6 @@
 		}
 	}
 
-	addGPXLayer();
-
 	$: if ($map) {
 		$map.on('style.load', () => {
 			addGPXLayer();
@@ -128,6 +126,49 @@
 		}
 	}
 
+	onMount(() => {
+		addGPXLayer();
+		if ($map) {
+			if ($files.length == 1) {
+				$map.fitBounds([file.statistics.bounds.southWest, file.statistics.bounds.northEast], {
+					padding: 60,
+					linear: true,
+					easing: () => 1
+				});
+			} else {
+				let mapBounds = $map.getBounds();
+				if (
+					mapBounds.contains(file.statistics.bounds.southWest) &&
+					mapBounds.contains(file.statistics.bounds.northEast) &&
+					mapBounds.contains([
+						file.statistics.bounds.southWest.lon,
+						file.statistics.bounds.northEast.lat
+					]) &&
+					mapBounds.contains([
+						file.statistics.bounds.northEast.lon,
+						file.statistics.bounds.southWest.lat
+					])
+				) {
+					return;
+				}
+
+				$map.fitBounds(
+					$map
+						.getBounds()
+						.extend([
+							file.statistics.bounds.southWest.lon,
+							file.statistics.bounds.southWest.lat,
+							file.statistics.bounds.northEast.lon,
+							file.statistics.bounds.northEast.lat
+						]),
+					{
+						padding: 60
+					}
+				);
+			}
+		}
+	});
+
 	onDestroy(() => {
 		if ($map) {
 			$map.off('click', layerId, selectOnClick);

website/src/lib/components/GPXData.svelte

@@ -51,7 +51,7 @@
 				<Zap size="18" class="mr-1" />
 				{gpxData.speed.moving.toFixed(2)} km/h
 			</span>
-			<span slot="tooltip">Time</span>
+			<span slot="tooltip">Speed</span>
 		</Tooltip>
 		<Tooltip>
 			<span slot="data" class="flex flex-row items-center">

website/src/lib/components/Map.svelte

@@ -13,6 +13,11 @@
 		'pk.eyJ1IjoiZ3B4c3R1ZGlvIiwiYSI6ImNrdHVoM2pjNTBodmUycG1yZTNwcnJ3MzkifQ.YZnNs9s9oCQPzoXAWs_SLg';
 
 	export let distanceUnits: 'metric' | 'imperial' = 'metric';
+	let fitBoundsOptions: mapboxgl.FitBoundsOptions = {
+		maxZoom: 15,
+		linear: true,
+		easing: () => 1
+	};
 
 	onMount(() => {
 		$map = new mapboxgl.Map({
@@ -38,7 +43,8 @@
 			new MapboxGeocoder({
 				accessToken: mapboxgl.accessToken,
 				mapboxgl: mapboxgl,
-				collapsed: true
+				collapsed: true,
+				flyTo: fitBoundsOptions
 			})
 		);
 
@@ -47,6 +53,7 @@
 				positionOptions: {
 					enableHighAccuracy: true
 				},
+				fitBoundsOptions,
 				trackUserLocation: true,
 				showUserHeading: true
 			})