ogm-viewer 0.5.1 → 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,35 +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() {
-        if (!this.record || !this.sources.length)
+        if (!this.record || !this.resources.length)
             return;
-        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 })))))));
+        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"; }
@@ -149,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);

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 [
             {

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

@@ -0,0 +1,47 @@
+import VectorPreviewer from "./vector";
+// A tileset (a PMTiles archive, a TileJSON tileset) can hold several named layers, so every style
+// layer drawn from one has to name the layer it reads. Subclasses supply the source itself.
+export default class TiledVectorPreviewer extends VectorPreviewer {
+    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,
+        };
+    }
+}

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

@@ -0,0 +1,27 @@
+import RasterPreviewer from "./raster";
+export default class TileJsonRasterPreviewer extends RasterPreviewer {
+    // Handed the URL of the document, MapLibre reads it itself and takes the tile templates, zoom
+    // range and scheme from there; only the tile size has to come from us
+    async createSources() {
+        return [
+            {
+                id: this.getSourceId(),
+                type: 'raster',
+                url: await this.resource.getMapLibreSourceUrl(),
+                tileSize: await this.tilejson.getTileSize(),
+            },
+        ];
+    }
+    // A record can reference the same tileset both ways, so keep the two sources distinct
+    getSourceId() {
+        return `${this.resource.id}-tilejson`;
+    }
+    // Raster tilesets have their bounds in the TileJSON document
+    async getBounds() {
+        return await this.tilejson.getBounds();
+    }
+    // A TileJSON document can describe either kind of tileset, so its source isn't a RasterSource
+    get tilejson() {
+        return this.resource;
+    }
+}

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

@@ -0,0 +1,18 @@
+import TiledVectorPreviewer from "./tiled-vector";
+export default class TileJsonVectorPreviewer extends TiledVectorPreviewer {
+    getSourceId() {
+        return `${this.resource.id}-tilejson`;
+    }
+    // Handed the URL of the document, MapLibre reads it itself and takes the tile templates and
+    // zoom range from there, so 'url' is all the source needs
+    async createSources() {
+        return [
+            {
+                id: this.getSourceId(),
+                type: 'vector',
+                url: this.resource.getMapLibreSourceUrl(),
+                encoding: await this.resource.getVectorEncoding(),
+            },
+        ];
+    }
+}