From 84b3d29e2e402207b65a945706aed6e68bbe1692 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 14 Aug 2024 18:27:47 +0200
Subject: [PATCH] embedding: add support files hosted on google drive

---
 .../components/embedding/EmbeddingPlayground.svelte   | 11 +++++++++--
 website/src/lib/docs/en/integration.mdx               |  2 +-
 website/src/locales/en.json                           |  1 +
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/website/src/lib/components/embedding/EmbeddingPlayground.svelte b/website/src/lib/components/embedding/EmbeddingPlayground.svelte
index 12dc83c9..b88071a0 100644
--- a/website/src/lib/components/embedding/EmbeddingPlayground.svelte
+++ b/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}`) }}
diff --git a/website/src/lib/docs/en/integration.mdx b/website/src/lib/docs/en/integration.mdx
index 21278255..739df990 100644
--- a/website/src/lib/docs/en/integration.mdx
+++ b/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.
 
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index 0bb3aac5..b1717ba8 100644
--- a/website/src/locales/en.json
+++ b/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",