maplibre-gl-basemap-control 0.2.2 → 0.3.0

package/dist/{BasemapControl-CMZxjxEY.cjs → BasemapControl-DrZ_VXsL.cjs}

@@ -3,20 +3,23 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 const DEFAULT_BASEMAP_PROVIDERS = [
-  { id: "openstreetmap", name: "OpenStreetMap", category: "Community" },
-  { id: "google", name: "Google", category: "General" },
+  { id: "amazon", name: "Amazon Location", category: "General" },
   { id: "carto", name: "Carto", category: "General" },
   { id: "cyclosm", name: "CyclOSM", category: "Cycling" },
   { id: "esri", name: "ESRI", category: "Imagery" },
+  { id: "google", name: "Google", category: "General" },
+  { id: "mapbox", name: "Mapbox", category: "General" },
+  { id: "maptiler", name: "MapTiler", category: "General" },
   { id: "nasa-gibs", name: "NASA GIBS", category: "Imagery" },
+  { id: "nlmaps", name: "nlmaps", category: "Regional" },
+  { id: "openfreemap", name: "OpenFreeMap", category: "Vector Styles" },
   { id: "openrailwaymap", name: "OpenRailwayMap", category: "Transport" },
+  { id: "openstreetmap", name: "OpenStreetMap", category: "Community" },
   { id: "opentopomap", name: "OpenTopoMap", category: "Terrain" },
-  { id: "openfreemap", name: "OpenFreeMap", category: "Vector Styles" },
   { id: "swisstopo", name: "Swiss Federal Geoportal", category: "Regional" },
   { id: "topplusopen", name: "TopPlusOpen", category: "Regional" },
   { id: "usgs", name: "USGS", category: "United States" },
-  { id: "waymarkedtrails", name: "Waymarked Trails", category: "Outdoor" },
-  { id: "nlmaps", name: "nlmaps", category: "Regional" }
+  { id: "waymarkedtrails", name: "Waymarked Trails", category: "Outdoor" }
 ];
 function rasterBasemap({
   id,
@@ -46,8 +49,99 @@ function rasterBasemap({
     tags
   };
 }
+function styleBasemap({
+  id,
+  name,
+  provider,
+  category,
+  description,
+  attribution,
+  url,
+  view,
+  tags = []
+}) {
+  return {
+    id,
+    name,
+    provider,
+    type: "style",
+    category,
+    description,
+    attribution,
+    source: {
+      type: "style",
+      url
+    },
+    view,
+    tags
+  };
+}
+function mapTilerStyleBasemap({
+  id,
+  name,
+  mapId,
+  category,
+  description,
+  url,
+  tags = []
+}) {
+  return styleBasemap({
+    id,
+    name,
+    provider: "maptiler",
+    category,
+    description,
+    attribution: MAPTILER_ATTRIBUTION,
+    url: url ?? `https://api.maptiler.com/maps/${mapId}/style.json?key={api-key}`,
+    tags: ["maptiler", "vector", "style", ...tags]
+  });
+}
+function amazonStyleBasemap({
+  id,
+  name,
+  mapStyle,
+  category,
+  description,
+  tags = []
+}) {
+  return styleBasemap({
+    id,
+    name,
+    provider: "amazon",
+    category,
+    description,
+    attribution: AMAZON_ATTRIBUTION,
+    url: `https://maps.geo.{aws-region}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key={api-key}`,
+    tags: ["amazon", "aws", "location", "style", ...tags]
+  });
+}
+function mapboxStyleBasemap({
+  id,
+  name,
+  styleId,
+  category,
+  description,
+  tags = []
+}) {
+  return styleBasemap({
+    id,
+    name,
+    provider: "mapbox",
+    category,
+    description,
+    attribution: MAPBOX_ATTRIBUTION,
+    url: `https://api.mapbox.com/styles/v1/mapbox/${styleId}?access_token={api-key}`,
+    tags: ["mapbox", "vector", "style", ...tags]
+  });
+}
+function sortProviders(providers) {
+  return [...providers].sort((a, b) => a.name.localeCompare(b.name));
+}
+const AMAZON_ATTRIBUTION = "© Amazon Location Service";
 const CARTO_ATTRIBUTION = "© OpenStreetMap contributors © CARTO";
 const ESRI_ATTRIBUTION = "Tiles © Esri and the GIS User Community";
+const MAPBOX_ATTRIBUTION = "© Mapbox © OpenStreetMap contributors";
+const MAPTILER_ATTRIBUTION = "© MapTiler © OpenStreetMap contributors";
 const OSM_ATTRIBUTION = "© OpenStreetMap contributors";
 const OPENFREEMAP_ATTRIBUTION = "OpenFreeMap © OpenMapTiles Data from OpenStreetMap";
 const DEFAULT_BASEMAPS = [
@@ -139,6 +233,216 @@ const DEFAULT_BASEMAPS = [
     maxzoom: 20,
     tags: ["google", "hybrid", "imagery"]
   }),
+  amazonStyleBasemap({
+    id: "amazon-standard",
+    name: "Amazon Standard",
+    mapStyle: "Standard",
+    category: "Street",
+    description: "Amazon Location general-purpose vector map style.",
+    tags: ["standard", "street"]
+  }),
+  amazonStyleBasemap({
+    id: "amazon-monochrome",
+    name: "Amazon Monochrome",
+    mapStyle: "Monochrome",
+    category: "Light",
+    description: "Amazon Location grey scale map style for overlays.",
+    tags: ["monochrome", "light", "dataviz"]
+  }),
+  amazonStyleBasemap({
+    id: "amazon-hybrid",
+    name: "Amazon Hybrid",
+    mapStyle: "Hybrid",
+    category: "Imagery",
+    description: "Amazon Location satellite imagery with road and label overlay.",
+    tags: ["hybrid", "satellite", "imagery", "labels"]
+  }),
+  amazonStyleBasemap({
+    id: "amazon-satellite",
+    name: "Amazon Satellite",
+    mapStyle: "Satellite",
+    category: "Imagery",
+    description: "Amazon Location satellite imagery map style.",
+    tags: ["satellite", "imagery"]
+  }),
+  mapboxStyleBasemap({
+    id: "mapbox-streets",
+    name: "Mapbox Streets",
+    styleId: "streets-v12",
+    category: "Street",
+    description: "Mapbox general-purpose street map style.",
+    tags: ["streets", "street"]
+  }),
+  mapboxStyleBasemap({
+    id: "mapbox-outdoors",
+    name: "Mapbox Outdoors",
+    styleId: "outdoors-v12",
+    category: "Outdoor",
+    description: "Mapbox outdoor recreation and terrain style.",
+    tags: ["outdoors", "terrain", "recreation"]
+  }),
+  mapboxStyleBasemap({
+    id: "mapbox-light",
+    name: "Mapbox Light",
+    styleId: "light-v11",
+    category: "Light",
+    description: "Light Mapbox style for data overlays.",
+    tags: ["light", "dataviz"]
+  }),
+  mapboxStyleBasemap({
+    id: "mapbox-dark",
+    name: "Mapbox Dark",
+    styleId: "dark-v11",
+    category: "Dark",
+    description: "Dark Mapbox style for high-contrast overlays.",
+    tags: ["dark"]
+  }),
+  mapboxStyleBasemap({
+    id: "mapbox-satellite",
+    name: "Mapbox Satellite",
+    styleId: "satellite-v9",
+    category: "Imagery",
+    description: "Mapbox satellite imagery style.",
+    tags: ["satellite", "imagery"]
+  }),
+  mapboxStyleBasemap({
+    id: "mapbox-satellite-streets",
+    name: "Mapbox Satellite Streets",
+    styleId: "satellite-streets-v12",
+    category: "Imagery",
+    description: "Mapbox satellite imagery with streets and labels.",
+    tags: ["satellite", "streets", "imagery", "labels"]
+  }),
+  mapboxStyleBasemap({
+    id: "mapbox-navigation-day",
+    name: "Mapbox Navigation Day",
+    styleId: "navigation-day-v1",
+    category: "Navigation",
+    description: "Mapbox daytime navigation style.",
+    tags: ["navigation", "day"]
+  }),
+  mapboxStyleBasemap({
+    id: "mapbox-navigation-night",
+    name: "Mapbox Navigation Night",
+    styleId: "navigation-night-v1",
+    category: "Navigation",
+    description: "Mapbox nighttime navigation style.",
+    tags: ["navigation", "night", "dark"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-aquarelle",
+    name: "MapTiler Aquarelle",
+    mapId: "aquarelle-v4",
+    category: "Artistic",
+    description: "Watercolor-style vector basemap.",
+    tags: ["aquarelle", "watercolor", "artistic"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-backdrop",
+    name: "MapTiler Backdrop",
+    mapId: "backdrop-v4",
+    category: "Light",
+    description: "Subtle monochrome context map.",
+    tags: ["backdrop", "monochrome", "context"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-base",
+    name: "MapTiler Base",
+    mapId: "base-v4",
+    category: "Street",
+    description: "General-purpose vector basemap.",
+    tags: ["base", "street"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-dataviz",
+    name: "MapTiler Dataviz",
+    mapId: "dataviz-v4",
+    category: "Light",
+    description: "Minimal basemap for data visualization and overlays.",
+    tags: ["dataviz", "data", "light"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-landscape",
+    name: "MapTiler Landscape",
+    mapId: "landscape-v4",
+    category: "Terrain",
+    description: "Light terrain and hillshade map.",
+    tags: ["landscape", "terrain", "hillshade"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-ocean",
+    name: "MapTiler Ocean",
+    mapId: "ocean-v4",
+    category: "Marine",
+    description: "Ocean bathymetry and marine-focused basemap.",
+    tags: ["ocean", "marine", "bathymetry"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-openstreetmap",
+    name: "MapTiler OpenStreetMap",
+    mapId: "openstreetmap",
+    category: "Street",
+    description: "OpenStreetMap style hosted by MapTiler.",
+    url: "https://api.maptiler.com/maps/openstreetmap/style.json?key",
+    tags: ["openstreetmap", "osm", "street"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-outdoor",
+    name: "MapTiler Outdoor",
+    mapId: "outdoor-v4",
+    category: "Outdoor",
+    description: "Outdoor recreation basemap with terrain detail.",
+    tags: ["outdoor", "terrain", "recreation"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-satellite-hybrid",
+    name: "MapTiler Satellite Hybrid",
+    mapId: "hybrid-v4",
+    category: "Imagery",
+    description: "Satellite imagery with labels, roads, and borders.",
+    tags: ["satellite", "hybrid", "imagery", "labels"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-satellite-plain",
+    name: "MapTiler Satellite Plain",
+    mapId: "satellite-v4",
+    category: "Imagery",
+    description: "Satellite imagery without the hybrid reference overlay.",
+    tags: ["satellite", "imagery"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-streets",
+    name: "MapTiler Streets",
+    mapId: "streets-v4",
+    category: "Street",
+    description: "Detailed street map for general navigation.",
+    tags: ["streets", "street", "navigation"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-toner",
+    name: "MapTiler Toner",
+    mapId: "toner-v2",
+    category: "Dark",
+    description: "High-contrast monochrome basemap.",
+    url: "https://api.maptiler.com/maps/toner-v2/style.json?key=",
+    tags: ["toner", "monochrome", "contrast"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-topo",
+    name: "MapTiler Topo",
+    mapId: "topo-v4",
+    category: "Terrain",
+    description: "Topographic basemap with contours and terrain context.",
+    tags: ["topo", "topographic", "terrain"]
+  }),
+  mapTilerStyleBasemap({
+    id: "maptiler-winter",
+    name: "MapTiler Winter",
+    mapId: "winter-v4",
+    category: "Outdoor",
+    description: "Winter sports and mountain activity basemap.",
+    tags: ["winter", "skiing", "outdoor"]
+  }),
   rasterBasemap({
     id: "carto-positron",
     name: "Carto Positron",
@@ -751,7 +1055,7 @@ function combineProviders(defaults, custom = []) {
   const byId = /* @__PURE__ */ new Map();
   defaults.forEach((provider) => byId.set(provider.id, provider));
   custom.forEach((provider) => byId.set(provider.id, provider));
-  return [...byId.values()];
+  return sortProviders([...byId.values()]);
 }
 function resolveBasemapProviders(basemaps, customProviders = [], includeDefaultProviders = true) {
   const byId = /* @__PURE__ */ new Map();
@@ -764,7 +1068,7 @@ function resolveBasemapProviders(basemaps, customProviders = [], includeDefaultP
       byId.set(basemap.provider, { id: basemap.provider, name: basemap.provider });
     }
   });
-  return [...byId.values()];
+  return sortProviders([...byId.values()]);
 }
 function createBasemapCatalog(customBasemaps = [], includeDefaultBasemaps = true) {
   const basemaps = includeDefaultBasemaps ? [...DEFAULT_BASEMAPS, ...customBasemaps] : [...customBasemaps];
@@ -802,6 +1106,11 @@ const DEFAULT_OPTIONS = {
 };
 const CONTROL_SOURCE_PREFIX = "maplibre-basemap-control-source";
 const CONTROL_LAYER_PREFIX = "";
+const API_KEY_PLACEHOLDER = "{api-key}";
+const MAPTILER_API_KEY_EXAMPLE = "YOUR_MAPTILER_API_KEY";
+const MAPTILER_API_KEY_QUERY = "?key";
+const MAPTILER_API_KEY_EMPTY_QUERY = "?key=";
+const AWS_REGION_PLACEHOLDER = "{aws-region}";
 class BasemapControl {
   constructor(options) {
     __publicField(this, "_map");
@@ -816,10 +1125,18 @@ class BasemapControl {
     __publicField(this, "_eventHandlers", new globalThis.Map());
     __publicField(this, "_managedSourceIds", []);
     __publicField(this, "_managedLayerIds", []);
+    __publicField(this, "_mapTilerApiKey", "");
+    __publicField(this, "_amazonApiKey", "");
+    __publicField(this, "_awsRegion", "");
+    __publicField(this, "_mapboxAccessToken", "");
+    __publicField(this, "_providerSettingsCollapsed", true);
     __publicField(this, "_resizeHandler", null);
     __publicField(this, "_mapResizeHandler", null);
-    __publicField(this, "_clickOutsideHandler", null);
     this._options = { ...DEFAULT_OPTIONS, ...options };
+    this._mapTilerApiKey = (options == null ? void 0 : options.mapTilerApiKey) ?? "";
+    this._amazonApiKey = (options == null ? void 0 : options.amazonApiKey) ?? "";
+    this._awsRegion = (options == null ? void 0 : options.awsRegion) ?? "us-east-1";
+    this._mapboxAccessToken = (options == null ? void 0 : options.mapboxAccessToken) ?? "";
     this._basemaps = createBasemapCatalog(
       options == null ? void 0 : options.basemaps,
       this._options.includeDefaultBasemaps
@@ -867,10 +1184,6 @@ class BasemapControl {
       this._map.off("resize", this._mapResizeHandler);
       this._mapResizeHandler = null;
     }
-    if (this._clickOutsideHandler) {
-      document.removeEventListener("click", this._clickOutsideHandler);
-      this._clickOutsideHandler = 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);
     this._map = void 0;
@@ -904,6 +1217,25 @@ class BasemapControl {
     this._renderContent();
     this._emit({ type: "statechange", state: this.getState() });
   }
+  setMapTilerApiKey(apiKey) {
+    this._mapTilerApiKey = apiKey;
+    this._state = { ...this._state, error: void 0 };
+    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._renderContent();
+    this._emit({ type: "statechange", state: this.getState() });
+  }
+  setMapboxAccessToken(accessToken) {
+    this._mapboxAccessToken = accessToken;
+    this._state = { ...this._state, error: void 0 };
+    this._renderContent();
+    this._emit({ type: "statechange", state: this.getState() });
+  }
   getActiveBasemap() {
     return this._basemaps.find((basemap) => basemap.id === this._state.activeBasemapId);
   }
@@ -920,7 +1252,7 @@ class BasemapControl {
       throw error;
     }
     this._state = { ...this._state, loading: true, error: void 0 };
-    this._renderContent();
+    this._renderContent(true);
     this._emit({ type: "statechange", state: this.getState() });
     try {
       let managedRaster;
@@ -929,8 +1261,14 @@ class BasemapControl {
         this._removeManagedBasemap();
         managedRaster = this._addRasterBasemap(basemap);
       } else {
+        const styleUrl = this._resolveStyleUrl(basemap);
+        const styleOptions = this._getStyleOptions(basemap);
         this._removeManagedBasemap();
-        this._map.setStyle(basemap.source.url);
+        if (styleOptions) {
+          this._map.setStyle(styleUrl, styleOptions);
+        } else {
+          this._map.setStyle(styleUrl);
+        }
       }
       this._applyBasemapView(basemap);
       this._state = {
@@ -939,7 +1277,7 @@ class BasemapControl {
         loading: false,
         error: void 0
       };
-      this._renderContent();
+      this._renderContent(true);
       this._emit({
         type: "basemapchange",
         state: this.getState(),
@@ -950,7 +1288,7 @@ class BasemapControl {
     } catch (cause) {
       const error = cause instanceof Error ? cause : new Error(String(cause));
       this._state = { ...this._state, loading: false, error: error.message };
-      this._renderContent();
+      this._renderContent(true);
       this._handleError(error, basemap);
       throw error;
     }
@@ -1050,16 +1388,23 @@ class BasemapControl {
     panel.appendChild(this._content);
     return panel;
   }
-  _renderContent() {
+  _renderContent(preserveResultsScroll = false) {
+    var _a;
     if (!this._content) 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._hasProviderSettings() ? [this._createProviderSettingsSection()] : [],
       this._createFilterRow(this._providers, categories),
       this._createStatus(results.length),
       this._createResults(results)
     );
+    if (previousResultsScrollTop !== void 0) {
+      const resultsElement = this._content.querySelector(".basemap-control-results");
+      if (resultsElement) resultsElement.scrollTop = previousResultsScrollTop;
+    }
   }
   _renderFilteredResults() {
     var _a, _b;
@@ -1119,6 +1464,106 @@ 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;
+          }
+        })
+      );
+    }
+    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;
+          }
+        })
+      );
+    }
+    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;
+          }
+        })
+      );
+      fields.appendChild(
+        this._createProviderSettingsInput({
+          className: "basemap-control-aws-region",
+          type: "text",
+          placeholder: "AWS region",
+          ariaLabel: "AWS region",
+          value: this._awsRegion,
+          onInput: (value) => {
+            this._awsRegion = value;
+          }
+        })
+      );
+    }
+    details.appendChild(fields);
+    return details;
+  }
+  _createProviderSettingsInput({
+    className,
+    type,
+    placeholder,
+    ariaLabel,
+    value,
+    onInput
+  }) {
+    const wrapper = document.createElement("div");
+    wrapper.className = className;
+    const input = document.createElement("input");
+    input.className = "basemap-control-input";
+    input.type = type;
+    input.placeholder = placeholder;
+    input.value = value;
+    input.name = ariaLabel.toLowerCase().replace(/\s+/g, "-");
+    input.autocomplete = "new-password";
+    input.autocapitalize = "none";
+    input.spellcheck = false;
+    input.setAttribute("autocorrect", "off");
+    input.setAttribute("aria-label", ariaLabel);
+    input.addEventListener("input", () => {
+      onInput(input.value);
+      this._state = { ...this._state, error: void 0 };
+      this._renderFilteredResults();
+      this._emit({ type: "statechange", state: this.getState() });
+    });
+    wrapper.appendChild(input);
+    return wrapper;
+  }
   _createFilterRow(providers, categories) {
     const row = document.createElement("div");
     row.className = "basemap-control-filters";
@@ -1236,6 +1681,132 @@ class BasemapControl {
     template.innerHTML = value;
     return template.content.textContent ?? value;
   }
+  _hasMapTilerBasemaps() {
+    return this._basemaps.some((basemap) => basemap.provider === "maptiler");
+  }
+  _hasAmazonBasemaps() {
+    return this._basemaps.some((basemap) => basemap.provider === "amazon");
+  }
+  _hasMapboxBasemaps() {
+    return this._basemaps.some((basemap) => basemap.provider === "mapbox");
+  }
+  _hasProviderSettings() {
+    return this._hasMapTilerBasemaps() || this._hasAmazonBasemaps() || this._hasMapboxBasemaps();
+  }
+  _resolveStyleUrl(basemap) {
+    if (basemap.source.type === "raster") {
+      throw new Error(`Basemap "${basemap.id}" is not a style basemap.`);
+    }
+    const url = basemap.source.url;
+    if (basemap.provider === "amazon") {
+      return this._resolveAmazonStyleUrl(url);
+    }
+    if (basemap.provider === "maptiler") {
+      return this._resolveMapTilerStyleUrl(url);
+    }
+    if (basemap.provider === "mapbox") {
+      return this._resolveMapboxStyleUrl(url);
+    }
+    return url;
+  }
+  _getStyleOptions(basemap) {
+    if (basemap.provider === "mapbox") {
+      return {
+        validate: false,
+        transformStyle: (_previousStyle, nextStyle) => this._transformMapboxStyle(nextStyle, this._mapboxAccessToken.trim())
+      };
+    }
+    return void 0;
+  }
+  _transformMapboxStyle(style, accessToken) {
+    const encodedAccessToken = encodeURIComponent(accessToken);
+    const sources = Object.fromEntries(
+      Object.entries(style.sources).map(([id, source]) => {
+        if ("url" in source && typeof source.url === "string") {
+          return [id, { ...source, url: this._resolveMapboxInternalUrl(source.url, encodedAccessToken) }];
+        }
+        return [id, source];
+      })
+    );
+    return {
+      ...style,
+      glyphs: typeof style.glyphs === "string" ? this._resolveMapboxInternalUrl(style.glyphs, encodedAccessToken) : style.glyphs,
+      sprite: this._resolveMapboxSprite(style.sprite, encodedAccessToken),
+      projection: { type: "mercator" },
+      sources
+    };
+  }
+  _resolveMapboxSprite(sprite, encodedAccessToken) {
+    if (typeof sprite === "string") {
+      return this._resolveMapboxInternalUrl(sprite, encodedAccessToken);
+    }
+    if (Array.isArray(sprite)) {
+      return sprite.map((item) => ({
+        ...item,
+        url: this._resolveMapboxInternalUrl(item.url, encodedAccessToken)
+      }));
+    }
+    return sprite;
+  }
+  _resolveMapboxInternalUrl(url, encodedAccessToken) {
+    if (url.startsWith("mapbox://sprites/")) {
+      const [, owner, styleId] = /^mapbox:\/\/sprites\/([^/]+)\/(.+)$/.exec(url) ?? [];
+      if (owner && styleId) {
+        return `https://api.mapbox.com/styles/v1/${owner}/${styleId}/sprite?access_token=${encodedAccessToken}`;
+      }
+    }
+    if (url.startsWith("mapbox://fonts/")) {
+      const [, owner, fontPath] = /^mapbox:\/\/fonts\/([^/]+)\/(.+)$/.exec(url) ?? [];
+      if (owner && fontPath) {
+        return `https://api.mapbox.com/fonts/v1/${owner}/${fontPath}?access_token=${encodedAccessToken}`;
+      }
+    }
+    if (url.startsWith("mapbox://")) {
+      const tileset = url.replace(/^mapbox:\/\//, "");
+      return `https://api.mapbox.com/v4/${tileset}.json?secure&access_token=${encodedAccessToken}`;
+    }
+    return url;
+  }
+  _resolveMapTilerStyleUrl(url) {
+    const needsMapTilerKey = url.includes(API_KEY_PLACEHOLDER) || url.includes(MAPTILER_API_KEY_EXAMPLE) || url.endsWith(MAPTILER_API_KEY_QUERY) || url.endsWith(MAPTILER_API_KEY_EMPTY_QUERY);
+    if (!needsMapTilerKey) return url;
+    const apiKey = this._mapTilerApiKey.trim();
+    if (!apiKey) {
+      throw new Error("Enter a MapTiler API key before applying this basemap.");
+    }
+    const encodedApiKey = encodeURIComponent(apiKey);
+    if (url.endsWith(MAPTILER_API_KEY_QUERY)) {
+      return `${url}=${encodedApiKey}`;
+    }
+    if (url.endsWith(MAPTILER_API_KEY_EMPTY_QUERY)) {
+      return `${url}${encodedApiKey}`;
+    }
+    return url.split(API_KEY_PLACEHOLDER).join(encodedApiKey).split(MAPTILER_API_KEY_EXAMPLE).join(encodedApiKey);
+  }
+  _resolveAmazonStyleUrl(url) {
+    const apiKey = this._amazonApiKey.trim();
+    const awsRegion = this._awsRegion.trim();
+    if (url.includes(API_KEY_PLACEHOLDER) && !apiKey) {
+      throw new Error("Enter an Amazon API key before applying this basemap.");
+    }
+    if (url.includes(AWS_REGION_PLACEHOLDER) && !awsRegion) {
+      throw new Error("Enter an AWS region before applying this basemap.");
+    }
+    return url.split(AWS_REGION_PLACEHOLDER).join(awsRegion).split(API_KEY_PLACEHOLDER).join(encodeURIComponent(apiKey));
+  }
+  _resolveMapboxStyleUrl(url) {
+    const accessToken = this._mapboxAccessToken.trim();
+    if (url.includes(API_KEY_PLACEHOLDER) && !accessToken) {
+      throw new Error("Enter a Mapbox access token before applying this basemap.");
+    }
+    if (this._isUrlLikeCredential(accessToken)) {
+      throw new Error("Enter a valid Mapbox access token, not a URL.");
+    }
+    return url.split(API_KEY_PLACEHOLDER).join(encodeURIComponent(accessToken));
+  }
+  _isUrlLikeCredential(value) {
+    return /^https?:\/\//i.test(value);
+  }
   _addRasterBasemap(basemap) {
     if (!this._map || basemap.source.type !== "raster") return void 0;
     const sourceId = `${CONTROL_SOURCE_PREFIX}-${basemap.id}`;
@@ -1315,13 +1886,6 @@ class BasemapControl {
   }
   _setupEventListeners() {
     var _a;
-    this._clickOutsideHandler = (e) => {
-      const target = e.target;
-      if (this._container && this._panel && !this._container.contains(target) && !this._panel.contains(target)) {
-        this.collapse();
-      }
-    };
-    document.addEventListener("click", this._clickOutsideHandler);
     this._resizeHandler = () => {
       if (!this._state.collapsed) this._updatePanelPosition();
     };
@@ -1385,4 +1949,4 @@ exports.createBasemapCatalog = createBasemapCatalog;
 exports.filterBasemaps = filterBasemaps;
 exports.getBasemapCategories = getBasemapCategories;
 exports.resolveBasemapProviders = resolveBasemapProviders;
-//# sourceMappingURL=BasemapControl-CMZxjxEY.cjs.map
+//# sourceMappingURL=BasemapControl-DrZ_VXsL.cjs.map