maplibre-gl-basemap-control 0.2.2 → 0.4.0

package/dist/{BasemapControl-BBPUTp-_.js → BasemapControl-DCusTnvr.js}

@@ -2,20 +2,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,
@@ -45,8 +48,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 = [
@@ -138,6 +232,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",
@@ -750,7 +1054,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();
@@ -763,7 +1067,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];
@@ -797,10 +1101,21 @@ const DEFAULT_OPTIONS = {
   title: "Basemaps",
   panelWidth: 340,
   className: "",
-  includeDefaultBasemaps: true
+  includeDefaultBasemaps: true,
+  allowMultiple: false,
+  showMultipleToggle: true,
+  resizable: true
 };
 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}";
+const MIN_PANEL_WIDTH = 240;
+const MIN_PANEL_HEIGHT = 200;
+const PANEL_VIEWPORT_MARGIN = 12;
 class BasemapControl {
   constructor(options) {
     __publicField(this, "_map");
@@ -813,12 +1128,49 @@ class BasemapControl {
     __publicField(this, "_basemaps");
     __publicField(this, "_providers");
     __publicField(this, "_eventHandlers", new globalThis.Map());
-    __publicField(this, "_managedSourceIds", []);
-    __publicField(this, "_managedLayerIds", []);
+    // Active managed raster basemaps keyed by basemap id, in insertion order. In
+    // single mode this holds at most one entry; in multiple mode it tracks every
+    // stacked raster overlay so each can be added or removed independently.
+    __publicField(this, "_managedRasters", new globalThis.Map());
+    __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);
+    __publicField(this, "_resizeAnchor", null);
+    __publicField(this, "_resizeHandleEl", null);
+    __publicField(this, "_onResizeMove", (event) => {
+      if (!this._panel || !this._resizeAnchor) return;
+      const { x, y, isLeft, isTop } = this._resizeAnchor;
+      const bounds = this._getResizeBounds();
+      const rawWidth = isLeft ? event.clientX - x : x - event.clientX;
+      const rawHeight = isTop ? event.clientY - y : y - event.clientY;
+      const width = this._clampSize(rawWidth, MIN_PANEL_WIDTH, bounds.maxWidth);
+      const height = this._clampSize(rawHeight, MIN_PANEL_HEIGHT, bounds.maxHeight);
+      this._panel.style.width = `${width}px`;
+      this._panel.style.height = `${height}px`;
+      this._panel.classList.add("is-resized");
+      this._state = { ...this._state, panelWidth: width, panelHeight: height };
+      this._updatePanelPosition();
+    });
+    __publicField(this, "_onResizeEnd", (event) => {
+      var _a, _b;
+      window.removeEventListener("pointermove", this._onResizeMove);
+      window.removeEventListener("pointerup", this._onResizeEnd);
+      window.removeEventListener("pointercancel", this._onResizeEnd);
+      (_b = (_a = this._resizeHandleEl) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+      this._resizeHandleEl = null;
+      if (!this._resizeAnchor) return;
+      this._resizeAnchor = null;
+      this._emit({ type: "statechange", state: this.getState() });
+    });
     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
@@ -832,6 +1184,8 @@ class BasemapControl {
       collapsed: this._options.collapsed,
       panelWidth: this._options.panelWidth,
       activeBasemapId: this._options.defaultBasemapId,
+      activeBasemapIds: this._options.defaultBasemapId ? [this._options.defaultBasemapId] : [],
+      allowMultiple: this._options.allowMultiple,
       query: "",
       providerFilter: "",
       categoryFilter: "",
@@ -852,7 +1206,8 @@ class BasemapControl {
     }
     this._renderContent();
     if (this._state.activeBasemapId) {
-      this._selectBasemap(this._state.activeBasemapId);
+      this.setBasemap(this._state.activeBasemapId).catch(() => {
+      });
     }
     return this._container;
   }
@@ -866,10 +1221,11 @@ class BasemapControl {
       this._map.off("resize", this._mapResizeHandler);
       this._mapResizeHandler = null;
     }
-    if (this._clickOutsideHandler) {
-      document.removeEventListener("click", this._clickOutsideHandler);
-      this._clickOutsideHandler = null;
-    }
+    window.removeEventListener("pointermove", this._onResizeMove);
+    window.removeEventListener("pointerup", this._onResizeEnd);
+    window.removeEventListener("pointercancel", this._onResizeEnd);
+    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);
     this._map = void 0;
@@ -884,9 +1240,24 @@ class BasemapControl {
   }
   setState(newState) {
     this._state = { ...this._state, ...newState };
+    this._syncActiveBasemapState(newState);
     this._renderContent();
     this._emit({ type: "statechange", state: this.getState() });
   }
+  // Keeps `activeBasemapId` and `activeBasemapIds` consistent when a caller
+  // updates only one of them through setState (the React wrapper and external
+  // consumers commonly set just `activeBasemapId`).
+  _syncActiveBasemapState(applied) {
+    const hasId = "activeBasemapId" in applied;
+    const hasIds = "activeBasemapIds" in applied;
+    if (hasId && !hasIds) {
+      const id = this._state.activeBasemapId;
+      this._state = { ...this._state, activeBasemapIds: id ? [id] : [] };
+    } else if (hasIds && !hasId) {
+      const ids = this._state.activeBasemapIds;
+      this._state = { ...this._state, activeBasemapId: ids[ids.length - 1] };
+    }
+  }
   getBasemaps() {
     return [...this._basemaps];
   }
@@ -897,16 +1268,87 @@ class BasemapControl {
       this._options.providers,
       this._options.includeDefaultBasemaps
     );
-    if (this._state.activeBasemapId && !this._basemaps.some((basemap) => basemap.id === this._state.activeBasemapId)) {
-      this._state = { ...this._state, activeBasemapId: void 0 };
-    }
+    const activeBasemapIds = this._state.activeBasemapIds.filter(
+      (id) => this._basemaps.some((basemap) => basemap.id === id)
+    );
+    this._state = {
+      ...this._state,
+      activeBasemapIds,
+      activeBasemapId: this._state.activeBasemapId && activeBasemapIds.includes(this._state.activeBasemapId) ? this._state.activeBasemapId : activeBasemapIds[activeBasemapIds.length - 1]
+    };
+    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);
   }
+  getActiveBasemaps() {
+    return this._state.activeBasemapIds.map((id) => this._basemaps.find((basemap) => basemap.id === id)).filter((basemap) => Boolean(basemap));
+  }
+  isBasemapActive(id) {
+    return this._state.activeBasemapIds.includes(id);
+  }
+  // Apply a basemap, replacing any previously active basemaps.
   async setBasemap(id) {
+    return this._applyBasemapChange(id, "replace");
+  }
+  // Add a raster basemap as an additional overlay without removing the active
+  // ones. Style basemaps cannot stack, so they always replace the map style.
+  async addBasemap(id) {
+    return this._applyBasemapChange(id, "add");
+  }
+  // Remove a previously added managed raster basemap from the map.
+  async removeBasemap(id) {
+    const basemap = this._basemaps.find((candidate) => candidate.id === id);
+    if (!basemap) {
+      const error = new Error(`Basemap "${id}" was not found.`);
+      this._handleError(error);
+      throw error;
+    }
+    if (!this._map) {
+      const error = new Error("BasemapControl must be added to a map before removing a basemap.");
+      this._handleError(error, basemap);
+      throw error;
+    }
+    const managedRaster = this._removeManagedRaster(id);
+    const activeBasemapIds = this._state.activeBasemapIds.filter((value) => value !== id);
+    this._state = {
+      ...this._state,
+      activeBasemapIds,
+      activeBasemapId: activeBasemapIds[activeBasemapIds.length - 1],
+      error: void 0
+    };
+    this._renderContent(true);
+    this._emit({ type: "basemapremove", state: this.getState(), basemap, managedRaster });
+    this._emit({ type: "statechange", state: this.getState() });
+  }
+  // Add the basemap if it is not active, otherwise remove it.
+  async toggleBasemap(id) {
+    if (this.isBasemapActive(id)) {
+      return this.removeBasemap(id);
+    }
+    return this.addBasemap(id);
+  }
+  async _applyBasemapChange(id, mode) {
     const basemap = this._basemaps.find((candidate) => candidate.id === id);
     if (!basemap) {
       const error = new Error(`Basemap "${id}" was not found.`);
@@ -918,46 +1360,69 @@ class BasemapControl {
       this._handleError(error, basemap);
       throw error;
     }
+    const isRaster = basemap.source.type === "raster";
+    const effectiveMode = isRaster ? mode : "replace";
     this._state = { ...this._state, loading: true, error: void 0 };
-    this._renderContent();
+    this._renderContent(true);
     this._emit({ type: "statechange", state: this.getState() });
     try {
       let managedRaster;
-      if (basemap.source.type === "raster") {
+      if (isRaster) {
         await this._waitForStyleReady();
-        this._removeManagedBasemap();
+        if (effectiveMode === "replace") {
+          this._removeManagedBasemap();
+        } else {
+          this._removeManagedRaster(basemap.id);
+        }
         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);
+      const activeBasemapIds = effectiveMode === "add" ? [...this._state.activeBasemapIds.filter((value) => value !== basemap.id), basemap.id] : [basemap.id];
       this._state = {
         ...this._state,
         activeBasemapId: basemap.id,
+        activeBasemapIds,
         loading: false,
         error: void 0
       };
-      this._renderContent();
+      this._renderContent(true);
       this._emit({
         type: "basemapchange",
         state: this.getState(),
         basemap,
-        managedRaster
+        managedRaster,
+        mode: effectiveMode
       });
       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._renderContent();
+      this._renderContent(true);
       this._handleError(error, basemap);
       throw error;
     }
   }
-  // setBasemap rethrows after emitting the error event so callers that await
-  // it can react. Internal fire-and-forget callers use this instead to avoid
+  // 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`.
+  // In multiple mode a raster basemap click toggles the overlay on or off.
   _selectBasemap(id) {
+    const basemap = this._basemaps.find((candidate) => candidate.id === id);
+    const isRaster = (basemap == null ? void 0 : basemap.source.type) === "raster";
+    if (this._state.allowMultiple && isRaster) {
+      this.toggleBasemap(id).catch(() => {
+      });
+      return;
+    }
     this.setBasemap(id).catch(() => {
     });
   }
@@ -1029,7 +1494,11 @@ class BasemapControl {
   _createPanel() {
     const panel = document.createElement("div");
     panel.className = "basemap-control-panel";
-    panel.style.width = `${this._options.panelWidth}px`;
+    panel.style.width = `${this._state.panelWidth}px`;
+    if (this._state.panelHeight !== void 0) {
+      panel.style.height = `${this._state.panelHeight}px`;
+      panel.classList.add("is-resized");
+    }
     const header = document.createElement("div");
     header.className = "basemap-control-header";
     const title = document.createElement("span");
@@ -1047,18 +1516,37 @@ class BasemapControl {
     this._content.className = "basemap-control-content";
     panel.appendChild(header);
     panel.appendChild(this._content);
+    if (this._options.resizable) {
+      panel.appendChild(this._createResizeHandle("bottom-left"));
+      panel.appendChild(this._createResizeHandle("bottom-right"));
+    }
     return panel;
   }
-  _renderContent() {
+  _createResizeHandle(corner) {
+    const handle = document.createElement("div");
+    handle.className = `basemap-control-resize-handle basemap-control-resize-${corner}`;
+    handle.setAttribute("aria-hidden", "true");
+    handle.addEventListener("pointerdown", (event) => this._startResize(event));
+    return handle;
+  }
+  _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._options.showMultipleToggle ? [this._createMultipleToggleRow()] : [],
+      ...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;
@@ -1085,6 +1573,25 @@ class BasemapControl {
     row.appendChild(this._createBeforeIdInput());
     return row;
   }
+  _createMultipleToggleRow() {
+    const label = document.createElement("label");
+    label.className = "basemap-control-multiple-toggle";
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.className = "basemap-control-multiple-checkbox";
+    checkbox.checked = this._state.allowMultiple;
+    checkbox.setAttribute("aria-label", "Add basemaps instead of replacing");
+    checkbox.addEventListener("change", () => {
+      this._state = { ...this._state, allowMultiple: checkbox.checked };
+      this._emit({ type: "statechange", state: this.getState() });
+    });
+    const text = document.createElement("span");
+    text.className = "basemap-control-multiple-toggle-text";
+    text.textContent = "Add basemaps (stack instead of replace)";
+    label.appendChild(checkbox);
+    label.appendChild(text);
+    return label;
+  }
   _createSearchInput() {
     const wrapper = document.createElement("div");
     wrapper.className = "basemap-control-search";
@@ -1118,6 +1625,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";
@@ -1193,7 +1800,7 @@ class BasemapControl {
       row.type = "button";
       row.className = "basemap-control-result";
       row.dataset.basemapId = basemap.id;
-      if (basemap.id === this._state.activeBasemapId) {
+      if (this._state.activeBasemapIds.includes(basemap.id)) {
         row.classList.add("is-active");
         row.setAttribute("aria-current", "true");
       }
@@ -1235,6 +1842,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}`;
@@ -1256,13 +1989,9 @@ class BasemapControl {
     };
     this._map.addSource(sourceId, source);
     this._map.addLayer(layer, beforeId);
-    this._managedSourceIds = [sourceId];
-    this._managedLayerIds = [layerId];
-    return {
-      sourceId,
-      layerId,
-      beforeId
-    };
+    const managed = { sourceId, layerId, beforeId };
+    this._managedRasters.set(basemap.id, managed);
+    return managed;
   }
   _waitForStyleReady() {
     if (!this._map) return Promise.resolve();
@@ -1271,32 +2000,43 @@ class BasemapControl {
     }
     return new Promise((resolve) => {
       var _a, _b;
+      let settled = false;
+      let timer;
       const done = () => {
         var _a2, _b2;
+        if (settled) return;
+        settled = true;
+        if (timer !== void 0) clearTimeout(timer);
         (_a2 = this._map) == null ? void 0 : _a2.off("load", done);
         (_b2 = this._map) == null ? void 0 : _b2.off("style.load", done);
         resolve();
       };
+      timer = setTimeout(done, 1500);
       (_a = this._map) == null ? void 0 : _a.once("load", done);
       (_b = this._map) == null ? void 0 : _b.once("style.load", done);
     });
   }
+  // Remove every managed raster basemap from the map.
   _removeManagedBasemap() {
     if (!this._map) return;
-    [...this._managedLayerIds].reverse().forEach((layerId) => {
-      var _a;
-      if ((_a = this._map) == null ? void 0 : _a.getLayer(layerId)) {
-        this._map.removeLayer(layerId);
-      }
-    });
-    [...this._managedSourceIds].reverse().forEach((sourceId) => {
-      var _a;
-      if ((_a = this._map) == null ? void 0 : _a.getSource(sourceId)) {
-        this._map.removeSource(sourceId);
-      }
-    });
-    this._managedLayerIds = [];
-    this._managedSourceIds = [];
+    for (const id of [...this._managedRasters.keys()]) {
+      this._removeManagedRaster(id);
+    }
+  }
+  // Remove a single managed raster basemap by its basemap id, returning the
+  // managed source/layer record that was removed (if any).
+  _removeManagedRaster(id) {
+    var _a, _b;
+    const managed = this._managedRasters.get(id);
+    if (!managed) return void 0;
+    if ((_a = this._map) == null ? void 0 : _a.getLayer(managed.layerId)) {
+      this._map.removeLayer(managed.layerId);
+    }
+    if ((_b = this._map) == null ? void 0 : _b.getSource(managed.sourceId)) {
+      this._map.removeSource(managed.sourceId);
+    }
+    this._managedRasters.delete(id);
+    return managed;
   }
   _applyBasemapView(basemap) {
     if (!this._map || !basemap.view) return;
@@ -1314,13 +2054,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();
     };
@@ -1375,6 +2108,44 @@ class BasemapControl {
         break;
     }
   }
+  // Begin a panel resize from a bottom corner. The panel stays pinned to its
+  // toggle button, so resizing is measured from the button-anchored corner:
+  // dragging either bottom handle grows or shrinks the panel away from it.
+  _startResize(event) {
+    var _a;
+    if (!this._panel) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const position = this._getControlPosition();
+    const isLeft = position === "top-left" || position === "bottom-left";
+    const isTop = position === "top-left" || position === "top-right";
+    const rect = this._panel.getBoundingClientRect();
+    this._resizeAnchor = {
+      x: isLeft ? rect.left : rect.right,
+      y: isTop ? rect.top : rect.bottom,
+      isLeft,
+      isTop
+    };
+    const handle = event.currentTarget;
+    this._resizeHandleEl = handle;
+    (_a = handle.setPointerCapture) == null ? void 0 : _a.call(handle, event.pointerId);
+    window.addEventListener("pointermove", this._onResizeMove);
+    window.addEventListener("pointerup", this._onResizeEnd);
+    window.addEventListener("pointercancel", this._onResizeEnd);
+  }
+  _getResizeBounds() {
+    var _a;
+    const mapRect = (_a = this._mapContainer) == null ? void 0 : _a.getBoundingClientRect();
+    const availableWidth = ((mapRect == null ? void 0 : mapRect.width) ?? window.innerWidth) - PANEL_VIEWPORT_MARGIN * 2;
+    const availableHeight = ((mapRect == null ? void 0 : mapRect.height) ?? window.innerHeight) - PANEL_VIEWPORT_MARGIN * 2;
+    return {
+      maxWidth: Math.max(MIN_PANEL_WIDTH, availableWidth),
+      maxHeight: Math.max(MIN_PANEL_HEIGHT, availableHeight)
+    };
+  }
+  _clampSize(value, min, max) {
+    return Math.round(Math.min(Math.max(value, min), max));
+  }
 }
 export {
   BasemapControl as B,
@@ -1386,4 +2157,4 @@ export {
   getBasemapCategories as g,
   resolveBasemapProviders as r
 };
-//# sourceMappingURL=BasemapControl-BBPUTp-_.js.map
+//# sourceMappingURL=BasemapControl-DCusTnvr.js.map