maplibre-gl-raster 0.6.1 → 0.6.3

package/README.md

@@ -114,6 +114,9 @@ The main control class implementing MapLibre's `IControl` interface.
 | `interleaved` | `boolean` | `true`        | Render the deck.gl overlay interleaved with the basemap layers            |
 | `defaultUrl`  | `string`  | `''`          | Prefills the Add data URL input (not loaded until the user clicks Load)  |
 | `autoLoad`    | `boolean` | `false`       | Load `defaultUrl` automatically when the control is added to the map     |
+| `sampleData`  | `RasterSampleDataset[]` | - | Sample COGs offered as a "Load sample data" dropdown above the URL input; picking one fills the input (hidden when empty) |
+| `sampleDataLabel` | `string` | `'Load sample data...'` | Placeholder shown in the sample-data dropdown |
+| `closeOnOutsideClick` | `boolean` | `true` | Collapse the panel when clicking outside it; set `false` to close only via the header button |
 | `engine`      | `RenderEngine` | `'maplibre-gl-raster'` | Initial rendering backend; switchable at runtime from the panel    |
 
 #### Raster Methods

package/dist/{RasterControl-CGsK4CN7.js → RasterControl-yo9x-ULo.js}

@@ -18369,6 +18369,7 @@ var LayerManager = class {
 		try {
 			const tiff = await this._deps.loadGeoTIFF(url);
 			if (this._destroyed || !this.getLayer(layer.id)) return layer.id;
+			if (!tiff.isTiled) throw new Error("This GeoTIFF is striped, not tiled, so it cannot be streamed as map tiles. Convert it to a tiled Cloud-Optimized GeoTIFF (COG) first, for example with `rio cogeo create input.tif output.tif` or `gdal_translate input.tif output.tif -of COG`, then load the result.");
 			layer.geotiff = tiff;
 			layer.bandCount = tiff.count;
 			layer.bandNames = readBandNames(tiff);
@@ -19091,6 +19092,68 @@ var AddDataSection = class {
 			if (e.key === "Enter") submitUrl();
 		});
 		const urlRow = el("div", { className: "mlr-row" }, input, loadBtn);
+		const samples = options.sampleData ?? [];
+		let sampleRow;
+		if (samples.length > 0) {
+			const placeholder = options.sampleDataLabel ?? "Load sample data...";
+			const triggerLabel = el("span", {
+				className: "mlr-sample-trigger-label",
+				text: placeholder
+			});
+			const trigger = el("button", {
+				className: "mlr-sample-trigger",
+				type: "button",
+				ariaLabel: placeholder,
+				attrs: {
+					"aria-haspopup": "listbox",
+					"aria-expanded": "false"
+				}
+			}, triggerLabel, el("span", {
+				className: "mlr-sample-caret",
+				text: "▾"
+			}));
+			const menu = el("div", {
+				className: "mlr-sample-menu",
+				attrs: { role: "listbox" }
+			});
+			menu.hidden = true;
+			let menuOpen = false;
+			const setMenuOpen = (open) => {
+				menuOpen = open;
+				menu.hidden = !open;
+				trigger.setAttribute("aria-expanded", String(open));
+				trigger.classList.toggle("open", open);
+				if (open) menu.firstElementChild?.focus();
+			};
+			for (const sample of samples) {
+				const option = el("button", {
+					className: "mlr-sample-option",
+					type: "button",
+					text: sample.label,
+					title: sample.url,
+					attrs: { role: "option" }
+				});
+				option.addEventListener("click", () => {
+					setMenuOpen(false);
+					trigger.focus();
+					input.value = sample.url;
+					loadBtn.disabled = input.value.trim().length === 0;
+				});
+				menu.appendChild(option);
+			}
+			trigger.addEventListener("click", () => setMenuOpen(!menuOpen));
+			sampleRow = el("div", { className: "mlr-sample-row" }, trigger, menu);
+			sampleRow.addEventListener("keydown", (e) => {
+				if (e.key === "Escape" && menuOpen) {
+					setMenuOpen(false);
+					trigger.focus();
+				}
+			});
+			sampleRow.addEventListener("focusout", (e) => {
+				const next = e.relatedTarget;
+				if (!next || !sampleRow.contains(next)) setMenuOpen(false);
+			});
+		}
 		const fileInput = el("input", {
 			type: "file",
 			ariaLabel: "raster-file",
@@ -19133,7 +19196,7 @@ var AddDataSection = class {
 		this.el = el("div", { className: "mlr-section mlr-add-data" }, el("div", {
 			className: "mlr-section-title",
 			text: "Add data"
-		}), urlRow, dropZone, beforeIdInput);
+		}), ...sampleRow ? [sampleRow] : [], urlRow, dropZone, beforeIdInput);
 	}
 };
 //#endregion
@@ -20085,6 +20148,8 @@ var PanelUI = class {
 		this._engine = engine;
 		const addData = new AddDataSection({
 			initialUrl: options?.defaultUrl,
+			sampleData: options?.sampleData,
+			sampleDataLabel: options?.sampleDataLabel,
 			onAddUrl: (url, beforeId) => {
 				this._manager.addRaster(url, { beforeId }).catch(() => {});
 			},
@@ -20362,6 +20427,9 @@ var DEFAULT_OPTIONS = {
 	interleaved: true,
 	defaultUrl: "",
 	autoLoad: false,
+	sampleData: [],
+	sampleDataLabel: "Load sample data...",
+	closeOnOutsideClick: true,
 	engine: "maplibre-gl-raster",
 	epsgResolver: createResilientEpsgResolver()
 };
@@ -20449,6 +20517,8 @@ var RasterControl = class {
 		const autoLoading = this._options.autoLoad && !!this._options.defaultUrl;
 		if (content) this._panelUI = new PanelUI(content, this._layerManager, {
 			defaultUrl: autoLoading ? "" : this._options.defaultUrl,
+			sampleData: this._options.sampleData,
+			sampleDataLabel: this._options.sampleDataLabel,
 			inspect: {
 				onToggle: () => this._inspector?.toggle(),
 				isActive: () => this._inspector?.enabled ?? false
@@ -20967,13 +21037,15 @@ var RasterControl = class {
 	* Setup event listeners for panel positioning and click-outside behavior.
 	*/
 	_setupEventListeners() {
-		this._clickOutsideHandler = (e) => {
-			const target = e.target;
-			if (!target.isConnected) return;
-			if (this._inspector?.enabled) return;
-			if (this._container && this._panel && !this._container.contains(target) && !this._panel.contains(target)) this.collapse();
-		};
-		document.addEventListener("click", this._clickOutsideHandler);
+		if (this._options.closeOnOutsideClick !== false) {
+			this._clickOutsideHandler = (e) => {
+				const target = e.target;
+				if (!target.isConnected) return;
+				if (this._inspector?.enabled) return;
+				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();
 		};
@@ -21046,4 +21118,4 @@ var RasterControl = class {
 //#endregion
 export { MAX_SAMPLE_TILES as C, createResilientEpsgResolver as D, readBandNames as E, statsForBand as S, percentileFromHistogram as T, COLORMAP_OPTIONS as _, isKnownColormap as a, colormaps_default as b, clamp as c, formatNumericValue as d, generateId as f, COLORMAP_NAMES as g, COLORMAP_DISPLAY_NAMES as h, PALETTE_COLORMAP as i, classNames as l, loadGeoTIFF as m, Colorbar as n, loadColormapSprite as o, throttle as p, readPixelValues as r, sampleColormapStops as s, RasterControl as t, debounce as u, COLORMAP_ROW_COUNT as v, computeAutoStats as w, autoRangeFor as x, colormapDisplayName as y };
 
-//# sourceMappingURL=RasterControl-CGsK4CN7.js.map
+//# sourceMappingURL=RasterControl-yo9x-ULo.js.map