ogm-viewer 0.5.1 → 0.6.1

package/dist/cjs/ogm-alerts_11.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry = require('./ogm-alerts.ogm-attributes.ogm-image.ogm-map.ogm-menubar.ogm-metadata.ogm-preview.ogm-previews.ogm-settings.ogm-sidebar.ogm-viewer-BAGJpqMB.js');
+var ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry = require('./ogm-alerts.ogm-attributes.ogm-image.ogm-map.ogm-menubar.ogm-metadata.ogm-preview.ogm-previews.ogm-settings.ogm-sidebar.ogm-viewer-B_nGMI1e.js');
 require('./index-mu9UK_Fb.js');
 
 

package/dist/cjs/ogm-viewer.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["ogm-alerts_11.cjs",[[513,"ogm-viewer",{"recordUrl":[1,"record-url"],"theme":[1],"hideTitle":[4,"hide-title"],"record":[32],"error":[32],"previewOpacity":[32],"sidebarOpen":[32],"loading":[32],"loadRecord":[64]},[[0,"sidebarToggled","toggleSidebar"],[0,"opacityChange","adjustPreviewOpacity"],[0,"mapLoading","setLoadingStarted"],[0,"imageLoading","setLoadingStarted"],[0,"mapIdle","setLoadingFinished"],[0,"imageLoaded","setLoadingFinished"]],{"recordUrl":[{"updateRecord":0}],"record":[{"resetLoading":0}]}],[513,"ogm-previews",{"theme":[1],"record":[16],"previewOpacity":[2,"preview-opacity"],"sidebarPadding":[2,"sidebar-padding"],"sources":[32]},null,{"record":[{"getSources":0}]}],[513,"ogm-sidebar",{"record":[16],"theme":[1],"open":[4]}],[513,"ogm-menubar",{"record":[16],"theme":[1],"loading":[4],"hideTitle":[4,"hide-title"]}],[513,"ogm-preview",{"theme":[1],"source":[16],"previewOpacity":[2,"preview-opacity"],"sidebarPadding":[2,"sidebar-padding"],"error":[32]},[[0,"previewError","handlePreviewError"]],{"source":[{"resetError":0}]}],[513,"ogm-metadata",{"record":[16],"theme":[1],"fieldNames":[16],"filteredRecord":[32]}],[513,"ogm-settings",{"record":[16]},[[0,"input","handleOpacityChange"]]],[513,"ogm-map",{"source":[16],"theme":[1],"padding":[2],"easeMapTo":[64]},[[16,"featureSelected","handleFeatureSelected"]],{"source":[{"previewSource":0}],"theme":[{"onThemeChange":0}],"padding":[{"onPaddingChange":0}]}],[513,"ogm-alerts",{"theme":[1],"error":[16]}],[513,"ogm-image",{"source":[16],"theme":[1],"padding":[2]},null,{"source":[{"onSourceChange":0}],"padding":[{"onPaddingChange":0}]}],[513,"ogm-attributes",{"features":[16],"currentIndex":[32]},null,{"features":[{"onFeaturesChange":0}],"currentIndex":[{"onCurrentIndexChange":0}]}]]]], options);
+  return index.bootstrapLazy([["ogm-alerts_11.cjs",[[513,"ogm-viewer",{"recordUrl":[1,"record-url"],"theme":[1],"hideTitle":[4,"hide-title"],"record":[32],"error":[32],"previewOpacity":[32],"sidebarOpen":[32],"loading":[32],"loadRecord":[64]},[[0,"sidebarToggled","toggleSidebar"],[0,"opacityChange","adjustPreviewOpacity"],[0,"mapLoading","setLoadingStarted"],[0,"imageLoading","setLoadingStarted"],[0,"mapIdle","setLoadingFinished"],[0,"imageLoaded","setLoadingFinished"]],{"recordUrl":[{"updateRecord":0}],"record":[{"resetLoading":0}]}],[513,"ogm-previews",{"theme":[1],"record":[16],"previewOpacity":[2,"preview-opacity"],"sidebarPadding":[2,"sidebar-padding"],"resources":[32]},null,{"record":[{"getSources":0}]}],[513,"ogm-sidebar",{"record":[16],"theme":[1],"open":[4]}],[513,"ogm-menubar",{"record":[16],"theme":[1],"loading":[4],"hideTitle":[4,"hide-title"]}],[513,"ogm-preview",{"theme":[1],"previewResource":[16],"previewOpacity":[2,"preview-opacity"],"sidebarPadding":[2,"sidebar-padding"],"error":[32]},[[0,"previewError","handlePreviewError"]],{"previewResource":[{"resetError":0}]}],[513,"ogm-metadata",{"record":[16],"theme":[1],"fieldNames":[16],"filteredRecord":[32]}],[513,"ogm-settings",{"record":[16]},[[0,"input","handleOpacityChange"]]],[513,"ogm-map",{"previewResource":[16],"theme":[1],"padding":[2],"easeMapTo":[64]},[[16,"featureSelected","handleFeatureSelected"]],{"previewResource":[{"loadResource":0}],"theme":[{"onThemeChange":0}],"padding":[{"onPaddingChange":0}]}],[513,"ogm-alerts",{"theme":[1],"error":[16]}],[513,"ogm-image",{"previewResource":[16],"theme":[1],"padding":[2]},null,{"previewResource":[{"onSourceChange":0}],"padding":[{"onPaddingChange":0}]}],[513,"ogm-attributes",{"features":[16],"currentIndex":[32]},null,{"features":[{"onFeaturesChange":0}],"currentIndex":[{"onCurrentIndexChange":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/ogm-attributes/ogm-attributes.js

@@ -27,7 +27,7 @@ export class OgmAttributes {
         const feature = this.features[this.currentIndex];
         const multiple = this.features.length > 1;
         const label = getFeatureLabel(feature);
-        return (h("wa-scroller", { orientation: "vertical" }, h("table", { class: "attribute-table" }, multiple && label ? (h("thead", null, h("tr", { class: "header" }, h("td", { colSpan: 2 }, h("div", { class: "pagination" }, h("wa-button", { appearance: "plain", disabled: this.currentIndex === 0, onClick: () => this.currentIndex-- }, h("wa-icon", { name: "arrow-left", label: "Previous feature", canvas: "auto" })), label && (h("div", { class: "label" }, h("div", null, label))), h("div", { class: "count" }, ' ', "(", this.currentIndex + 1, "/", this.features.length, ")"), h("wa-button", { appearance: "plain", disabled: this.currentIndex === this.features.length - 1, onClick: () => this.currentIndex++ }, h("wa-icon", { name: "arrow-right", label: "Next feature", canvas: "auto" }))))))) : (label && (h("thead", null, h("tr", { class: "header" }, h("td", { colSpan: 2 }, h("div", { class: "label" }, h("div", null, label))))))), h("tbody", null, Object.entries(feature.properties || {}).map(([key, value]) => (h("tr", { key: key }, h("td", { class: "key" }, key), h("td", { class: "value", innerHTML: Autolinker.link(value.toString(), { hashtag: false, mention: false, phone: false }) }))))))));
+        return (h("wa-scroller", { orientation: "vertical" }, h("table", { class: "attribute-table" }, multiple && label ? (h("thead", null, h("tr", { class: "header" }, h("td", { colSpan: 2 }, h("div", { class: "pagination" }, h("wa-button", { appearance: "plain", disabled: this.currentIndex === 0, onClick: () => this.currentIndex-- }, h("wa-icon", { name: "arrow-left", label: "Previous feature", canvas: "auto" })), label && (h("div", { class: "label" }, h("div", null, label))), h("div", { class: "count" }, ' ', "(", this.currentIndex + 1, "/", this.features.length, ")"), h("wa-button", { appearance: "plain", disabled: this.currentIndex === this.features.length - 1, onClick: () => this.currentIndex++ }, h("wa-icon", { name: "arrow-right", label: "Next feature", canvas: "auto" }))))))) : (label && (h("thead", null, h("tr", { class: "header" }, h("td", { colSpan: 2 }, h("div", { class: "label" }, h("div", null, label))))))), h("tbody", null, Object.entries(feature.properties || {}).map(([key, value]) => (h("tr", { key: key }, h("td", { class: "key" }, key), h("td", { class: "value", innerHTML: Autolinker.link(value?.toString() ?? '', { hashtag: false, mention: false, phone: false }) }))))))));
     }
     static get is() { return "ogm-attributes"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ogm-attributes/ogm-attributes.test.js

@@ -0,0 +1,24 @@
+import { render, describe, it, expect, h } from "@stencil/vitest";
+// A WMS GetFeatureInfo response, where attributes that don't apply to the feature come back null
+const feature = {
+    type: 'Feature',
+    id: 'cugir007741.1',
+    geometry: { type: 'Point', coordinates: [-73.903384, 44.365321] },
+    properties: { region: 5, stat_name: 'EMN - WHITEFACE MT. SMT', ozone: 'Y', pm_2_5: null },
+};
+const rows = (root) => Array.from(root.shadowRoot.querySelectorAll('tbody tr')).map(tr => Array.from(tr.querySelectorAll('td')).map(td => td.textContent));
+describe('ogm-attributes', () => {
+    it('renders nothing without features', async () => {
+        const { root } = await render(h("ogm-attributes", { features: [] }));
+        expect(root.shadowRoot.querySelector('table')).toBeNull();
+    });
+    it('renders a row per attribute, leaving the value empty for a null', async () => {
+        const { root } = await render(h("ogm-attributes", { features: [feature] }));
+        expect(rows(root)).toEqual([
+            ['region', '5'],
+            ['stat_name', 'EMN - WHITEFACE MT. SMT'],
+            ['ozone', 'Y'],
+            ['pm_2_5', ''],
+        ]);
+    });
+});

package/dist/collection/components/ogm-image/ogm-image.js

@@ -4,7 +4,7 @@ import { getElement, findElement } from "../../lib/elements";
 import { referenceError } from "../../lib/errors";
 export class OgmImage {
     el;
-    source;
+    previewResource;
     theme;
     padding = 0;
     imageLoaded;
@@ -38,7 +38,7 @@ export class OgmImage {
             this.reportError(new Error(event.message));
         });
         // If we do have a source, load the images
-        if (this.source)
+        if (this.previewResource)
             await this.loadImages();
     }
     // Destroy the viewer when we are removed from the DOM
@@ -47,7 +47,7 @@ export class OgmImage {
     }
     // Update preview when source changes
     async onSourceChange() {
-        if (this.source)
+        if (this.previewResource)
             await this.loadImages();
     }
     async onPaddingChange() {
@@ -64,26 +64,26 @@ export class OgmImage {
         this.errorReported = false;
         this.imageLoading.emit();
         try {
-            const images = await this.source.getIIIFImageUrls();
+            const images = await this.previewResource.getIIIFImageUrls();
             if (!images)
                 throw new Error('No IIIF images found for source');
             this.viewer.open(images);
         }
         catch (error) {
-            console.error(`Error loading IIIF images for ${this.source.url}:`, error);
+            console.error(`Error loading IIIF images for ${this.previewResource.url}:`, error);
             this.imageLoaded.emit();
             this.reportError(error);
         }
     }
     // Emit a single preview error per load attempt
     reportError(error) {
-        if (this.errorReported || !this.source)
+        if (this.errorReported || !this.previewResource)
             return;
         this.errorReported = true;
-        this.previewError.emit(referenceError(error, this.source.label(), this.source.url));
+        this.previewError.emit(referenceError(error, this.previewResource.label(), this.previewResource.url));
     }
     render() {
-        return (h(Host, { key: 'ebbebaddac72024a3b311e0e0e501267a83d1e95' }, h("div", { key: '4f171256535cfd11430e2269fda389ffae3cedae', id: "openseadragon" }, h("div", { key: 'c308186a13fd6b8e0b1fadbf1fd1e6924631f9d6', class: "controls" }, h("wa-button", { key: '1f9e0c4c6d881bf09d7ceb160f470992d71ebe07', class: "zoom-in", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'cbacb0a388de2c7f349e25172027874a0224a678', name: "zoom-in", label: "Zoom In", canvas: "auto" })), h("wa-button", { key: 'dd8d7e9c5584b124ae105b2187100964f5e3a02a', class: "zoom-out", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '2b5acf2e07c99df9556692bf534bb3847506e4d4', name: "zoom-out", label: "Zoom Out", canvas: "auto" })), h("wa-button", { key: '5534a5c77ea20a1f77544e5acd99d4247dd3d287', class: "home", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'faadb8ea57bf1b831b292eaf66bcea39b7e215d1', name: "house", label: "Reset View", canvas: "auto" })), h("wa-button", { key: '8979cf58a94da89e0e2d132a92fe45323f07de01', class: "full-page", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '12cb3224e7f14258376c1c0bf6ffc5abda5c2252', name: "arrows-fullscreen", label: "Full Screen", canvas: "auto" })), h("wa-button", { key: 'e79c37f27ff14d5c4991ff30ff88aada467214ec', class: "next", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'ee10870ace583257393c53ba12b73ab3b015371b', name: "arrow-right", label: "Next", canvas: "auto" })), h("wa-button", { key: '9d8999e199b7b6338261eb16a655d2199520cf22', class: "prev", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'fde1a9022b9e5f90e269c75ce87943808031e021', name: "arrow-left", label: "Previous", canvas: "auto" }))))));
+        return (h(Host, { key: 'e07b96ecb9eb9aba4f4e21a8bff4a997158afa67' }, h("div", { key: '3f8147685a9cf58023c52aeb19863235cfbee3d0', id: "openseadragon" }, h("div", { key: 'ced3713b0dff0dfb9ec0c9b7d7ec2a30e44da450', class: "controls" }, h("wa-button", { key: '2c8463949482dc421636231391bffe3d7007a540', class: "zoom-in", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'f6b8b16f2bb4702f443a6550bcb4fa3b2ee96fff', name: "zoom-in", label: "Zoom In", canvas: "auto" })), h("wa-button", { key: 'db4dd4dc34fbbb1730d0f65738a8dda14cdbd1e7', class: "zoom-out", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '7226b94f0cdd071d0b1b6eb76a2102a7f2eaaff8', name: "zoom-out", label: "Zoom Out", canvas: "auto" })), h("wa-button", { key: 'ea03e501c4666cd37721776de8f8e9ddb21b0e54', class: "home", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'e6f9ae3ec07ad9123dbc1597798a9df2f38362f3', name: "house", label: "Reset View", canvas: "auto" })), h("wa-button", { key: 'ac38b067eb7f001430996ecfaf1e2570c3e99861', class: "full-page", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '03d9e1d0e70f053b413cf116d1e70754b64ade40', name: "arrows-fullscreen", label: "Full Screen", canvas: "auto" })), h("wa-button", { key: 'e580f1b08944d541f7527f97183971b644112a72', class: "next", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '6272934579ad6654a557dbc44d2f3021034acb81', name: "arrow-right", label: "Next", canvas: "auto" })), h("wa-button", { key: '80927b9c68dd16ac3ae8e68b405a11b2f8740843', class: "prev", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'd4f2fc257287be5d4f473328c8daf3e4b445cee8', name: "arrow-left", label: "Previous", canvas: "auto" }))))));
     }
     static get is() { return "ogm-image"; }
     static get encapsulation() { return "shadow"; }
@@ -99,16 +99,16 @@ export class OgmImage {
     }
     static get properties() {
         return {
-            "source": {
+            "previewResource": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "IIIFSource",
-                    "resolved": "IIIFSource",
+                    "original": "IIIFResource",
+                    "resolved": "IIIFResource",
                     "references": {
-                        "IIIFSource": {
+                        "IIIFResource": {
                             "location": "global",
-                            "id": "global::IIIFSource"
+                            "id": "global::IIIFResource"
                         }
                     }
                 },
@@ -220,7 +220,7 @@ export class OgmImage {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "source",
+                "propName": "previewResource",
                 "methodName": "onSourceChange"
             }, {
                 "propName": "padding",

package/dist/collection/components/ogm-map/ogm-map.js

@@ -1,28 +1,41 @@
 import { h } from "@stencil/core";
 import maplibregl from "maplibre-gl";
 import { Protocol as PMTilesProtocol } from "pmtiles";
-import CogSource from "../../lib/sources/cog";
-import GeoJSONSource from "../../lib/sources/geojson";
-import OpenIndexMapSource from "../../lib/sources/openindexmap";
-import PMTilesSource from "../../lib/sources/pmtiles";
-import RasterSource from "../../lib/sources/raster";
-import WmsSource from "../../lib/sources/wms";
+import CogResource from "../../lib/resources/cog";
+import GeoJsonResource from "../../lib/resources/geojson";
+import OpenIndexMapResource from "../../lib/resources/openindexmap";
+import PMTilesResource from "../../lib/resources/pmtiles";
+import RasterResource from "../../lib/resources/raster";
+import TileJsonResource from "../../lib/resources/tilejson";
+import WmsResource from "../../lib/resources/wms";
+import WmtsResource from "../../lib/resources/wmts";
 import { getElement } from "../../lib/elements";
-import { referenceError } from "../../lib/errors";
+import { referenceError, PreviewError } from "../../lib/errors";
+import { mercatorBbox, mercatorGeomToLngLat } from "../../lib/geometry";
 import CogPreviewer from "../../lib/previewers/cog";
-import GeoJSONPreviewer from "../../lib/previewers/geojson";
+import GeoJsonPreviewer from "../../lib/previewers/geojson";
 import OpenIndexMapPreviewer from "../../lib/previewers/openindexmap";
 import PMTilesRasterPreviewer from "../../lib/previewers/pmtiles-raster";
 import PMTilesVectorPreviewer from "../../lib/previewers/pmtiles-vector";
 import RasterPreviewer from "../../lib/previewers/raster";
+import TileJsonRasterPreviewer from "../../lib/previewers/tilejson-raster";
+import TileJsonVectorPreviewer from "../../lib/previewers/tilejson-vector";
+import WmtsPreviewer from "../../lib/previewers/wmts";
 import WmsPreviewer from "../../lib/previewers/wms";
 import MapLibreTheme from "../../lib/themes/maplibre";
 // Register PMTiles protocol
 const protocol = new PMTilesProtocol();
 maplibregl.addProtocol('pmtiles', protocol.tile);
+// Size in CSS pixels of the window we ask a WMS about when inspecting. GetFeatureInfo
+// locates a click by mapping a pixel grid onto a bbox, which assumes the view is a
+// flat, north-up rectangle - but ours can be rotated, pitched, or drawn as a globe. So
+// we describe a small window around the click rather than the whole viewport, which
+// keeps that assumption true to within a fraction of a pixel. Odd, so the clicked pixel
+// is the exact center of the window.
+const WMS_QUERY_WINDOW = 51;
 export class OgmMap {
     el;
-    source;
+    previewResource;
     theme;
     padding = 0;
     mapIdle;
@@ -38,7 +51,7 @@ export class OgmMap {
     hoveredFeature = undefined;
     // Container element reference for fullscreen
     containerEl;
-    // Previewer for the currently previewed source
+    // Previewer for the currently previewed resource
     previewer = undefined;
     // Set up the mapLibre map and event bindings on load
     componentDidLoad() {
@@ -54,7 +67,7 @@ export class OgmMap {
         });
         this.getContainer();
         this.addControls();
-        this.map.on('load', () => this.previewSource(this.source));
+        this.map.on('load', () => this.loadResource(this.previewResource));
         this.map.on('mousemove', this.handleHover.bind(this));
         this.map.on('click', this.handleClick.bind(this));
         this.map.on('error', this.handleMapError.bind(this));
@@ -98,29 +111,37 @@ export class OgmMap {
             },
         }));
     }
-    // Get the appropriate previewer for our source
+    // Get the appropriate previewer for our resource
     async getMapPreviewer(map) {
         const style = this.mapTheme.getStyle();
-        if (this.source instanceof OpenIndexMapSource)
-            return new OpenIndexMapPreviewer(this.source, map, style);
-        else if (this.source instanceof GeoJSONSource)
-            return new GeoJSONPreviewer(this.source, map, style);
-        else if (this.source instanceof PMTilesSource) {
-            if (await this.source.isVector())
-                return new PMTilesVectorPreviewer(this.source, map, style);
+        if (this.previewResource instanceof OpenIndexMapResource)
+            return new OpenIndexMapPreviewer(this.previewResource, map, style);
+        else if (this.previewResource instanceof GeoJsonResource)
+            return new GeoJsonPreviewer(this.previewResource, map, style);
+        else if (this.previewResource instanceof PMTilesResource) {
+            if (await this.previewResource.isVector())
+                return new PMTilesVectorPreviewer(this.previewResource, map, style);
             else
-                return new PMTilesRasterPreviewer(this.source, map, style);
+                return new PMTilesRasterPreviewer(this.previewResource, map, style);
         }
-        else if (this.source instanceof WmsSource)
-            return new WmsPreviewer(this.source, map, style);
-        else if (this.source instanceof CogSource)
-            return new CogPreviewer(this.source, map, style);
-        else if (this.source instanceof RasterSource)
-            return new RasterPreviewer(this.source, map, style);
+        else if (this.previewResource instanceof TileJsonResource) {
+            if (await this.previewResource.isVector())
+                return new TileJsonVectorPreviewer(this.previewResource, map, style);
+            else
+                return new TileJsonRasterPreviewer(this.previewResource, map, style);
+        }
+        else if (this.previewResource instanceof WmsResource)
+            return new WmsPreviewer(this.previewResource, map, style);
+        else if (this.previewResource instanceof CogResource)
+            return new CogPreviewer(this.previewResource, map, style);
+        else if (this.previewResource instanceof WmtsResource)
+            return new WmtsPreviewer(this.previewResource, map, style);
+        else if (this.previewResource instanceof RasterResource)
+            return new RasterPreviewer(this.previewResource, map, style);
     }
-    async previewSource(source) {
-        // Do nothing if we didn't get passed a source
-        if (!source)
+    async loadResource(resource) {
+        // Do nothing if we didn't get passed a resource
+        if (!resource)
             return;
         // Fresh load attempt: allow one error to be reported again for this source
         this.errorReported = false;
@@ -135,21 +156,21 @@ export class OgmMap {
                 await this.previewer.clearPreview();
                 this.previewer = undefined;
             }
-            // Get the appropriate previewer for our source and preview it
+            // Get the appropriate previewer for our resource and preview it
             this.previewer = await this.getMapPreviewer(this.map);
             if (!this.previewer)
-                throw new Error(`No previewer found for source: ${source.constructor.name}`);
+                throw new Error(`No previewer found for resource: ${resource.constructor.name}`);
             await this.previewer.preview();
             // Fit to bounds from the record; the spinner stays up until the map finishes moving
-            const bounds = await this.source.getBounds();
+            const bounds = await this.previewResource.getBounds();
             if (bounds)
                 await this.fitMapBounds(bounds);
         }
         catch (error) {
-            console.error(`Error previewing source ${source.url}:`, error);
+            console.error(`Error previewing resource ${resource.url}:`, error);
             if (!this.errorReported) {
                 this.errorReported = true;
-                this.previewError.emit(referenceError(error, source.label(), source.url));
+                this.previewError.emit(referenceError(error, resource.label(), resource.url));
             }
         }
         finally {
@@ -161,17 +182,17 @@ export class OgmMap {
         if (!this.map)
             return;
         this.map.setStyle(this.mapTheme.getBaseMapStyle());
-        this.map.once('style.load', async () => await this.previewSource(this.source));
+        this.map.once('style.load', async () => await this.loadResource(this.previewResource));
     }
-    // Surface MapLibre errors tied to the current preview source, skipping the
+    // Surface MapLibre errors tied to the current previewed resource, skipping the
     // noise from basemap/glyph/sprite loads, and deduped to a single alert per load attempt.
     handleMapError(event) {
-        if (this.errorReported || !this.source || !this.previewer)
+        if (this.errorReported || !this.previewResource || !this.previewer)
             return;
-        if (event.sourceId !== this.previewer.sourceId)
+        if (!this.previewer.sourceIds.includes(event.sourceId ?? ''))
             return;
         this.errorReported = true;
-        this.previewError.emit(referenceError(event.error, this.source.label(), this.source.url));
+        this.previewError.emit(referenceError(event.error, this.previewResource.label(), this.previewResource.url));
     }
     // Fit the map to the given bounds; resolve once the move finishes. Guard the case where the bounds
     // can't produce a camera - e.g. sidebar padding wider than the viewport, or a hidden, zero-size
@@ -195,6 +216,11 @@ export class OgmMap {
     }
     // Use the crosshair cursor if there's something to inspect
     handleHover(event) {
+        // Always use it for WMS, since we don't know until we make the request
+        if (this.previewer instanceof WmsPreviewer) {
+            this.map.getCanvas().style.cursor = 'crosshair';
+            return;
+        }
         const features = this.map.queryRenderedFeatures(event.point, { layers: this.previewLayers });
         if (features.length > 0) {
             this.map.getCanvas().style.cursor = 'crosshair';
@@ -206,12 +232,12 @@ export class OgmMap {
         }
     }
     // Show the attributes popup on click
-    handleClick(event) {
+    async handleClick(event) {
         // Clear any existing popup and feature selection
         this.clearFeatureSelection();
         this.destroyPopup();
-        // Check if we have feature(s) to inspect at the clicked point
-        const features = this.map.queryRenderedFeatures(event.point, { layers: this.previewLayers });
+        // Get the features, if any, at the clicked point. If none, do nothing.
+        const features = await this.handleInspection(event.point);
         if (features.length === 0)
             return;
         // Create and populate the attributes popup and select the first feature if multiple
@@ -219,6 +245,51 @@ export class OgmMap {
         this.createPopup(event.lngLat);
         this.selectFeature(features[0]);
     }
+    // Handle inspection of features, delegating to previewer if WMS
+    async handleInspection(point) {
+        if (!this.previewer)
+            return [];
+        let features = [];
+        if (this.previewer instanceof WmsPreviewer) {
+            features = await this.handleWmsInspection(point);
+        }
+        else {
+            features = this.map.queryRenderedFeatures(point, { layers: this.previewLayers });
+        }
+        return features;
+    }
+    // Special handling for WMS inspection, which requires a GetFeatureInfo request
+    async handleWmsInspection(point) {
+        if (!(this.previewer instanceof WmsPreviewer))
+            return [];
+        // Corners of the query window, in the same CSS pixel space as the click. Let
+        // MapLibre unproject them so the geography stays right under any projection, then
+        // take their EPSG:3857 envelope, since that is the CRS we request.
+        const half = (WMS_QUERY_WINDOW - 1) / 2;
+        const corners = [
+            [point.x - half, point.y - half],
+            [point.x + half, point.y - half],
+            [point.x + half, point.y + half],
+            [point.x - half, point.y + half],
+        ].map(([x, y]) => this.map.unproject([x, y]));
+        const response = await this.previewer.inspect({
+            bbox: mercatorBbox(corners),
+            width: WMS_QUERY_WINDOW,
+            height: WMS_QUERY_WINDOW,
+            x: half,
+            y: half,
+        });
+        if (!response.ok)
+            throw new PreviewError(`WMS GetFeatureInfo request failed with status ${response.status}`);
+        const data = await response.json();
+        if (!data || !data.features || !Array.isArray(data.features))
+            return [];
+        return data.features.map((feature) => ({
+            ...feature,
+            geometry: feature.geometry && mercatorGeomToLngLat(feature.geometry),
+            source: this.previewer.getSourceId(),
+        }));
+    }
     // Listen to selection events from the popup and highlight the selected feature
     handleFeatureSelected(event) {
         this.clearFeatureSelection();
@@ -227,13 +298,24 @@ export class OgmMap {
     }
     // Reset styling of all features to unselected state
     clearFeatureSelection() {
-        this.attributesEl.features.forEach(feature => {
-            this.map.setFeatureState({ source: feature.source, id: feature.id, sourceLayer: feature.sourceLayer }, { selected: false });
-        });
+        if (this.previewer instanceof WmsPreviewer) {
+            this.previewer.clearHighlight();
+        }
+        else {
+            this.attributesEl.features.forEach(feature => {
+                this.map.setFeatureState({ source: feature.source, id: feature.id, sourceLayer: feature.sourceLayer }, { selected: false });
+            });
+        }
         this.attributesEl.features = [];
     }
     // Set styling of a single feature to selected state
     selectFeature(feature) {
+        // A WMS raster has no client-side features to restyle, so the previewer outlines the
+        // geometry that GetFeatureInfo returned instead
+        if (this.previewer instanceof WmsPreviewer) {
+            this.previewer.highlightFeatures([feature]);
+            return;
+        }
         this.map.setFeatureState({ source: feature.source, id: feature.id, sourceLayer: feature.sourceLayer }, { selected: true });
     }
     // Set styling of a single feature to hovered state
@@ -266,7 +348,7 @@ export class OgmMap {
         return this.previewer?.layerIds || [];
     }
     render() {
-        return h("div", { key: 'c683bc9d81e84caa58d4575d0812c5fcdb096e28', id: "map", class: `wa-${this.theme}` });
+        return h("div", { key: '9bcace1eb20c7f5e096c18b816b7810b1edad330', id: "map", class: `wa-${this.theme}` });
     }
     static get is() { return "ogm-map"; }
     static get encapsulation() { return "shadow"; }
@@ -282,16 +364,16 @@ export class OgmMap {
     }
     static get properties() {
         return {
-            "source": {
+            "previewResource": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "Source",
-                    "resolved": "Source",
+                    "original": "Resource",
+                    "resolved": "Resource",
                     "references": {
-                        "Source": {
+                        "Resource": {
                             "location": "global",
-                            "id": "global::Source"
+                            "id": "global::Resource"
                         }
                     }
                 },
@@ -432,8 +514,8 @@ export class OgmMap {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "source",
-                "methodName": "previewSource"
+                "propName": "previewResource",
+                "methodName": "loadResource"
             }, {
                 "propName": "theme",
                 "methodName": "onThemeChange"

package/dist/collection/components/ogm-preview/ogm-preview.js

@@ -1,13 +1,13 @@
 import { h, Host } from "@stencil/core";
-import IIIFSource from "../../lib/sources/iiif";
+import IIIFResource from "../../lib/resources/iiif";
 // Wraps a single source's preview and surfaces error(s) during the preview.
 export class OgmPreview {
     theme;
-    source;
+    previewResource;
     previewOpacity;
     sidebarPadding;
     error;
-    // A new source is a fresh load attempt, so clear any error left over from the previous one.
+    // A new resource is a fresh load attempt, so clear any error left over from the previous one.
     resetError() {
         this.error = undefined;
     }
@@ -18,13 +18,13 @@ export class OgmPreview {
     }
     // IIIF sources use the image viewer; every other source type is previewed on the map.
     renderPreview() {
-        if (this.source instanceof IIIFSource) {
-            return h("ogm-image", { theme: this.theme, source: this.source, padding: this.sidebarPadding });
+        if (this.previewResource instanceof IIIFResource) {
+            return h("ogm-image", { theme: this.theme, previewResource: this.previewResource, padding: this.sidebarPadding });
         }
-        return h("ogm-map", { "preview-opacity": this.previewOpacity, theme: this.theme, source: this.source, padding: this.sidebarPadding });
+        return h("ogm-map", { "preview-opacity": this.previewOpacity, theme: this.theme, previewResource: this.previewResource, padding: this.sidebarPadding });
     }
     render() {
-        return (h(Host, { key: 'c962bdcbebdebb1abde8900b0d0811be218fca46' }, this.renderPreview(), this.error && h("ogm-alerts", { key: '87b8217bbb7d5101d9f306f2492326d3f9f92429', theme: this.theme, error: this.error })));
+        return (h(Host, { key: '6105ad9ba75013fcbbdb69f37f2485a86e72f1a2' }, this.renderPreview(), this.error && h("ogm-alerts", { key: '6f5351cc5d06f95c5b5192c6918c0fb2904603c3', theme: this.theme, error: this.error })));
     }
     static get is() { return "ogm-preview"; }
     static get encapsulation() { return "shadow"; }
@@ -59,16 +59,16 @@ export class OgmPreview {
                 "reflect": false,
                 "attribute": "theme"
             },
-            "source": {
+            "previewResource": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "Source",
-                    "resolved": "Source",
+                    "original": "Resource",
+                    "resolved": "Resource",
                     "references": {
-                        "Source": {
+                        "Resource": {
                             "location": "global",
-                            "id": "global::Source"
+                            "id": "global::Resource"
                         }
                     }
                 },
@@ -128,7 +128,7 @@ export class OgmPreview {
     }
     static get watchers() {
         return [{
-                "propName": "source",
+                "propName": "previewResource",
                 "methodName": "resetError"
             }];
     }

package/dist/collection/components/ogm-preview/ogm-preview.test.js

@@ -3,15 +3,15 @@ import { describe, it, expect, h, vi } from "@stencil/vitest";
 // wrapper re-throws lifecycle errors, and the <ogm-map>/<ogm-image> mounted inside a preview throw
 // when they try to initialize WebGL/OpenSeadragon (unavailable in the test DOM).
 import { render as stencilRender } from "@stencil/core";
-import GeoJSONSource from "../../lib/sources/geojson";
+import GeoJsonResource from "../../lib/resources/geojson";
 import { referenceError } from "../../lib/errors";
 // Let Stencil's RAF-based update cycle flush after a state change (mirrors the vitest waitForChanges).
 const flush = () => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
-const renderPreview = async (source) => {
+const renderPreview = async (resource) => {
     const container = document.createElement('div');
     document.body.appendChild(container);
     const consoleError = vi.spyOn(console, 'error').mockImplementation(() => { });
-    await stencilRender(h("ogm-preview", { source: source }), container);
+    await stencilRender(h("ogm-preview", { previewResource: resource }), container);
     const el = container.firstElementChild;
     await el.componentOnReady?.();
     consoleError.mockRestore();
@@ -19,13 +19,13 @@ const renderPreview = async (source) => {
 };
 describe('ogm-preview', () => {
     it('renders a preview for a source', async () => {
-        const el = await renderPreview(new GeoJSONSource('id', 'http://example.com/data.json'));
+        const el = await renderPreview(new GeoJsonResource('id', 'http://example.com/data.json'));
         const shadowRoot = el.shadowRoot;
         expect(shadowRoot.querySelector('ogm-map')).not.toBeNull();
         expect(shadowRoot.querySelector('ogm-alerts')).toBeNull();
     });
     it('shows the error over the preview when a previewError is reported', async () => {
-        const el = await renderPreview(new GeoJSONSource('id', 'http://example.com/data.json'));
+        const el = await renderPreview(new GeoJsonResource('id', 'http://example.com/data.json'));
         const error = referenceError(new TypeError('Failed to fetch'), 'GeoJSON', 'http://example.com/data.json');
         el.dispatchEvent(new CustomEvent('previewError', { detail: error, bubbles: true }));
         await flush();