ogm-viewer 0.5.1 → 0.6.1

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

@@ -0,0 +1,108 @@
+import { describe, it, expect, beforeEach } from "@stencil/vitest";
+import WmtsPreviewer from "./wmts";
+import WmtsResource from "../resources/wmts";
+// 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);
+    }
+}
+// Reading the capabilities document is the resource's job and is tested there
+class StubWmtsResource extends WmtsResource {
+    layers = [];
+    async getLayers() {
+        return this.layers;
+    }
+}
+// The previewer only reads the opacity
+const style = { opacity: 0.8 };
+// A layer served from several tile hosts, and one on a grid with its own size and limits
+const LAYERS = [
+    {
+        id: 'lights',
+        title: 'Night Lights',
+        tileUrls: ['https://one.example.org/lights/{z}/{y}/{x}.png', 'https://two.example.org/lights/{z}/{y}/{x}.png'],
+        tileSize: 256,
+        minzoom: 0,
+        maxzoom: 8,
+    },
+    {
+        id: 'ortho',
+        title: 'Orthophoto',
+        tileUrls: ['https://one.example.org/ortho/{z}/{y}/{x}.jpeg'],
+        tileSize: 512,
+        minzoom: 5,
+        maxzoom: 20,
+        bounds: [16.17, 48.1, 16.58, 48.33],
+    },
+];
+let map;
+let resource;
+let previewer;
+beforeEach(async () => {
+    map = new FakeMap();
+    resource = new StubWmtsResource('night-lights', 'https://example.org/wmts/1.0.0/WMTSCapabilities.xml', { layerIds: [] });
+    resource.layers = LAYERS;
+    previewer = new WmtsPreviewer(resource, map, style);
+    await previewer.preview();
+});
+describe('WmtsPreviewer#preview', () => {
+    it('adds a source and a layer for each layer of the service', () => {
+        expect([...map.sources.keys()]).toEqual(['night-lights-lights', 'night-lights-ortho']);
+        expect([...map.layers.keys()]).toEqual(['night-lights-lights', 'night-lights-ortho']);
+        expect(map.layers.get('night-lights-ortho')?.source).toEqual('night-lights-ortho');
+    });
+    it('keeps every tile host the service offers', () => {
+        expect(map.sources.get('night-lights-lights')?.tiles).toEqual(LAYERS[0].tileUrls);
+    });
+    it('draws the tiles as XYZ rasters', () => {
+        const source = map.sources.get('night-lights-lights');
+        expect(source?.type).toEqual('raster');
+        expect(source?.scheme).toEqual('xyz');
+    });
+    it('carries the tile size of the grid rather than letting MapLibre default it to 512', () => {
+        expect(map.sources.get('night-lights-lights')?.tileSize).toEqual(256);
+        expect(map.sources.get('night-lights-ortho')?.tileSize).toEqual(512);
+    });
+    it('bounds the source to the zooms the grid defines', () => {
+        // Without these MapLibre keeps asking past the end of the grid instead of overzooming
+        // the deepest level it has
+        expect(map.sources.get('night-lights-lights')?.maxzoom).toEqual(8);
+        expect(map.sources.get('night-lights-ortho')?.minzoom).toEqual(5);
+        expect(map.sources.get('night-lights-ortho')?.maxzoom).toEqual(20);
+    });
+    it('bounds the source to the layer extent, and omits the key when there is none', () => {
+        // MapLibre validates the sources it's handed, so an absent extent has to be absent rather
+        // than undefined
+        expect(map.sources.get('night-lights-ortho')?.bounds).toEqual([16.17, 48.1, 16.58, 48.33]);
+        expect(map.sources.get('night-lights-lights')).not.toHaveProperty('bounds');
+    });
+});
+describe('WmtsPreviewer#clearPreview', () => {
+    it('removes every source and layer it added', async () => {
+        await previewer.clearPreview();
+        expect(map.sources.size).toEqual(0);
+        expect(map.layers.size).toEqual(0);
+        expect(previewer.layerIds).toEqual([]);
+    });
+});

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

@@ -1,5 +1,5 @@
-import RasterSource from "./raster";
-export default class CogSource extends RasterSource {
+import RasterResource from "./raster";
+export default class CogResource extends RasterResource {
     label() {
         return 'Cloud Optimized GeoTIFF';
     }

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

@@ -1,7 +1,7 @@
 import geojsonExtent from "@mapbox/geojson-extent";
-import VectorSource from "./vector";
+import VectorResource from "./vector";
 import { fetchOrThrow } from "../errors";
-export default class GeoJSONSource extends VectorSource {
+export default class GeoJsonResource extends VectorResource {
     // Data parsed from GeoJSON document
     data;
     // Fetch and memoize data
@@ -15,7 +15,7 @@ export default class GeoJSONSource extends VectorSource {
     label() {
         return 'GeoJSON';
     }
-    // GeoJSON is always a vector source
+    // GeoJSON is always a vector resource
     async isVector() {
         return true;
     }

package/dist/collection/lib/{sources → resources}/iiif-manifest.js

@@ -1,7 +1,7 @@
-import IIIFSource from "./iiif";
+import IIIFResource from "./iiif";
 import { fetchOrThrow } from "../errors";
 // A manifest containing multiple IIIF image URLs for preview
-export default class IIIFManifestSource extends IIIFSource {
+export default class IIIFManifestResource extends IIIFResource {
     // The parsed manifest contents
     manifest;
     label() {

package/dist/collection/lib/{sources → resources}/iiif-manifest.test.js

@@ -1,8 +1,8 @@
 import { describe, it, expect, vi, afterEach } from "@stencil/vitest";
-import IIIFManifestSource from "./iiif-manifest";
+import IIIFManifestResource from "./iiif-manifest";
 const MANIFEST_URL = 'http://example.com/manifest.json';
 // A source always points at a manifest URL; the manifest itself is fetched lazily
-const createSource = () => new IIIFManifestSource('test-id', MANIFEST_URL);
+const createSource = () => new IIIFManifestResource('test-id', MANIFEST_URL);
 // A minimal IIIF v2 manifest with a single image
 const v2Manifest = {
     '@context': 'http://iiif.io/api/presentation/2/context.json',
@@ -60,7 +60,7 @@ const v3Manifest = {
         },
     ],
 };
-describe('IIIFManifestSource', () => {
+describe('IIIFManifestResource', () => {
     afterEach(() => vi.restoreAllMocks());
     describe('getIIIFImageUrls', () => {
         it('should fetch and extract image URLs from a IIIF v2 manifest', async () => {

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

@@ -1,6 +1,6 @@
-import Source from "./source";
+import Resource from "./resource";
 // A source of IIIF image URL(s) to be previewed
-export default class IIIFSource extends Source {
+export default class IIIFResource extends Resource {
     label() {
         return 'IIIF Image';
     }

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

@@ -1,6 +1,6 @@
-import Source from "./source";
+import Resource from "./resource";
 // A source of mapped vector or raster data, accessed remotely
-export default class MapLibreSource extends Source {
+export default class MapResource extends Resource {
     // URL used to generate a MapLibre source when adding to map
     getMapLibreSourceUrl() {
         return this.url;

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

@@ -1,5 +1,5 @@
-import GeoJSONSource from "./geojson";
-export default class OpenIndexMapSource extends GeoJSONSource {
+import GeoJsonResource from "./geojson";
+export default class OpenIndexMapResource extends GeoJsonResource {
     // Distinguish the layer name from regular GeoJSON
     async getVectorLayers() {
         return ['indexmap'];

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

@@ -1,8 +1,8 @@
 // Adapted from https://github.com/protomaps/PMTiles/blob/main/app/src/tileset.ts
 import { PMTiles, TileType } from "pmtiles";
-import Source from "./source";
+import Resource from "./resource";
 // Vector or raster tileset stored in a PMTiles archive at a URL
-export default class PMTilesSource extends Source {
+export default class PMTilesResource extends Resource {
     // PMTiles object for reading metadata and tiles from the archive
     archive;
     // Memoized PMTiles metadata and header

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

@@ -1,6 +1,6 @@
-import MapLibreSource from "./maplibre";
+import MapResource from "./map";
 // Tiled raster data, accessed remotely
-export default class RasterSource extends MapLibreSource {
+export default class RasterResource extends MapResource {
     async isVector() {
         return false;
     }

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

@@ -1,10 +1,10 @@
 // A source of previewable data at a URL
-export default class Source {
+export default class Resource {
     // URL to the remote data source
     url;
     // Explicitly provided bounds for the source, if any
     bounds;
-    // Unique ID for this source
+    // Unique ID for this resource
     id;
     // Store the source URL
     constructor(id, url, bounds) {
@@ -12,7 +12,7 @@ export default class Source {
         this.url = url;
         this.bounds = bounds;
     }
-    // Used to label the tabs for switching between sources, e.g.
+    // Used to label the tabs for switching between previews, e.g.
     label() {
         return this.constructor.name;
     }

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

@@ -1,15 +1,22 @@
-import Source from "./source";
+import { fetchOrThrow } from "../errors";
+import MapResource from "./map";
 // Vector or raster tileset described in a TileJSON document at a URL
-export default class TileJSONSource extends Source {
+export default class TileJsonResource extends MapResource {
     // Metadata parsed from TileJSON document
     metadata;
     label() {
         return 'TileJSON';
     }
+    getMapLibreSourceUrl() {
+        return this.url;
+    }
+    getScheme() {
+        return undefined;
+    }
     // Fetch and memoize metadata
     async getMetadata() {
         if (!this.metadata) {
-            const resp = await fetch(this.url);
+            const resp = await fetchOrThrow(this.url);
             this.metadata = await resp.json();
         }
         return this.metadata;
@@ -21,16 +28,26 @@ export default class TileJSONSource extends Source {
         const pathname = new URL(template).pathname;
         return pathname.endsWith('.pbf') || pathname.endsWith('.mvt') || pathname.endsWith('.mlt');
     }
-    // Used to zoom the map to the data once loaded
+    // Used to zoom the map to the data once loaded; bounds are optional in TileJSON, and
+    // without them we leave the camera wherever it already is
     async getBounds() {
         if (this.bounds)
             return this.bounds;
         const metadata = await this.getMetadata();
+        if (!metadata.bounds)
+            return undefined;
         return [
             [metadata.bounds[0], metadata.bounds[1]],
             [metadata.bounds[2], metadata.bounds[3]],
         ];
     }
+    // TileJSON has no tileSize of its own, though some services add one to the document. Raster
+    // tiles served from a {z}/{x}/{y} template are 256px by convention, so assume that otherwise;
+    // MapLibre would default to 512 and draw them upscaled and blurry.
+    async getTileSize() {
+        const metadata = await this.getMetadata();
+        return metadata.tileSize ?? 256;
+    }
     async getVectorLayers() {
         const metadata = await this.getMetadata();
         return metadata.vector_layers.map((l) => l.id);

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

@@ -1,5 +1,5 @@
-import RasterSource from "./raster";
-export default class TmsSource extends RasterSource {
+import RasterResource from "./raster";
+export default class TmsResource extends RasterResource {
     label() {
         return 'Tiled Map Service (TMS)';
     }

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

@@ -1,6 +1,6 @@
-import MapLibreSource from "./maplibre";
+import MapResource from "./map";
 // A source of vector data, accessed remotely
-export default class VectorSource extends MapLibreSource {
+export default class VectorResource extends MapResource {
     async isVector() {
         return true;
     }

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

@@ -1,21 +1,24 @@
-import RasterSource from "./raster";
-const defaultOptions = {
+import RasterResource from "./raster";
+// Number of features to ask for when inspecting; the spec defaults this to 1, which
+// hides everything under the cursor but the topmost feature
+const DEFAULT_FEATURE_COUNT = 10;
+const defaultWmsOptions = {
     layerIds: [],
     bbox: '{bbox-epsg-3857}',
-    srs: 'EPSG:3857',
+    crs: 'EPSG:3857',
     tileSize: 256,
     format: 'image/png',
     transparent: true,
     version: '1.3.0',
 };
 // Data accessed via WMS GetMap requests, which return raster tiles
-export default class WmsSource extends RasterSource {
+export default class WmsResource extends RasterResource {
     options;
     // Memoized metadata via GetCapabilities request
     metadata;
     constructor(id, url, options, bounds) {
         super(id, url, bounds);
-        this.options = { ...defaultOptions, ...options };
+        this.options = { ...defaultWmsOptions, ...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];
@@ -43,6 +46,9 @@ export default class WmsSource extends RasterSource {
     getTileSize() {
         return this.options.tileSize;
     }
+    async inspect(options) {
+        return await fetch(this.inspectUrl(options));
+    }
     // WMS GetMap URL that will fetch tiles for this source
     get tilesUrl() {
         const tilesUrl = new URL(this.url);
@@ -54,7 +60,7 @@ export default class WmsSource extends RasterSource {
         tilesUrl.searchParams.set('width', String(this.options.tileSize));
         tilesUrl.searchParams.set('height', String(this.options.tileSize));
         tilesUrl.searchParams.set('transparent', String(this.options.transparent));
-        tilesUrl.searchParams.set('srs', this.options.srs);
+        tilesUrl.searchParams.set(this.isVersion130 ? 'crs' : 'srs', this.options.crs);
         tilesUrl.searchParams.set('format', this.options.format);
         tilesUrl.searchParams.set('version', this.options.version);
         // This param can't be encoded because MapLibre needs to template it
@@ -62,6 +68,40 @@ export default class WmsSource extends RasterSource {
         tilesUrlString += `&bbox=${this.options.bbox}`;
         return tilesUrlString;
     }
+    // WMS GetFeatureInfo URL, used to fetch information about features at a specific point
+    inspectUrl(inspectOptions) {
+        const inspectUrl = new URL(this.url);
+        // Merge the provided options with the instance's options
+        const options = { ...this.options, ...inspectOptions };
+        inspectUrl.searchParams.set('service', 'WMS');
+        inspectUrl.searchParams.set('request', 'GetFeatureInfo');
+        inspectUrl.searchParams.set('info_format', 'application/json');
+        inspectUrl.searchParams.set('layers', options.layerIds.join(','));
+        inspectUrl.searchParams.set('query_layers', options.layerIds.join(','));
+        inspectUrl.searchParams.set('version', options.version);
+        inspectUrl.searchParams.set('bbox', options.bbox);
+        inspectUrl.searchParams.set('width', String(options.width));
+        inspectUrl.searchParams.set('height', String(options.height));
+        inspectUrl.searchParams.set('feature_count', String(DEFAULT_FEATURE_COUNT));
+        // 1.3.0 renamed SRS to CRS, and renamed the pixel coordinates X,Y to I,J. Servers
+        // do enforce the names for the version they were asked for, so pick them to match.
+        if (this.isVersion130) {
+            inspectUrl.searchParams.set('crs', options.crs);
+            inspectUrl.searchParams.set('i', String(Math.round(options.x)));
+            inspectUrl.searchParams.set('j', String(Math.round(options.y)));
+        }
+        else {
+            inspectUrl.searchParams.set('srs', options.crs);
+            inspectUrl.searchParams.set('x', String(Math.round(options.x)));
+            inspectUrl.searchParams.set('y', String(Math.round(options.y)));
+        }
+        return inspectUrl.toString();
+    }
+    // Whether this source speaks WMS 1.3.0 or later, which changed some param names
+    get isVersion130() {
+        const [major, minor] = this.options.version.split('.').map(Number);
+        return major > 1 || (major === 1 && minor >= 3);
+    }
     // WMS GetCapabilities URL, used to fetch metadata about the layers
     get capabilitiesUrl() {
         const capabilitiesUrl = new URL(this.url);

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

@@ -0,0 +1,63 @@
+import { describe, it, expect } from "@stencil/vitest";
+import WmsResource from "./wms";
+// The GetFeatureInfo URL is built by a protected method, so expose it for testing
+class TestWmsSource extends WmsResource {
+    url_for(options) {
+        return new URL(this.inspectUrl(options));
+    }
+}
+const ENDPOINT = 'https://geoservices.lib.berkeley.edu/geoserver/wms';
+// A click in the middle of a 51x51 pixel window over Calaveras County
+const options = {
+    bbox: '-13416701.09,4600766.56,-13411296.18,4606171.48',
+    width: 51,
+    height: 51,
+    x: 25,
+    y: 25,
+};
+describe('WmsSource#inspectUrl', () => {
+    it('uses the 1.3.0 param names by default', () => {
+        const source = new TestWmsSource('s7st30', ENDPOINT, { layerIds: [] });
+        const params = source.url_for(options).searchParams;
+        expect(params.get('version')).toEqual('1.3.0');
+        // 1.3.0 spells these CRS and I,J rather than SRS and X,Y
+        expect(params.get('crs')).toEqual('EPSG:3857');
+        expect(params.get('i')).toEqual('25');
+        expect(params.get('j')).toEqual('25');
+        expect(params.get('srs')).toBeNull();
+        expect(params.get('x')).toBeNull();
+        expect(params.get('y')).toBeNull();
+    });
+    it('uses the older param names for 1.1.1', () => {
+        const source = new TestWmsSource('s7st30', ENDPOINT, { layerIds: [], version: '1.1.1' });
+        const params = source.url_for(options).searchParams;
+        expect(params.get('srs')).toEqual('EPSG:3857');
+        expect(params.get('x')).toEqual('25');
+        expect(params.get('y')).toEqual('25');
+        expect(params.get('crs')).toBeNull();
+        expect(params.get('i')).toBeNull();
+        expect(params.get('j')).toBeNull();
+    });
+    it('passes through the query window and asks about the layer', () => {
+        const source = new TestWmsSource('s7st30', ENDPOINT, { layerIds: [] });
+        const params = source.url_for(options).searchParams;
+        expect(params.get('request')).toEqual('GetFeatureInfo');
+        expect(params.get('bbox')).toEqual(options.bbox);
+        expect(params.get('width')).toEqual('51');
+        expect(params.get('height')).toEqual('51');
+        // Defaults the layer to the source ID, and asks about it rather than just drawing it
+        expect(params.get('layers')).toEqual('s7st30');
+        expect(params.get('query_layers')).toEqual('s7st30');
+    });
+    it('asks for more than the one feature the spec defaults to', () => {
+        const source = new TestWmsSource('s7st30', ENDPOINT, { layerIds: [] });
+        const params = source.url_for(options).searchParams;
+        expect(Number(params.get('feature_count'))).toBeGreaterThan(1);
+    });
+    it('rounds pixel coordinates, which must be integers', () => {
+        const source = new TestWmsSource('s7st30', ENDPOINT, { layerIds: [] });
+        const params = source.url_for({ ...options, x: 25.4, y: 25.6 }).searchParams;
+        expect(params.get('i')).toEqual('25');
+        expect(params.get('j')).toEqual('26');
+    });
+});