ogm-viewer 0.5.1 → 0.6.1

package/dist/collection/lib/previewers/pmtiles.test.js

@@ -0,0 +1,62 @@
+import { describe, it, expect } from "@stencil/vitest";
+import PMTilesRasterPreviewer from "./pmtiles-raster";
+import PMTilesResource from "../resources/pmtiles";
+// Just enough of a MapLibre map to record what the previewer adds
+class FakeMap {
+    sources = new Map();
+    layers = new Map();
+    getSource(id) {
+        return this.sources.get(id);
+    }
+    addSource(id, spec) {
+        this.sources.set(id, spec);
+    }
+    removeSource(id) {
+        this.sources.delete(id);
+    }
+    getLayer(id) {
+        return this.layers.get(id);
+    }
+    addLayer(layer) {
+        // MapLibre refuses a layer whose source hasn't been added yet
+        if (!this.sources.has(layer.source))
+            throw new Error(`No source ${layer.source} for layer ${layer.id}`);
+        this.layers.set(layer.id, layer);
+    }
+    removeLayer(id) {
+        this.layers.delete(id);
+    }
+}
+// The previewer only reads the opacity
+const style = { opacity: 0.8 };
+const PMTILES_URL = 'https://example.com/tiles.pmtiles';
+// Nothing here reads the archive: the source is built from the URL alone, and the header is only
+// touched for bounds
+const preview = async () => {
+    const map = new FakeMap();
+    const previewer = new PMTilesRasterPreviewer(new PMTilesResource('princeton-fk4544658v', PMTILES_URL), map, style);
+    await previewer.preview();
+    return { map, previewer };
+};
+describe('PMTilesRasterPreviewer#preview', () => {
+    it('hands MapLibre the URL behind the pmtiles:// protocol', async () => {
+        const { map, previewer } = await preview();
+        const source = map.sources.get('princeton-fk4544658v-pmtiles');
+        expect(source.type).toEqual('raster');
+        expect(source.url).toEqual(`pmtiles://${PMTILES_URL}`);
+        expect(previewer.sourceIds).toEqual(['princeton-fk4544658v-pmtiles']);
+    });
+    it('draws its raster layer from the source it added', async () => {
+        const { map, previewer } = await preview();
+        // A layer pointing at any other ID would be dropped by MapLibre, drawing nothing
+        expect([...map.layers.values()].every(layer => map.sources.has(layer.source))).toBe(true);
+        expect([...map.layers.keys()]).toEqual(['princeton-fk4544658v-pmtiles']);
+        expect(previewer.layerIds).toEqual(['princeton-fk4544658v-pmtiles']);
+    });
+    it('removes what it added when cleared', async () => {
+        const { map, previewer } = await preview();
+        await previewer.clearPreview();
+        expect(map.sources.size).toEqual(0);
+        expect(map.layers.size).toEqual(0);
+    });
+});

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(),
+            },
+        ];
+    }
+}

package/dist/collection/lib/previewers/tilejson.test.js

@@ -0,0 +1,140 @@
+import { describe, it, expect, vi, afterEach } from "@stencil/vitest";
+import TileJsonRasterPreviewer from "./tilejson-raster";
+import TileJsonVectorPreviewer from "./tilejson-vector";
+import TileJsonResource from "../resources/tilejson";
+// Just enough of a MapLibre map to record what the previewer adds
+class FakeMap {
+    sources = new Map();
+    layers = new Map();
+    getSource(id) {
+        return this.sources.get(id);
+    }
+    addSource(id, spec) {
+        this.sources.set(id, spec);
+    }
+    removeSource(id) {
+        this.sources.delete(id);
+    }
+    getLayer(id) {
+        return this.layers.get(id);
+    }
+    addLayer(layer) {
+        // MapLibre refuses a layer whose source hasn't been added yet
+        if (!this.sources.has(layer.source))
+            throw new Error(`No source ${layer.source} for layer ${layer.id}`);
+        this.layers.set(layer.id, layer);
+    }
+    removeLayer(id) {
+        this.layers.delete(id);
+    }
+}
+// The previewers only read the colors and label styles, none of which these tests assert on
+const style = { opacity: 0.8, fillColor: '#00f', strokeColor: '#009', textColor: '#000', textFont: 'Noto Sans Regular', textSize: 12 };
+const TILEJSON_URL = 'https://example.com/tilejson.json';
+const BALKANS_BOUNDS = [19.333333, 39.75, 29.333333, 43.083333];
+// A raster tileset, as a service like titiler describes one
+const rasterDoc = {
+    tilejson: '3.0.0',
+    tiles: ['https://example.com/tiles/{z}/{x}/{y}@1x.png'],
+    minzoom: 0,
+    maxzoom: 16,
+    bounds: BALKANS_BOUNDS,
+};
+// A vector tileset with more than one layer in its tiles
+const vectorDoc = {
+    tilejson: '3.0.0',
+    tiles: ['https://example.com/tiles/{z}/{x}/{y}.pbf'],
+    vector_layers: [{ id: 'districts' }, { id: 'places' }],
+    bounds: BALKANS_BOUNDS,
+};
+// Serve a TileJSON document at the source URL. Every source fetches it lazily, so nothing has been
+// requested until the previewer asks.
+const serve = (doc) => {
+    vi.spyOn(global, 'fetch').mockResolvedValue(new Response(JSON.stringify(doc)));
+    return new TileJsonResource('princeton-fk4544658v', TILEJSON_URL);
+};
+afterEach(() => vi.restoreAllMocks());
+describe('TileJsonRasterPreviewer#preview', () => {
+    const preview = async (doc) => {
+        const map = new FakeMap();
+        const previewer = new TileJsonRasterPreviewer(serve(doc), map, style);
+        await previewer.preview();
+        return { map, previewer };
+    };
+    it('hands MapLibre the document URL rather than the tile template', async () => {
+        const { map } = await preview(rasterDoc);
+        const source = map.sources.get('princeton-fk4544658v-tilejson');
+        expect(source.type).toEqual('raster');
+        expect(source.url).toEqual(TILEJSON_URL);
+        expect(source.tiles).toBeUndefined();
+    });
+    it('draws the tiles at 256px, the size a template implies', async () => {
+        const { map } = await preview(rasterDoc);
+        expect(map.sources.get('princeton-fk4544658v-tilejson').tileSize).toEqual(256);
+    });
+    it('defers to a tile size the document declares', async () => {
+        const { map } = await preview({ ...rasterDoc, tileSize: 512 });
+        expect(map.sources.get('princeton-fk4544658v-tilejson').tileSize).toEqual(512);
+    });
+    it('adds a single raster layer over the source', async () => {
+        const { map, previewer } = await preview(rasterDoc);
+        expect([...map.layers.keys()]).toEqual(['princeton-fk4544658v-tilejson']);
+        expect(map.layers.get('princeton-fk4544658v-tilejson').type).toEqual('raster');
+        expect(previewer.layerIds).toEqual(['princeton-fk4544658v-tilejson']);
+    });
+    it('takes its bounds from the document', async () => {
+        const { previewer } = await preview(rasterDoc);
+        expect(await previewer.getBounds()).toEqual([
+            [19.333333, 39.75],
+            [29.333333, 43.083333],
+        ]);
+    });
+    it('has no bounds when the document leaves them out', async () => {
+        const { bounds: _bounds, ...doc } = rasterDoc;
+        const { previewer } = await preview(doc);
+        expect(await previewer.getBounds()).toBeUndefined();
+    });
+    it('removes what it added when cleared', async () => {
+        const { map, previewer } = await preview(rasterDoc);
+        await previewer.clearPreview();
+        expect(map.sources.size).toEqual(0);
+        expect(map.layers.size).toEqual(0);
+    });
+});
+describe('TileJsonVectorPreviewer#preview', () => {
+    const preview = async (doc) => {
+        const map = new FakeMap();
+        const previewer = new TileJsonVectorPreviewer(serve(doc), map, style);
+        await previewer.preview();
+        return { map, previewer };
+    };
+    it('hands MapLibre the document URL and the tile encoding', async () => {
+        const { map } = await preview(vectorDoc);
+        const source = map.sources.get('princeton-fk4544658v-tilejson');
+        expect(source.type).toEqual('vector');
+        expect(source.url).toEqual(TILEJSON_URL);
+        expect(source.encoding).toEqual('mvt');
+    });
+    it('asks for MapLibre Tile decoding when the tiles are .mlt', async () => {
+        const { map } = await preview({ ...vectorDoc, tiles: ['https://example.com/tiles/{z}/{x}/{y}.mlt'] });
+        expect(map.sources.get('princeton-fk4544658v-tilejson').encoding).toEqual('mlt');
+    });
+    it('styles every layer the document lists', async () => {
+        const { map } = await preview(vectorDoc);
+        const suffixes = ['polygons', 'polygon-outlines', 'lines', 'points', 'polygon-labels', 'line-labels', 'point-labels'];
+        expect([...map.layers.keys()]).toEqual(['districts', 'places'].flatMap(layer => suffixes.map(suffix => `princeton-fk4544658v-tilejson-${layer}-${suffix}`)));
+    });
+    it('names the layer within the tiles that each style layer reads', async () => {
+        const { map } = await preview(vectorDoc);
+        // Without this a layer would draw from whichever layer of the tiles came first
+        expect(map.layers.get('princeton-fk4544658v-tilejson-places-points')['source-layer']).toEqual('places');
+        expect([...map.layers.values()].every(layer => layer['source-layer'])).toBe(true);
+    });
+    it('takes its bounds from the document', async () => {
+        const { previewer } = await preview(vectorDoc);
+        expect(await previewer.getBounds()).toEqual([
+            [19.333333, 39.75],
+            [29.333333, 43.083333],
+        ]);
+    });
+});

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

@@ -1,5 +1,8 @@
-import MapLibrePreviewer from "./maplibre";
-export default class VectorPreviewer extends MapLibrePreviewer {
+import MapPreviewer from "./map";
+export default class VectorPreviewer extends MapPreviewer {
+    getSourceId() {
+        return this.resource.id;
+    }
     // Set opacity of all layers in this previewer
     async setOpacity(opacity) {
         this.opacity = opacity;
@@ -8,10 +11,10 @@ export default class VectorPreviewer extends MapLibrePreviewer {
         }
     }
     async getBounds() {
-        return await this.source.getBounds();
+        return await this.resource.getBounds();
     }
     async createLayers() {
-        const layerIds = await this.source.getVectorLayers();
+        const layerIds = await this.resource.getVectorLayers();
         return layerIds.flatMap(layerId => {
             return [
                 this.createPolygonLayer(layerId),

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

@@ -1,14 +1,94 @@
 import RasterPreviewer from "./raster";
+// Contents of the highlight source when nothing is selected
+const NO_FEATURES = { type: 'FeatureCollection', features: [] };
 export default class WmsPreviewer extends RasterPreviewer {
     // WMS sources have no scheme
-    async createSource() {
+    async createSources() {
+        return [
+            {
+                id: this.getSourceId(),
+                type: 'raster',
+                tiles: [await this.resource.getMapLibreSourceUrl()],
+                tileSize: this.resource.getTileSize(),
+            },
+        ];
+    }
+    getSourceId() {
+        return `${this.resource.id}-wms`;
+    }
+    // The server draws the tiles, so unlike a vector preview there are no client-side features to
+    // restyle when one is selected. GetFeatureInfo does hand back the geometry it matched, so we
+    // keep a GeoJSON source alongside the tiles and draw the selection into it.
+    get highlightSourceId() {
+        return `${this.getSourceId()}-highlight`;
+    }
+    // Add the highlight source ahead of the layers that draw from it
+    async preview() {
+        if (!this.map.getSource(this.highlightSourceId)) {
+            this.map.addSource(this.highlightSourceId, { type: 'geojson', data: NO_FEATURES });
+        }
+        await super.preview();
+    }
+    // The highlight layers go with the rest of the preview, since they're tracked in layerIds,
+    // but the extra source is ours to clean up
+    async clearPreview() {
+        await super.clearPreview();
+        if (this.map.getSource(this.highlightSourceId)) {
+            this.map.removeSource(this.highlightSourceId);
+        }
+    }
+    // Outline the given features on top of the tiles, replacing any previous highlight
+    highlightFeatures(features) {
+        const data = {
+            type: 'FeatureCollection',
+            // A server can answer with attributes and no geometry, which we have nothing to draw for
+            features: features.filter(feature => feature.geometry).map(({ id, geometry }) => ({ type: 'Feature', id, geometry, properties: {} })),
+        };
+        this.highlightSource?.setData(data);
+    }
+    // Drop the highlight, leaving the tiles alone
+    clearHighlight() {
+        this.highlightSource?.setData(NO_FEATURES);
+    }
+    // Delegate inspection to the source, which makes the GetFeatureInfo request
+    async inspect(options) {
+        return await this.resource.inspect(options);
+    }
+    // Tiles first, so the highlight draws over them
+    async createLayers() {
+        return [...(await super.createLayers()), this.createHighlightOutlineLayer(), this.createHighlightPointLayer()];
+    }
+    // Outline for selected polygons and lines
+    createHighlightOutlineLayer() {
         return {
-            type: 'raster',
-            tiles: [await this.source.getMapLibreSourceUrl()],
-            tileSize: this.source.getTileSize(),
+            id: `${this.highlightSourceId}-outlines`,
+            type: 'line',
+            source: this.highlightSourceId,
+            paint: {
+                'line-color': this.style.strokeSelectedColor,
+                'line-width': 2,
+            },
+            filter: ['!=', ['geometry-type'], 'Point'],
         };
     }
-    getSourceId() {
-        return `${this.source.id}-wms`;
+    // Outline for selected points
+    createHighlightPointLayer() {
+        return {
+            id: `${this.highlightSourceId}-points`,
+            type: 'circle',
+            source: this.highlightSourceId,
+            paint: {
+                'circle-color': this.style.fillSelectedColor,
+                'circle-opacity': this.style.fillHighlightOpacity,
+                'circle-stroke-color': this.style.strokeSelectedColor,
+                'circle-stroke-width': 2,
+                'circle-radius': ['interpolate', ['linear'], ['zoom'], 4, 2, 12, 4],
+            },
+            filter: ['==', ['geometry-type'], 'Point'],
+        };
+    }
+    // The MapLibre source holding the highlighted geometry
+    get highlightSource() {
+        return this.map.getSource(this.highlightSourceId);
     }
 }

package/dist/collection/lib/previewers/wms.test.js

@@ -0,0 +1,133 @@
+import { describe, it, expect, beforeEach } from "@stencil/vitest";
+import WmsPreviewer from "./wms";
+import WmsResource from "../resources/wms";
+// Just enough of a MapLibre map to record what the previewer adds, removes and draws
+class FakeMap {
+    sources = new Map();
+    layers = new Map();
+    getSource(id) {
+        const source = this.sources.get(id);
+        if (!source)
+            return undefined;
+        return { ...source, setData: (data) => (source.data = data) };
+    }
+    addSource(id, spec) {
+        this.sources.set(id, { ...spec });
+    }
+    removeSource(id) {
+        this.sources.delete(id);
+    }
+    getLayer(id) {
+        return this.layers.get(id);
+    }
+    addLayer(layer) {
+        // MapLibre refuses a layer whose source hasn't been added yet
+        if (!this.sources.has(layer.source))
+            throw new Error(`No source ${layer.source} for layer ${layer.id}`);
+        this.layers.set(layer.id, layer);
+    }
+    removeLayer(id) {
+        this.layers.delete(id);
+    }
+}
+// The previewer only reads the colors used by the highlight
+const style = { opacity: 0.8, strokeSelectedColor: '#0a0', fillSelectedColor: '#0f0', fillHighlightOpacity: 0.8 };
+const TRACT_GEOMETRY = {
+    type: 'MultiPolygon',
+    coordinates: [
+        [
+            [
+                [-120.4, 38.3],
+                [-120.3, 38.3],
+                [-120.3, 38.4],
+                [-120.4, 38.3],
+            ],
+        ],
+    ],
+};
+// A tract as GetFeatureInfo returns it, already reprojected to degrees by the caller. These are
+// plain objects rather than real MapGeoJSONFeatures, which is also what the caller hands over.
+const tract = (id, geometry = TRACT_GEOMETRY) => ({ type: 'Feature', id, geometry, properties: { TRACT: '0301' } });
+const HIGHLIGHT_SOURCE = 's7st30-wms-highlight';
+let map;
+let previewer;
+beforeEach(async () => {
+    map = new FakeMap();
+    const source = new WmsResource('s7st30', 'https://geoservices.lib.berkeley.edu/geoserver/wms', { layerIds: [] });
+    previewer = new WmsPreviewer(source, map, style);
+    await previewer.preview();
+});
+describe('WmsPreviewer#preview', () => {
+    it('adds a highlight source alongside the tiles', () => {
+        expect([...map.sources.keys()]).toEqual(['s7st30-wms-highlight', 's7st30-wms']);
+        expect(map.sources.get(HIGHLIGHT_SOURCE)?.type).toEqual('geojson');
+    });
+    it('draws the highlight over the tiles', () => {
+        // Order is paint order: the raster layer first, then the layers that highlight over it
+        expect([...map.layers.keys()]).toEqual(['s7st30-wms', 's7st30-wms-highlight-outlines', 's7st30-wms-highlight-points']);
+        expect(previewer.layerIds).toEqual([...map.layers.keys()]);
+    });
+    it('outlines polygons and lines but circles only points', () => {
+        const outlines = map.layers.get('s7st30-wms-highlight-outlines');
+        const points = map.layers.get('s7st30-wms-highlight-points');
+        expect(outlines?.type).toEqual('line');
+        expect(points?.type).toEqual('circle');
+        // Both draw from the highlight source, not from the tiles
+        expect(outlines?.source).toEqual(HIGHLIGHT_SOURCE);
+        expect(points?.source).toEqual(HIGHLIGHT_SOURCE);
+    });
+    it('starts with nothing highlighted', () => {
+        expect(map.sources.get(HIGHLIGHT_SOURCE)?.data).toEqual({ type: 'FeatureCollection', features: [] });
+    });
+});
+describe('WmsPreviewer#highlightFeatures', () => {
+    it('draws the geometry of the given features', () => {
+        previewer.highlightFeatures([tract('s7st30.18')]);
+        const data = map.sources.get(HIGHLIGHT_SOURCE)?.data;
+        expect(data.features).toHaveLength(1);
+        expect(data.features[0].id).toEqual('s7st30.18');
+        expect(data.features[0].geometry).toEqual(TRACT_GEOMETRY);
+    });
+    it('replaces the previous highlight rather than adding to it', () => {
+        previewer.highlightFeatures([tract('s7st30.18')]);
+        previewer.highlightFeatures([tract('s7st30.19')]);
+        const data = map.sources.get(HIGHLIGHT_SOURCE)?.data;
+        expect(data.features).toHaveLength(1);
+        expect(data.features[0].id).toEqual('s7st30.19');
+    });
+    it('draws every feature when several are selected', () => {
+        previewer.highlightFeatures([tract('s7st30.18'), tract('s7st30.19')]);
+        const data = map.sources.get(HIGHLIGHT_SOURCE)?.data;
+        expect(data.features.map(feature => feature.id)).toEqual(['s7st30.18', 's7st30.19']);
+    });
+    it('skips features a server returned without geometry', () => {
+        // The spec allows a null geometry, and a server can answer with attributes alone
+        previewer.highlightFeatures([tract('s7st30.18'), tract('s7st30.19', null)]);
+        const data = map.sources.get(HIGHLIGHT_SOURCE)?.data;
+        expect(data.features).toHaveLength(1);
+        expect(data.features[0].id).toEqual('s7st30.18');
+    });
+});
+describe('WmsPreviewer#clearHighlight', () => {
+    it('empties the highlight source but leaves the layers in place', () => {
+        previewer.highlightFeatures([tract('s7st30.18')]);
+        previewer.clearHighlight();
+        expect(map.sources.get(HIGHLIGHT_SOURCE)?.data).toEqual({ type: 'FeatureCollection', features: [] });
+        expect(map.layers.size).toEqual(3);
+    });
+});
+describe('WmsPreviewer#clearPreview', () => {
+    it('removes the highlight along with the tiles', async () => {
+        previewer.highlightFeatures([tract('s7st30.18')]);
+        await previewer.clearPreview();
+        expect(map.sources.size).toEqual(0);
+        expect(map.layers.size).toEqual(0);
+        expect(previewer.layerIds).toEqual([]);
+    });
+    it('can be previewed again afterwards', async () => {
+        await previewer.clearPreview();
+        await previewer.preview();
+        expect(map.sources.has(HIGHLIGHT_SOURCE)).toBe(true);
+        expect(map.layers.size).toEqual(3);
+    });
+});

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

@@ -0,0 +1,31 @@
+import RasterPreviewer from "./raster";
+export default class WmtsPreviewer extends RasterPreviewer {
+    layers;
+    // WMTS sources have multiple XYZ tile URLs for fallbacks, and each layer
+    // can have different tile size, zoom range, bounds, etc.
+    async createSources() {
+        const layers = await this.resource.getLayers();
+        return layers.map(layer => ({
+            id: `${this.resource.id}-${layer.id}`,
+            type: 'raster',
+            tiles: layer.tileUrls,
+            scheme: this.resource.getScheme(),
+            tileSize: layer.tileSize,
+            minzoom: layer.minzoom,
+            maxzoom: layer.maxzoom,
+            ...(layer.bounds && { bounds: layer.bounds }),
+        }));
+    }
+    // One layer per source, with the same ID as the source
+    async createLayers() {
+        const layers = await this.resource.getLayers();
+        return layers.map(layer => ({
+            id: `${this.resource.id}-${layer.id}`,
+            type: 'raster',
+            source: `${this.resource.id}-${layer.id}`,
+            paint: {
+                'raster-opacity': this.opacity,
+            },
+        }));
+    }
+}