ogm-viewer 0.5.1 → 0.6.1

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

@@ -0,0 +1,317 @@
+import { LngLatBounds } from "maplibre-gl";
+import RasterResource from "./raster";
+// Half the circumference of the Web Mercator world in meters. The XYZ grid hangs from
+// (-XYZ_ORIGIN, XYZ_ORIGIN), the northwest corner of the world.
+const XYZ_ORIGIN = 20037508.342789244;
+// How far a set's stated origin may sit from that corner and still count as the same grid.
+// Services round the value to varying precision; half a meter is far below one pixel at any
+// zoom a WMTS publishes.
+const ORIGIN_TOLERANCE = 0.5;
+// Codes that all mean Web Mercator: the EPSG one, the deprecated OGC one, and the ESRI one
+const WEB_MERCATOR_CODES = ['3857', '900913', '102100'];
+// The latitude the Web Mercator world stops at. A layer may claim an extent that runs to the
+// pole, but there is no map there to bound it against.
+const MERCATOR_MAX_LATITUDE = 85.051129;
+// Layers (potentially multiple) accessed via WMTS GetTile requests
+// NOTE: in Aardvark, the reference URL is the GetCapabilities URL, not the tile URL
+export default class WmtsResource extends RasterResource {
+    options;
+    // Memoized metadata via GetCapabilities request
+    metadata;
+    constructor(id, url, options, bounds) {
+        super(id, url, bounds);
+        this.options = options;
+        // Assume we're using one layer with the given ID if no layer IDs are provided
+        if (!this.options.layerIds || this.options.layerIds.length === 0) {
+            this.options.layerIds = [id];
+        }
+    }
+    label() {
+        return 'Web Map Tile Service (WMTS)';
+    }
+    // Fetch and memoize WMTS GetCapabilities XML document
+    async getMetadata() {
+        if (!this.metadata) {
+            const resp = await fetch(this.url);
+            const text = await resp.text();
+            this.metadata = new DOMParser().parseFromString(text, 'application/xml');
+        }
+        return this.metadata;
+    }
+    // Build a spec for each layer we were asked for. Layers published only in tile grids
+    // MapLibre can't draw are dropped, and if that leaves nothing we raise rather than
+    // hand back an empty preview.
+    async getLayers() {
+        const metadata = await this.getMetadata();
+        const tileMatrixSets = this.getTileMatrixSets(metadata);
+        // Narrow to the requested layers before building anything: a service like NASA GIBS
+        // lists close to a thousand, and each one costs a walk of its subtree.
+        const elements = Array.from(metadata.getElementsByTagName('Layer')).filter(element => this.isRequested(element));
+        if (elements.length === 0)
+            throw new Error(`This service doesn't publish a layer named ${this.options.layerIds.join(', ')}.`);
+        const layers = elements.map(element => this.createLayer(element, tileMatrixSets)).filter(layer => layer !== undefined);
+        if (layers.length === 0)
+            throw new Error(this.unsupportedGridMessage(elements, tileMatrixSets));
+        return layers;
+    }
+    // Whether a <Layer> element is one of the layers this resource was constructed for.
+    // An empty list means every layer in the document, which can be a lot of them.
+    isRequested(element) {
+        if (this.options.layerIds.length === 0)
+            return true;
+        const layerId = element.getElementsByTagName('ows:Identifier')[0]?.textContent?.trim();
+        return this.options.layerIds.includes(layerId ?? '');
+    }
+    // Create a WmtsLayer spec from a <Layer> element in the GetCapabilities document, or
+    // undefined if none of the grids it's published in can be drawn
+    createLayer(element, tileMatrixSets) {
+        // Get the identifier and title of the layer
+        const layerId = element.getElementsByTagName('ows:Identifier')[0]?.textContent;
+        const title = element.getElementsByTagName('ows:Title')[0]?.textContent;
+        // Get the identifier of the style with attribute isDefault="true", or the first style if none are marked as default
+        const styles = Array.from(element.getElementsByTagName('Style'));
+        const defaultStyle = styles.find(style => style.getAttribute('isDefault') === 'true');
+        const style = defaultStyle ?? styles[0];
+        const styleId = style?.getElementsByTagName('ows:Identifier')[0]?.textContent?.trim();
+        // Use the first grid the layer offers that MapLibre can actually draw, which is not
+        // necessarily the first one listed: services often lead with a national grid
+        const tileMatrixSet = this.getLinkedTileMatrixSets(element, tileMatrixSets).find(set => set.grid);
+        const grid = tileMatrixSet?.grid;
+        if (!tileMatrixSet || !grid)
+            return undefined;
+        // Get the default values for all dimensions listed for the layer
+        // TODO: actually support adjusting these in the previewer?
+        const dimensions = Array.from(element.getElementsByTagName('Dimension'));
+        const dimensionDefaults = dimensions.reduce((acc, dimension) => {
+            const name = dimension.getElementsByTagName('ows:Identifier')[0]?.textContent?.trim();
+            const defaultValue = dimension.getElementsByTagName('Default')[0]?.textContent?.trim();
+            if (name && defaultValue) {
+                acc[name] = defaultValue;
+            }
+            return acc;
+        }, {});
+        // For each tiled ResourceURL, reformat as XYZ-style URL
+        // Each MapLibre layer will be tied to a MapLibre source with multiple tile URLs
+        const templates = Array.from(element.getElementsByTagName('ResourceURL'))
+            .filter(resourceUrl => resourceUrl.getAttribute('resourceType') === 'tile')
+            .map(resourceUrl => resourceUrl.getAttribute('template') ?? '');
+        const tileUrls = this.preferKnownHost(templates).map(template => this.formatTileUrl(template, styleId, tileMatrixSet, dimensionDefaults));
+        const bounds = this.parseBounds(element) ?? this.recordBounds();
+        return {
+            id: layerId,
+            title: title,
+            tileUrls: tileUrls,
+            tileSize: this.options.tileSize ?? grid.tileSize,
+            minzoom: clamp(this.boundsMinzoom(bounds), grid.minzoom, grid.maxzoom),
+            maxzoom: grid.maxzoom,
+            bounds: bounds,
+        };
+    }
+    // The extent the layer covers, from its <ows:WGS84BoundingBox>. OWS writes both corners as
+    // "longitude latitude" in CRS84 whatever axis order the layer's own CRS uses, so the numbers
+    // come out in MapLibre's order as they are read.
+    parseBounds(element) {
+        const box = element.getElementsByTagName('ows:WGS84BoundingBox')[0];
+        if (!box)
+            return undefined;
+        const [west, south] = numericCorner(box, 'ows:LowerCorner');
+        const [east, north] = numericCorner(box, 'ows:UpperCorner');
+        if ([west, south, east, north].some(value => !Number.isFinite(value)))
+            return undefined;
+        return [west, south, east, north];
+    }
+    // The extent the record claims, for a service that publishes none of its own. Aardvark states
+    // it per record rather than per layer, so it's the coarser of the two, but it still keeps us
+    // from treating a city as if it covered the world.
+    recordBounds() {
+        if (!this.bounds)
+            return undefined;
+        const bounds = LngLatBounds.convert(this.bounds);
+        return [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
+    }
+    // The first zoom at which a single tile no longer dwarfs the layer. Below it every tile we
+    // could ask for lies mostly outside the layer, and a service that draws that emptiness
+    // instead of answering 404 - Vienna's orthophoto pads it with opaque white, JPEG having no
+    // alpha channel to leave it out with - spreads the padding across the map: at zoom 1 the one
+    // tile that touches Vienna covers a quarter of the world. Bounds alone don't help, since
+    // MapLibre keeps any tile that so much as intersects them. A tile spans 1/2^z of the world
+    // on each axis, so the layer first fills one when 2^z reaches 1 over its widest extent.
+    boundsMinzoom(bounds) {
+        if (!bounds)
+            return 0;
+        const [west, south, east, north] = bounds;
+        const width = east < west ? east - west + 360 : east - west;
+        const extent = Math.max(width / 360, mercatorY(south) - mercatorY(north));
+        // An extent of nothing is a layer we can never fit a tile to; let the caller's clamp put it
+        // at the deepest zoom the grid has rather than the shallowest
+        if (!(extent > 0))
+            return Infinity;
+        return Math.ceil(Math.log2(1 / extent));
+    }
+    // Narrow the tile templates to the host we know answers. Services list several hosts to
+    // shard requests across, but MapLibre assigns each tile to one of them by coordinate -
+    // urls[(x + y) % urls.length] - and never retries elsewhere, so one stale hostname
+    // silently costs that share of the tiles. The host that served the capabilities document
+    // is the one we have evidence for: it resolved, answered, and allowed the cross-origin
+    // read. Where any template is on that host we keep only those, and upgrade them to https
+    // if that's how we reached it, since a document served over https can still advertise its
+    // tiles over http - which the browser then blocks as mixed content. Sharding buys little
+    // over HTTP/2 anyway, where the whole point of it, the per-origin connection limit, is gone.
+    preferKnownHost(templates) {
+        const capabilities = new URL(this.url);
+        const known = templates.filter(template => hostOf(template) === capabilities.host);
+        if (known.length === 0)
+            return templates;
+        if (capabilities.protocol !== 'https:')
+            return known;
+        return known.map(template => template.replace(/^http:/, 'https:'));
+    }
+    // The tile matrix sets a layer links to, in the order it lists them. Links naming a set
+    // the document never defines are skipped.
+    getLinkedTileMatrixSets(element, tileMatrixSets) {
+        return Array.from(element.getElementsByTagName('TileMatrixSetLink'))
+            .map(link => link.getElementsByTagName('TileMatrixSet')[0]?.textContent?.trim())
+            .map(id => (id ? tileMatrixSets.get(id) : undefined))
+            .filter(set => set !== undefined);
+    }
+    // Every <TileMatrixSet> definition in the document, keyed by identifier. Each layer also
+    // nests a <TileMatrixSet> inside its <TileMatrixSetLink> elements, but those hold only an
+    // identifier; the definitions are the ones with <TileMatrix> children.
+    getTileMatrixSets(metadata) {
+        const sets = Array.from(metadata.getElementsByTagName('TileMatrixSet'))
+            .filter(element => element.getElementsByTagName('TileMatrix').length > 0)
+            .map(element => this.parseTileMatrixSet(element))
+            .filter(set => set !== undefined);
+        return new Map(sets.map(set => [set.id, set]));
+    }
+    // Read a <TileMatrixSet> definition, working out whether MapLibre can draw from it
+    parseTileMatrixSet(element) {
+        const id = element.getElementsByTagName('ows:Identifier')[0]?.textContent?.trim();
+        const crs = element.getElementsByTagName('ows:SupportedCRS')[0]?.textContent?.trim();
+        if (!id || !crs)
+            return undefined;
+        return { id, crs, grid: this.parseXyzGrid(element, crs) };
+    }
+    // Reduce a tile matrix set to the numbers MapLibre needs, or undefined if its geometry
+    // isn't the XYZ grid. MapLibre draws raster tiles from that one grid only: Web Mercator,
+    // hung from the northwest corner of the world, 2^z square tiles on a side at zoom z. Tile
+    // indices in any other grid address different ground - a geographic (EPSG:4326) grid, for
+    // instance, spaces its rows evenly in latitude and is twice as wide as it is tall - so
+    // feeding them to MapLibre draws the wrong place, or falls off the edge of the matrix.
+    parseXyzGrid(element, crs) {
+        if (!isWebMercator(crs))
+            return undefined;
+        const elements = Array.from(element.getElementsByTagName('TileMatrix'));
+        const levels = elements.map(matrix => this.parseTileMatrix(matrix)).filter(level => level !== undefined);
+        if (levels.length === 0 || levels.length !== elements.length)
+            return undefined;
+        // Every level has to agree on tile size and on how it spells its identifier, and each
+        // has to hold exactly the tiles that its zoom of the XYZ grid holds
+        const [first] = levels;
+        if (levels.some(level => level.tileWidth !== first.tileWidth || level.prefix !== first.prefix))
+            return undefined;
+        if (levels.some(level => !isXyzLevel(level)))
+            return undefined;
+        const zooms = levels.map(level => level.zoom);
+        return {
+            tileSize: first.tileWidth,
+            levelPrefix: first.prefix,
+            minzoom: Math.min(...zooms),
+            maxzoom: Math.max(...zooms),
+        };
+    }
+    // Read one <TileMatrix>, or undefined if its identifier doesn't end in a zoom level
+    parseTileMatrix(element) {
+        const identifier = element.getElementsByTagName('ows:Identifier')[0]?.textContent?.trim() ?? '';
+        const level = identifier.match(/^(.*[^0-9])?([0-9]+)$/);
+        if (!level)
+            return undefined;
+        // MapLibre writes the zoom into {z} in plain decimal, so a level spelled any other way
+        // (zero-padded, say) would give us a URL the service doesn't answer to
+        if (String(Number(level[2])) !== level[2])
+            return undefined;
+        return {
+            zoom: Number(level[2]),
+            prefix: level[1] ?? '',
+            tileWidth: numericChild(element, 'TileWidth'),
+            tileHeight: numericChild(element, 'TileHeight'),
+            matrixWidth: numericChild(element, 'MatrixWidth'),
+            matrixHeight: numericChild(element, 'MatrixHeight'),
+            topLeft: (element.getElementsByTagName('TopLeftCorner')[0]?.textContent ?? '').trim().split(/\s+/).map(Number),
+        };
+    }
+    // Rewrite the tile URL template to a MapLibre-compatible (XYZ-style) URL
+    formatTileUrl(template, style, tileMatrixSet, dimensionDefaults) {
+        let url = template
+            .replace('{TileMatrixSet}', tileMatrixSet.id)
+            .replace('{Style}', style ?? '')
+            .replace('{TileMatrix}', `${tileMatrixSet.grid?.levelPrefix ?? ''}{z}`)
+            .replace('{TileRow}', '{y}')
+            .replace('{TileCol}', '{x}');
+        if (dimensionDefaults) {
+            for (const [key, value] of Object.entries(dimensionDefaults)) {
+                url = url.replace(`{${key}}`, value);
+            }
+        }
+        return url;
+    }
+    // Explain that we found the layers but can't draw any of them, naming the grids they were
+    // published in so the mismatch is visible without reading the GetCapabilities document
+    unsupportedGridMessage(elements, tileMatrixSets) {
+        const offered = elements.flatMap(element => this.getLinkedTileMatrixSets(element, tileMatrixSets)).map(set => `${set.id} (${set.crs})`);
+        const grids = Array.from(new Set(offered)).join(', ');
+        const named = this.options.layerIds.join(', ');
+        return `This service publishes ${named} only in tile grids that can't be displayed${grids ? `: ${grids}` : ''}. Previewing WMTS needs a Web Mercator (EPSG:3857) grid, such as GoogleMapsCompatible.`;
+    }
+    // We rewrite WMTS tile URLs to XYZ-style URLs, so the scheme is always 'xyz'
+    getScheme() {
+        return 'xyz';
+    }
+}
+// WMTS advertises the CRS in any of several notations - "EPSG:3857",
+// "urn:ogc:def:crs:EPSG:6.18:3:3857", "http://www.opengis.net/def/crs/EPSG/0/3857" - all of
+// which end in the code.
+function isWebMercator(crs) {
+    const code = crs.split(/[:/]/).pop() ?? '';
+    return WEB_MERCATOR_CODES.includes(code);
+}
+// Whether a level holds exactly what its zoom of the XYZ grid holds: square tiles, 2^z of
+// them on a side, hung from the northwest corner of the world
+function isXyzLevel(matrix) {
+    const tiles = 2 ** matrix.zoom;
+    const [x, y] = matrix.topLeft;
+    return (matrix.tileWidth === matrix.tileHeight &&
+        matrix.matrixWidth === tiles &&
+        matrix.matrixHeight === tiles &&
+        Math.abs(x + XYZ_ORIGIN) <= ORIGIN_TOLERANCE &&
+        Math.abs(y - XYZ_ORIGIN) <= ORIGIN_TOLERANCE);
+}
+// The host a tile template points at, or undefined if it isn't an absolute URL. The braces
+// left in the template for MapLibre don't bother the URL parser.
+function hostOf(template) {
+    try {
+        return new URL(template).host;
+    }
+    catch {
+        return undefined;
+    }
+}
+// Read a numeric child element, or NaN when it's missing or isn't a number. NaN fails every
+// comparison the grid checks make, which is what we want from a malformed definition.
+function numericChild(element, tagName) {
+    const text = element.getElementsByTagName(tagName)[0]?.textContent?.trim();
+    return text ? Number(text) : NaN;
+}
+// One corner of an OWS bounding box, written as space-separated ordinates
+function numericCorner(element, tagName) {
+    const text = element.getElementsByTagName(tagName)[0]?.textContent?.trim() ?? '';
+    return text.split(/\s+/).map(Number);
+}
+// Where a latitude falls in the Web Mercator world, 0 at the north edge and 1 at the south
+function mercatorY(lat) {
+    const clamped = clamp(lat, -MERCATOR_MAX_LATITUDE, MERCATOR_MAX_LATITUDE);
+    return (180 - (180 / Math.PI) * Math.log(Math.tan(Math.PI / 4 + (clamped * Math.PI) / 360))) / 360;
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}

package/dist/collection/lib/resources/wmts.test.js

@@ -0,0 +1,235 @@
+/** @vitest-environment happy-dom */
+import { describe, it, expect } from "@stencil/vitest";
+import { LngLatBounds } from "maplibre-gl";
+import WmtsResource from "./wmts";
+const ENDPOINT = 'https://example.org/wmts/1.0.0/WMTSCapabilities.xml';
+// Reads a hand-built capabilities document instead of fetching one
+class TestWmtsResource extends WmtsResource {
+    xml;
+    constructor(id, url, options, xml, bounds) {
+        super(id, url, options, bounds);
+        this.xml = xml;
+    }
+    async getMetadata() {
+        return new DOMParser().parseFromString(this.xml, 'application/xml');
+    }
+}
+// One zoom of the XYZ grid: 2^z square tiles hung from the northwest corner of the world
+const mercatorLevel = (zoom, { prefix = '', tileSize = 256 } = {}) => `
+  <TileMatrix>
+    <ows:Identifier>${prefix}${zoom}</ows:Identifier>
+    <TopLeftCorner>-20037508.34278925 20037508.34278925</TopLeftCorner>
+    <TileWidth>${tileSize}</TileWidth>
+    <TileHeight>${tileSize}</TileHeight>
+    <MatrixWidth>${2 ** zoom}</MatrixWidth>
+    <MatrixHeight>${2 ** zoom}</MatrixHeight>
+  </TileMatrix>`;
+// Tiles per side at each zoom of NASA GIBS' geographic "500m" grid, which halves down from
+// 160x80 tiles of 2.25 degrees and rounds up - so it is neither square nor a quadtree
+const GEOGRAPHIC_LEVELS = [
+    [2, 1],
+    [3, 2],
+    [5, 3],
+    [10, 5],
+];
+const geographicLevel = (zoom) => `
+  <TileMatrix>
+    <ows:Identifier>${zoom}</ows:Identifier>
+    <TopLeftCorner>-180 90</TopLeftCorner>
+    <TileWidth>512</TileWidth>
+    <TileHeight>512</TileHeight>
+    <MatrixWidth>${GEOGRAPHIC_LEVELS[zoom][0]}</MatrixWidth>
+    <MatrixHeight>${GEOGRAPHIC_LEVELS[zoom][1]}</MatrixHeight>
+  </TileMatrix>`;
+const tileMatrixSet = (id, crs, levels) => `
+  <TileMatrixSet>
+    <ows:Identifier>${id}</ows:Identifier>
+    <ows:SupportedCRS>${crs}</ows:SupportedCRS>
+    ${levels}
+  </TileMatrixSet>`;
+const ZOOMS = [0, 1, 2, 3];
+const MERCATOR_SET = tileMatrixSet('GoogleMapsCompatible_Level3', 'urn:ogc:def:crs:EPSG:6.18:3:3857', ZOOMS.map(zoom => mercatorLevel(zoom)).join(''));
+const GEOGRAPHIC_SET = tileMatrixSet('500m', 'urn:ogc:def:crs:OGC:1.3:CRS84', ZOOMS.map(geographicLevel).join(''));
+// GeoServer and friends qualify the level with the grid it belongs to
+const QUALIFIED_SET = tileMatrixSet('EPSG:900913', 'EPSG:900913', ZOOMS.map(zoom => mercatorLevel(zoom, { prefix: 'EPSG:900913:' })).join(''));
+// Web Mercator, but with a level that doesn't hold the 2^z by 2^z tiles that zoom has
+const RAGGED_SET = tileMatrixSet('ragged', 'EPSG:3857', `${mercatorLevel(0)}
+   <TileMatrix>
+     <ows:Identifier>1</ows:Identifier>
+     <TopLeftCorner>-20037508.34278925 20037508.34278925</TopLeftCorner>
+     <TileWidth>256</TileWidth>
+     <TileHeight>256</TileHeight>
+     <MatrixWidth>3</MatrixWidth>
+     <MatrixHeight>2</MatrixHeight>
+   </TileMatrix>`);
+const TIME_DIMENSION = `
+  <Dimension>
+    <ows:Identifier>Time</ows:Identifier>
+    <UOM>ISO8601</UOM>
+    <Default>2016-01-01</Default>
+  </Dimension>`;
+const TILE_TEMPLATE = 'https://tiles.example.org/lights/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png';
+const boundingBox = (west, south, east, north) => `
+  <ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
+    <ows:LowerCorner>${west} ${south}</ows:LowerCorner>
+    <ows:UpperCorner>${east} ${north}</ows:UpperCorner>
+  </ows:WGS84BoundingBox>`;
+const layer = ({ id = 'lights', links, templates = [TILE_TEMPLATE], dimension = '', extraUrls = '', bbox = '' }) => `
+  <Layer>
+    <ows:Title>Night Lights</ows:Title>
+    ${bbox}
+    <ows:Identifier>${id}</ows:Identifier>
+    <Style isDefault="true"><ows:Identifier>default</ows:Identifier></Style>
+    ${dimension}
+    ${links.map(link => `<TileMatrixSetLink><TileMatrixSet>${link}</TileMatrixSet></TileMatrixSetLink>`).join('')}
+    ${templates.map(template => `<ResourceURL resourceType="tile" format="image/png" template="${template}"/>`).join('')}
+    ${extraUrls}
+  </Layer>`;
+const capabilities = (...contents) => `<?xml version="1.0" encoding="UTF-8"?>
+<Capabilities xmlns="http://www.opengis.net/wmts/1.0" xmlns:ows="http://www.opengis.net/ows/1.1" version="1.0.0">
+  <Contents>${contents.join('')}</Contents>
+</Capabilities>`;
+const resourceFor = (xml, layerIds = ['lights'], url = ENDPOINT, bounds) => new TestWmtsResource('night-lights', url, { layerIds }, xml, bounds);
+describe('WmtsResource#getLayers', () => {
+    it('rewrites a Web Mercator layer as XYZ tile URLs', async () => {
+        const resource = resourceFor(capabilities(layer({ links: ['GoogleMapsCompatible_Level3'] }), MERCATOR_SET));
+        const [drawn] = await resource.getLayers();
+        expect(drawn.id).toEqual('lights');
+        expect(drawn.title).toEqual('Night Lights');
+        expect(drawn.tileUrls).toEqual(['https://tiles.example.org/lights/default/GoogleMapsCompatible_Level3/{z}/{y}/{x}.png']);
+    });
+    it('takes the tile size and zoom range from the tile matrix set', async () => {
+        const bigTiles = tileMatrixSet('big', 'EPSG:3857', [2, 3].map(zoom => mercatorLevel(zoom, { tileSize: 512 })).join(''));
+        const resource = resourceFor(capabilities(layer({ links: ['big'] }), bigTiles));
+        const [drawn] = await resource.getLayers();
+        // Both differ from what MapLibre would assume on its own, which is 512px tiles over zooms 0-22
+        expect(drawn.tileSize).toEqual(512);
+        expect(drawn.minzoom).toEqual(2);
+        expect(drawn.maxzoom).toEqual(3);
+    });
+    it('substitutes the default value of each dimension', async () => {
+        const template = 'https://tiles.example.org/lights/default/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png';
+        const resource = resourceFor(capabilities(layer({ links: ['GoogleMapsCompatible_Level3'], templates: [template], dimension: TIME_DIMENSION }), MERCATOR_SET));
+        const [drawn] = await resource.getLayers();
+        expect(drawn.tileUrls).toEqual(['https://tiles.example.org/lights/default/2016-01-01/GoogleMapsCompatible_Level3/{z}/{y}/{x}.png']);
+    });
+    it('ignores resource URLs that serve something other than tiles', async () => {
+        const extraUrls = '<ResourceURL resourceType="Domains" format="text/xml" template="https://tiles.example.org/lights/domains/{TileMatrixSet}/all.xml"/>';
+        const resource = resourceFor(capabilities(layer({ links: ['GoogleMapsCompatible_Level3'], extraUrls }), MERCATOR_SET));
+        const [drawn] = await resource.getLayers();
+        expect(drawn.tileUrls).toHaveLength(1);
+    });
+    it('keeps the prefix on tile matrix identifiers that are qualified by their grid', async () => {
+        const resource = resourceFor(capabilities(layer({ links: ['EPSG:900913'] }), QUALIFIED_SET));
+        const [drawn] = await resource.getLayers();
+        expect(drawn.tileUrls).toEqual(['https://tiles.example.org/lights/default/EPSG:900913/EPSG:900913:{z}/{y}/{x}.png']);
+    });
+    it('passes over a grid it cannot draw for one it can, whatever the order', async () => {
+        const resource = resourceFor(capabilities(layer({ links: ['500m', 'GoogleMapsCompatible_Level3'] }), GEOGRAPHIC_SET, MERCATOR_SET));
+        const [drawn] = await resource.getLayers();
+        expect(drawn.tileUrls).toEqual(['https://tiles.example.org/lights/default/GoogleMapsCompatible_Level3/{z}/{y}/{x}.png']);
+    });
+    it('refuses a layer published only in a geographic grid, naming the grid and its CRS', async () => {
+        const resource = resourceFor(capabilities(layer({ links: ['500m'] }), GEOGRAPHIC_SET));
+        // Tile indices in a geographic grid address different ground than MapLibre's XYZ ones,
+        // so drawing it would put imagery in the wrong place or fall off the end of a row
+        await expect(resource.getLayers()).rejects.toThrow('500m (urn:ogc:def:crs:OGC:1.3:CRS84)');
+        await expect(resource.getLayers()).rejects.toThrow(/Web Mercator/);
+    });
+    it('refuses a Web Mercator grid whose levels are not the XYZ ones', async () => {
+        const resource = resourceFor(capabilities(layer({ links: ['ragged'] }), RAGGED_SET));
+        await expect(resource.getLayers()).rejects.toThrow('ragged (EPSG:3857)');
+    });
+    it('refuses a layer the service does not publish', async () => {
+        const resource = resourceFor(capabilities(layer({ links: ['GoogleMapsCompatible_Level3'] }), MERCATOR_SET), ['moonlight']);
+        await expect(resource.getLayers()).rejects.toThrow('moonlight');
+    });
+    it('returns only the requested layer when the service lists many', async () => {
+        const others = [1, 2, 3].map(index => layer({ id: `other-${index}`, links: ['GoogleMapsCompatible_Level3'] })).join('');
+        const resource = resourceFor(capabilities(others, layer({ links: ['GoogleMapsCompatible_Level3'] }), MERCATOR_SET));
+        const drawn = await resource.getLayers();
+        expect(drawn.map(each => each.id)).toEqual(['lights']);
+    });
+});
+// Deep enough to hold the zoom a city-sized layer starts at
+const DEEP_SET = tileMatrixSet('GoogleMapsCompatible', 'EPSG:3857', Array.from({ length: 20 }, (_, zoom) => mercatorLevel(zoom)).join(''));
+// Vienna, as its orthophoto service states it, and as the Aardvark record does
+const VIENNA = boundingBox(16.17, 48.1, 16.58, 48.33);
+// Built the way bboxToBounds builds it from a record's ENVELOPE, since that is what arrives here
+const VIENNA_RECORD = new LngLatBounds([16.133423, 48.106056], [16.626434, 48.3348]);
+const boundedLayers = (bbox, grid = DEEP_SET, id = 'GoogleMapsCompatible', bounds) => resourceFor(capabilities(layer({ links: [id], bbox }), grid), ['lights'], ENDPOINT, bounds).getLayers();
+describe('WmtsResource#getLayers extent', () => {
+    it('carries the published bounding box through in MapLibre order', async () => {
+        const [drawn] = await boundedLayers(VIENNA);
+        expect(drawn.bounds).toEqual([16.17, 48.1, 16.58, 48.33]);
+    });
+    it('starts a city-sized layer at the zoom where it first fills a tile', async () => {
+        // Below this every tile is mostly outside the layer, and a service that draws the empty
+        // part rather than answering 404 paints it over the map
+        const [drawn] = await boundedLayers(VIENNA);
+        expect(drawn.minzoom).toEqual(10);
+        expect(drawn.maxzoom).toEqual(19);
+    });
+    it('leaves a layer that covers the world at the first zoom of its grid', async () => {
+        const [drawn] = await boundedLayers(boundingBox(-180, -90, 180, 90));
+        expect(drawn.minzoom).toEqual(0);
+    });
+    it('measures a bounding box that crosses the antimeridian the short way round', async () => {
+        // Two degrees of longitude at the date line, not the 358 that subtracting the corners gives
+        const [drawn] = await boundedLayers(boundingBox(179, -0.1, -179, 0.1));
+        expect(drawn.minzoom).toEqual(8);
+    });
+    it('never starts a layer past the end of its grid', async () => {
+        const [drawn] = await boundedLayers(boundingBox(16.4, 48.2, 16.4, 48.2), MERCATOR_SET, 'GoogleMapsCompatible_Level3');
+        expect(drawn.minzoom).toEqual(3);
+        expect(drawn.maxzoom).toEqual(3);
+    });
+    it('falls back to the extent on the record when the service publishes none', async () => {
+        const [drawn] = await boundedLayers('', DEEP_SET, 'GoogleMapsCompatible', VIENNA_RECORD);
+        expect(drawn.bounds).toEqual([16.133423, 48.106056, 16.626434, 48.3348]);
+        expect(drawn.minzoom).toEqual(10);
+    });
+    it('prefers the extent the service publishes to the one on the record', async () => {
+        // The record states one extent for everything it references; the service states one per layer
+        const [drawn] = await boundedLayers(VIENNA, DEEP_SET, 'GoogleMapsCompatible', [-180, -85, 180, 85]);
+        expect(drawn.bounds).toEqual([16.17, 48.1, 16.58, 48.33]);
+        expect(drawn.minzoom).toEqual(10);
+    });
+    it('leaves the extent unset when neither the service nor the record gives one', async () => {
+        const [drawn] = await boundedLayers('');
+        expect(drawn.bounds).toBeUndefined();
+        expect(drawn.minzoom).toEqual(0);
+    });
+});
+// Vienna's service, in miniature: tiles sharded over several hosts, only one of which is the
+// host that answered the capabilities request, and every one of them advertised over http
+const SHARDED_TEMPLATES = ['maps1', 'maps2', 'maps'].map(host => `http://${host}.example.org/lb2016/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg`);
+const shardedLayers = (url, templates = SHARDED_TEMPLATES) => resourceFor(capabilities(layer({ links: ['GoogleMapsCompatible_Level3'], templates }), MERCATOR_SET), ['lights'], url).getLayers();
+describe('WmtsResource#getLayers tile hosts', () => {
+    it('keeps only the host that served the capabilities document', async () => {
+        // MapLibre assigns each tile to a host by coordinate and never retries elsewhere, so a
+        // hostname that no longer resolves costs us that share of the tiles for good
+        const [drawn] = await shardedLayers('https://maps.example.org/wmts/1.0.0/WMTSCapabilities.xml');
+        expect(drawn.tileUrls).toEqual(['https://maps.example.org/lb2016/default/GoogleMapsCompatible_Level3/{z}/{y}/{x}.jpeg']);
+    });
+    it('reaches that host over https when that is how the capabilities came back', async () => {
+        // A document served over https can still advertise http tiles, which the browser blocks
+        // as mixed content
+        const [drawn] = await shardedLayers('https://maps.example.org/wmts/1.0.0/WMTSCapabilities.xml');
+        expect(drawn.tileUrls[0].startsWith('https://')).toBe(true);
+    });
+    it('leaves every host in place when none of them served the capabilities', async () => {
+        const [drawn] = await shardedLayers('https://www.example.org/wmts/1.0.0/WMTSCapabilities.xml');
+        expect(drawn.tileUrls).toHaveLength(3);
+        expect(drawn.tileUrls[0]).toContain('http://maps1.example.org/');
+    });
+    it('never downgrades a tile host that already speaks https', async () => {
+        const templates = ['https://maps.example.org/lb2016/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg'];
+        const [drawn] = await shardedLayers('http://maps.example.org/wmts/1.0.0/WMTSCapabilities.xml', templates);
+        expect(drawn.tileUrls[0].startsWith('https://')).toBe(true);
+    });
+    it('leaves a service whose tiles live on a host of their own alone', async () => {
+        const [drawn] = await resourceFor(capabilities(layer({ links: ['GoogleMapsCompatible_Level3'] }), MERCATOR_SET)).getLayers();
+        expect(drawn.tileUrls).toEqual(['https://tiles.example.org/lights/default/GoogleMapsCompatible_Level3/{z}/{y}/{x}.png']);
+    });
+});

package/dist/collection/lib/{sources → resources}/xyz.js

@@ -1,5 +1,5 @@
-import RasterSource from "./raster";
-export default class XyzSource extends RasterSource {
+import RasterResource from "./raster";
+export default class XyzResource extends RasterResource {
     label() {
         return 'XYZ Tile Service';
     }

package/dist/esm/{lerc-yC3LNu-h.js → lerc-BQHa9iiK.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from './pako.esm-KbdoS3Oq.js';
-import { g as getDefaultExportFromCjs, L as LercAddCompression, a as LercParameters } from './ogm-alerts.ogm-attributes.ogm-image.ogm-map.ogm-menubar.ogm-metadata.ogm-preview.ogm-previews.ogm-settings.ogm-sidebar.ogm-viewer-BpVupgSB.js';
+import { g as getDefaultExportFromCjs, L as LercAddCompression, a as LercParameters } from './ogm-alerts.ogm-attributes.ogm-image.ogm-map.ogm-menubar.ogm-metadata.ogm-preview.ogm-previews.ogm-settings.ogm-sidebar.ogm-viewer-DSguoh85.js';
 import { B as BaseDecoder } from './basedecoder-BK531nfi.js';
 import './index-DTLAlWKQ.js';
 

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["ogm-alerts_11",[[513,"ogm-viewer",{"recordUrl":[1,"record-url"],"theme":[1],"hideTitle":[4,"hide-title"],"record":[32],"error":[32],"previewOpacity":[32],"sidebarOpen":[32],"loading":[32],"loadRecord":[64]},[[0,"sidebarToggled","toggleSidebar"],[0,"opacityChange","adjustPreviewOpacity"],[0,"mapLoading","setLoadingStarted"],[0,"imageLoading","setLoadingStarted"],[0,"mapIdle","setLoadingFinished"],[0,"imageLoaded","setLoadingFinished"]],{"recordUrl":[{"updateRecord":0}],"record":[{"resetLoading":0}]}],[513,"ogm-previews",{"theme":[1],"record":[16],"previewOpacity":[2,"preview-opacity"],"sidebarPadding":[2,"sidebar-padding"],"sources":[32]},null,{"record":[{"getSources":0}]}],[513,"ogm-sidebar",{"record":[16],"theme":[1],"open":[4]}],[513,"ogm-menubar",{"record":[16],"theme":[1],"loading":[4],"hideTitle":[4,"hide-title"]}],[513,"ogm-preview",{"theme":[1],"source":[16],"previewOpacity":[2,"preview-opacity"],"sidebarPadding":[2,"sidebar-padding"],"error":[32]},[[0,"previewError","handlePreviewError"]],{"source":[{"resetError":0}]}],[513,"ogm-metadata",{"record":[16],"theme":[1],"fieldNames":[16],"filteredRecord":[32]}],[513,"ogm-settings",{"record":[16]},[[0,"input","handleOpacityChange"]]],[513,"ogm-map",{"source":[16],"theme":[1],"padding":[2],"easeMapTo":[64]},[[16,"featureSelected","handleFeatureSelected"]],{"source":[{"previewSource":0}],"theme":[{"onThemeChange":0}],"padding":[{"onPaddingChange":0}]}],[513,"ogm-alerts",{"theme":[1],"error":[16]}],[513,"ogm-image",{"source":[16],"theme":[1],"padding":[2]},null,{"source":[{"onSourceChange":0}],"padding":[{"onPaddingChange":0}]}],[513,"ogm-attributes",{"features":[16],"currentIndex":[32]},null,{"features":[{"onFeaturesChange":0}],"currentIndex":[{"onCurrentIndexChange":0}]}]]]], options);
+  return bootstrapLazy([["ogm-alerts_11",[[513,"ogm-viewer",{"recordUrl":[1,"record-url"],"theme":[1],"hideTitle":[4,"hide-title"],"record":[32],"error":[32],"previewOpacity":[32],"sidebarOpen":[32],"loading":[32],"loadRecord":[64]},[[0,"sidebarToggled","toggleSidebar"],[0,"opacityChange","adjustPreviewOpacity"],[0,"mapLoading","setLoadingStarted"],[0,"imageLoading","setLoadingStarted"],[0,"mapIdle","setLoadingFinished"],[0,"imageLoaded","setLoadingFinished"]],{"recordUrl":[{"updateRecord":0}],"record":[{"resetLoading":0}]}],[513,"ogm-previews",{"theme":[1],"record":[16],"previewOpacity":[2,"preview-opacity"],"sidebarPadding":[2,"sidebar-padding"],"resources":[32]},null,{"record":[{"getSources":0}]}],[513,"ogm-sidebar",{"record":[16],"theme":[1],"open":[4]}],[513,"ogm-menubar",{"record":[16],"theme":[1],"loading":[4],"hideTitle":[4,"hide-title"]}],[513,"ogm-preview",{"theme":[1],"previewResource":[16],"previewOpacity":[2,"preview-opacity"],"sidebarPadding":[2,"sidebar-padding"],"error":[32]},[[0,"previewError","handlePreviewError"]],{"previewResource":[{"resetError":0}]}],[513,"ogm-metadata",{"record":[16],"theme":[1],"fieldNames":[16],"filteredRecord":[32]}],[513,"ogm-settings",{"record":[16]},[[0,"input","handleOpacityChange"]]],[513,"ogm-map",{"previewResource":[16],"theme":[1],"padding":[2],"easeMapTo":[64]},[[16,"featureSelected","handleFeatureSelected"]],{"previewResource":[{"loadResource":0}],"theme":[{"onThemeChange":0}],"padding":[{"onPaddingChange":0}]}],[513,"ogm-alerts",{"theme":[1],"error":[16]}],[513,"ogm-image",{"previewResource":[16],"theme":[1],"padding":[2]},null,{"previewResource":[{"onSourceChange":0}],"padding":[{"onPaddingChange":0}]}],[513,"ogm-attributes",{"features":[16],"currentIndex":[32]},null,{"features":[{"onFeaturesChange":0}],"currentIndex":[{"onCurrentIndexChange":0}]}]]]], options);
 };
 
 export { defineCustomElements };