maplibre-gl-basemap-control 0.8.0 → 0.10.0

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

@@ -5,6 +5,7 @@ const DEFAULT_BASEMAP_PROVIDERS = [
   { id: "amazon", name: "Amazon Location", category: "General" },
   { id: "carto", name: "Carto", category: "General" },
   { id: "cyclosm", name: "CyclOSM", category: "Cycling" },
+  { id: "eox", name: "EOX", category: "Imagery" },
   { id: "esri", name: "ESRI", category: "Imagery" },
   { id: "google", name: "Google", category: "General" },
   { id: "here", name: "HERE", category: "Traffic" },
@@ -149,6 +150,8 @@ const OPENFREEMAP_ATTRIBUTION = "OpenFreeMap © OpenMapTiles Data from OpenS
 const TOMTOM_ATTRIBUTION = "© TomTom";
 const HERE_ATTRIBUTION = "© HERE";
 const GOOGLE_ATTRIBUTION = "© Google";
+const EOX_S2CLOUDLESS_ATTRIBUTION = 'Sentinel-2 cloudless <a href="https://cloudless.eox.at" target="_blank" rel="noopener">EOxCloudless</a> by EOX IT Services GmbH (Contains modified Copernicus Sentinel data 2025)';
+const EOX_TERRAIN_LIGHT_ATTRIBUTION = 'Terrain Light <a href="https://maps.eox.at" target="_blank" rel="noopener">EOX</a> (Data &copy; OpenStreetMap contributors and others, Rendering &copy; EOX)';
 const MAPBOX_TRAFFIC_CONGESTION_COLORS = [
   "match",
   ["get", "congestion"],
@@ -517,7 +520,9 @@ const DEFAULT_BASEMAPS = [
     category: "Labels",
     description: "Carto Positron labels layer.",
     attribution: CARTO_ATTRIBUTION,
-    tiles: ["https://a.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png"],
+    tiles: [
+      "https://a.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png"
+    ],
     maxzoom: 20,
     tags: ["carto", "labels"]
   }),
@@ -582,7 +587,9 @@ const DEFAULT_BASEMAPS = [
     category: "Street",
     description: "Carto Voyager without labels.",
     attribution: CARTO_ATTRIBUTION,
-    tiles: ["https://a.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png"],
+    tiles: [
+      "https://a.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png"
+    ],
     maxzoom: 20,
     tags: ["carto", "voyager", "no labels"]
   }),
@@ -593,7 +600,9 @@ const DEFAULT_BASEMAPS = [
     category: "Labels",
     description: "Carto Voyager labels layer.",
     attribution: CARTO_ATTRIBUTION,
-    tiles: ["https://a.basemaps.cartocdn.com/rastertiles/voyager_only_labels/{z}/{x}/{y}.png"],
+    tiles: [
+      "https://a.basemaps.cartocdn.com/rastertiles/voyager_only_labels/{z}/{x}/{y}.png"
+    ],
     maxzoom: 20,
     tags: ["carto", "voyager", "labels"]
   }),
@@ -604,7 +613,9 @@ const DEFAULT_BASEMAPS = [
     category: "Street",
     description: "Carto Voyager labels-under variant.",
     attribution: CARTO_ATTRIBUTION,
-    tiles: ["https://a.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png"],
+    tiles: [
+      "https://a.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png"
+    ],
     maxzoom: 20,
     tags: ["carto", "voyager", "labels"]
   }),
@@ -726,6 +737,39 @@ const DEFAULT_BASEMAPS = [
     ],
     tags: ["esri", "terrain"]
   }),
+  rasterBasemap({
+    id: "eox-s2cloudless-2025",
+    name: "EOX Sentinel-2 cloudless 2025",
+    provider: "eox",
+    category: "Imagery",
+    description: "Cloudless Sentinel-2 satellite mosaic for 2025 (non-commercial use).",
+    attribution: EOX_S2CLOUDLESS_ATTRIBUTION,
+    tiles: [
+      "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2025_3857/default/GoogleMapsCompatible/{z}/{y}/{x}.jpg"
+    ],
+    maxzoom: 16,
+    tags: [
+      "eox",
+      "sentinel",
+      "satellite",
+      "imagery",
+      "cloudless",
+      "copernicus"
+    ]
+  }),
+  rasterBasemap({
+    id: "eox-terrain-light",
+    name: "EOX Terrain Light",
+    provider: "eox",
+    category: "Terrain",
+    description: "Light terrain basemap from EOX Maps (non-commercial use).",
+    attribution: EOX_TERRAIN_LIGHT_ATTRIBUTION,
+    tiles: [
+      "https://tiles.maps.eox.at/wmts/1.0.0/terrain-light_3857/default/GoogleMapsCompatible/{z}/{y}/{x}.jpg"
+    ],
+    maxzoom: 14,
+    tags: ["eox", "terrain", "light", "hillshade"]
+  }),
   rasterBasemap({
     id: "nasa-gibs-blue-marble",
     name: "Blue Marble",
@@ -1111,7 +1155,9 @@ const DEFAULT_BASEMAPS = [
     provider: "tomtom",
     description: "TomTom traffic speeds relative to free-flow speed. Requires a TomTom API key.",
     attribution: TOMTOM_ATTRIBUTION,
-    tiles: ["https://api.tomtom.com/traffic/map/4/tile/flow/relative0/{z}/{x}/{y}.png?key={api-key}"],
+    tiles: [
+      "https://api.tomtom.com/traffic/map/4/tile/flow/relative0/{z}/{x}/{y}.png?key={api-key}"
+    ],
     tags: ["tomtom", "flow", "relative"]
   }),
   rasterTrafficBasemap({
@@ -1120,7 +1166,9 @@ const DEFAULT_BASEMAPS = [
     provider: "tomtom",
     description: "TomTom traffic colored by absolute speed. Requires a TomTom API key.",
     attribution: TOMTOM_ATTRIBUTION,
-    tiles: ["https://api.tomtom.com/traffic/map/4/tile/flow/absolute/{z}/{x}/{y}.png?key={api-key}"],
+    tiles: [
+      "https://api.tomtom.com/traffic/map/4/tile/flow/absolute/{z}/{x}/{y}.png?key={api-key}"
+    ],
     tags: ["tomtom", "flow", "absolute"]
   }),
   rasterTrafficBasemap({
@@ -1140,7 +1188,9 @@ const DEFAULT_BASEMAPS = [
     provider: "here",
     description: "HERE real-time traffic flow overlay. Requires a HERE API key.",
     attribution: HERE_ATTRIBUTION,
-    tiles: ["https://traffic.maps.hereapi.com/v3/flow/mc/{z}/{x}/{y}/png?apiKey={api-key}"],
+    tiles: [
+      "https://traffic.maps.hereapi.com/v3/flow/mc/{z}/{x}/{y}/png?apiKey={api-key}"
+    ],
     tags: ["here", "flow"]
   }),
   {
@@ -1161,7 +1211,17 @@ const DEFAULT_BASEMAPS = [
         "line-cap": "round"
       },
       paint: {
-        "line-width": ["interpolate", ["linear"], ["zoom"], 6, 1.5, 14, 4, 18, 8],
+        "line-width": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          6,
+          1.5,
+          14,
+          4,
+          18,
+          8
+        ],
         "line-color": MAPBOX_TRAFFIC_CONGESTION_COLORS
       }
     },
@@ -1177,7 +1237,9 @@ const DEFAULT_BASEMAPS = [
     attribution: GOOGLE_ATTRIBUTION,
     source: {
       type: "raster",
-      tiles: ["https://tile.googleapis.com/v1/2dtiles/{z}/{x}/{y}?session={session}&key={api-key}"],
+      tiles: [
+        "https://tile.googleapis.com/v1/2dtiles/{z}/{x}/{y}?session={session}&key={api-key}"
+      ],
       tileSize: 256,
       maxzoom: 22,
       googleSession: {
@@ -1198,12 +1260,17 @@ function combineProviders(defaults, custom = []) {
 function resolveBasemapProviders(basemaps, customProviders = [], includeDefaultProviders = true) {
   const byId = /* @__PURE__ */ new Map();
   if (includeDefaultProviders) {
-    DEFAULT_BASEMAP_PROVIDERS.forEach((provider) => byId.set(provider.id, provider));
+    DEFAULT_BASEMAP_PROVIDERS.forEach(
+      (provider) => byId.set(provider.id, provider)
+    );
   }
   customProviders.forEach((provider) => byId.set(provider.id, provider));
   basemaps.forEach((basemap) => {
     if (basemap.provider && !byId.has(basemap.provider)) {
-      byId.set(basemap.provider, { id: basemap.provider, name: basemap.provider });
+      byId.set(basemap.provider, {
+        id: basemap.provider,
+        name: basemap.provider
+      });
     }
   });
   return sortProviders([...byId.values()]);
@@ -1232,7 +1299,11 @@ function filterBasemaps(basemaps, filter) {
   });
 }
 function getBasemapCategories(basemaps) {
-  return [...new Set(basemaps.map((basemap) => basemap.category).filter(Boolean))].sort();
+  return [
+    ...new Set(
+      basemaps.map((basemap) => basemap.category).filter(Boolean)
+    )
+  ].sort();
 }
 const DEFAULT_OPTIONS = {
   collapsed: true,
@@ -1278,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;
@@ -1289,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");
@@ -1328,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);
@@ -1406,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;
@@ -1418,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;
@@ -1598,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") {
@@ -1610,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) {
@@ -1617,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];
@@ -1633,6 +1738,7 @@ class BasemapControl {
         state: this.getState(),
         basemap,
         managedRaster,
+        resolvedStyleUrl,
         mode: effectiveMode
       });
       this._emit({ type: "statechange", state: this.getState() });
@@ -1649,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`.
@@ -2821,4 +3052,4 @@ export {
   getBasemapCategories as g,
   resolveBasemapProviders as r
 };
-//# sourceMappingURL=BasemapControl-C9T87uJx.js.map
+//# sourceMappingURL=BasemapControl-AGhhvlrX.js.map