ogm-viewer 0.3.0 → 0.4.0

package/dist/collection/components/ogm-map/ogm-map.css

@@ -6,14 +6,18 @@
   position: relative;
 }
 
-/* inspection cursor 
-canvas {
-  cursor: crosshair;
+/* Inspection popups. Vertical scrolling (when content is too tall) is handled by the
+   <wa-scroller> inside ogm-attributes, not here - that's what gives it the fading shadow cue. */
+.maplibregl-popup-content {
+  max-width: 400px;
+  overflow: hidden;
+  padding: 0;
+  box-shadow: var(--wa-shadow-l);
+  border: var(--wa-panel-border-width) solid var(--wa-color-surface-border);
 }
-*/
 
 /* Dark mode map adjustments */
-.sl-theme-dark {
+.wa-dark {
   .tile-border {
     stroke: white;
   }
@@ -47,6 +51,7 @@ canvas {
 
   div.maplibregl-popup-content {
     background-color: black;
+    color: #ccc;
   }
 
   div.maplibregl-popup-anchor-right div.maplibregl-popup-tip {

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

@@ -1,33 +1,49 @@
 import { h } from "@stencil/core";
-import { Protocol as PMTilesProtocol } from "pmtiles";
 import maplibregl from "maplibre-gl";
+import { Protocol as PMTilesProtocol } from "pmtiles";
+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 RasterSource from "../../lib/sources/raster";
+import WmsSource from "../../lib/sources/wms";
 import { getElement } from "../../lib/elements";
-import { getSources } from "../../lib/sources";
-import { getMapPreviewers } from "../../lib/previewers";
+import CogPreviewer from "../../lib/previewers/cog";
+import GeoJSONPreviewer from "../../lib/previewers/geojson";
+import OpenIndexMapPreviewer from "../../lib/previewers/openindexmap";
+import PMTilesRasterPreviewer from "../../lib/previewers/pmtiles-raster";
+import PMTilesVectorPreviewer from "../../lib/previewers/pmtiles-vector";
+import RasterPreviewer from "../../lib/previewers/raster";
+import WmsPreviewer from "../../lib/previewers/wms";
+import MapLibreTheme from "../../lib/themes/maplibre";
 // Register PMTiles protocol
 const protocol = new PMTilesProtocol();
 maplibregl.addProtocol('pmtiles', protocol.tile);
 export class OgmMap {
     el;
-    record;
+    source;
     theme;
-    previewOpacity = 100;
     padding = 0;
     mapIdle;
     mapLoading;
-    // MapLibre map instance
+    // MapLibre map instance and popup instance for feature info display
     map;
+    mapTheme;
+    popup = undefined;
+    attributesEl;
+    hoveredFeature = undefined;
     // Container element reference for fullscreen
     containerEl;
-    // Previewers for the currently previewed sources
-    previewers = [];
+    // Previewer for the currently previewed source
+    previewer = undefined;
     // Set up the mapLibre map and event bindings on load
     componentDidLoad() {
+        this.mapTheme = new MapLibreTheme(this.el);
         this.map = new maplibregl.Map({
             container: getElement(this.el, '#map'),
             attributionControl: false,
             cooperativeGestures: true,
-            style: this.baseMapStyle,
+            style: this.mapTheme.getBaseMapStyle(),
             center: [0, 0],
             zoom: 2,
             minZoom: 2,
@@ -35,26 +51,30 @@ export class OgmMap {
         this.getContainer();
         this.addControls();
         this.map.on('idle', () => this.mapIdle.emit());
-        this.map.on('load', () => this.previewRecord(this.record));
+        this.map.on('load', () => this.previewSource(this.source));
+        this.map.on('mousemove', this.handleHover.bind(this));
+        this.map.on('click', this.handleClick.bind(this));
         // View as a globe with atmosphere effects
         this.map.on('style.load', () => {
-            this.map.setProjection({
-                type: 'globe',
-            });
-            this.map.setSky({
-                'sky-color': '#199EF3',
-                'sky-horizon-blend': 0.5,
-                'horizon-color': '#ffffff',
-                'horizon-fog-blend': 0.5,
-                'fog-color': '#0000ff',
-                'fog-ground-blend': 0.5,
-                'atmosphere-blend': ['interpolate', ['linear'], ['zoom'], 0, 1, 10, 1, 12, 0],
-            });
+            this.map.setProjection({ type: 'globe' });
+            this.map.setSky(this.mapTheme.getSkyStyle());
         });
+        // Keep attributes outside Stencil render pipeline so that MapLibre can
+        // use the HTML directly for the popup content
+        this.attributesEl = document.createElement('ogm-attributes');
+        this.attributesEl.features = [];
+    }
+    // Clean up the map to prevent warnings/errors when removed from the DOM
+    disconnectedCallback() {
+        if (this.map)
+            this.map.remove();
     }
     // Find the container element for the map (used for fullscreen control)
     getContainer() {
-        const containerEl = this.el.parentElement?.parentElement;
+        const viewerEl = document.querySelector('ogm-viewer');
+        if (!viewerEl)
+            throw new Error('Could not find ogm-viewer element');
+        const containerEl = getElement(viewerEl, '.container');
         if (!containerEl)
             throw new Error('Could not find map container element');
         this.containerEl = containerEl;
@@ -74,33 +94,57 @@ export class OgmMap {
             },
         }));
     }
-    async previewRecord(record) {
-        if (!record)
+    // Get the appropriate previewer for our source
+    async getMapPreviewer(map) {
+        const style = this.mapTheme.getStyle();
+        if (this.source instanceof OpenIndexMapSource)
+            return new OpenIndexMapPreviewer(this.source, map, style);
+        else if (this.source instanceof GeoJSONSource)
+            return new GeoJSONPreviewer(this.source, map, style);
+        else if (this.source instanceof PMTilesSource) {
+            if (await this.source.isVector())
+                return new PMTilesVectorPreviewer(this.source, map, style);
+            else
+                return new PMTilesRasterPreviewer(this.source, map, style);
+        }
+        else if (this.source instanceof WmsSource)
+            return new WmsPreviewer(this.source, map, style);
+        else if (this.source instanceof CogSource)
+            return new CogPreviewer(this.source, map, style);
+        else if (this.source instanceof RasterSource)
+            return new RasterPreviewer(this.source, map, style);
+    }
+    async previewSource(source) {
+        // Do nothing if we didn't get passed a source
+        if (!source)
             return;
+        // Indicate loading state so we can show the spinner
         this.mapLoading.emit();
-        // Clear any existing preview layers and sources
-        await Promise.all(this.previewers.map(previewer => previewer.clearPreview()));
-        this.previewers = [];
-        // Create sources and previewers using references
-        const sources = getSources(record);
-        const previewOptions = { fillColor: this.fillColor, lineColor: this.lineColor, opacity: this.previewOpacity / 100 };
-        const previewers = await getMapPreviewers(sources, this.map, previewOptions);
-        // Preview each source
-        for (const previewer of previewers) {
-            this.previewers.push(previewer);
-            await previewer.preview();
+        // Close popup if one is open
+        this.clearFeatureSelection();
+        this.destroyPopup();
+        // Clear existing preview
+        if (this.previewer) {
+            await this.previewer.clearPreview();
+            this.previewer = undefined;
         }
+        // Get the appropriate previewer for our source and preview it
+        this.previewer = await this.getMapPreviewer(this.map);
+        if (!this.previewer)
+            throw new Error(`No previewer found for source: ${source.constructor.name}`);
+        await this.previewer.preview();
         // Fit to bounds from the record
-        const bounds = record.getBounds();
+        const bounds = await this.source.getBounds();
         if (bounds)
             await this.fitMapBounds(bounds);
+        // Emit map idle event to signal that the map is ready
         this.mapIdle.emit();
     }
-    // Fit the map to the provided bounds
+    // Fit the map to the given bounds; return when moving is finished
     async fitMapBounds(bounds) {
         return new Promise(resolve => {
             this.map.once('moveend', () => resolve());
-            this.map.fitBounds(bounds, { padding: this.padding });
+            this.map.fitBounds(bounds);
         });
     }
     // When padding is changed, move the map over to make room for the sidebar
@@ -111,20 +155,79 @@ export class OgmMap {
     async easeMapTo(options) {
         return await this.map.easeTo(options);
     }
-    // Base map style based on the theme
-    get baseMapStyle() {
-        return this.theme === 'dark' ? 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json' : 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
+    // Use the crosshair cursor if there's something to inspect
+    handleHover(event) {
+        const features = this.map.queryRenderedFeatures(event.point, { layers: this.previewLayers });
+        if (features.length > 0) {
+            this.map.getCanvas().style.cursor = 'crosshair';
+            this.hoverFeature(features[0]);
+        }
+        else {
+            this.map.getCanvas().style.cursor = '';
+            this.clearHoveredFeature();
+        }
+    }
+    // Show the attributes popup on click
+    handleClick(event) {
+        // Clear any existing popup and feature selection
+        this.clearFeatureSelection();
+        this.destroyPopup();
+        // Check if we have feature(s) to inspect at the clicked point
+        const features = this.map.queryRenderedFeatures(event.point, { layers: this.previewLayers });
+        if (features.length === 0)
+            return;
+        // Create and populate the attributes popup and select the first feature if multiple
+        this.attributesEl.features = features;
+        this.createPopup(event.lngLat);
+        this.selectFeature(features[0]);
+    }
+    // Listen to selection events from the popup and highlight the selected feature
+    handleFeatureSelected(event) {
+        this.clearFeatureSelection();
+        const feature = event.detail;
+        this.selectFeature(feature);
     }
-    // Fill colors for vector data based on the theme
-    get fillColor() {
-        return window.getComputedStyle(this.el).getPropertyValue('--sl-color-primary-500');
+    // Reset styling of all features to unselected state
+    clearFeatureSelection() {
+        this.attributesEl.features.forEach(feature => {
+            this.map.setFeatureState({ source: feature.source, id: feature.id, sourceLayer: feature.sourceLayer }, { selected: false });
+        });
+        this.attributesEl.features = [];
+    }
+    // Set styling of a single feature to selected state
+    selectFeature(feature) {
+        this.map.setFeatureState({ source: feature.source, id: feature.id, sourceLayer: feature.sourceLayer }, { selected: true });
+    }
+    // Set styling of a single feature to hovered state
+    hoverFeature(feature) {
+        this.clearHoveredFeature();
+        this.hoveredFeature = feature;
+        this.map.setFeatureState({ source: feature.source, id: feature.id, sourceLayer: feature.sourceLayer }, { hover: true });
+    }
+    // Clear the hovered feature state
+    clearHoveredFeature() {
+        if (this.hoveredFeature) {
+            this.map.setFeatureState({ source: this.hoveredFeature.source, id: this.hoveredFeature.id, sourceLayer: this.hoveredFeature.sourceLayer }, { hover: false });
+            this.hoveredFeature = undefined;
+        }
     }
-    // Line/stroke color for vector data based on the theme
-    get lineColor() {
-        return window.getComputedStyle(this.el).getPropertyValue('--sl-color-neutral-900');
+    // Create a new popup and set its content and location
+    createPopup(location) {
+        this.popup = new maplibregl.Popup({ maxWidth: 'none', closeButton: false }).setDOMContent(this.attributesEl).setLngLat(location).addTo(this.map);
+    }
+    // Remove popup from the map and clear the reference
+    destroyPopup() {
+        if (this.popup) {
+            this.popup.remove();
+            this.popup = undefined;
+        }
+    }
+    // Get the IDs of all layers in the previewers
+    get previewLayers() {
+        return this.previewer?.layerIds || [];
     }
     render() {
-        return h("div", { key: 'f56397cdabf7610e7bf796920e34c8ae6b9943a9', id: "map", class: `sl-theme-${this.theme}` });
+        return h("div", { key: '1c38c0508638813aee913dce29f533845393023b', id: "map", class: `wa-${this.theme}` });
     }
     static get is() { return "ogm-map"; }
     static get encapsulation() { return "shadow"; }
@@ -140,18 +243,16 @@ export class OgmMap {
     }
     static get properties() {
         return {
-            "record": {
+            "source": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "OgmRecord",
-                    "resolved": "OgmRecord",
+                    "original": "Source",
+                    "resolved": "Source",
                     "references": {
-                        "OgmRecord": {
-                            "location": "import",
-                            "path": "../../lib/record",
-                            "id": "src/lib/record.ts::OgmRecord",
-                            "referenceLocation": "OgmRecord"
+                        "Source": {
+                            "location": "global",
+                            "id": "global::Source"
                         }
                     }
                 },
@@ -183,26 +284,6 @@ export class OgmMap {
                 "reflect": false,
                 "attribute": "theme"
             },
-            "previewOpacity": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "preview-opacity",
-                "defaultValue": "100"
-            },
             "padding": {
                 "type": "number",
                 "mutable": false,
@@ -262,7 +343,7 @@ export class OgmMap {
         return {
             "easeMapTo": {
                 "complexType": {
-                    "signature": "(options: EaseToOptions) => Promise<maplibregl.Map>",
+                    "signature": "(options: maplibregl.EaseToOptions) => Promise<maplibregl.Map>",
                     "parameters": [{
                             "name": "options",
                             "type": "AnimationOptions & CenterZoomBearing & { pitch?: number; roll?: number; elevation?: number; } & { delayEndEvents?: number; padding?: number | PaddingOptions; around?: LngLatLike; easeId?: string; noMoveStart?: boolean; }",
@@ -276,12 +357,6 @@ export class OgmMap {
                         "maplibregl": {
                             "location": "global",
                             "id": "global::maplibregl"
-                        },
-                        "EaseToOptions": {
-                            "location": "import",
-                            "path": "maplibre-gl",
-                            "id": "node_modules::EaseToOptions",
-                            "referenceLocation": "EaseToOptions"
                         }
                     },
                     "return": "Promise<Map$1>"
@@ -296,11 +371,20 @@ export class OgmMap {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "record",
-                "methodName": "previewRecord"
+                "propName": "source",
+                "methodName": "previewSource"
             }, {
                 "propName": "padding",
                 "methodName": "onPaddingChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "featureSelected",
+                "method": "handleFeatureSelected",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/ogm-menubar/ogm-menubar.css

@@ -1,38 +1,40 @@
 .menubar {
   display: flex;
   align-items: center;
-  gap: var(--sl-spacing-small);
-  padding: var(--sl-spacing-x-small);
-  background-color: var(--sl-panel-background-color);
-  border-top: calc(var(--sl-panel-border-width) * 2) solid var(--accent-color);
-  border-bottom: var(--sl-panel-border-width) solid var(--sl-panel-border-color);
+  gap: var(--wa-space-s);
+  padding: var(--wa-space-xs);
+  background-color: var(--wa-color-surface-raised);
+  border-top: calc(var(--wa-panel-border-width) * 2) solid var(--accent-color);
+  border-bottom: var(--wa-panel-border-width) solid var(--wa-color-surface-border);
 
   /* shadow above map and sidebar */
   position: relative;
   z-index: 701;
-  box-shadow: 0 2px 6px 0px var(--sl-overlay-background-color);
+  box-shadow: 0 2px 6px 0px var(--wa-color-shadow);
 }
 
 /* Truncate long titles with an ellipsis */
 .title {
   flex: auto;
-  font-size: var(--sl-font-size-large);
-  color: var(--sl-color-neutral-800);
+  font-size: var(--wa-font-size-l);
+  color: var(--wa-color-text-normal);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
-.menu-button {
-  font-size: var(--sl-font-size-x-large);
+/* Size the icon glyph directly rather than the button's own font-size, which would inflate
+   the button's whole clickable box (wa-button scales its control height off font-size) */
+.menu-button wa-icon {
+  font-size: var(--wa-font-size-xl);
 }
 
 .restricted-icon {
-  color: var(--sl-color-danger-600);
-  font-size: var(--sl-font-size-large);
+  color: var(--wa-color-danger-on-normal);
+  font-size: var(--wa-font-size-l);
 }
 
 .loading-spinner {
-  font-size: var(--sl-font-size-large);
-  margin: 0 var(--sl-spacing-x-small);
+  font-size: var(--wa-font-size-l);
+  margin: 0 var(--wa-space-xs);
 }

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

@@ -5,7 +5,7 @@ export class OgmMenubar {
     sidebarToggled;
     loading = false;
     render() {
-        return (h("div", { key: 'b9f3fa82a91afe42eacafa5c6f4e7041107f9317', class: `menubar ${this.theme && `sl-theme-${this.theme}`}` }, h("sl-icon-button", { key: '299008820e057cdadafa6be1c40cc51d99f1afb5', name: "list", label: "Open sidebar", class: "menu-button", onclick: this.sidebarToggled.emit }), this.record?.restricted && (h("sl-tooltip", { key: 'c676c4cf06c136d6ca055b567f4318f2678b323a', content: "Restricted access" }, h("sl-icon", { key: 'bbad7996a1e27d694309d8e5dd8146ba4cb053e0', name: "lock-fill", label: "Restricted access", class: "restricted-icon" }))), h("div", { key: 'ad8ba00f9b3a6b93fcf248d217ecc99f798645a8', class: "title" }, this.record?.title), this.loading && h("sl-spinner", { key: 'fa5b8f92939601e0afed5bfa85b99aad4db221f5', class: "loading-spinner" })));
+        return (h("div", { key: '437b8f1b6f44844f1db4460c6597c0a68479a8f7', class: `menubar ${this.theme && `wa-${this.theme}`}` }, h("wa-button", { key: 'baf0a0baa96fcf3f114fdf47b4446b90df862c6b', appearance: "plain", class: "menu-button", onclick: this.sidebarToggled.emit }, h("wa-icon", { key: 'b4e1c07bd7284dbd191997a4b270d12c1e1d5b63', name: "list", label: "Open sidebar", canvas: "auto" })), this.record?.restricted && (h(h.Fragment, null, h("wa-tooltip", { key: '4e8d318982e7bd8af99b320e4810b23d0c00b264', for: "restricted-icon" }, "Restricted access"), h("wa-icon", { key: '6da389ec7b55697d203dd2935af192ae64c0622b', id: "restricted-icon", name: "lock-fill", label: "Restricted access", class: "restricted-icon", canvas: "auto" }))), h("div", { key: 'd118cbb176a44ae761d82c7adff2b0fa31cbe87e', class: "title" }, this.record?.title), this.loading && h("wa-spinner", { key: '5bc6c254a1fa5b4b4bb82ec8fc1cc04ff1457a31', class: "loading-spinner" })));
     }
     static get is() { return "ogm-menubar"; }
     static get encapsulation() { return "shadow"; }
@@ -29,10 +29,8 @@ export class OgmMenubar {
                     "resolved": "OgmRecord",
                     "references": {
                         "OgmRecord": {
-                            "location": "import",
-                            "path": "../../lib/record",
-                            "id": "src/lib/record.ts::OgmRecord",
-                            "referenceLocation": "OgmRecord"
+                            "location": "global",
+                            "id": "global::OgmRecord"
                         }
                     }
                 },

package/dist/collection/components/ogm-menubar/ogm-menubar.test.js

@@ -1,5 +1,5 @@
 import { render, describe, it, expect, h } from "@stencil/vitest";
-import { OgmRecord } from "../../lib/record";
+import OgmRecord from "../../lib/record";
 describe('ogm-menubar', () => {
     describe('with a record', () => {
         it('renders the record title', async () => {
@@ -17,7 +17,9 @@ describe('ogm-menubar', () => {
         <ogm-menubar class="hydrated">
           <mock:shadow-root>
             <div class="menubar undefined">
-              <sl-icon-button name="list" label="Open sidebar" class="menu-button"></sl-icon-button>
+              <wa-button appearance="plain" class="menu-button">
+                <wa-icon name="list" label="Open sidebar" canvas="auto"></wa-icon>
+              </wa-button>
               <div class="title">
                 Coho Salmon Watersheds: San Francisco Bay Area, California, 2011
               </div>
@@ -34,7 +36,9 @@ describe('ogm-menubar', () => {
         <ogm-menubar class="hydrated">
           <mock:shadow-root>
             <div class="menubar undefined">
-              <sl-icon-button name="list" label="Open sidebar" class="menu-button"></sl-icon-button>
+              <wa-button appearance="plain" class="menu-button">
+                <wa-icon name="list" label="Open sidebar" canvas="auto"></wa-icon>
+              </wa-button>
               <div class="title"></div>
             </div>
           </mock:shadow-root>