use map layers for start/end/hover markers

website/src/lib/components/embedding/Embedding.svelte

@@ -16,7 +16,7 @@
     import { setMode } from 'mode-watcher';
     import { settings } from '$lib/logic/settings';
     import { fileStateCollection } from '$lib/logic/file-state';
-    import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
+    import { gpxStatistics, hoveredPoint, slicedGPXStatistics } from '$lib/logic/statistics';
     import { loadFile } from '$lib/logic/file-actions';
     import { selection } from '$lib/logic/selection';
     import { untrack } from 'svelte';
@@ -102,7 +102,7 @@
     <div class="grow relative">
         <Map
             class="h-full {$fileStateCollection.size > 1 ? 'horizontal' : ''}"
-            accessToken={options.token}
+            maptilerKey={options.key}
             geocoder={false}
             geolocate={true}
             hash={useHash}
@@ -130,6 +130,7 @@
             <ElevationProfile
                 {gpxStatistics}
                 {slicedGPXStatistics}
+                {hoveredPoint}
                 {additionalDatasets}
                 {elevationFill}
                 showControls={options.elevation.controls}

website/src/lib/components/embedding/EmbeddingPlayground.svelte

@@ -32,7 +32,7 @@
     let options = $state(
         getMergedEmbeddingOptions(
             {
-                token: 'YOUR_MAPTILER_KEY',
+                key: 'YOUR_MAPTILER_KEY',
                 theme: mode.current,
             },
             defaultEmbeddingOptions
@@ -46,7 +46,7 @@
     let iframeOptions = $derived(
         getMergedEmbeddingOptions(
             {
-                token:
+                key:
                     options.key.length === 0 || options.key === 'YOUR_MAPTILER_KEY'
                         ? PUBLIC_MAPTILER_KEY
                         : options.key,