embedding: add support files hosted on google drive

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

@@ -19,7 +19,8 @@
 	import {
 		allowedEmbeddingBasemaps,
 		getCleanedEmbeddingOptions,
-		getDefaultEmbeddingOptions
+		getDefaultEmbeddingOptions,
+		getURLForGoogleDriveFile
 	} from './Embedding';
 	import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
 	import Embedding from './Embedding.svelte';
@@ -34,9 +35,13 @@
 	];
 
 	let files = options.files[0];
-	$: if (files) {
+	let driveIds = '';
+	$: if (files && driveIds) {
 		let urls = files.split(',');
 		urls = urls.filter((url) => url.length > 0);
+		let ids = driveIds.split(',');
+		ids = ids.filter((id) => id.length > 0);
+		urls.push(...ids.map(getURLForGoogleDriveFile));
 		if (JSON.stringify(urls) !== JSON.stringify(options.files)) {
 			options.files = urls;
 		}
@@ -94,6 +99,8 @@
 			<Input id="token" type="text" class="h-8" bind:value={options.token} />
 			<Label for="file_urls">{$_('embedding.file_urls')}</Label>
 			<Input id="file_urls" type="text" class="h-8" bind:value={files} />
+			<Label for="drive_ids">{$_('embedding.drive_ids')}</Label>
+			<Input id="drive_ids" type="text" class="h-8" bind:value={driveIds} />
 			<Label for="basemap">{$_('embedding.basemap')}</Label>
 			<Select.Root
 				selected={{ value: options.basemap, label: $_(`layers.label.${options.basemap}`) }}

website/src/lib/docs/en/integration.mdx

@@ -13,7 +13,7 @@ You can use **gpx.studio** to create maps showing your GPX files and embed them
 
 All you need is:
 1. A <a href="https://account.mapbox.com/auth/signup" target="_blank">Mapbox access token</a> to load the map, and
-1. GPX files hosted on your server or a public URL.
+1. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
 
 You can then play with the configurator below to customize your map and generate the corresponding HTML code.
 

website/src/locales/en.json

@@ -453,6 +453,7 @@
         "title": "Create your own map",
         "mapbox_token": "Mapbox access token",
         "file_urls": "File URLs (separated by commas)",
+        "drive_ids": "Google Drive file IDs (separated by commas)",
         "basemap": "Basemap",
         "height": "Height",
         "fill_by": "Fill by",