update embedding instructions

website/src/lib/components/embedding/embedding.ts

@@ -90,6 +90,9 @@ export function getCleanedEmbeddingOptions(
             delete cleanedOptions[key];
         }
     }
+    if (cleanedOptions['key'] && cleanedOptions['key'] === PUBLIC_MAPTILER_KEY) {
+        delete cleanedOptions['key'];
+    }
     return cleanedOptions;
 }
 

website/src/lib/components/map/style.ts

@@ -85,9 +85,11 @@ export class StyleManager {
 
         this.merge(style, basemapStyle);
 
+        if (this._maptilerKey !== '') {
             const terrain = this.getCurrentTerrain();
             style.sources[terrain.source] = terrainSources[terrain.source];
             style.terrain = terrain.exaggeration > 0 ? terrain : undefined;
+        }
 
         style.layers.push(...anchorLayers);
 
@@ -152,6 +154,7 @@ export class StyleManager {
     }
 
     updateTerrain() {
+        if (this._maptilerKey === '') return;
         const map_ = get(this._map);
         if (!map_) return;
 

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

@@ -12,8 +12,8 @@ title: Integration
 You can use **gpx.studio** to create maps showing your GPX files and embed them in your website.
 
 All you need is:
-1. A <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load the map, and
-1. GPX files hosted on your server or on Google Drive, or accessible via a public URL.
+1. GPX files hosted on your server or on Google Drive, or accessible via a public URL;
+1. *Optional:* a <a href="https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/" target="_blank">MapTiler key</a> to load MapTiler maps.
 
 You can then play with the configurator below to customize your map and generate the corresponding HTML code.
 

website/src/locales/en.json

@@ -528,7 +528,7 @@
     },
     "embedding": {
         "title": "Create your own map",
-        "maptiler_key": "MapTiler key",
+        "maptiler_key": "MapTiler key (optional, only required for MapTiler maps)",
         "file_urls": "File URLs (separated by commas)",
         "drive_ids": "Google Drive file IDs (separated by commas)",
         "basemap": "Basemap",

website/src/routes/[[language]]/embed/+page.svelte

@@ -19,6 +19,9 @@
             return;
         }
         embeddingOptions = getMergedEmbeddingOptions(options);
+        if (embeddingOptions.key === '' && embeddingOptions.basemap.startsWith('maptiler')) {
+            embeddingOptions.basemap = 'openStreetMap';
+        }
     });
 </script>