ogm-viewer 0.3.0 → 0.5.0

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

@@ -1,27 +1,51 @@
-import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js";
-import { getAssetPath, h } from "@stencil/core";
-import { OgmRecord } from "../../lib/record";
+import { setBasePath, getBasePath, registerIconLibrary } from "@awesome.me/webawesome";
+import { Host, getAssetPath, h } from "@stencil/core";
+import OgmRecord from "../../lib/record";
+import { fetchOrThrow, recordError } from "../../lib/errors";
 // Only need to call this once, at the top level
 setBasePath(getAssetPath(''));
-// Import all required Shoelace components
-import "@shoelace-style/shoelace/dist/components/drawer/drawer.js";
-import "@shoelace-style/shoelace/dist/components/button/button.js";
-import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
-import "@shoelace-style/shoelace/dist/components/icon/icon.js";
-import "@shoelace-style/shoelace/dist/components/range/range.js";
-import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
-import "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";
-import "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js";
-import "@shoelace-style/shoelace/dist/components/tab/tab.js";
-import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
+// Serve icons from our self-hosted bootstrap-icons subset instead of the default Font Awesome library
+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";
+import "@awesome.me/webawesome/dist/components/icon/icon.js";
+import "@awesome.me/webawesome/dist/components/scroller/scroller.js";
+import "@awesome.me/webawesome/dist/components/slider/slider.js";
+import "@awesome.me/webawesome/dist/components/spinner/spinner.js";
+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";
 export class OgmViewer {
     el;
     recordUrl;
     theme = this.getThemePreference();
     record;
+    error;
     previewOpacity = 100;
     sidebarOpen = false;
     loading = false;
+    loadingCount = 0;
     sidebarPadding = 0;
     // Prior to rendering, fetch the record if a URL is provided
     async componentWillLoad() {
@@ -43,34 +67,44 @@ export class OgmViewer {
     }
     // Can be called externally to set the record directly
     async loadRecord(record) {
+        this.error = undefined;
         this.record = record;
     }
     // Listen for opacity changes from the sidebar and adjust the preview layer
     adjustPreviewOpacity(event) {
         this.previewOpacity = event.detail;
     }
-    // Listen for map to report loading started
+    // Listen for a preview to report loading started
     setLoadingStarted() {
+        this.loadingCount++;
         this.loading = true;
     }
-    // Listen for map to report loading finished
+    // When all in-flight previews have loaded, clear loading state
     setLoadingFinished() {
+        this.loadingCount = Math.max(0, this.loadingCount - 1);
+        this.loading = this.loadingCount > 0;
+    }
+    // When a new record loads, reset the loading count and loading state
+    resetLoading() {
+        this.loadingCount = 0;
         this.loading = false;
     }
-    // Fetch a record by URL and parse it into an OgmRecord instance
+    // Fetch a record by URL and parse it into an OgmRecord instance.
     async fetchRecord(recordUrl) {
-        const response = await fetch(recordUrl);
-        const data = await response.json();
-        return new OgmRecord(data);
-    }
-    // Choose a preview component based on the record type
-    renderPreview() {
-        if (this.record && this.record.references.iiifOnly)
-            return h("ogm-image", { theme: this.theme, record: this.record, padding: this.sidebarPadding });
-        return h("ogm-map", { "preview-opacity": this.previewOpacity, theme: this.theme, record: this.record, padding: this.sidebarPadding });
+        this.error = undefined;
+        try {
+            const response = await fetchOrThrow(recordUrl);
+            const data = await response.json();
+            return new OgmRecord(data);
+        }
+        catch (error) {
+            console.error(`Error loading record ${recordUrl}:`, error);
+            this.error = recordError(error, recordUrl);
+            return undefined;
+        }
     }
     render() {
-        return (h("div", { key: '5599f54a9872a627878f5d287d0bc929254a1ec7', class: `container sl-theme-${this.theme}` }, h("ogm-menubar", { key: '77aa6e3bf1ad400e8d65a26fe5b397af03861064', theme: this.theme, record: this.record, loading: this.loading }), h("div", { key: '163552be7c0ef95adb17fe6653c6a9219728fff4', class: "main-container" }, h("ogm-sidebar", { key: '2f5ebfa8bdacb07d914cf5f8bf1a1075bca054ec', theme: this.theme, record: this.record, open: this.sidebarOpen }), this.renderPreview())));
+        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 }))))));
     }
     static get is() { return "ogm-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -130,8 +164,10 @@ export class OgmViewer {
     static get states() {
         return {
             "record": {},
+            "error": {},
             "previewOpacity": {},
-            "sidebarOpen": {}
+            "sidebarOpen": {},
+            "loading": {}
         };
     }
     static get methods() {
@@ -150,10 +186,8 @@ export class OgmViewer {
                             "id": "global::Promise"
                         },
                         "OgmRecord": {
-                            "location": "import",
-                            "path": "../../lib/record",
-                            "id": "src/lib/record.ts::OgmRecord",
-                            "referenceLocation": "OgmRecord"
+                            "location": "global",
+                            "id": "global::OgmRecord"
                         }
                     },
                     "return": "Promise<void>"
@@ -170,6 +204,9 @@ export class OgmViewer {
         return [{
                 "propName": "recordUrl",
                 "methodName": "updateRecord"
+            }, {
+                "propName": "record",
+                "methodName": "resetLoading"
             }];
     }
     static get listeners() {

package/dist/collection/lib/errors.js

@@ -0,0 +1,137 @@
+// Supertype for errors thrown inside ogm-viewer. `message` is inherited from Error; redeclaring it
+// here would emit an uninitialized class field that clobbers the value super() sets (under the
+// es2022 define-fields semantics this project compiles with), leaving every subtype's message empty.
+export class PreviewError extends Error {
+    title;
+    url;
+}
+// The OGM record URL responded with a non-OK HTTP status.
+class RecordLoadError extends PreviewError {
+    title = "This record couldn't be loaded";
+    constructor(status, url) {
+        super(`The record URL responded with an error (HTTP ${status}). Check that the URL is correct and the record is publicly available.`);
+        this.url = url;
+    }
+}
+// The OGM record URL fetch failed due to a network error or CORS restriction.
+class RecordNetworkError extends PreviewError {
+    title = "This record couldn't be reached";
+    constructor(url) {
+        super('The server may be unreachable, or it may be blocking cross-origin (CORS) requests from this page.');
+        this.url = url;
+    }
+}
+// The OGM record couldn't be parsed as JSON.
+class RecordParseError extends PreviewError {
+    title = "This record couldn't be parsed";
+    constructor(url) {
+        super("The record URL didn't return valid JSON metadata. It may be pointing at an HTML page or a malformed file.");
+        this.url = url;
+    }
+}
+// Something else went wrong reading the record.
+class RecordReadError extends PreviewError {
+    title = "This record couldn't be read";
+    constructor(message, url) {
+        super(message);
+        this.url = url;
+    }
+}
+// The reference URL responded with a non-OK HTTP status.
+class ReferenceLoadError extends PreviewError {
+    constructor(refType, status, url) {
+        super(`The reference URL responded with an error (HTTP ${status}). Check that the URL is correct and the reference is publicly available.`);
+        this.title = `The ${refType} preview couldn't be loaded`;
+        this.url = url;
+    }
+}
+// The reference URL fetch failed due to a network error or CORS restriction.
+class ReferenceNetworkError extends PreviewError {
+    constructor(refType, url) {
+        super('The server may be unreachable, or it may be blocking cross-origin (CORS) requests from this page.');
+        this.title = `The ${refType} preview couldn't be reached`;
+        this.url = url;
+    }
+}
+// Something else went wrong reading the reference.
+class ReferenceReadError extends PreviewError {
+    constructor(refType, message, url) {
+        super(message);
+        this.title = `The ${refType} preview couldn't be read`;
+        this.url = url;
+    }
+}
+// Used to re-raise HTTP responses from fetch() with a non-OK status as PreviewErrors
+export class HttpError extends Error {
+    status;
+    statusText;
+    url;
+    constructor(url, status, statusText) {
+        super(`HTTP ${status} ${statusText} for ${url}`);
+        this.name = 'HttpError';
+        this.status = status;
+        this.statusText = statusText;
+        this.url = url;
+    }
+}
+// Execute a fetch() and raise HttpError on non-OK status
+export async function fetchOrThrow(url, init) {
+    const response = await fetch(url, init);
+    if (!response.ok)
+        throw new HttpError(url, response.status, response.statusText);
+    return response;
+}
+// Attempt to get a useful HTTP status code from any error. We only keep values
+// over 400 because MapLibre uses code "0", which isn't a real HTTP status.
+function statusOf(error) {
+    if (error instanceof HttpError)
+        return error.status;
+    const status = error?.status;
+    return typeof status === 'number' && status >= 400 ? status : undefined;
+}
+// A fetch() failure to reach the server at all, or a CORS block, rejects with a TypeError. MapLibre
+// reports the same class of failure on its internal tile/data requests with a synthetic status of 0
+// (not a real HTTP status). Treat both as a network error so the user sees the unreachable/CORS
+// message rather than a generic read error or a nonsensical "HTTP 0".
+function isNetworkError(error) {
+    if (error instanceof TypeError)
+        return true;
+    return error?.status === 0;
+}
+// Attempt get a useful message from any error.
+function messageOf(error) {
+    if (error instanceof Error)
+        return error.message;
+    if (typeof error === 'string')
+        return error;
+    return undefined;
+}
+// Generate a PreviewError when something went wrong loading the record.
+export function recordError(error, url) {
+    const status = statusOf(error);
+    const message = messageOf(error);
+    // The request failed to reach the server at all, or was blocked by CORS.
+    if (isNetworkError(error))
+        return new RecordNetworkError(url);
+    // If we have an HTTP status code, the server responded.
+    if (status !== undefined)
+        return new RecordLoadError(status, url);
+    // A SyntaxError here means we got a response but it wasn't valid JSON metadata.
+    if (error instanceof SyntaxError)
+        return new RecordParseError(url);
+    // Anything else (e.g. an unsupported metadata version thrown by OgmRecord's constructor).
+    return new RecordReadError(message ?? 'An unknown error occurred while reading this record.', url);
+}
+// Generate a PreviewError when something went wrong loading an individual reference.
+export function referenceError(error, refType, url) {
+    const status = statusOf(error);
+    const message = messageOf(error);
+    // The request failed to reach the server at all, or was blocked by CORS.
+    if (isNetworkError(error))
+        return new ReferenceNetworkError(refType, url);
+    // If we have an HTTP status code, the server responded.
+    if (status !== undefined)
+        return new ReferenceLoadError(refType, status, url);
+    // Anything else.
+    return new ReferenceReadError(refType, message ?? 'An unknown error occurred while reading this reference.', url);
+}

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

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, afterEach } from "@stencil/vitest";
+import { HttpError, PreviewError, fetchOrThrow, recordError, referenceError } from "./errors";
+describe('errors', () => {
+    afterEach(() => vi.restoreAllMocks());
+    describe('HttpError', () => {
+        it('captures the status, statusText, and url', () => {
+            const error = new HttpError('http://example.com/x', 404, 'Not Found');
+            expect(error).toBeInstanceOf(Error);
+            expect(error.name).toBe('HttpError');
+            expect(error.status).toBe(404);
+            expect(error.statusText).toBe('Not Found');
+            expect(error.url).toBe('http://example.com/x');
+            expect(error.message).toContain('404');
+        });
+    });
+    describe('fetchOrThrow', () => {
+        it('returns the response when the status is ok', async () => {
+            const response = new Response('{}', { status: 200 });
+            vi.spyOn(global, 'fetch').mockResolvedValueOnce(response);
+            await expect(fetchOrThrow('http://example.com/ok')).resolves.toBe(response);
+        });
+        it('throws an HttpError when the status is not ok', async () => {
+            vi.spyOn(global, 'fetch').mockResolvedValueOnce(new Response('nope', { status: 500, statusText: 'Server Error' }));
+            await expect(fetchOrThrow('http://example.com/bad')).rejects.toMatchObject({ name: 'HttpError', status: 500, url: 'http://example.com/bad' });
+        });
+        it('propagates a network error (TypeError) unchanged', async () => {
+            const networkError = new TypeError('Failed to fetch');
+            vi.spyOn(global, 'fetch').mockRejectedValueOnce(networkError);
+            await expect(fetchOrThrow('http://example.com/cors')).rejects.toBe(networkError);
+        });
+    });
+    describe('recordError', () => {
+        it('always returns a PreviewError (and therefore an Error), carrying a usable message', () => {
+            const error = recordError(new Error('boom'), 'http://example.com/r');
+            expect(error).toBeInstanceOf(PreviewError);
+            expect(error).toBeInstanceOf(Error);
+            // Guards the class-field pitfall where redeclaring `message` blanks the value super() sets.
+            expect(error.message).toBeTruthy();
+        });
+        it('classifies an HttpError as an HTTP load error and includes the status', () => {
+            const error = recordError(new HttpError('http://example.com/r', 403, 'Forbidden'), 'http://example.com/r');
+            expect(error.title).toBe("This record couldn't be loaded");
+            expect(error.message).toContain('403');
+            expect(error.url).toBe('http://example.com/r');
+        });
+        it('classifies a SyntaxError as a parse error', () => {
+            const error = recordError(new SyntaxError('Unexpected token < in JSON'), 'http://example.com/r');
+            expect(error.title).toBe("This record couldn't be parsed");
+            expect(error.message).toMatch(/JSON/);
+        });
+        it('classifies a fetch TypeError as a network/CORS error', () => {
+            const error = recordError(new TypeError('Failed to fetch'), 'http://example.com/r');
+            expect(error.title).toBe("This record couldn't be reached");
+            expect(error.message).toMatch(/CORS/);
+        });
+        it('falls back to a read error for other failures (e.g. an unsupported metadata version)', () => {
+            const error = recordError(new Error('Unsupported metadata version: GeoBlacklight'), 'http://example.com/r');
+            expect(error.title).toBe("This record couldn't be read");
+            expect(error.message).toContain('Unsupported metadata version');
+        });
+    });
+    describe('referenceError', () => {
+        it('names the source in the title and keeps the url', () => {
+            const error = referenceError(new TypeError('Failed to fetch'), 'GeoJSON', 'http://example.com/data.json');
+            expect(error).toBeInstanceOf(PreviewError);
+            expect(error.title).toContain('GeoJSON');
+            expect(error.url).toBe('http://example.com/data.json');
+        });
+        it('classifies an HttpError as an HTTP load error', () => {
+            const error = referenceError(new HttpError('http://example.com/wms', 502, 'Bad Gateway'), 'WMS');
+            expect(error.title).toBe("The WMS preview couldn't be loaded");
+            expect(error.message).toContain('502');
+        });
+        it('reads a numeric status off a library error object (e.g. MapLibre AjaxError)', () => {
+            const error = referenceError({ status: 404, message: 'not found' }, 'XYZ tiles');
+            expect(error.title).toBe("The XYZ tiles preview couldn't be loaded");
+            expect(error.message).toContain('404');
+        });
+        it('classifies a fetch TypeError as a network/CORS error', () => {
+            const error = referenceError(new TypeError('Failed to fetch'), 'IIIF Image');
+            expect(error.title).toBe("The IIIF Image preview couldn't be reached");
+            expect(error.message).toMatch(/CORS/);
+        });
+        it('falls back to a read error for a non-HTTP, non-network failure', () => {
+            const error = referenceError(new Error('open-failed'), 'IIIF Image');
+            expect(error.title).toBe("The IIIF Image preview couldn't be read");
+            expect(error.message).toContain('open-failed');
+        });
+        it('treats a status-0 error (MapLibre CORS/network block) as a network error, not "HTTP 0"', () => {
+            const error = referenceError({ status: 0, message: 'Failed to fetch' }, 'Web Map Service (WMS)');
+            expect(error.title).toBe("The Web Map Service (WMS) preview couldn't be reached");
+            expect(error.message).toMatch(/CORS/);
+            expect(error.message).not.toContain('HTTP 0');
+        });
+    });
+});

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

@@ -7,26 +7,33 @@ import Previewer from "./previewer";
 // NOTE: can't be built currently due to a bug; see:
 // https://github.com/OpenGeoMetadata/ogm-viewer/issues/100
 export default class DeckCogPreviewer extends Previewer {
+    // Store reference to the map and styles
+    style;
     map;
+    // Store reference to the deck.gl overlay and the layer ID for cleanup
     deckOverlay;
     layerId = undefined;
-    bounds = undefined;
-    constructor(source, map) {
+    // Bounds so we don't recalculate them
+    bounds;
+    // Current opacity state
+    opacity;
+    // Initialize with opacity at the theme's opacity value
+    constructor(source, map, style) {
         super(source);
         this.map = map;
+        this.style = style;
+        this.opacity = this.style.opacity;
         this.deckOverlay = this.getDeckOverlay();
     }
     async preview() {
         if (!this.layerId) {
             const layer = this.createLayer();
-            console.debug('Created COG preview layer', layer.id);
             this.layerId = layer.id;
             this.deckOverlay.setProps({ layers: [layer] });
         }
     }
     async clearPreview() {
         if (this.layerId) {
-            console.debug('Clearing COG preview layer', this.layerId);
             this.deckOverlay.setProps({ layers: [] });
             this.layerId = undefined;
         }
@@ -37,9 +44,8 @@ export default class DeckCogPreviewer extends Previewer {
     createLayer() {
         return new COGLayer({
             id: this.getSourceId(),
-            geotiff: this.source.getSourceUrl(),
-            onGeoTIFFLoad: (data, options) => {
-                console.debug('COG loaded', data, options);
+            geotiff: this.source.getMapLibreSourceUrl(),
+            onGeoTIFFLoad: (_data, options) => {
                 const { west, south, east, north } = options.geographicBounds;
                 this.bounds = [
                     [west, south],
@@ -56,6 +62,7 @@ export default class DeckCogPreviewer extends Previewer {
             }),
         });
     }
+    // We get bounds for free from geoTIFF metadata
     async getBounds() {
         return this.bounds;
     }
@@ -64,7 +71,6 @@ export default class DeckCogPreviewer extends Previewer {
         // No built-in way to query existing controls...
         const overlay = this.map._controls.find(control => control instanceof DeckOverlay);
         if (overlay) {
-            console.debug('Deck.gl overlay exists; skipping creation', overlay);
             return overlay;
         }
         return this.createDeckOverlay();
@@ -73,7 +79,6 @@ export default class DeckCogPreviewer extends Previewer {
     createDeckOverlay() {
         const overlay = new DeckOverlay({ interleaved: true });
         this.map.addControl(overlay);
-        console.debug('Deck.gl overlay created', overlay);
         return overlay;
     }
 }

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

@@ -6,15 +6,15 @@ 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, options) {
-        super(source, map, options);
+    constructor(source, map, style) {
+        super(source, 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.getSourceUrl(),
+            url: await this.source.getMapLibreSourceUrl(),
             tileSize: this.source.getTileSize(),
         };
     }

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

@@ -2,8 +2,9 @@ import VectorPreviewer from "./vector";
 export default class GeoJSONPreviewer extends VectorPreviewer {
     async createSource() {
         return {
-            type: await this.source.getType(),
-            data: await this.source.getSourceUrl(),
+            type: await this.source.getMapLibreSourceType(),
+            data: await this.source.getMapLibreSourceUrl(),
+            generateId: true,
         };
     }
 }

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

@@ -1,42 +1,38 @@
 import Previewer from "./previewer";
-const defaultOptions = {
-    padding: 40,
-    opacity: 1,
-};
 export default class MapLibrePreviewer extends Previewer {
+    // Store reference to the map and styles
+    style;
     map;
-    options;
-    opacity;
+    // Stored state for added source and layers to allow for cleanup
     sourceId = null;
     layerIds = [];
-    constructor(source, map, options) {
+    // Current opacity state
+    opacity;
+    // Initialize with opacity at the theme's opacity value
+    constructor(source, map, style) {
         super(source);
         this.map = map;
-        this.options = { ...defaultOptions, ...options };
-        this.opacity = this.options.opacity;
+        this.style = style;
+        this.opacity = this.style.opacity;
     }
     // Add source and preview layers if they don't already exist
     async preview() {
         if (!this.sourceId) {
             if (this.map.getSource(this.getSourceId())) {
-                console.debug(`MapLibre source ${this.getSourceId()} exists; skipping creation`);
                 return;
             }
             const source = await this.createSource();
             this.map.addSource(this.getSourceId(), source);
             this.sourceId = this.getSourceId();
-            console.debug('Added MapLibre source', this.getSourceId(), source);
         }
         if (this.layerIds.length == 0) {
             const layers = await this.createLayers();
             layers.forEach(layer => {
                 if (this.map.getLayer(layer.id)) {
-                    console.debug(`MapLibre layer ${layer.id} exists; skipping creation`);
                     return;
                 }
                 this.map.addLayer(layer);
                 this.layerIds.push(layer.id);
-                console.debug('Added MapLibre layer', layer.id);
             });
         }
     }
@@ -44,13 +40,11 @@ export default class MapLibrePreviewer extends Previewer {
     async clearPreview() {
         this.layerIds.forEach(layerId => {
             if (this.map.getLayer(layerId)) {
-                console.debug('Removing MapLibre layer', layerId);
                 this.map.removeLayer(layerId);
             }
         });
         this.layerIds = [];
         if (this.sourceId && this.map.getSource(this.getSourceId())) {
-            console.debug('Removing MapLibre source', this.getSourceId());
             this.map.removeSource(this.getSourceId());
             this.sourceId = null;
         }

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

@@ -4,7 +4,7 @@ export default class PMTilesRasterPreviewer extends RasterPreviewer {
     async createSource() {
         return {
             type: 'raster',
-            url: await this.source.getSourceUrl(),
+            url: await this.source.getMapLibreSourceUrl(),
         };
     }
     getSourceId() {

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

@@ -3,7 +3,7 @@ export default class PMTilesVectorPreviewer extends VectorPreviewer {
     async createSource() {
         return {
             type: 'vector',
-            url: this.source.getSourceUrl(),
+            url: this.source.getMapLibreSourceUrl(),
             encoding: await this.source.getVectorEncoding(),
         };
     }
@@ -14,6 +14,12 @@ export default class PMTilesVectorPreviewer extends VectorPreviewer {
             'source-layer': layerId,
         };
     }
+    createPolygonOutlineLayer(layerId) {
+        return {
+            ...super.createPolygonOutlineLayer(layerId),
+            'source-layer': layerId,
+        };
+    }
     createLineLayer(layerId) {
         return {
             ...super.createLineLayer(layerId),

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

@@ -3,7 +3,7 @@ export default class RasterPreviewer extends MapLibrePreviewer {
     async createSource() {
         return {
             type: 'raster',
-            tiles: [await this.source.getSourceUrl()],
+            tiles: [await this.source.getMapLibreSourceUrl()],
             scheme: this.source.getScheme(),
             tileSize: this.source.getTileSize(),
         };