ogm-viewer 0.5.0 → 0.6.0

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

@@ -1,20 +1,21 @@
 import { h, Host } from "@stencil/core";
-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 TileJSONSource from "../../lib/sources/tilejson";
-import TMSSource from "../../lib/sources/tms";
-import WmsSource from "../../lib/sources/wms";
-import XYZSource from "../../lib/sources/xyz";
-import IIIFSource from "../../lib/sources/iiif";
-import IIIFManifestSource from "../../lib/sources/iiif-manifest";
+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 TileJsonResource from "../../lib/resources/tilejson";
+import TmsResource from "../../lib/resources/tms";
+import WmsResource from "../../lib/resources/wms";
+import WmtsResource from "../../lib/resources/wmts";
+import XyzResource from "../../lib/resources/xyz";
+import IIIFResource from "../../lib/resources/iiif";
+import IIIFManifestResource from "../../lib/resources/iiif-manifest";
 export class OgmPreviews {
     theme;
     record;
     previewOpacity;
     sidebarPadding;
-    sources = [];
+    resources = [];
     // @Watch only fires on changes; handle the initial load here
     componentWillLoad() {
         if (this.record)
@@ -22,36 +23,37 @@ export class OgmPreviews {
     }
     // Given a record, get all of the valid sources that can be used to preview it on a map
     getSources(record) {
-        while (this.sources.length)
-            this.sources.pop();
+        while (this.resources.length)
+            this.resources.pop();
         const recordBounds = record.getBounds();
         if (record.references.iiifImageUrl)
-            this.sources.push(new IIIFSource(record.id, record.references.iiifImageUrl, recordBounds));
+            this.resources.push(new IIIFResource(record.id, record.references.iiifImageUrl, recordBounds));
         if (record.references.iiifManifestUrl)
-            this.sources.push(new IIIFManifestSource(record.id, record.references.iiifManifestUrl, recordBounds));
+            this.resources.push(new IIIFManifestResource(record.id, record.references.iiifManifestUrl, recordBounds));
         if (record.references.pmtilesUrl)
-            this.sources.push(new PMTilesSource(record.id, record.references.pmtilesUrl, recordBounds));
+            this.resources.push(new PMTilesResource(record.id, record.references.pmtilesUrl, recordBounds));
         if (record.references.tilejsonUrl)
-            this.sources.push(new TileJSONSource(record.id, record.references.tilejsonUrl, recordBounds));
+            this.resources.push(new TileJsonResource(record.id, record.references.tilejsonUrl, recordBounds));
         if (record.references.indexMapUrl)
-            this.sources.push(new OpenIndexMapSource(record.id, record.references.indexMapUrl, recordBounds));
+            this.resources.push(new OpenIndexMapResource(record.id, record.references.indexMapUrl, recordBounds));
         if (record.references.geojsonUrl)
-            this.sources.push(new GeoJSONSource(record.id, record.references.geojsonUrl, recordBounds));
+            this.resources.push(new GeoJsonResource(record.id, record.references.geojsonUrl, recordBounds));
         if (record.references.cogUrl)
-            this.sources.push(new CogSource(record.id, record.references.cogUrl, recordBounds));
+            this.resources.push(new CogResource(record.id, record.references.cogUrl, recordBounds));
         if (record.references.tmsUrl)
-            this.sources.push(new TMSSource(record.id, record.references.tmsUrl, recordBounds));
+            this.resources.push(new TmsResource(record.id, record.references.tmsUrl, recordBounds));
         if (record.references.xyzUrl)
-            this.sources.push(new XYZSource(record.id, record.references.xyzUrl, recordBounds));
+            this.resources.push(new XyzResource(record.id, record.references.xyzUrl, recordBounds));
+        if (record.references.wmtsUrl && record.wxsIdentifier)
+            this.resources.push(new WmtsResource(record.id, record.references.wmtsUrl, { layerIds: [record.wxsIdentifier] }, recordBounds));
         if (record.references.wmsUrl && record.wxsIdentifier)
-            this.sources.push(new WmsSource(record.id, record.references.wmsUrl, { layerIds: [record.wxsIdentifier] }, recordBounds));
+            this.resources.push(new WmsResource(record.id, record.references.wmsUrl, { layerIds: [record.wxsIdentifier] }, recordBounds));
     }
     // Render as tabs for switching between sources
     render() {
-        // Render a blank map if there is no record or no sources
-        if (!this.record || !this.sources.length)
-            return h("ogm-map", { theme: this.theme, padding: this.sidebarPadding });
-        return (h(Host, { class: this.theme && `wa-${this.theme}` }, h("wa-tab-group", null, this.sources.map((source, idx) => (h("wa-tab", { key: idx, panel: `${source.constructor.name}-${source.id}-${idx}` }, source.label()))), this.sources.map((source, idx) => (h("wa-tab-panel", { key: idx, name: `${source.constructor.name}-${source.id}-${idx}`, active: idx === 0 }, h("ogm-preview", { theme: this.theme, source: source, "preview-opacity": this.previewOpacity, "sidebar-padding": this.sidebarPadding })))))));
+        if (!this.record || !this.resources.length)
+            return;
+        return (h(Host, { class: this.theme && `wa-${this.theme}` }, h("wa-tab-group", null, this.resources.map((resource, idx) => (h("wa-tab", { key: idx, panel: `${resource.constructor.name}-${resource.id}-${idx}` }, resource.label()))), this.resources.map((resource, idx) => (h("wa-tab-panel", { key: idx, name: `${resource.constructor.name}-${resource.id}-${idx}`, active: idx === 0 }, h("ogm-preview", { theme: this.theme, previewResource: resource, "preview-opacity": this.previewOpacity, "sidebar-padding": this.sidebarPadding })))))));
     }
     static get is() { return "ogm-previews"; }
     static get encapsulation() { return "shadow"; }
@@ -150,7 +152,7 @@ export class OgmPreviews {
     }
     static get states() {
         return {
-            "sources": {}
+            "resources": {}
         };
     }
     static get watchers() {

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

@@ -34,7 +34,7 @@ const renderPreviews = async (record) => {
 const flush = () => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
 // Render previews and drill into the single <ogm-preview> to see which preview (map or image) it
 // chose. Going through <ogm-previews> means the source is constructed in the built component's module
-// realm, so <ogm-preview>'s `instanceof IIIFSource` check holds (unlike a source built in the test).
+// realm, so <ogm-preview>'s `instanceof IIIFResource` check holds (unlike a source built in the test).
 const renderPreviewChild = async (record) => {
     const container = document.createElement('div');
     document.body.appendChild(container);
@@ -65,10 +65,10 @@ describe('ogm-previews', () => {
         expect(tabs).toHaveLength(1);
         expect(tabs[0].textContent).toContain('WMS');
     });
-    it('falls back to an empty map for a record with no previewable sources', async () => {
+    it('renders nothing for a record with no previewable sources', async () => {
         const shadowRoot = await renderPreviews(buildRecord(false));
         expect(shadowRoot.querySelector('wa-tab-group')).toBeNull();
-        expect(shadowRoot.querySelector('ogm-map')).not.toBeNull();
+        expect(shadowRoot.querySelectorAll('wa-tab')).toHaveLength(0);
     });
     it('wraps a map source in an ogm-preview that renders the map', async () => {
         const previewShadow = await renderPreviewChild(buildRecordWith({ 'http://geojson.org/geojson-spec.html': 'https://example.com/data.json' }));

package/dist/collection/components/ogm-viewer/ogm-viewer.css

@@ -1,10 +1,14 @@
 :host {
   --stanford-cardinal-red: #8f1414;
-  --accent-color: var(--wa-color-brand-50);
-  /* --accent-color: var(--stanford-cardinal-red); */
 }
 
 .container {
+  /* Defined here rather than on :host because it resolves a Web Awesome token, which is only
+     available on .container (where the palette/theme stylesheet is activated by the
+     wa-palette-default / wa-light|wa-dark classes) and its descendants. */
+  --accent-color: var(--wa-color-brand-50);
+  /* --accent-color: var(--stanford-cardinal-red); */
+
   display: flex;
   flex-direction: column;
   position: relative;

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

@@ -8,23 +8,6 @@ setBasePath(getAssetPath(''));
 registerIconLibrary('default', {
     resolver: name => getBasePath(`assets/icons/${name}.svg`),
 });
-// Web Awesome's raw color palette is scoped to `:root`, which can only ever match the actual
-// document root - never an element inside a shadow tree, so a component-scoped @import can't
-// activate it. Loading it here, at the document level, lets it match `:root` for real, and lets
-// its `.wa-light`/`.wa-dark` theme rules match Host element in each component because that element
-// is part of the page light DOM and not the shadow DOM. Injecting it here means consumers
-// don't have to remember to add it to their own page.
-function loadWebAwesomeStylesheet() {
-    const id = 'ogm-viewer-webawesome-styles';
-    if (document.getElementById(id))
-        return;
-    const link = document.createElement('link');
-    link.id = id;
-    link.rel = 'stylesheet';
-    link.href = getBasePath('assets/webawesome/styles/webawesome.css');
-    document.head.appendChild(link);
-}
-loadWebAwesomeStylesheet();
 // Import all required Web Awesome components
 import "@awesome.me/webawesome/dist/components/button/button.js";
 import "@awesome.me/webawesome/dist/components/callout/callout.js";
@@ -36,10 +19,16 @@ import "@awesome.me/webawesome/dist/components/tab-group/tab-group.js";
 import "@awesome.me/webawesome/dist/components/tab-panel/tab-panel.js";
 import "@awesome.me/webawesome/dist/components/tab/tab.js";
 import "@awesome.me/webawesome/dist/components/tooltip/tooltip.js";
+// Web Awesome activates its palette and semantic color variants on `:root` by default (with
+// `.wa-*` classes only needed to override the defaults). `:root` never matches inside a shadow
+// tree, so we opt into each default explicitly on our container to reproduce what a document-level
+// load would give us: the default palette plus the default hue for every color variant.
+const WA_SCOPE = 'wa-palette-default wa-brand-blue wa-neutral-gray wa-success-green wa-warning-yellow wa-danger-red';
 export class OgmViewer {
     el;
     recordUrl;
     theme = this.getThemePreference();
+    hideTitle = false;
     record;
     error;
     previewOpacity = 100;
@@ -103,8 +92,10 @@ export class OgmViewer {
             return undefined;
         }
     }
+    // Link Web Awesome's stylesheet inside the shadow tree so it doesn't
+    // leak into the host page when rendering.
     render() {
-        return (h(Host, { key: '6fae950d74eac18eca8192c3ab22d27cde8f8215', class: `wa-${this.theme}` }, h("div", { key: 'ddaf990f2145b165c24ded5272ec3f0f11d32df1', class: "container" }, h("ogm-menubar", { key: '93de36998fdfe07aaea28ee1d32512d129402ae6', theme: this.theme, record: this.record, loading: this.loading }), h("div", { key: 'cafd7e0862a8c39008caee372da2e79b48df2aec', class: "main-container" }, h("ogm-sidebar", { key: '03b5f864d35a385de6941f3eac9b1da050422eb9', theme: this.theme, record: this.record, open: this.sidebarOpen }), this.error ? (h("ogm-alerts", { theme: this.theme, error: this.error })) : (h("ogm-previews", { theme: this.theme, record: this.record, "preview-opacity": this.previewOpacity, "sidebar-padding": this.sidebarPadding }))))));
+        return (h(Host, { key: '042eb882fe5979453b3ea32c11dd9a95dfff6cc1', class: `wa-${this.theme}` }, h("link", { key: '510b4ccabdff543fd3724d9f00fcce2fc0da59e4', rel: "stylesheet", href: getBasePath('assets/webawesome/styles/themes/default.css') }), h("div", { key: 'ca0916da0a4e14fc6dbda29bc0ed7fcbab4389fa', class: `container ${WA_SCOPE} wa-${this.theme}` }, h("ogm-menubar", { key: 'e153abb59c5aa5858e723f1496916517c69a6f79', theme: this.theme, record: this.record, loading: this.loading, hideTitle: this.hideTitle }), h("div", { key: 'e83ad788ed7a7da1cbe6771184ba821fedebf868', class: "main-container" }, h("ogm-sidebar", { key: '664f9ad8f2b64f998e6fe2a67116413a6d1ac377', theme: this.theme, record: this.record, open: this.sidebarOpen }), this.error ? (h("ogm-alerts", { theme: this.theme, error: this.error })) : (h("ogm-previews", { theme: this.theme, record: this.record, "preview-opacity": this.previewOpacity, "sidebar-padding": this.sidebarPadding }))))));
     }
     static get is() { return "ogm-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -158,6 +149,26 @@ export class OgmViewer {
                 "reflect": false,
                 "attribute": "theme",
                 "defaultValue": "this.getThemePreference()"
+            },
+            "hideTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-title",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/lib/geometry.js

@@ -1,7 +1,9 @@
-import { LngLatBounds } from "maplibre-gl";
+import { LngLatBounds, MercatorCoordinate } from "maplibre-gl";
 import { wktToGeoJSON } from "@terraformer/wkt";
 // Regular expression to match ENVELOPE syntax in bbox strings
 export const ENVELOPE_REGEX = /^ENVELOPE\((?<west>[^,]+),(?<east>[^,]+),(?<north>[^,]+),(?<south>[^,]+)\)$/;
+// EPSG:3857 spans this many meters from the origin on both axes
+const MERCATOR_EXTENT = 20037508.342789244;
 // Convert LngLatBounds to GeoJSON Polygon
 export const boundsToGeoJSON = (bounds) => {
     return {
@@ -27,6 +29,38 @@ export const bboxToBounds = (bbox) => {
     const { west, east, north, south } = coords.groups;
     return new LngLatBounds([parseFloat(west), parseFloat(south)], [parseFloat(east), parseFloat(north)]);
 };
+// Convert a geographic coordinate to EPSG:3857 (Web Mercator) meters
+export const lngLatToMercator = (lngLat) => {
+    // MercatorCoordinate is normalized to 0..1, with y increasing southward
+    const { x, y } = MercatorCoordinate.fromLngLat(lngLat);
+    return [(x * 2 - 1) * MERCATOR_EXTENT, (1 - y * 2) * MERCATOR_EXTENT];
+};
+// Axis-aligned envelope around the given coordinates, as the minx,miny,maxx,maxy
+// string in EPSG:3857 meters that OGC services expect for a BBOX parameter
+export const mercatorBbox = (coords) => {
+    const points = coords.map(lngLatToMercator);
+    const xs = points.map(([x]) => x);
+    const ys = points.map(([, y]) => y);
+    return [Math.min(...xs), Math.min(...ys), Math.max(...xs), Math.max(...ys)].join(',');
+};
+// Convert an EPSG:3857 (Web Mercator) coordinate in meters back to a geographic coordinate
+export const mercatorToLngLat = ([x, y]) => {
+    const { lng, lat } = new MercatorCoordinate((x / MERCATOR_EXTENT + 1) / 2, (1 - y / MERCATOR_EXTENT) / 2).toLngLat();
+    return [lng, lat];
+};
+const mercatorPositionsToLngLat = (coordinates) => {
+    if (typeof coordinates[0] === 'number')
+        return mercatorToLngLat(coordinates);
+    return coordinates.map(mercatorPositionsToLngLat);
+};
+// Reproject a GeoJSON geometry from EPSG:3857 meters to geographic coordinates. OGC services
+// answer in the CRS the request asked for, but MapLibre sources are always in degrees.
+export const mercatorGeomToLngLat = (geometry) => {
+    if (geometry.type === 'GeometryCollection') {
+        return { ...geometry, geometries: geometry.geometries.map(mercatorGeomToLngLat) };
+    }
+    return { ...geometry, coordinates: mercatorPositionsToLngLat(geometry.coordinates) };
+};
 // Convert either WKT or ENVELOPE format geometry to GeoJSON
 // If WKT parsing fails, try ENVELOPE instead
 export const geomToGeoJSON = (geometry) => {

package/dist/collection/lib/geometry.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from "@stencil/vitest";
 import { LngLatBounds } from "maplibre-gl";
-import { bboxToBounds, boundsToGeoJSON, geomToGeoJSON } from "./geometry";
+import { bboxToBounds, boundsToGeoJSON, geomToGeoJSON, lngLatToMercator, mercatorBbox, mercatorGeomToLngLat, mercatorToLngLat } from "./geometry";
 describe('geomToGeoJSON', () => {
     it('should convert WKT to GeoJSON', () => {
         const wkt = 'POINT (-122.6764 45.5165)';
@@ -70,3 +70,92 @@ describe('boundsToGeoJSON', () => {
         });
     });
 });
+describe('lngLatToMercator', () => {
+    it('should put the null island at the origin', () => {
+        expect(lngLatToMercator([0, 0])).toEqual([0, 0]);
+    });
+    it('should convert degrees to EPSG:3857 meters', () => {
+        const [x, y] = lngLatToMercator([-120.99553605196368, 37.83228807647538]);
+        expect(x).toBeCloseTo(-13469161.46, 1);
+        expect(y).toBeCloseTo(4555760.76, 1);
+    });
+    it('should count north and east as positive', () => {
+        const [x, y] = lngLatToMercator([120, 60]);
+        expect(x).toBeGreaterThan(0);
+        expect(y).toBeGreaterThan(0);
+    });
+});
+describe('mercatorBbox', () => {
+    it('should envelope the coordinates as minx,miny,maxx,maxy', () => {
+        // Corners of a query window, in the arbitrary order they were unprojected in
+        const bbox = mercatorBbox([
+            [-120.9, 38.5],
+            [-120.0, 38.5],
+            [-120.0, 37.8],
+            [-120.9, 37.8],
+        ]);
+        const [minX, minY, maxX, maxY] = bbox.split(',').map(Number);
+        expect(minX).toBeLessThan(maxX);
+        expect(minY).toBeLessThan(maxY);
+        expect([minX, minY]).toEqual(lngLatToMercator([-120.9, 37.8]));
+        expect([maxX, maxY]).toEqual(lngLatToMercator([-120.0, 38.5]));
+    });
+});
+describe('mercatorToLngLat', () => {
+    it('should place the origin at null island', () => {
+        expect(mercatorToLngLat([0, 0])).toEqual([0, 0]);
+    });
+    it('should invert lngLatToMercator', () => {
+        const [lng, lat] = mercatorToLngLat(lngLatToMercator([-120.99553605196368, 37.83228807647538]));
+        expect(lng).toBeCloseTo(-120.99553605196368, 9);
+        expect(lat).toBeCloseTo(37.83228807647538, 9);
+    });
+    it('should convert a coordinate a WMS returned in EPSG:3857 meters', () => {
+        // A vertex of a Calaveras County tract, as GeoServer reported it
+        const [lng, lat] = mercatorToLngLat([-13402032.01418895, 4622299.14920388]);
+        expect(lng).toBeCloseTo(-120.39250196605, 6);
+        expect(lat).toBeCloseTo(38.30286413751, 6);
+    });
+});
+describe('mercatorGeomToLngLat', () => {
+    it('should reproject a point', () => {
+        const geometry = mercatorGeomToLngLat({ type: 'Point', coordinates: lngLatToMercator([-120.5, 38.2]) });
+        expect(geometry.type).toEqual('Point');
+        expect(geometry.coordinates[0]).toBeCloseTo(-120.5, 9);
+        expect(geometry.coordinates[1]).toBeCloseTo(38.2, 9);
+    });
+    it('should reproject every ring of a nested geometry', () => {
+        const ring = [
+            [-120.9, 38.5],
+            [-120.0, 38.5],
+            [-120.0, 37.8],
+            [-120.9, 38.5],
+        ];
+        const geometry = mercatorGeomToLngLat({
+            type: 'MultiPolygon',
+            coordinates: [[ring.map(lngLatToMercator)]],
+        });
+        expect(geometry.type).toEqual('MultiPolygon');
+        geometry.coordinates[0][0].forEach(([lng, lat], index) => {
+            expect(lng).toBeCloseTo(ring[index][0], 9);
+            expect(lat).toBeCloseTo(ring[index][1], 9);
+        });
+    });
+    it('should reproject the members of a geometry collection', () => {
+        const geometry = mercatorGeomToLngLat({
+            type: 'GeometryCollection',
+            geometries: [
+                { type: 'Point', coordinates: [0, 0] },
+                { type: 'LineString', coordinates: [lngLatToMercator([-120.5, 38.2]), lngLatToMercator([-120.4, 38.3])] },
+            ],
+        });
+        expect(geometry.geometries).toHaveLength(2);
+        expect(geometry.geometries[0].coordinates).toEqual([0, 0]);
+        expect(geometry.geometries[1].coordinates[1][0]).toBeCloseTo(-120.4, 9);
+    });
+    it('should leave the original geometry untouched', () => {
+        const original = { type: 'Point', coordinates: [-13402032.01418895, 4622299.14920388] };
+        mercatorGeomToLngLat(original);
+        expect(original.coordinates).toEqual([-13402032.01418895, 4622299.14920388]);
+    });
+});

package/dist/collection/lib/previewers/cog-deck.js

@@ -18,8 +18,8 @@ export default class DeckCogPreviewer extends Previewer {
     // Current opacity state
     opacity;
     // Initialize with opacity at the theme's opacity value
-    constructor(source, map, style) {
-        super(source);
+    constructor(resource, map, style) {
+        super(resource);
         this.map = map;
         this.style = style;
         this.opacity = this.style.opacity;
@@ -39,12 +39,12 @@ export default class DeckCogPreviewer extends Previewer {
         }
     }
     getSourceId() {
-        return `${this.source.id}-cog`;
+        return `${this.resource.id}-cog`;
     }
     createLayer() {
         return new COGLayer({
             id: this.getSourceId(),
-            geotiff: this.source.getMapLibreSourceUrl(),
+            geotiff: this.resource.getMapLibreSourceUrl(),
             onGeoTIFFLoad: (_data, options) => {
                 const { west, south, east, north } = options.geographicBounds;
                 this.bounds = [

package/dist/collection/lib/previewers/cog.js

@@ -6,19 +6,19 @@ import RasterPreviewer from "./raster";
 // See: https://github.com/geomatico/maplibre-cog-protocol
 export default class CogPreviewer extends RasterPreviewer {
     // Register the 'cog://' protocol handler with MapLibre when the previewer is created
-    constructor(source, map, style) {
-        super(source, map, style);
+    constructor(resource, map, style) {
+        super(resource, map, style);
         maplibregl.addProtocol('cog', cogProtocol);
     }
     // COG sources use 'url' instead of 'tiles' and have no scheme
-    async createSource() {
-        return {
-            type: 'raster',
-            url: await this.source.getMapLibreSourceUrl(),
-            tileSize: this.source.getTileSize(),
-        };
-    }
-    getSourceId() {
-        return `${this.source.id}-cog`;
+    async createSources() {
+        return [
+            {
+                id: `${this.resource.id}-cog`,
+                type: 'raster',
+                url: await this.resource.getMapLibreSourceUrl(),
+                tileSize: this.resource.getTileSize(),
+            },
+        ];
     }
 }

package/dist/collection/lib/previewers/geojson.js

@@ -1,10 +1,13 @@
 import VectorPreviewer from "./vector";
-export default class GeoJSONPreviewer extends VectorPreviewer {
-    async createSource() {
-        return {
-            type: await this.source.getMapLibreSourceType(),
-            data: await this.source.getMapLibreSourceUrl(),
-            generateId: true,
-        };
+export default class GeoJsonPreviewer extends VectorPreviewer {
+    async createSources() {
+        return [
+            {
+                id: `${this.resource.id}-geojson`,
+                type: await this.resource.getMapLibreSourceType(),
+                data: await this.resource.getMapLibreSourceUrl(),
+                generateId: true, // autogenerate feature IDs for labeling
+            },
+        ];
     }
 }

package/dist/collection/lib/previewers/map.js

@@ -0,0 +1,51 @@
+import Previewer from "./previewer";
+export default class MapPreviewer extends Previewer {
+    // Store reference to the map and styles
+    style;
+    map;
+    // Stored state for added MapLibre sources and layers to allow for cleanup
+    sourceIds = [];
+    layerIds = [];
+    // Current opacity state
+    opacity;
+    // Initialize with opacity at the theme's opacity value
+    constructor(resource, map, style) {
+        super(resource);
+        this.map = map;
+        this.style = style;
+        this.opacity = this.style.opacity;
+    }
+    // Add source and preview layers if they don't already exist
+    async preview() {
+        const sources = await this.createSources();
+        sources.forEach(source => {
+            const { id, ...sourceSpec } = source;
+            if (this.map.getSource(id))
+                return;
+            this.map.addSource(id, sourceSpec);
+            this.sourceIds.push(id);
+        });
+        const layers = await this.createLayers();
+        layers.forEach(layer => {
+            if (this.map.getLayer(layer.id))
+                return;
+            this.map.addLayer(layer);
+            this.layerIds.push(layer.id);
+        });
+    }
+    // Remove preview layers and sources
+    async clearPreview() {
+        this.layerIds.forEach(layerId => {
+            if (this.map.getLayer(layerId)) {
+                this.map.removeLayer(layerId);
+            }
+        });
+        this.layerIds = [];
+        this.sourceIds.forEach(sourceId => {
+            if (this.map.getSource(sourceId)) {
+                this.map.removeSource(sourceId);
+            }
+        });
+        this.sourceIds = [];
+    }
+}

package/dist/collection/lib/previewers/openindexmap.js

@@ -1,3 +1,3 @@
-import GeoJSONPreviewer from "./geojson";
-export default class OpenIndexMapPreviewer extends GeoJSONPreviewer {
+import GeoJsonPreviewer from "./geojson";
+export default class OpenIndexMapPreviewer extends GeoJsonPreviewer {
 }

package/dist/collection/lib/previewers/pmtiles-raster.js

@@ -1,17 +1,17 @@
 import RasterPreviewer from "./raster";
 export default class PMTilesRasterPreviewer extends RasterPreviewer {
     // PMTiles sources use 'url' instead of 'tiles' and have no scheme or tileSize
-    async createSource() {
-        return {
-            type: 'raster',
-            url: await this.source.getMapLibreSourceUrl(),
-        };
-    }
-    getSourceId() {
-        return `${this.source.id}-pmtiles`;
+    async createSources() {
+        return [
+            {
+                id: `${this.resource.id}-pmtiles`,
+                type: 'raster',
+                url: await this.resource.getMapLibreSourceUrl(),
+            },
+        ];
     }
     // Raster PMTiles have bounds info in the header
     async getBounds() {
-        return await this.source.getBounds();
+        return await this.resource.getBounds();
     }
 }

package/dist/collection/lib/previewers/pmtiles-vector.js

@@ -1,53 +1,14 @@
-import VectorPreviewer from "./vector";
-export default class PMTilesVectorPreviewer extends VectorPreviewer {
-    async createSource() {
-        return {
-            type: 'vector',
-            url: this.source.getMapLibreSourceUrl(),
-            encoding: await this.source.getVectorEncoding(),
-        };
-    }
-    /* Add 'source-layer' property because PMTiles can contain multiple layers */
-    createPolygonLayer(layerId) {
-        return {
-            ...super.createPolygonLayer(layerId),
-            'source-layer': layerId,
-        };
-    }
-    createPolygonOutlineLayer(layerId) {
-        return {
-            ...super.createPolygonOutlineLayer(layerId),
-            'source-layer': layerId,
-        };
-    }
-    createLineLayer(layerId) {
-        return {
-            ...super.createLineLayer(layerId),
-            'source-layer': layerId,
-        };
-    }
-    createPointLayer(layerId) {
-        return {
-            ...super.createPointLayer(layerId),
-            'source-layer': layerId,
-        };
-    }
-    createPolygonLabelLayer(layerId) {
-        return {
-            ...super.createPolygonLabelLayer(layerId),
-            'source-layer': layerId,
-        };
-    }
-    createLineLabelLayer(layerId) {
-        return {
-            ...super.createLineLabelLayer(layerId),
-            'source-layer': layerId,
-        };
-    }
-    createPointLabelLayer(layerId) {
-        return {
-            ...super.createPointLabelLayer(layerId),
-            'source-layer': layerId,
-        };
+import TiledVectorPreviewer from "./tiled-vector";
+export default class PMTilesVectorPreviewer extends TiledVectorPreviewer {
+    // Only one source for PMTiles
+    async createSources() {
+        return [
+            {
+                id: this.resource.id,
+                type: 'vector',
+                url: this.resource.getMapLibreSourceUrl(),
+                encoding: await this.resource.getVectorEncoding(),
+            },
+        ];
     }
 }

package/dist/collection/lib/previewers/previewer.js

@@ -1,6 +1,7 @@
+// Base class for rendering a resource into a preview
 export default class Previewer {
-    source;
-    constructor(source) {
-        this.source = source;
+    resource;
+    constructor(resource) {
+        this.resource = resource;
     }
 }

package/dist/collection/lib/previewers/raster.js

@@ -1,17 +1,21 @@
-import MapLibrePreviewer from "./maplibre";
-export default class RasterPreviewer extends MapLibrePreviewer {
-    async createSource() {
-        return {
-            type: 'raster',
-            tiles: [await this.source.getMapLibreSourceUrl()],
-            scheme: this.source.getScheme(),
-            tileSize: this.source.getTileSize(),
-        };
+import MapPreviewer from "./map";
+export default class RasterPreviewer extends MapPreviewer {
+    // By default, rasters only have one source
+    async createSources() {
+        return [
+            {
+                id: this.getSourceId(),
+                type: 'raster',
+                tiles: [await this.resource.getMapLibreSourceUrl()],
+                scheme: this.resource.getScheme(),
+                tileSize: this.resource.getTileSize(),
+            },
+        ];
     }
     getSourceId() {
-        return `${this.source.id}-${this.source.getScheme()}`;
+        return `${this.resource.id}-${this.resource.getScheme()}`;
     }
-    // Rasters only have one layer
+    // Rasters only have one layer of their own; subclasses may add companion layers after it
     async createLayers() {
         return [
             {