maplibre-gl-basemap-control 0.6.0 → 0.8.0

package/README.md

@@ -141,8 +141,10 @@ Mapbox styles include Streets, Outdoors, Light, Dark, Satellite, Satellite Stree
 and Navigation Night.
 
 MapTiler and Amazon Location styles require API keys. Mapbox styles require an access token. Users
-can enter keys and tokens in the collapsible provider settings section in the control panel, or you
-can provide them when creating the control.
+can enter keys and tokens in the dedicated API keys view, opened from the key button in the panel
+header, or you can provide them when creating the control. When a basemap is selected before its key
+is set, the control surfaces the error and the matching credential field inline, before any
+destructive style change, so the missing key can be entered and the basemap retried with Enter.
 
 ```typescript
 const control = new BasemapControl({

package/dist/{BasemapControl-CnjmO-_2.js → BasemapControl-C9T87uJx.js}

@@ -12,6 +12,7 @@ const DEFAULT_BASEMAP_PROVIDERS = [
   { id: "maptiler", name: "MapTiler", category: "General" },
   { id: "nasa-gibs", name: "NASA GIBS", category: "Imagery" },
   { id: "nlmaps", name: "nlmaps", category: "Regional" },
+  { id: "openbasiskaart", name: "Openbasiskaart", category: "Regional" },
   { id: "openfreemap", name: "OpenFreeMap", category: "Vector Styles" },
   { id: "openrailwaymap", name: "OpenRailwayMap", category: "Transport" },
   { id: "openstreetmap", name: "OpenStreetMap", category: "Community" },
@@ -999,6 +1000,21 @@ const DEFAULT_BASEMAPS = [
     ],
     tags: ["netherlands", "imagery", "aerial"]
   }),
+  rasterBasemap({
+    id: "openbasiskaart",
+    name: "Openbasiskaart",
+    provider: "openbasiskaart",
+    category: "Regional",
+    description: "Netherlands topographic background map based on OpenStreetMap data.",
+    attribution: "Map data © OpenStreetMap contributors | Openbasiskaart",
+    // The Google Maps Compatible (osm-g) layer uses the standard Web Mercator
+    // grid, so its WMTS {TileMatrix}/{TileRow}/{TileCol} maps directly to xyz.
+    tiles: [
+      "https://www.openbasiskaart.nl/mapcache/wmts/1.0.0/osm-g/default/g/{z}/{y}/{x}.png"
+    ],
+    maxzoom: 18,
+    tags: ["netherlands", "regional", "topographic", "osm", "openbasiskaart"]
+  }),
   {
     id: "openfreemap-positron",
     name: "OpenFreeMap Positron",
@@ -1300,11 +1316,18 @@ class BasemapControl {
     // a traffic overlay reuses a token until it expires instead of creating a new
     // session on every add. Keyed by the serialized config + API key.
     __publicField(this, "_googleSessions", new globalThis.Map());
-    __publicField(this, "_providerSettingsCollapsed", true);
+    // Which sub-view the panel content shows: the basemap list, or the dedicated
+    // API-keys settings view opened from the header key button (#837).
+    __publicField(this, "_activeView", "basemaps");
+    __publicField(this, "_settingsButton");
     // Provider of the most recent missing-credential error, used to pick the
-    // matching help link. Kept in sync with `_state.error` (both are set together
-    // in `_applyBasemapChange`'s catch) so it is never stale when consulted.
+    // matching help link and the inline credential field beside the error. Kept
+    // in sync with `_state.error` (both are cleared together) so it is never
+    // stale when consulted.
     __publicField(this, "_missingCredentialProvider");
+    // The basemap whose application last failed for a missing credential, so the
+    // inline credential field's Enter key can re-attempt it (#837).
+    __publicField(this, "_lastFailedBasemapId");
     __publicField(this, "_resizeHandler", null);
     __publicField(this, "_mapResizeHandler", null);
     __publicField(this, "_resizeAnchor", null);
@@ -1452,39 +1475,39 @@ class BasemapControl {
   }
   setMapTilerApiKey(apiKey) {
     this._mapTilerApiKey = apiKey;
-    this._state = { ...this._state, error: void 0 };
+    this._clearError();
     this._renderContent();
     this._emit({ type: "statechange", state: this.getState() });
   }
   setAmazonCredentials(apiKey, awsRegion = this._awsRegion) {
     this._amazonApiKey = apiKey;
     this._awsRegion = awsRegion;
-    this._state = { ...this._state, error: void 0 };
+    this._clearError();
     this._renderContent();
     this._emit({ type: "statechange", state: this.getState() });
   }
   setMapboxAccessToken(accessToken) {
     this._mapboxAccessToken = accessToken;
-    this._state = { ...this._state, error: void 0 };
+    this._clearError();
     this._renderContent();
     this._emit({ type: "statechange", state: this.getState() });
   }
   setTomTomApiKey(apiKey) {
     this._tomtomApiKey = apiKey;
-    this._state = { ...this._state, error: void 0 };
+    this._clearError();
     this._renderContent();
     this._emit({ type: "statechange", state: this.getState() });
   }
   setHereApiKey(apiKey) {
     this._hereApiKey = apiKey;
-    this._state = { ...this._state, error: void 0 };
+    this._clearError();
     this._renderContent();
     this._emit({ type: "statechange", state: this.getState() });
   }
   setGoogleMapsApiKey(apiKey) {
     this._googleMapsApiKey = apiKey;
     this._googleSessions.clear();
-    this._state = { ...this._state, error: void 0 };
+    this._clearError();
     this._renderContent();
     this._emit({ type: "statechange", state: this.getState() });
   }
@@ -1552,6 +1575,16 @@ class BasemapControl {
     }
     const isOverlay = basemap.source.type === "raster" || basemap.source.type === "vector-overlay";
     const effectiveMode = isOverlay ? mode : "replace";
+    if (!isOverlay) {
+      try {
+        this._resolveStyleUrl(basemap);
+      } catch (cause) {
+        if (cause instanceof MissingCredentialError) {
+          this._enterCredentialError(cause, basemap);
+          throw cause;
+        }
+      }
+    }
     if (!isOverlay && this._state.allowMultiple && this._managedRasters.size > 0 && this._options.confirmStyleReplace) {
       const replacedBasemapIds = [...this._managedRasters.keys()];
       let confirmed = false;
@@ -1605,13 +1638,14 @@ class BasemapControl {
       this._emit({ type: "statechange", state: this.getState() });
     } catch (cause) {
       const error = cause instanceof Error ? cause : new Error(String(cause));
-      this._state = { ...this._state, loading: false, error: error.message };
-      this._missingCredentialProvider = cause instanceof MissingCredentialError ? cause.provider : void 0;
-      if (cause instanceof MissingCredentialError) {
-        this._providerSettingsCollapsed = false;
+      if (error instanceof MissingCredentialError) {
+        this._enterCredentialError(error, basemap);
+      } else {
+        this._state = { ...this._state, loading: false, error: error.message };
+        this._missingCredentialProvider = void 0;
+        this._renderContent(true);
+        this._handleError(error, basemap);
       }
-      this._renderContent(true);
-      this._handleError(error, basemap);
       throw error;
     }
   }
@@ -1674,6 +1708,28 @@ class BasemapControl {
     this._emit({ type: "error", state: this.getState(), error, basemap });
     this._emit({ type: "statechange", state: this.getState() });
   }
+  // Clears the current error and its associated missing-credential provider so
+  // the inline credential field and help link disappear together.
+  _clearError() {
+    if (this._state.error === void 0 && this._missingCredentialProvider === void 0 && this._lastFailedBasemapId === void 0) {
+      return;
+    }
+    this._state = { ...this._state, error: void 0 };
+    this._missingCredentialProvider = void 0;
+    this._lastFailedBasemapId = void 0;
+  }
+  // Records a missing-credential failure: stores the error, remembers the
+  // provider (for the help link and inline field) and the basemap to retry, and
+  // surfaces the basemaps view so the inline credential field beside the error
+  // is visible (#837).
+  _enterCredentialError(error, basemap) {
+    this._state = { ...this._state, loading: false, error: error.message };
+    this._missingCredentialProvider = error.provider;
+    this._lastFailedBasemapId = basemap.id;
+    this._activeView = "basemaps";
+    this._renderContent(true);
+    this._handleError(error, basemap);
+  }
   _createContainer() {
     const container = document.createElement("div");
     container.className = `maplibregl-ctrl maplibregl-ctrl-group basemap-control${this._options.className ? ` ${this._options.className}` : ""}`;
@@ -1708,6 +1764,18 @@ class BasemapControl {
     const title = document.createElement("span");
     title.className = "basemap-control-title";
     title.textContent = this._options.title;
+    const settingsBtn = document.createElement("button");
+    settingsBtn.className = "basemap-control-settings-toggle";
+    settingsBtn.type = "button";
+    settingsBtn.setAttribute("aria-label", "API keys");
+    settingsBtn.title = "API keys";
+    settingsBtn.innerHTML = `
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4"/>
+      </svg>
+    `;
+    settingsBtn.addEventListener("click", () => this._toggleSettingsView());
+    this._settingsButton = settingsBtn;
     const closeBtn = document.createElement("button");
     closeBtn.className = "basemap-control-close";
     closeBtn.type = "button";
@@ -1715,6 +1783,7 @@ class BasemapControl {
     closeBtn.innerHTML = "&times;";
     closeBtn.addEventListener("click", () => this.collapse());
     header.appendChild(title);
+    header.appendChild(settingsBtn);
     header.appendChild(closeBtn);
     this._content = document.createElement("div");
     this._content.className = "basemap-control-content";
@@ -1736,13 +1805,17 @@ class BasemapControl {
   _renderContent(preserveResultsScroll = false) {
     var _a;
     if (!this._content) return;
+    this._reconcileSettingsButton();
+    if (this._activeView === "settings" && this._hasProviderSettings()) {
+      this._content.replaceChildren(this._createSettingsView());
+      return;
+    }
     const categories = getBasemapCategories(this._basemaps);
     const results = this._getFilteredBasemaps();
     const previousResultsScrollTop = preserveResultsScroll ? (_a = this._content.querySelector(".basemap-control-results")) == null ? void 0 : _a.scrollTop : void 0;
     this._content.replaceChildren(
       this._createSearchRow(),
       ...this._options.showMultipleToggle ? [this._createMultipleToggleRow()] : [],
-      ...this._hasProviderSettings() ? [this._createProviderSettingsSection()] : [],
       this._createFilterRow(this._providers, categories),
       this._createStatus(results.length),
       this._createResults(results)
@@ -1752,6 +1825,23 @@ class BasemapControl {
       if (resultsElement) resultsElement.scrollTop = previousResultsScrollTop;
     }
   }
+  // Show the key button only when the catalog actually needs a provider
+  // credential, and reflect whether the settings view is currently open.
+  _reconcileSettingsButton() {
+    if (!this._settingsButton) return;
+    const hasSettings = this._hasProviderSettings();
+    this._settingsButton.hidden = !hasSettings;
+    this._settingsButton.classList.toggle(
+      "is-active",
+      hasSettings && this._activeView === "settings"
+    );
+  }
+  _toggleSettingsView() {
+    if (!this._hasProviderSettings()) return;
+    this._activeView = this._activeView === "settings" ? "basemaps" : "settings";
+    this._renderContent();
+    this._emit({ type: "statechange", state: this.getState() });
+  }
   _renderFilteredResults() {
     var _a, _b;
     if (!this._content) return;
@@ -1806,8 +1896,18 @@ class BasemapControl {
     input.value = this._state.query;
     input.setAttribute("aria-label", "Search basemaps");
     input.addEventListener("input", () => {
+      var _a;
+      const hadError = this._state.error !== void 0;
       this._state = { ...this._state, query: input.value };
-      this._renderFilteredResults();
+      this._clearError();
+      if (hadError) {
+        this._renderContent();
+        input.focus();
+        const end = input.value.length;
+        (_a = input.setSelectionRange) == null ? void 0 : _a.call(input, end, end);
+      } else {
+        this._renderFilteredResults();
+      }
       this._emit({ type: "statechange", state: this.getState() });
     });
     wrapper.appendChild(input);
@@ -1829,118 +1929,205 @@ class BasemapControl {
     wrapper.appendChild(input);
     return wrapper;
   }
-  _createProviderSettingsSection() {
-    const details = document.createElement("details");
-    details.className = "basemap-control-provider-settings";
-    details.open = !this._providerSettingsCollapsed;
-    details.addEventListener("toggle", () => {
-      this._providerSettingsCollapsed = !details.open;
-    });
-    const summary = document.createElement("summary");
-    summary.className = "basemap-control-provider-settings-summary";
-    summary.textContent = "Provider settings";
-    details.appendChild(summary);
-    const fields = document.createElement("div");
-    fields.className = "basemap-control-provider-settings-fields";
-    if (this._hasMapTilerBasemaps()) {
-      fields.appendChild(
-        this._createProviderSettingsInput({
-          className: "basemap-control-maptiler-key",
-          type: "password",
-          placeholder: "MapTiler API key",
-          ariaLabel: "MapTiler API key",
-          value: this._mapTilerApiKey,
-          onInput: (value) => {
-            this._mapTilerApiKey = value;
+  // The ordered set of provider credential fields, gated by whether the catalog
+  // actually contains basemaps for each provider. A single source of truth for
+  // both the centralized settings view and the inline field shown beside a
+  // missing-credential error, so the two never drift (#837).
+  _providerFieldDefs() {
+    return [
+      {
+        provider: "maptiler",
+        label: "MapTiler",
+        has: this._hasMapTilerBasemaps(),
+        fields: [
+          {
+            className: "basemap-control-maptiler-key",
+            type: "password",
+            placeholder: "MapTiler API key",
+            ariaLabel: "MapTiler API key",
+            value: this._mapTilerApiKey,
+            onInput: (value) => {
+              this._mapTilerApiKey = value;
+            }
           }
-        })
-      );
-    }
-    if (this._hasMapboxBasemaps()) {
-      fields.appendChild(
-        this._createProviderSettingsInput({
-          className: "basemap-control-mapbox-token",
-          type: "password",
-          placeholder: "Mapbox access token",
-          ariaLabel: "Mapbox access token",
-          value: this._mapboxAccessToken,
-          onInput: (value) => {
-            this._mapboxAccessToken = value;
+        ]
+      },
+      {
+        provider: "mapbox",
+        label: "Mapbox",
+        has: this._hasMapboxBasemaps(),
+        fields: [
+          {
+            className: "basemap-control-mapbox-token",
+            type: "password",
+            placeholder: "Mapbox access token",
+            ariaLabel: "Mapbox access token",
+            value: this._mapboxAccessToken,
+            onInput: (value) => {
+              this._mapboxAccessToken = value;
+            }
           }
-        })
-      );
-    }
-    if (this._hasTomTomBasemaps()) {
-      fields.appendChild(
-        this._createProviderSettingsInput({
-          className: "basemap-control-tomtom-key",
-          type: "password",
-          placeholder: "TomTom API key",
-          ariaLabel: "TomTom API key",
-          value: this._tomtomApiKey,
-          onInput: (value) => {
-            this._tomtomApiKey = value;
+        ]
+      },
+      {
+        provider: "tomtom",
+        label: "TomTom",
+        has: this._hasTomTomBasemaps(),
+        fields: [
+          {
+            className: "basemap-control-tomtom-key",
+            type: "password",
+            placeholder: "TomTom API key",
+            ariaLabel: "TomTom API key",
+            value: this._tomtomApiKey,
+            onInput: (value) => {
+              this._tomtomApiKey = value;
+            }
           }
-        })
-      );
-    }
-    if (this._hasHereBasemaps()) {
-      fields.appendChild(
-        this._createProviderSettingsInput({
-          className: "basemap-control-here-key",
-          type: "password",
-          placeholder: "HERE API key",
-          ariaLabel: "HERE API key",
-          value: this._hereApiKey,
-          onInput: (value) => {
-            this._hereApiKey = value;
+        ]
+      },
+      {
+        provider: "here",
+        label: "HERE",
+        has: this._hasHereBasemaps(),
+        fields: [
+          {
+            className: "basemap-control-here-key",
+            type: "password",
+            placeholder: "HERE API key",
+            ariaLabel: "HERE API key",
+            value: this._hereApiKey,
+            onInput: (value) => {
+              this._hereApiKey = value;
+            }
           }
-        })
-      );
-    }
-    if (this._hasGoogleApiKeyBasemaps()) {
-      fields.appendChild(
-        this._createProviderSettingsInput({
-          className: "basemap-control-google-key",
-          type: "password",
-          placeholder: "Google Maps API key",
-          ariaLabel: "Google Maps API key",
-          value: this._googleMapsApiKey,
-          onInput: (value) => {
-            this._googleMapsApiKey = value;
-            this._googleSessions.clear();
+        ]
+      },
+      {
+        provider: "google",
+        label: "Google",
+        has: this._hasGoogleApiKeyBasemaps(),
+        fields: [
+          {
+            className: "basemap-control-google-key",
+            type: "password",
+            placeholder: "Google Maps API key",
+            ariaLabel: "Google Maps API key",
+            value: this._googleMapsApiKey,
+            onInput: (value) => {
+              this._googleMapsApiKey = value;
+              this._googleSessions.clear();
+            }
           }
-        })
-      );
-    }
-    if (this._hasAmazonBasemaps()) {
-      fields.appendChild(
-        this._createProviderSettingsInput({
-          className: "basemap-control-amazon-key",
-          type: "password",
-          placeholder: "Amazon API key",
-          ariaLabel: "Amazon API key",
-          value: this._amazonApiKey,
-          onInput: (value) => {
-            this._amazonApiKey = value;
+        ]
+      },
+      {
+        provider: "amazon",
+        label: "Amazon",
+        has: this._hasAmazonBasemaps(),
+        fields: [
+          {
+            className: "basemap-control-amazon-key",
+            type: "password",
+            placeholder: "Amazon API key",
+            ariaLabel: "Amazon API key",
+            value: this._amazonApiKey,
+            onInput: (value) => {
+              this._amazonApiKey = value;
+            }
+          },
+          {
+            className: "basemap-control-aws-region",
+            type: "text",
+            placeholder: "AWS region",
+            ariaLabel: "AWS region",
+            value: this._awsRegion,
+            onInput: (value) => {
+              this._awsRegion = value;
+            }
           }
-        })
-      );
-      fields.appendChild(
+        ]
+      }
+    ];
+  }
+  // The dedicated API-keys view, opened from the header key button. It collects
+  // every provider credential in one place, separate from the basemap list, so
+  // the list itself stays free of input clutter (#837, Bug 5).
+  _createSettingsView() {
+    const view = document.createElement("div");
+    view.className = "basemap-control-settings-view";
+    const head = document.createElement("div");
+    head.className = "basemap-control-settings-head";
+    const back = document.createElement("button");
+    back.type = "button";
+    back.className = "basemap-control-settings-back";
+    back.setAttribute("aria-label", "Back to basemaps");
+    back.innerHTML = `
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="m15 18-6-6 6-6"/>
+      </svg>
+      <span>Basemaps</span>
+    `;
+    back.addEventListener("click", () => this._toggleSettingsView());
+    const heading = document.createElement("span");
+    heading.className = "basemap-control-settings-heading";
+    heading.textContent = "API keys";
+    head.appendChild(back);
+    head.appendChild(heading);
+    view.appendChild(head);
+    const intro = document.createElement("p");
+    intro.className = "basemap-control-settings-intro";
+    intro.textContent = "Add the credentials each provider requires to use its basemaps.";
+    view.appendChild(intro);
+    const fields = document.createElement("div");
+    fields.className = "basemap-control-provider-settings-fields";
+    for (const def of this._providerFieldDefs()) {
+      if (def.has) fields.appendChild(this._createProviderFieldGroup(def));
+    }
+    view.appendChild(fields);
+    return view;
+  }
+  _createProviderFieldGroup(def) {
+    const group = document.createElement("div");
+    group.className = `basemap-control-provider-group basemap-control-provider-group-${def.provider}`;
+    const label = document.createElement("span");
+    label.className = "basemap-control-provider-group-label";
+    label.textContent = def.label;
+    group.appendChild(label);
+    for (const field of def.fields) {
+      group.appendChild(this._createProviderSettingsInput(field));
+    }
+    return group;
+  }
+  // Renders the credential field(s) for the provider of the active
+  // missing-credential error, inline beside the error message. Only that one
+  // provider is shown, so the user is not asked to wade through every other
+  // provider's inputs (#837, Bug 3). Returns null when no such error is active.
+  _createInlineCredentialFields() {
+    if (!this._state.error || !this._missingCredentialProvider) return null;
+    const def = this._providerFieldDefs().find(
+      (candidate) => candidate.provider === this._missingCredentialProvider && candidate.has
+    );
+    if (!def) return null;
+    const wrapper = document.createElement("div");
+    wrapper.className = "basemap-control-status-fields";
+    for (const field of def.fields) {
+      wrapper.appendChild(
         this._createProviderSettingsInput({
-          className: "basemap-control-aws-region",
-          type: "text",
-          placeholder: "AWS region",
-          ariaLabel: "AWS region",
-          value: this._awsRegion,
-          onInput: (value) => {
-            this._awsRegion = value;
-          }
+          ...field,
+          // Keep the error (and this field) on screen while the user types, and
+          // let Enter re-attempt the basemap that failed, so the field is not
+          // yanked out from under the cursor on the first keystroke.
+          rerenderOnInput: false,
+          clearErrorOnInput: false,
+          onEnter: () => this._retryLastFailedBasemap()
         })
       );
     }
-    details.appendChild(fields);
-    return details;
+    return wrapper;
+  }
+  _retryLastFailedBasemap() {
+    if (this._lastFailedBasemapId) this._selectBasemap(this._lastFailedBasemapId);
   }
   _createProviderSettingsInput({
     className,
@@ -1948,7 +2135,10 @@ class BasemapControl {
     placeholder,
     ariaLabel,
     value,
-    onInput
+    onInput,
+    rerenderOnInput = true,
+    clearErrorOnInput = true,
+    onEnter
   }) {
     const wrapper = document.createElement("div");
     wrapper.className = className;
@@ -1965,10 +2155,18 @@ class BasemapControl {
     input.setAttribute("aria-label", ariaLabel);
     input.addEventListener("input", () => {
       onInput(input.value);
-      this._state = { ...this._state, error: void 0 };
-      this._renderFilteredResults();
+      if (clearErrorOnInput) this._clearError();
+      if (rerenderOnInput) this._renderFilteredResults();
       this._emit({ type: "statechange", state: this.getState() });
     });
+    if (onEnter) {
+      input.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          onEnter();
+        }
+      });
+    }
     wrapper.appendChild(input);
     return wrapper;
   }
@@ -1982,6 +2180,7 @@ class BasemapControl {
         providers.map((provider) => ({ value: provider.id, label: provider.name })),
         (value) => {
           this._state = { ...this._state, providerFilter: value };
+          this._clearError();
           this._renderContent();
           this._emit({ type: "statechange", state: this.getState() });
         }
@@ -1994,6 +2193,7 @@ class BasemapControl {
         categories.map((category) => ({ value: category, label: category })),
         (value) => {
           this._state = { ...this._state, categoryFilter: value };
+          this._clearError();
           this._renderContent();
           this._emit({ type: "statechange", state: this.getState() });
         }
@@ -2043,10 +2243,12 @@ class BasemapControl {
         actions.appendChild(link);
         const hint = document.createElement("span");
         hint.className = "basemap-control-status-hint";
-        hint.textContent = ", then add it under Provider settings below.";
+        hint.textContent = ", then enter it below and press Enter.";
         actions.appendChild(hint);
         status.appendChild(actions);
       }
+      const inlineFields = this._createInlineCredentialFields();
+      if (inlineFields) status.appendChild(inlineFields);
     } else {
       status.textContent = `${resultCount} basemap${resultCount === 1 ? "" : "s"}`;
     }
@@ -2619,4 +2821,4 @@ export {
   getBasemapCategories as g,
   resolveBasemapProviders as r
 };
-//# sourceMappingURL=BasemapControl-CnjmO-_2.js.map
+//# sourceMappingURL=BasemapControl-C9T87uJx.js.map