{#if type === 'distance'}
- {#if $distanceUnits === 'metric'}
- {value.toFixed(decimals ?? 2)} {showUnits ? $_('units.kilometers') : ''}
- {:else}
- {kilometersToMiles(value).toFixed(decimals ?? 2)} {showUnits ? $_('units.miles') : ''}
- {/if}
+ {getConvertedDistance(value, $distanceUnits).toFixed(decimals ?? 2)}
+ {showUnits ? getDistanceUnits($distanceUnits) : ''}
{:else if type === 'elevation'}
- {#if $distanceUnits === 'metric'}
- {value.toFixed(decimals ?? 0)} {showUnits ? $_('units.meters') : ''}
- {:else}
- {metersToFeet(value).toFixed(decimals ?? 0)} {showUnits ? $_('units.feet') : ''}
- {/if}
+ {getConvertedElevation(value, $distanceUnits).toFixed(decimals ?? 0)}
+ {showUnits ? getElevationUnits($distanceUnits) : ''}
{:else if type === 'speed'}
- {#if $distanceUnits === 'metric'}
- {#if $velocityUnits === 'speed'}
- {value.toFixed(decimals ?? 2)} {showUnits ? $_('units.kilometers_per_hour') : ''}
- {:else}
- {secondsToHHMMSS(distancePerHourToSecondsPerDistance(value))}
- {showUnits ? $_('units.minutes_per_kilometer') : ''}
- {/if}
- {:else if $velocityUnits === 'speed'}
- {kilometersToMiles(value).toFixed(decimals ?? 2)}
- {showUnits ? $_('units.miles_per_hour') : ''}
+ {#if $velocityUnits === 'speed'}
+ {getConvertedVelocity(value, $velocityUnits, $distanceUnits).toFixed(decimals ?? 2)}
+ {showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''}
{:else}
- {secondsToHHMMSS(distancePerHourToSecondsPerDistance(kilometersToMiles(value)))}
- {showUnits ? $_('units.minutes_per_mile') : ''}
+ {secondsToHHMMSS(getConvertedVelocity(value, $velocityUnits, $distanceUnits))}
+ {showUnits ? getVelocityUnits($velocityUnits, $distanceUnits) : ''}
{/if}
{:else if type === 'temperature'}
{#if $temperatureUnits === 'celsius'}
diff --git a/website/src/lib/components/embedding/Embedding.ts b/website/src/lib/components/embedding/Embedding.ts
index e7fa2866..6681550e 100644
--- a/website/src/lib/components/embedding/Embedding.ts
+++ b/website/src/lib/components/embedding/Embedding.ts
@@ -1,129 +1,141 @@
-import { PUBLIC_MAPBOX_TOKEN } from "$env/static/public";
-import { basemaps } from "$lib/assets/layers";
+import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
+import { basemaps } from '$lib/assets/layers';
export type EmbeddingOptions = {
- token: string;
- files: string[];
- basemap: string;
- elevation: {
- show: boolean;
- height: number,
- controls: boolean,
- fill: 'slope' | 'surface' | undefined,
- speed: boolean,
- hr: boolean,
- cad: boolean,
- temp: boolean,
- power: boolean,
- },
- distanceMarkers: boolean,
- directionMarkers: boolean,
- distanceUnits: 'metric' | 'imperial',
- velocityUnits: 'speed' | 'pace',
- temperatureUnits: 'celsius' | 'fahrenheit',
- theme: 'system' | 'light' | 'dark',
+ token: string;
+ files: string[];
+ basemap: string;
+ elevation: {
+ show: boolean;
+ height: number;
+ controls: boolean;
+ fill: 'slope' | 'surface' | undefined;
+ speed: boolean;
+ hr: boolean;
+ cad: boolean;
+ temp: boolean;
+ power: boolean;
+ };
+ distanceMarkers: boolean;
+ directionMarkers: boolean;
+ distanceUnits: 'metric' | 'imperial' | 'nautical';
+ velocityUnits: 'speed' | 'pace';
+ temperatureUnits: 'celsius' | 'fahrenheit';
+ theme: 'system' | 'light' | 'dark';
};
export const defaultEmbeddingOptions = {
- token: '',
- files: [],
- basemap: 'mapboxOutdoors',
- elevation: {
- show: true,
- height: 170,
- controls: true,
- fill: undefined,
- speed: false,
- hr: false,
- cad: false,
- temp: false,
- power: false,
- },
- distanceMarkers: false,
- directionMarkers: false,
- distanceUnits: 'metric',
- velocityUnits: 'speed',
- temperatureUnits: 'celsius',
- theme: 'system',
+ token: '',
+ files: [],
+ basemap: 'mapboxOutdoors',
+ elevation: {
+ show: true,
+ height: 170,
+ controls: true,
+ fill: undefined,
+ speed: false,
+ hr: false,
+ cad: false,
+ temp: false,
+ power: false
+ },
+ distanceMarkers: false,
+ directionMarkers: false,
+ distanceUnits: 'metric',
+ velocityUnits: 'speed',
+ temperatureUnits: 'celsius',
+ theme: 'system'
};
export function getDefaultEmbeddingOptions(): EmbeddingOptions {
- return JSON.parse(JSON.stringify(defaultEmbeddingOptions));
+ return JSON.parse(JSON.stringify(defaultEmbeddingOptions));
}
-export function getMergedEmbeddingOptions(options: any, defaultOptions: any = defaultEmbeddingOptions): EmbeddingOptions {
- const mergedOptions = JSON.parse(JSON.stringify(defaultOptions));
- for (const key in options) {
- if (typeof options[key] === 'object' && options[key] !== null && !Array.isArray(options[key])) {
- mergedOptions[key] = getMergedEmbeddingOptions(options[key], defaultOptions[key]);
- } else {
- mergedOptions[key] = options[key];
- }
- }
- return mergedOptions;
+export function getMergedEmbeddingOptions(
+ options: any,
+ defaultOptions: any = defaultEmbeddingOptions
+): EmbeddingOptions {
+ const mergedOptions = JSON.parse(JSON.stringify(defaultOptions));
+ for (const key in options) {
+ if (typeof options[key] === 'object' && options[key] !== null && !Array.isArray(options[key])) {
+ mergedOptions[key] = getMergedEmbeddingOptions(options[key], defaultOptions[key]);
+ } else {
+ mergedOptions[key] = options[key];
+ }
+ }
+ return mergedOptions;
}
-export function getCleanedEmbeddingOptions(options: any, defaultOptions: any = defaultEmbeddingOptions): any {
- const cleanedOptions = JSON.parse(JSON.stringify(options));
- for (const key in cleanedOptions) {
- if (typeof cleanedOptions[key] === 'object' && cleanedOptions[key] !== null && !Array.isArray(cleanedOptions[key])) {
- cleanedOptions[key] = getCleanedEmbeddingOptions(cleanedOptions[key], defaultOptions[key]);
- if (Object.keys(cleanedOptions[key]).length === 0) {
- delete cleanedOptions[key];
- }
- } else if (JSON.stringify(cleanedOptions[key]) === JSON.stringify(defaultOptions[key])) {
- delete cleanedOptions[key];
- }
- }
- return cleanedOptions;
+export function getCleanedEmbeddingOptions(
+ options: any,
+ defaultOptions: any = defaultEmbeddingOptions
+): any {
+ const cleanedOptions = JSON.parse(JSON.stringify(options));
+ for (const key in cleanedOptions) {
+ if (
+ typeof cleanedOptions[key] === 'object' &&
+ cleanedOptions[key] !== null &&
+ !Array.isArray(cleanedOptions[key])
+ ) {
+ cleanedOptions[key] = getCleanedEmbeddingOptions(cleanedOptions[key], defaultOptions[key]);
+ if (Object.keys(cleanedOptions[key]).length === 0) {
+ delete cleanedOptions[key];
+ }
+ } else if (JSON.stringify(cleanedOptions[key]) === JSON.stringify(defaultOptions[key])) {
+ delete cleanedOptions[key];
+ }
+ }
+ return cleanedOptions;
}
-export const allowedEmbeddingBasemaps = Object.keys(basemaps).filter(basemap => !['ordnanceSurvey'].includes(basemap));
+export const allowedEmbeddingBasemaps = Object.keys(basemaps).filter(
+ (basemap) => !['ordnanceSurvey'].includes(basemap)
+);
export function getURLForGoogleDriveFile(fileId: string): string {
- return `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media&key=AIzaSyA2ZadQob_hXiT2VaYIkAyafPvz_4ZMssk`;
+ return `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media&key=AIzaSyA2ZadQob_hXiT2VaYIkAyafPvz_4ZMssk`;
}
export function convertOldEmbeddingOptions(options: URLSearchParams): any {
- let newOptions: any = {
- token: PUBLIC_MAPBOX_TOKEN,
- files: [],
- };
- if (options.has('state')) {
- let state = JSON.parse(options.get('state')!);
- if (state.ids) {
- newOptions.files.push(...state.ids.map(getURLForGoogleDriveFile));
- }
- if (state.urls) {
- newOptions.files.push(...state.urls);
- }
- }
- if (options.has('source')) {
- let basemap = options.get('source')!;
- if (basemap === 'satellite') {
- newOptions.basemap = 'mapboxSatellite';
- } else if (basemap === 'otm') {
- newOptions.basemap = 'openTopoMap';
- } else if (basemap === 'ohm') {
- newOptions.basemap = 'openHikingMap';
- }
- }
- if (options.has('imperial')) {
- newOptions.distanceUnits = 'imperial';
- }
- if (options.has('running')) {
- newOptions.velocityUnits = 'pace';
- }
- if (options.has('distance')) {
- newOptions.distanceMarkers = true;
- }
- if (options.has('direction')) {
- newOptions.directionMarkers = true;
- }
- if (options.has('slope')) {
- newOptions.elevation = {
- fill: 'slope',
- };
- }
- return newOptions;
-}
\ No newline at end of file
+ let newOptions: any = {
+ token: PUBLIC_MAPBOX_TOKEN,
+ files: []
+ };
+ if (options.has('state')) {
+ let state = JSON.parse(options.get('state')!);
+ if (state.ids) {
+ newOptions.files.push(...state.ids.map(getURLForGoogleDriveFile));
+ }
+ if (state.urls) {
+ newOptions.files.push(...state.urls);
+ }
+ }
+ if (options.has('source')) {
+ let basemap = options.get('source')!;
+ if (basemap === 'satellite') {
+ newOptions.basemap = 'mapboxSatellite';
+ } else if (basemap === 'otm') {
+ newOptions.basemap = 'openTopoMap';
+ } else if (basemap === 'ohm') {
+ newOptions.basemap = 'openHikingMap';
+ }
+ }
+ if (options.has('imperial')) {
+ newOptions.distanceUnits = 'imperial';
+ }
+ if (options.has('running')) {
+ newOptions.velocityUnits = 'pace';
+ }
+ if (options.has('distance')) {
+ newOptions.distanceMarkers = true;
+ }
+ if (options.has('direction')) {
+ newOptions.directionMarkers = true;
+ }
+ if (options.has('slope')) {
+ newOptions.elevation = {
+ fill: 'slope'
+ };
+ }
+ return newOptions;
+}
diff --git a/website/src/lib/components/embedding/EmbeddingPlayground.svelte b/website/src/lib/components/embedding/EmbeddingPlayground.svelte
index b88071a0..8f0458c9 100644
--- a/website/src/lib/components/embedding/EmbeddingPlayground.svelte
+++ b/website/src/lib/components/embedding/EmbeddingPlayground.svelte
@@ -221,6 +221,10 @@
+
+
+
+