Add links to tile provider authentication docs (#914)

This probably confused some people in the past, since vector tiles won't even display an access denied image ;) Before (no information on access keys and where to get them): <img width="411" alt="image" src="https://github.com/user-attachments/assets/8820fb20-bda4-460c-9cc9-8fec5daa480d"> After (add links to providers in info callout + add a field for Stadia Maps API keys): <img width="395" alt="image" src="https://github.com/user-attachments/assets/91ee732c-b3f5-45f8-81a6-8d896a93f644"> --------- Co-authored-by: Harel M <harel.mazor@gmail.com> Co-authored-by: Joscha <34318751+josxha@users.noreply.github.com> Co-authored-by: Hugues Tavernier <hugues.tavernier@protonmail.com> Co-authored-by: Keitaroh Kobayashi <keita@kbys.me>
2025-12-06 06:10:00 +00:00 · 2024-09-25 16:22:39 +09:00
parent 0f1000c5b0
commit 25cf61a825
12 changed files with 102 additions and 24 deletions
--- a/cypress/e2e/modals.cy.ts
+++ b/cypress/e2e/modals.cy.ts
@@ -160,6 +160,18 @@ describe("modals", () => {
      ).shouldInclude({ "maputnik:thunderforest_access_token": apiKey });
    });

+    it("stadia access token", () => {
+      let apiKey = "testing123";
+      when.setValue(
+        "modal:settings.maputnik:stadia_access_token",
+        apiKey
+      );
+      when.click("modal:settings.name");
+      then(
+        get.styleFromLocalStorage().then((style) => style.metadata)
+      ).shouldInclude({ "maputnik:stadia_access_token": apiKey });
+    });
+
    it("style renderer", () => {
      cy.on("uncaught:exception", () => false); // this is due to the fact that this is an invalid style for openlayers
      when.select("modal:settings.maputnik:renderer", "ol");
--- a/src/components/Block.tsx
+++ b/src/components/Block.tsx
@@ -56,7 +56,9 @@ export default class Block extends React.Component<BlockProps, BlockState> {
    if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
      event.stopPropagation();
    }
-    event.preventDefault();
+    if (event.nativeEvent.target.nodeName !== "A") {
+      event.preventDefault();
+    }
  }

  render() {
--- a/src/components/Doc.tsx
+++ b/src/components/Doc.tsx
@@ -18,6 +18,8 @@ type DocProps = {
    'sdk-support'?: {
      [key: string]: typeof headers
    }
+    docUrl?: string,
+    docUrlLinkText?: string
  }
 };

@@ -25,7 +27,7 @@ export default class Doc extends React.Component<DocProps> {
  render () {
    const {fieldSpec} = this.props;

-    const {doc, values} = fieldSpec;
+    const {doc, values, docUrl, docUrlLinkText} = fieldSpec;
    const sdkSupport = fieldSpec['sdk-support'];

    const renderValues = (
@@ -85,7 +87,12 @@ export default class Doc extends React.Component<DocProps> {
            </table>
          </div>
        }
+        {docUrl && docUrlLinkText &&
+          <div className="SpecDoc__learn-more">
+            <a href={docUrl}  target="_blank" rel="noreferrer">{docUrlLinkText}</a>
+          </div>
+        }
      </>
    );
  }
-}
+}
--- a/src/components/ModalExport.tsx
+++ b/src/components/ModalExport.tsx
@@ -130,6 +130,12 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
            value={(this.props.mapStyle.metadata || {} as any)['maputnik:thunderforest_access_token']}
            onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
          />
+          <FieldString
+            label={fsa.maputnik.stadia_access_token.label}
+            fieldSpec={fsa.maputnik.stadia_access_token}
+            value={(this.props.mapStyle.metadata || {} as any)['maputnik:stadia_access_token']}
+            onChange={this.changeMetadataProperty.bind(this, "maputnik:stadia_access_token")}
+          />
        </div>

        <div className="maputnik-modal-export-buttons">
--- a/src/components/ModalSettings.tsx
+++ b/src/components/ModalSettings.tsx
@@ -156,6 +156,14 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
          onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
        />

+        <FieldString
+          label={fsa.maputnik.stadia_access_token.label}
+          fieldSpec={fsa.maputnik.stadia_access_token}
+          data-wd-key="modal:settings.maputnik:stadia_access_token"
+          value={metadata['maputnik:stadia_access_token']}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:stadia_access_token")}
+        />
+
        <FieldArray
          label={t("Center")}
          fieldSpec={latest.$root.center}
--- a/src/libs/field-spec-additional.ts
+++ b/src/libs/field-spec-additional.ts
@@ -4,15 +4,25 @@ const spec = (t: TFunction) => ({
  maputnik: {
    maptiler_access_token: {
      label: t("MapTiler Access Token"),
-      doc: t("Public access token for MapTiler Cloud.")
+      doc: t("Public access token for MapTiler Cloud."),
+      docUrl: "https://docs.maptiler.com/cloud/api/authentication-key/",
+      docUrlLinkText: t("Learn More")
    },
    thunderforest_access_token: {
      label: t("Thunderforest Access Token"),
-      doc: t("Public access token for Thunderforest services.")
+      doc: t("Public access token for Thunderforest services."),
+      docUrl: "https://www.thunderforest.com/docs/apikeys/",
+      docUrlLinkText: t("Learn More")
+    },
+    stadia_access_token: {
+      label: t("Stadia Maps API Key"),
+      doc: t("API key for Stadia Maps."),
+      docUrl: "https://docs.stadiamaps.com/authentication/",
+      docUrlLinkText: t("Learn More")
    },
    style_renderer: {
      label: t("Style Renderer"),
-      doc: t("Choose the default Maputnik renderer for this style."),
+      doc: t("Choose the default Maputnik renderer for this style.")
    },
  }
 })
--- a/src/libs/style.ts
+++ b/src/libs/style.ts
@@ -55,10 +55,6 @@ function indexOfLayer(layers: LayerSpecification[], layerId: string) {
 }

 function getAccessToken(sourceName: string, mapStyle: StyleSpecification, opts: {allowFallback?: boolean}) {
-  if(sourceName === "thunderforest_transport" || sourceName === "thunderforest_outdoors") {
-    sourceName = "thunderforest"
-  }
-
  const metadata = mapStyle.metadata || {} as any;
  let accessToken = metadata[`maputnik:${sourceName}_access_token`]

@@ -74,18 +70,38 @@ function replaceSourceAccessToken(mapStyle: StyleSpecification, sourceName: stri
  if(!source) return mapStyle
  if(!("url" in source) || !source.url) return mapStyle

-  const accessToken = getAccessToken(sourceName, mapStyle, opts)
+  let authSourceName = sourceName
+  if(sourceName === "thunderforest_transport" || sourceName === "thunderforest_outdoors") {
+    authSourceName = "thunderforest"
+  }
+  else if (("url" in source) && source.url?.match(/\.stadiamaps\.com/)) {
+    // The code currently usually assumes openmaptiles == MapTiler,
+    // so we need to check the source URL.
+    authSourceName = "stadia"
+  }
+
+  const accessToken = getAccessToken(authSourceName, mapStyle, opts)

  if(!accessToken) {
    // Early exit.
    return mapStyle;
  }

+  let sourceUrl: string
+  if (authSourceName == "stadia") {
+    // Stadia Maps does not always require an API key,
+    // so there is no placeholder in our styles.
+    // We append it at the end of the URL when exporting if necessary.
+    sourceUrl = `${source.url}?api_key=${accessToken}`
+  } else {
+    sourceUrl = source.url.replace('{key}', accessToken)
+  }
+
  const changedSources = {
    ...mapStyle.sources,
    [sourceName]: {
      ...source,
-      url: source.url.replace('{key}', accessToken)
+      url: sourceUrl
    }
  }
  const changedStyle = {
@@ -120,6 +136,8 @@ function stripAccessTokens(mapStyle: StyleSpecification) {
    ...mapStyle.metadata as any
  };
  delete changedMetadata['maputnik:openmaptiles_access_token'];
+  delete changedMetadata['maputnik:thunderforest_access_token'];
+  delete changedMetadata['maputnik:stadia_access_token'];
  return {
    ...mapStyle,
    metadata: changedMetadata
--- a/src/locales/de/translation.json
+++ b/src/locales/de/translation.json
@@ -176,8 +176,11 @@
  "Error:": "Fehler:",
  "MapTiler Access Token": "MapTiler Zugriffstoken",
  "Public access token for MapTiler Cloud.": "Öffentlicher Zugriffstoken für MapTiler Cloud.",
+  "Learn More": "Mehr erfahren",
  "Thunderforest Access Token": "Thunderforest Zugriffstoken",
  "Public access token for Thunderforest services.": "Öffentlicher Zugriffstoken für Thunderforest-Dienste.",
+  "Stadia Maps API Key": "Stadia Maps API-Schlüssel",
+  "API key for Stadia Maps.": "API-Schlüssel für Stadia Maps.",
  "Style Renderer": "Stil-Renderer",
  "Choose the default Maputnik renderer for this style.": "Wähle den Standard-Renderer für diesen Stil aus.",
  "Language": "Sprache",
--- a/src/locales/fr/translation.json
+++ b/src/locales/fr/translation.json
@@ -34,7 +34,6 @@
  "Style Settings": "Paramètres du style",
  "View": "Vue",
  "Color accessibility": "Accessibilité des couleurs",
-  "Language": "Langue",
  "Help": "Aide",
  "Comments for the current layer. This is non-standard and not in the spec.": "Commentaires pour le calque actuel. Ceci n'est pas standard et n'est pas dans la spécification.",
  "Comments": "Commentaires",
@@ -73,8 +72,8 @@
  "Collapse": "Réduire",
  "Expand": "Développer",
  "Add Layer": "Ajouter un calque",
-  "Zoom:": "Zoom :",
  "Search": "Recherche",
+  "Zoom:": "Zoom :",
  "Close popup": "Fermer la fenêtre",
  "cursor:": "curseur :",
  "center:": "centre :",
@@ -177,10 +176,14 @@
  "Error:": "Erreur :",
  "MapTiler Access Token": "Jeton d'accès MapTiler",
  "Public access token for MapTiler Cloud.": "Jeton d'accès public pour MapTiler Cloud.",
+  "Learn More": "En savoir plus",
  "Thunderforest Access Token": "Jeton d'accès Thunderforest",
  "Public access token for Thunderforest services.": "Jeton d'accès public pour les services Thunderforest.",
+  "Stadia Maps API Key": "Clé d'API Stadia Maps",
+  "API key for Stadia Maps.": "Clé d'API pour Stadia Maps.",
  "Style Renderer": "Moteur de rendu pour le style",
  "Choose the default Maputnik renderer for this style.": "Choisissez le moteur de rendu Maputnik par défaut pour ce style.",
+  "Language": "Langue",
  "Layer options": "Options du calque",
  "Paint properties": "Propriétés de peinture",
  "Layout properties": "Propriétés de mise en page",
--- a/src/locales/he/translation.json
+++ b/src/locales/he/translation.json
@@ -34,7 +34,6 @@
  "Style Settings": "הגדרות הסטייל",
  "View": "תצוגה",
  "Color accessibility": "נגישות צבעים",
-  "Language": "שפה",
  "Help": "עזרה",
  "Comments for the current layer. This is non-standard and not in the spec.": "הערות על השכבה הנוכחית. זה לא חלק מהספסיפיקציות",
  "Comments": "הערות",
@@ -73,8 +72,8 @@
  "Collapse": "הקטנה",
  "Expand": "הגדלה",
  "Add Layer": "הוספת שכבה",
-  "Zoom:": "זום:",
  "Search": "חיפוש",
+  "Zoom:": "זום:",
  "Close popup": "סגירת החלון",
  "cursor:": "סמן",
  "center:": "מרכז:",
@@ -82,7 +81,6 @@
  "Close modal": "סגירת חלונית",
  "Debug": "דיבאג",
  "Options": "אפשרויות",
-  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "<0>פתיחה ב-OSM</0> - פתיחה של התצוגה הנוכחית ב- openstreetmap.org",
  "Export Style": "ייצוא של הסטייל",
  "Download Style": "הורדה של הסטייל",
  "Download a JSON style to your computer.": "הורדה של הסטייל למחשב",
@@ -177,8 +175,13 @@
  "Error:": "שגיאה",
  "MapTiler Access Token": "MapTiler Access Token",
  "Public access token for MapTiler Cloud.": "Public access token for MapTiler Cloud.",
+  "Learn More": "מידע נוסף",
  "Thunderforest Access Token": "Thunderforest Access Token",
  "Public access token for Thunderforest services.": "Public access token for Thunderforest services.",
+  "Stadia Maps API Key": "Stadia Maps API Key",
+  "API key for Stadia Maps.": "API key for Stadia Maps",
  "Style Renderer": "צייר הסטייל",
-  "Choose the default Maputnik renderer for this style.": "בחירת צייר ברירת המחדל של מפוטניק עבור הסטייל הזה"
+  "Choose the default Maputnik renderer for this style.": "בחירת צייר ברירת המחדל של מפוטניק עבור הסטייל הזה",
+  "Language": "שפה",
+  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "<0>פתיחה ב-OSM</0> - פתיחה של התצוגה הנוכחית ב- openstreetmap.org"
 }
--- a/src/locales/ja/translation.json
+++ b/src/locales/ja/translation.json
@@ -34,7 +34,6 @@
  "Style Settings": "スタイル設定",
  "View": "表示",
  "Color accessibility": "色のアクセシビリティ",
-  "Language": "言語",
  "Help": "ヘルプ",
  "Comments for the current layer. This is non-standard and not in the spec.": "現在のレイヤーのコメント。注意：この機能は標準ではないため、他のライブラリとの互換性状況はわかりません。",
  "Comments": "コメント",
@@ -73,8 +72,8 @@
  "Collapse": "畳む",
  "Expand": "展開",
  "Add Layer": "レイヤー追加",
-  "Zoom:": "ズーム:",
  "Search": "検索",
+  "Zoom:": "ズーム:",
  "Close popup": "ポップアップを閉じる",
  "cursor:": "カーソル",
  "center:": "中央:",
@@ -82,7 +81,6 @@
  "Close modal": "モーダルを閉じる",
  "Debug": "デバッグ",
  "Options": "設定",
-  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "現在のビューを <0>openstreetmap.org で開く</0>",
  "Export Style": "スタイルをエクスポート",
  "Download Style": "スタイルをダウンロード",
  "Download a JSON style to your computer.": "パソコンにJSONスタイルをダウンロードします。",
@@ -177,10 +175,15 @@
  "Error:": "エラー:",
  "MapTiler Access Token": "MapTiler アクセストークン",
  "Public access token for MapTiler Cloud.": "MapTiler Cloud の公開用アクセストークン",
+  "Learn More": "詳細はこちら",
  "Thunderforest Access Token": "Thunderforest アクセストークン",
  "Public access token for Thunderforest services.": "Thunderforest サービスの公開用アクセストークン",
+  "Stadia Maps API Key": "Stadia Maps API キー",
+  "API key for Stadia Maps.": "Stadia Maps の API キー",
  "Style Renderer": "スタイルレンダラ",
  "Choose the default Maputnik renderer for this style.": "このスタイルのデフォルトの Maputnik レンダラを選択してください",
+  "Language": "言語",
+  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "現在のビューを <0>openstreetmap.org で開く</0>",
  "Layer options": "レイヤー設定",
  "Paint properties": "ペイントプロパティ",
  "Layout properties": "レイアウトプロパティ",
--- a/src/locales/zh/translation.json
+++ b/src/locales/zh/translation.json
@@ -34,7 +34,6 @@
  "Style Settings": "样式设置",
  "View": "视图",
  "Color accessibility": "颜色可访问性",
-  "Language": "语言",
  "Help": "帮助",
  "Comments for the current layer. This is non-standard and not in the spec.": "当前图层的注释。注意：这不是标准功能，可能与其他库不兼容。",
  "Comments": "注释",
@@ -73,8 +72,8 @@
  "Collapse": "折叠",
  "Expand": "展开",
  "Add Layer": "添加图层",
-  "Zoom:": "缩放:",
  "Search": "搜索",
+  "Zoom:": "缩放:",
  "Close popup": "关闭弹出窗口",
  "cursor:": "光标:",
  "center:": "中心:",
@@ -82,7 +81,6 @@
  "Close modal": "关闭模态框",
  "Debug": "调试",
  "Options": "选项",
-  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "在 openstreetmap.org 打开当前视图",
  "Export Style": "导出样式",
  "Download Style": "下载样式",
  "Download a JSON style to your computer.": "将JSON样式下载到您的电脑。",
@@ -177,10 +175,15 @@
  "Error:": "错误：",
  "MapTiler Access Token": "MapTiler 访问令牌",
  "Public access token for MapTiler Cloud.": "MapTiler Cloud 的公共访问令牌。",
+  "Learn More": "__STRING_NOT_TRANSLATED__",
  "Thunderforest Access Token": "Thunderforest 访问令牌",
  "Public access token for Thunderforest services.": "Thunderforest 服务的公共访问令牌。",
+  "Stadia Maps API Key": "Stadia Maps API 密钥",
+  "API key for Stadia Maps.": "Stadia Maps 的 API 密钥",
  "Style Renderer": "样式渲染器",
  "Choose the default Maputnik renderer for this style.": "为这种样式选择默认的Maputnik渲染器。",
+  "Language": "语言",
+  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "在 openstreetmap.org 打开当前视图",
  "Layer options": "图层选项",
  "Paint properties": "绘制属性",
  "Layout properties": "布局属性",