fit bounds behaviors

gpx/src/gpx.ts

@@ -291,6 +291,12 @@ export class TrackSegment extends GPXTreeLeaf {
             }
 
             trkptStatistics.speed.push(speed);
+
+            // bounds
+            statistics.bounds.southWest.lat = Math.min(statistics.bounds.southWest.lat, points[i].attributes.lat);
+            statistics.bounds.southWest.lon = Math.max(statistics.bounds.southWest.lon, points[i].attributes.lon);
+            statistics.bounds.northEast.lat = Math.max(statistics.bounds.northEast.lat, points[i].attributes.lat);
+            statistics.bounds.northEast.lon = Math.min(statistics.bounds.northEast.lon, points[i].attributes.lon);
         }
 
         statistics.time.total = trkptStatistics.time[trkptStatistics.time.length - 1];
@@ -458,6 +464,10 @@ export class GPXStatistics {
         gain: number;
         loss: number;
     };
+    bounds: {
+        southWest: Coordinates;
+        northEast: Coordinates;
+    }
 
     constructor() {
         this.distance = {
@@ -476,6 +486,16 @@ export class GPXStatistics {
             gain: 0,
             loss: 0,
         };
+        this.bounds = {
+            southWest: {
+                lat: 90,
+                lon: -180,
+            },
+            northEast: {
+                lat: -90,
+                lon: 180,
+            },
+        };
     }
 
     mergeWith(other: GPXStatistics): void {
@@ -490,6 +510,11 @@ export class GPXStatistics {
 
         this.elevation.gain += other.elevation.gain;
         this.elevation.loss += other.elevation.loss;
+
+        this.bounds.southWest.lat = Math.min(this.bounds.southWest.lat, other.bounds.southWest.lat);
+        this.bounds.southWest.lon = Math.max(this.bounds.southWest.lon, other.bounds.southWest.lon);
+        this.bounds.northEast.lat = Math.max(this.bounds.northEast.lat, other.bounds.northEast.lat);
+        this.bounds.northEast.lon = Math.min(this.bounds.northEast.lon, other.bounds.northEast.lon);
     }
 }
 

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
 			})