diff --git a/website/src/lib/components/file-list/FileListNodeLabel.svelte b/website/src/lib/components/file-list/FileListNodeLabel.svelte index 1efe3c31..ba0355be 100644 --- a/website/src/lib/components/file-list/FileListNodeLabel.svelte +++ b/website/src/lib/components/file-list/FileListNodeLabel.svelte @@ -15,6 +15,7 @@ EyeOff, ClipboardCopy, ClipboardPaste, + Maximize2, Scissors, FileStack, FileX @@ -39,7 +40,15 @@ } from './Selection'; import { getContext } from 'svelte'; import { get } from 'svelte/store'; - import { allHidden, editMetadata, editStyle, embedding, gpxLayers, map } from '$lib/stores'; + import { + allHidden, + editMetadata, + editStyle, + embedding, + gpxLayers, + map, + updateTargetMapBounds + } from '$lib/stores'; import { GPXTreeElement, Track, @@ -51,6 +60,7 @@ import { _ } from 'svelte-i18n'; import MetadataDialog from './MetadataDialog.svelte'; import StyleDialog from './StyleDialog.svelte'; + import mapboxgl from 'mapbox-gl'; export let node: GPXTreeElement | Waypoint[] | Waypoint; export let item: ListItem; @@ -216,6 +226,30 @@ {$_('menu.style.button')} {/if} + {#if node instanceof GPXTreeElement} + { + const targetBounds = node.getStatistics().global.bounds; + const mapBoxBounds = new mapboxgl.LngLatBounds([ + [targetBounds.northEast.lon, targetBounds.northEast.lat], + [targetBounds.southWest.lon, targetBounds.southWest.lat] + ]); + $map?.fitBounds(mapBoxBounds, { + padding: 80, + linear: true, + duration: 1000, + easing: (t) => { + return t < 0.5 + ? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2 + : (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2; + } + }); + }} + > + + {$_('menu.fit_map')} + + {/if} { if ($allHidden) { diff --git a/website/src/locales/en.json b/website/src/locales/en.json index b1717ba8..59dc5161 100644 --- a/website/src/locales/en.json +++ b/website/src/locales/en.json @@ -76,7 +76,8 @@ }, "hide": "Hide", "unhide": "Unhide", - "open_in": "Open in" + "open_in": "Open in", + "fit_map": "Fit on map" }, "toolbar": { "routing": {