diff --git a/website/src/lib/db.ts b/website/src/lib/db.ts
index eef1987c..2481d0f7 100644
--- a/website/src/lib/db.ts
+++ b/website/src/lib/db.ts
@@ -180,7 +180,7 @@ function dexieGPXFileStore(id: string): Readable<GPXFileWithStatistics> & { dest
 
             let statistics = new GPXStatisticsTree(gpx);
             if (!fileState.has(id)) { // Update the map bounds for new files
-                updateTargetMapBounds(statistics.getStatisticsFor(new ListFileItem(id)).global.bounds);
+                updateTargetMapBounds(id, statistics.getStatisticsFor(new ListFileItem(id)).global.bounds);
             }
 
             fileState.set(id, gpx);
@@ -287,12 +287,13 @@ export const fileObservers: Writable<Map<string, Readable<GPXFileWithStatistics
 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
-export function observeFilesFromDatabase() {
+export function observeFilesFromDatabase(fitBounds: boolean) {
     let initialize = true;
     liveQuery(() => db.fileids.toArray()).subscribe(dbFileIds => {
         if (initialize) {
-            if (dbFileIds.length > 0) {
-                initTargetMapBounds(dbFileIds.length);
+            console.log('fitBounds', fitBounds);
+            if (fitBounds && dbFileIds.length > 0) {
+                initTargetMapBounds(dbFileIds);
             }
             initialize = false;
         }
@@ -453,13 +454,14 @@ export const dbUtils = {
         });
     },
     addMultiple: (files: GPXFile[]) => {
-        return applyGlobal((draft) => {
-            let ids = getFileIds(files.length);
+        let ids = getFileIds(files.length);
+        applyGlobal((draft) => {
             files.forEach((file, index) => {
                 file._data.id = ids[index];
                 draft.set(file._data.id, freeze(file));
             });
         });
+        return ids;
     },
     applyToFile: (id: string, callback: (file: WritableDraft<GPXFile>) => void) => {
         applyToFiles([id], callback);
diff --git a/website/src/lib/stores.ts b/website/src/lib/stores.ts
index c668d5f8..70d6111c 100644
--- a/website/src/lib/stores.ts
+++ b/website/src/lib/stores.ts
@@ -84,16 +84,20 @@ gpxStatistics.subscribe(() => {
     slicedGPXStatistics.set(undefined);
 });
 
-const targetMapBounds = writable({
+const targetMapBounds = writable<{
+    bounds: mapboxgl.LngLatBounds;
+    ids: string[];
+    total: number;
+}>({
     bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
-    count: 0,
-    total: -1
+    ids: [],
+    total: 0,
 });
 
 derived([targetMapBounds, map], (x) => x).subscribe(([bounds, $map]) => {
     if (
         $map === null ||
-        bounds.count !== bounds.total ||
+        bounds.ids.length > 0 ||
         (bounds.bounds.getSouth() === 90 &&
             bounds.bounds.getWest() === 180 &&
             bounds.bounds.getNorth() === -90 &&
@@ -102,10 +106,13 @@ derived([targetMapBounds, map], (x) => x).subscribe(([bounds, $map]) => {
         return;
     }
 
+    let currentZoom = $map.getZoom();
     let currentBounds = $map.getBounds();
-    if (bounds.count !== get(fileObservers).size && currentBounds) {
+    if (bounds.total !== get(fileObservers).size &&
+        currentBounds &&
+        currentZoom > 2 // Extend current bounds only if the map is zoomed in
+    ) {
         // There are other files on the map
-
         if (
             currentBounds.contains(bounds.bounds.getSouthEast()) &&
             currentBounds.contains(bounds.bounds.getNorthWest())
@@ -120,33 +127,32 @@ derived([targetMapBounds, map], (x) => x).subscribe(([bounds, $map]) => {
     $map.fitBounds(bounds.bounds, { padding: 80, linear: true, easing: () => 1 });
 });
 
-export function initTargetMapBounds(total: number) {
+export function initTargetMapBounds(ids: string[]) {
     targetMapBounds.set({
         bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
-        count: 0,
-        total: total
+        ids,
+        total: ids.length,
     });
 }
 
-export function updateTargetMapBounds(bounds: { southWest: Coordinates; northEast: Coordinates }) {
-    if (
-        bounds.southWest.lat == 90 &&
-        bounds.southWest.lon == 180 &&
-        bounds.northEast.lat == -90 &&
-        bounds.northEast.lon == -180
-    ) {
-        // Avoid update for empty (new) files
-        targetMapBounds.update((target) => {
-            target.count += 1;
-            return target;
-        });
+export function updateTargetMapBounds(id: string, bounds: { southWest: Coordinates; northEast: Coordinates }) {
+    if (get(targetMapBounds).ids.indexOf(id) === -1) {
         return;
     }
 
     targetMapBounds.update((target) => {
-        target.bounds.extend(bounds.southWest);
-        target.bounds.extend(bounds.northEast);
-        target.count += 1;
+        target.ids = target.ids.filter((x) => x !== id);
+        if (
+            bounds.southWest.lat !== 90 ||
+            bounds.southWest.lon !== 180 ||
+            bounds.northEast.lat !== -90 ||
+            bounds.northEast.lon !== -180
+        ) {
+            // Avoid update for empty (new) files
+            target.bounds.extend(bounds.southWest);
+            target.bounds.extend(bounds.northEast);
+        }
+
         return target;
     });
 }
@@ -246,7 +252,7 @@ export function triggerFileInput() {
 }
 
 export async function loadFiles(list: FileList | File[]) {
-    let files = [];
+    let files: GPXFile[] = [];
     for (let i = 0; i < list.length; i++) {
         let file = await loadFile(list[i]);
         if (file) {
@@ -254,11 +260,10 @@ export async function loadFiles(list: FileList | File[]) {
         }
     }
 
-    initTargetMapBounds(list.length);
+    let ids = dbUtils.addMultiple(files);
 
-    dbUtils.addMultiple(files);
-
-    selectFileWhenLoaded(files[0]._data.id);
+    initTargetMapBounds(ids);
+    selectFileWhenLoaded(ids[0]);
 }
 
 export async function loadFile(file: File): Promise<GPXFile | null> {
diff --git a/website/src/routes/[[language]]/app/+page.svelte b/website/src/routes/[[language]]/app/+page.svelte
index c16dd0b2..aa6e0588 100644
--- a/website/src/routes/[[language]]/app/+page.svelte
+++ b/website/src/routes/[[language]]/app/+page.svelte
@@ -1,127 +1,122 @@
 <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 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';
-    import { languages } from '$lib/languages';
-    import { getURLForLanguage } from '$lib/utils';
-    import { getURLForGoogleDriveFile } from '$lib/components/embedding/Embedding';
+	import { observeFilesFromDatabase, settings } from '$lib/db';
+	import { gpxStatistics, loadFiles, slicedGPXStatistics } from '$lib/stores';
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { languages } from '$lib/languages';
+	import { getURLForLanguage } from '$lib/utils';
+	import { getURLForGoogleDriveFile } from '$lib/components/embedding/Embedding';
 
-    const {
-        verticalFileView,
-        elevationProfile,
-        bottomPanelSize,
-        rightPanelSize,
-        additionalDatasets,
-        elevationFill
-    } = settings;
+	const {
+		verticalFileView,
+		elevationProfile,
+		bottomPanelSize,
+		rightPanelSize,
+		additionalDatasets,
+		elevationFill
+	} = settings;
 
-    onMount(() => {
-        observeFilesFromDatabase();
+	onMount(() => {
+		let files: string[] = JSON.parse($page.url.searchParams.get('files') || '[]');
+		let ids: string[] = JSON.parse($page.url.searchParams.get('ids') || '[]');
+		let urls: string[] = files.concat(ids.map(getURLForGoogleDriveFile));
 
-        let files: string[] = JSON.parse($page.url.searchParams.get('files') || '[]');
-        let ids: string[] = JSON.parse($page.url.searchParams.get('ids') || '[]');
-        let urls: string[] = files.concat(ids.map(getURLForGoogleDriveFile));
+		observeFilesFromDatabase(urls.length === 0);
 
-        if (urls.length > 0) {
-            let downloads: Promise<File | null>[] = [];
-            urls.forEach((url) => {
-                downloads.push(
-                    fetch(url)
-                        .then((response) => response.blob())
-                        .then((blob) => new File([blob], url.split('/').pop()))
-                );
-            });
+		if (urls.length > 0) {
+			let downloads: Promise<File | null>[] = [];
+			urls.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);
-            });
-        }
-    });
+			Promise.all(downloads).then((files) => {
+				files = files.filter((file) => file !== null);
+				loadFiles(files);
+			});
+		}
+	});
 </script>
 
 <div class="fixed flex flex-row w-screen h-screen supports-dvh: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-40 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 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-40 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>
 
 <!-- hidden links for svelte crawling -->
 <div class="hidden">
-    {#each Object.entries(languages) as [lang, label]}
-        <a href={getURLForLanguage(lang, '/embed')}>
-            {label}
-        </a>
-    {/each}
+	{#each Object.entries(languages) as [lang, label]}
+		<a href={getURLForLanguage(lang, '/embed')}>
+			{label}
+		</a>
+	{/each}
 </div>
 
 <style lang="postcss">
-    div :global(.toaster.group) {
-        @apply absolute;
-        @apply right-2;
-        --offset: 50px !important;
-    }
+	div :global(.toaster.group) {
+		@apply absolute;
+		@apply right-2;
+		--offset: 50px !important;
+	}
 </style>