maplibre-gl-basemap-control 0.3.0 → 0.4.1

package/README.md

@@ -190,14 +190,50 @@ https://api.mapbox.com/styles/v1/mapbox/{styleId}?access_token={api-key}
 | `providers` | `BasemapProvider[]` | `[]` | Custom provider labels |
 | `includeDefaultBasemaps` | `boolean` | `true` | Include the built-in public catalog |
 | `defaultBasemapId` | `string` | `undefined` | Basemap to apply after the control is added |
+| `allowMultiple` | `boolean` | `false` | Stack raster basemaps instead of replacing the active one |
+| `showMultipleToggle` | `boolean` | `true` | Show the in-panel toggle that switches between adding and replacing |
+| `resizable` | `boolean` | `true` | Allow resizing the panel by dragging its bottom-left or bottom-right corner |
+
+### Multiple Basemaps
+
+By default, selecting a basemap replaces the active one. Set `allowMultiple: true`
+to stack raster basemaps instead: each click adds the selected raster basemap as
+an additional overlay, and clicking an already-active raster basemap removes it.
+This lets a project hold several raster basemaps at once and switch between them by
+toggling the entries in the panel.
+
+```typescript
+const control = new BasemapControl({
+  allowMultiple: true,
+});
+```
+
+The panel also shows an **Add basemaps** toggle so users can switch between adding
+and replacing at runtime. Hide it with `showMultipleToggle: false`.
+
+### Resizable Panel
+
+The panel can be resized by dragging either of its bottom corners (bottom-left or
+bottom-right). The resized width and height are reflected in `state.panelWidth` and
+`state.panelHeight`. Set `resizable: false` to disable the handles.
+
+Style basemaps cannot stack because they replace the entire map style, so selecting
+a style basemap always replaces the active basemaps (and clears any stacked raster
+overlays). Use the `before_id` input to control where each raster basemap is
+inserted relative to existing layers.
 
 ### Methods
 
 - `setBasemap(id)` - Apply a basemap and remove the previous plugin-managed basemap
+- `addBasemap(id)` - Add a raster basemap as an additional overlay (style basemaps replace instead)
+- `removeBasemap(id)` - Remove a previously added managed raster basemap
+- `toggleBasemap(id)` - Add the raster basemap if inactive, otherwise remove it
+- `isBasemapActive(id)` - Whether the basemap is currently active
 - `setMapTilerApiKey(apiKey)` - Set or update the MapTiler API key used by MapTiler styles
 - `setAmazonCredentials(apiKey, awsRegion)` - Set or update Amazon Location credentials
 - `setMapboxAccessToken(accessToken)` - Set or update the Mapbox access token
-- `getActiveBasemap()` - Return the current basemap definition
+- `getActiveBasemap()` - Return the most recently selected basemap definition
+- `getActiveBasemaps()` - Return all currently active basemap definitions
 - `getBasemaps()` - Return the catalog
 - `setBasemaps(basemaps)` - Replace the catalog
 - `toggle()`, `expand()`, `collapse()` - Control panel visibility
@@ -211,7 +247,8 @@ before that layer.
 
 ### Events
 
-- `basemapchange`
+- `basemapchange` (includes a `mode` of `'replace'` or `'add'`)
+- `basemapremove`
 - `error`
 - `collapse`
 - `expand`

package/dist/{BasemapControl-DD97GXiq.js → BasemapControl-DCusTnvr.js}

@@ -1101,7 +1101,10 @@ 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 = "";
@@ -1110,6 +1113,9 @@ 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");
@@ -1122,8 +1128,10 @@ 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", "");
@@ -1131,6 +1139,33 @@ class BasemapControl {
     __publicField(this, "_providerSettingsCollapsed", true);
     __publicField(this, "_resizeHandler", null);
     __publicField(this, "_mapResizeHandler", 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) ?? "";
@@ -1149,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: "",
@@ -1169,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;
   }
@@ -1183,6 +1221,11 @@ class BasemapControl {
       this._map.off("resize", this._mapResizeHandler);
       this._mapResizeHandler = 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;
@@ -1197,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];
   }
@@ -1210,9 +1268,14 @@ 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() });
   }
@@ -1238,7 +1301,54 @@ class BasemapControl {
   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.`);
@@ -1250,14 +1360,20 @@ 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(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);
@@ -1270,9 +1386,11 @@ class BasemapControl {
         }
       }
       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
       };
@@ -1281,7 +1399,8 @@ class BasemapControl {
         type: "basemapchange",
         state: this.getState(),
         basemap,
-        managedRaster
+        managedRaster,
+        mode: effectiveMode
       });
       this._emit({ type: "statechange", state: this.getState() });
     } catch (cause) {
@@ -1292,10 +1411,18 @@ class BasemapControl {
       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(() => {
     });
   }
@@ -1367,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");
@@ -1385,8 +1516,19 @@ 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;
   }
+  _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;
@@ -1395,6 +1537,7 @@ class BasemapControl {
     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),
@@ -1430,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";
@@ -1638,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");
       }
@@ -1827,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();
@@ -1842,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;
@@ -1939,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,
@@ -1950,4 +2157,4 @@ export {
   getBasemapCategories as g,
   resolveBasemapProviders as r
 };
-//# sourceMappingURL=BasemapControl-DD97GXiq.js.map
+//# sourceMappingURL=BasemapControl-DCusTnvr.js.map