maplibre-gl-basemap-control 0.9.0 → 0.10.0

package/dist/{BasemapControl-DjBg1WYY.js → BasemapControl-AGhhvlrX.js}

@@ -1349,6 +1349,7 @@ const PROVIDER_CREDENTIAL_HELP = {
     label: "Get a Google Maps API key"
   }
 };
+const STYLE_AUTH_GRACE_MS = 2500;
 const MIN_PANEL_WIDTH = 240;
 const MIN_PANEL_HEIGHT = 200;
 const PANEL_VIEWPORT_MARGIN = 12;
@@ -1360,6 +1361,30 @@ class MissingCredentialError extends Error {
     this.provider = provider;
   }
 }
+class BasemapLoadError extends Error {
+  constructor(message, provider, status) {
+    super(message);
+    __publicField(this, "provider");
+    __publicField(this, "status");
+    this.name = "BasemapLoadError";
+    this.provider = provider;
+    this.status = status;
+  }
+}
+function extractErrorUrl(error) {
+  if (error && typeof error === "object" && "url" in error) {
+    const url = error.url;
+    if (typeof url === "string") return url;
+  }
+  return void 0;
+}
+function extractErrorStatus(error) {
+  if (error && typeof error === "object" && "status" in error) {
+    const status = error.status;
+    if (typeof status === "number" && status > 0) return status;
+  }
+  return void 0;
+}
 class BasemapControl {
   constructor(options) {
     __publicField(this, "_map");
@@ -1399,6 +1424,10 @@ class BasemapControl {
     // 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");
+    // Detaches the listeners watching the in-flight style load (see
+    // _watchStyleLoad). Set while a style swap is settling, cleared once it
+    // succeeds, fails, or is superseded by a newer swap.
+    __publicField(this, "_cancelStyleWatch");
     __publicField(this, "_resizeHandler", null);
     __publicField(this, "_mapResizeHandler", null);
     __publicField(this, "_resizeAnchor", null);
@@ -1477,7 +1506,7 @@ class BasemapControl {
     return this._container;
   }
   onRemove() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (this._resizeHandler) {
       window.removeEventListener("resize", this._resizeHandler);
       this._resizeHandler = null;
@@ -1489,10 +1518,11 @@ class BasemapControl {
     window.removeEventListener("pointermove", this._onResizeMove);
     window.removeEventListener("pointerup", this._onResizeEnd);
     window.removeEventListener("pointercancel", this._onResizeEnd);
+    (_a = this._cancelStyleWatch) == null ? void 0 : _a.call(this);
     this._resizeAnchor = null;
     this._resizeHandleEl = null;
-    (_b = (_a = this._panel) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(this._panel);
-    (_d = (_c = this._container) == null ? void 0 : _c.parentNode) == null ? void 0 : _d.removeChild(this._container);
+    (_c = (_b = this._panel) == null ? void 0 : _b.parentNode) == null ? void 0 : _c.removeChild(this._panel);
+    (_e = (_d = this._container) == null ? void 0 : _d.parentNode) == null ? void 0 : _e.removeChild(this._container);
     this._map = void 0;
     this._mapContainer = void 0;
     this._container = void 0;
@@ -1669,8 +1699,10 @@ class BasemapControl {
     this._state = { ...this._state, loading: true, error: void 0 };
     this._renderContent(true);
     this._emit({ type: "statechange", state: this.getState() });
+    const previousActiveBasemapId = this._state.activeBasemapId;
     try {
       let managedRaster;
+      let resolvedStyleUrl;
       if (isOverlay) {
         await this._waitForStyleReady();
         if (effectiveMode === "replace") {
@@ -1681,6 +1713,7 @@ class BasemapControl {
         managedRaster = await this._addOverlay(basemap);
       } else {
         const styleUrl = this._resolveStyleUrl(basemap);
+        resolvedStyleUrl = styleUrl;
         const styleOptions = this._getStyleOptions(basemap);
         this._removeManagedBasemap();
         if (styleOptions) {
@@ -1688,6 +1721,7 @@ class BasemapControl {
         } else {
           this._map.setStyle(styleUrl);
         }
+        this._watchStyleLoad(styleUrl, basemap, previousActiveBasemapId);
       }
       this._applyBasemapView(basemap);
       const activeBasemapIds = effectiveMode === "add" ? [...this._state.activeBasemapIds.filter((value) => value !== basemap.id), basemap.id] : [basemap.id];
@@ -1704,6 +1738,7 @@ class BasemapControl {
         state: this.getState(),
         basemap,
         managedRaster,
+        resolvedStyleUrl,
         mode: effectiveMode
       });
       this._emit({ type: "statechange", state: this.getState() });
@@ -1720,6 +1755,131 @@ class BasemapControl {
       throw error;
     }
   }
+  // Watches the asynchronous style load that `setStyle` kicked off for a style
+  // basemap, and rolls back to the previous basemap (reporting the failure
+  // through the `error` event) when the new style cannot actually render. Two
+  // failure modes are caught so a broken provider basemap never leaves a blank
+  // map:
+  //
+  //   1. The style *document* request fails outright (matched by URL), e.g. an
+  //      unreachable host or a descriptor that 404s. Detected whether or not
+  //      `style.load` ever fires.
+  //   2. The descriptor loads but the provider rejects the credentials when the
+  //      first tiles are fetched (401/403). Amazon Location, for instance,
+  //      serves the style JSON publicly but 403s every tile for a bad API key,
+  //      so the descriptor "loads" while the map stays empty. This is only
+  //      treated as fatal for credentialed providers, and only briefly after
+  //      the descriptor loads, so an isolated transient tile error on a healthy
+  //      basemap is ignored.
+  _watchStyleLoad(styleUrl, basemap, previousActiveBasemapId) {
+    var _a;
+    const map = this._map;
+    if (!map) return;
+    (_a = this._cancelStyleWatch) == null ? void 0 : _a.call(this);
+    const isCredentialed = basemap.provider in PROVIDER_CREDENTIAL_HELP;
+    let settled = false;
+    let graceTimer;
+    const cleanup = () => {
+      if (settled) return;
+      settled = true;
+      if (graceTimer !== void 0) clearTimeout(graceTimer);
+      map.off("style.load", onLoad);
+      map.off("error", onError);
+      if (this._cancelStyleWatch === cleanup) this._cancelStyleWatch = void 0;
+    };
+    const fail = (cause) => {
+      cleanup();
+      this._handleStyleLoadFailure(basemap, previousActiveBasemapId, cause);
+    };
+    const onLoad = () => {
+      if (!isCredentialed) {
+        cleanup();
+      } else if (graceTimer === void 0) {
+        graceTimer = setTimeout(cleanup, STYLE_AUTH_GRACE_MS);
+      }
+    };
+    const onError = (event) => {
+      const error = event == null ? void 0 : event.error;
+      if (extractErrorUrl(error) === styleUrl) {
+        fail(error);
+        return;
+      }
+      if (isCredentialed) {
+        const status = extractErrorStatus(error);
+        if (status === 401 || status === 403) fail(error);
+      }
+    };
+    this._cancelStyleWatch = cleanup;
+    map.once("style.load", onLoad);
+    map.on("error", onError);
+  }
+  // Rolls back a failed style swap: restores the previously active basemap (when
+  // it is a style basemap the control owns), then reports the failure inline and
+  // through the `error` event. When the failing provider needs an API key, the
+  // inline credential field is revealed so the user can correct the key and
+  // retry without losing their map.
+  _handleStyleLoadFailure(failedBasemap, previousActiveBasemapId, cause) {
+    this._restorePreviousBasemap(previousActiveBasemapId, failedBasemap.id);
+    const status = extractErrorStatus(cause);
+    const credentialProvider = failedBasemap.provider in PROVIDER_CREDENTIAL_HELP ? failedBasemap.provider : void 0;
+    const hint = credentialProvider ? " Check the API key and try again." : " Check your connection and try again.";
+    const error = new BasemapLoadError(
+      `Could not load the "${failedBasemap.name}" basemap${status ? ` (HTTP ${status})` : ""}.${hint}`,
+      failedBasemap.provider,
+      status
+    );
+    this._state = { ...this._state, loading: false, error: error.message };
+    this._missingCredentialProvider = credentialProvider;
+    this._lastFailedBasemapId = credentialProvider ? failedBasemap.id : void 0;
+    this._activeView = "basemaps";
+    this._renderContent(true);
+    this._handleError(error, failedBasemap);
+  }
+  // Reapplies the previously active style basemap after a failed swap. Only a
+  // control-owned style/vector-style basemap can be reapplied; when the previous
+  // basemap is unknown, a raster overlay, or a style the host owns, the panel
+  // state is pointed back at it (so the failed basemap is not highlighted) and
+  // the host is left to restore its own style from the emitted `error` event.
+  _restorePreviousBasemap(previousActiveBasemapId, failedBasemapId) {
+    const map = this._map;
+    const previous = previousActiveBasemapId && previousActiveBasemapId !== failedBasemapId ? this._basemaps.find((candidate) => candidate.id === previousActiveBasemapId) : void 0;
+    const pointStateAtPrevious = () => {
+      this._state = {
+        ...this._state,
+        activeBasemapId: previousActiveBasemapId,
+        activeBasemapIds: previousActiveBasemapId ? [previousActiveBasemapId] : []
+      };
+    };
+    if (!map || !previous || previous.source.type !== "style" && previous.source.type !== "vector-style") {
+      pointStateAtPrevious();
+      return;
+    }
+    try {
+      const styleUrl = this._resolveStyleUrl(previous);
+      const styleOptions = this._getStyleOptions(previous);
+      this._removeManagedBasemap();
+      if (styleOptions) {
+        map.setStyle(styleUrl, styleOptions);
+      } else {
+        map.setStyle(styleUrl);
+      }
+      this._state = {
+        ...this._state,
+        activeBasemapId: previous.id,
+        activeBasemapIds: [previous.id]
+      };
+      this._emit({
+        type: "basemapchange",
+        state: this.getState(),
+        basemap: previous,
+        resolvedStyleUrl: styleUrl,
+        restored: true,
+        mode: "replace"
+      });
+    } catch {
+      pointStateAtPrevious();
+    }
+  }
   // The public mutators rethrow after emitting the error event so callers that
   // await them can react. The panel's click handler uses this instead to avoid
   // unhandled promise rejections; the failure is still reported via `error`.
@@ -2892,4 +3052,4 @@ export {
   getBasemapCategories as g,
   resolveBasemapProviders as r
 };
-//# sourceMappingURL=BasemapControl-DjBg1WYY.js.map
+//# sourceMappingURL=BasemapControl-AGhhvlrX.js.map