Extract style properties to a Theme class

Author: thatbudakguy

src/components.d.ts

@@ -30,10 +30,6 @@ export namespace Components {
           * @default 0
          */
         "padding": number;
-        /**
-          * @default 100
-         */
-        "previewOpacity": number;
         "record": OgmRecord;
         "theme": 'light' | 'dark';
     }
@@ -232,10 +228,6 @@ declare namespace LocalJSX {
           * @default 0
          */
         "padding"?: number;
-        /**
-          * @default 100
-         */
-        "previewOpacity"?: number;
         "record"?: OgmRecord;
         "theme"?: 'light' | 'dark';
     }
@@ -279,7 +271,6 @@ declare namespace LocalJSX {
     }
     interface OgmMapAttributes {
         "theme": 'light' | 'dark';
-        "previewOpacity": number;
         "padding": number;
     }
     interface OgmMenubarAttributes {

src/components/ogm-map/ogm-map.tsx

@@ -7,23 +7,12 @@ import { getElement } from '../../lib/elements';
 import { getSources } from '../../lib/sources';
 import { getMapPreviewers } from '../../lib/previewers';
 import MapLibrePreviewer from '../../lib/previewers/maplibre';
+import MapLibreTheme from '../../lib/themes/maplibre';
 
 // Register PMTiles protocol
 const protocol = new PMTilesProtocol();
 maplibregl.addProtocol('pmtiles', protocol.tile);
 
-// Web Awesome's palette tokens are documented inline (e.g. "#0a3a1d /* oklch(...) */").
-// Browsers are supposed to strip CSS comments before exposing a custom property's computed
-// value, but Safari has a bug where the comment survives, which MapLibre then rejects as an
-// invalid color. Strip it defensively here so we don't depend on browser-specific behavior.
-const readColorProperty = (el: Element, property: string): string => {
-  return window
-    .getComputedStyle(el)
-    .getPropertyValue(property)
-    .replace(/\/\*.*?\*\//g, '')
-    .trim();
-};
-
 @Component({
   tag: 'ogm-map',
   styleUrl: 'ogm-map.css',
@@ -33,15 +22,16 @@ export class OgmMap {
   @Element() el: HTMLElement;
   @Prop() record: OgmRecord;
   @Prop() theme: 'light' | 'dark';
-  @Prop() previewOpacity: number = 100;
   @Prop() padding: number = 0;
   @Event() mapIdle: EventEmitter<void>;
   @Event() mapLoading: EventEmitter<void>;
 
   // MapLibre map instance and popup instance for feature info display
   protected map: maplibregl.Map;
+  protected mapTheme: MapLibreTheme;
   protected popup: maplibregl.Popup | undefined = undefined;
   protected attributesEl: HTMLOgmAttributesElement;
+  protected hoveredFeature: maplibregl.MapGeoJSONFeature | undefined = undefined;
 
   // Container element reference for fullscreen
   protected containerEl: HTMLElement;
@@ -51,11 +41,12 @@ export class OgmMap {
 
   // 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,
@@ -69,18 +60,8 @@ export class OgmMap {
 
     // 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
@@ -135,31 +116,20 @@ export class OgmMap {
     this.clearFeatureSelection();
     this.destroyPopup();
 
-    // Collect previewers to remove after the new record is previewed
-    const oldPreviewers = [];
-    while (this.previewers.length) oldPreviewers.push(this.previewers.pop() as MapLibrePreviewer);
+    // Clear existing previews
+    while (this.previewers.length) await this.previewers.pop()?.clearPreview();
 
     // Populate the new previewers and render them
     const sources = getSources(record);
-    const previewOptions = {
-      fillColor: this.fillColor,
-      fillHighlightColor: this.fillHighlightColor,
-      fillInvalidColor: this.fillInvalidColor,
-      lineColor: this.lineColor,
-      lineHighlightColor: this.lineHighlightColor,
-      opacity: this.previewOpacity / 100,
-    };
-    const newPreviewers = await getMapPreviewers(sources, this.map, previewOptions);
-    while (newPreviewers.length) this.previewers.push(newPreviewers.pop() as MapLibrePreviewer);
-    for (const previewer of this.previewers) await previewer.preview();
+    for (const previewer of await getMapPreviewers(sources, this.map, this.mapTheme.getStyle())) {
+      this.previewers.push(previewer);
+      await previewer.preview();
+    }
 
     // Fit to bounds from the record
     const bounds = record.getBounds();
     if (bounds) await this.fitMapBounds(bounds);
 
-    // Remove old previewers after the new ones are rendered
-    for (const previewer of oldPreviewers) await previewer.clearPreview();
-
     // Emit map idle event to signal that the map is ready
     this.mapIdle.emit();
   }
@@ -186,8 +156,13 @@ export class OgmMap {
   // Use the crosshair cursor if there's something to inspect
   protected handleHover(event: maplibregl.MapMouseEvent) {
     const features = this.map.queryRenderedFeatures(event.point, { layers: this.previewLayers });
-    if (features.length > 0) this.map.getCanvas().style.cursor = 'crosshair';
-    else this.map.getCanvas().style.cursor = '';
+    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
@@ -219,13 +194,28 @@ export class OgmMap {
     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
   protected selectFeature(feature: maplibregl.MapGeoJSONFeature) {
     this.map.setFeatureState({ source: feature.source, id: feature.id, sourceLayer: feature.sourceLayer }, { selected: true });
   }
 
+  // Set styling of a single feature to hovered state
+  protected hoverFeature(feature: maplibregl.MapGeoJSONFeature) {
+    this.clearHoveredFeature();
+    this.hoveredFeature = feature;
+    this.map.setFeatureState({ source: feature.source, id: feature.id, sourceLayer: feature.sourceLayer }, { hover: true });
+  }
+
+  protected clearHoveredFeature() {
+    if (this.hoveredFeature) {
+      this.map.setFeatureState({ source: this.hoveredFeature.source, id: this.hoveredFeature.id, sourceLayer: this.hoveredFeature.sourceLayer }, { hover: false });
+      this.hoveredFeature = undefined;
+    }
+  }
+
   // Create a new popup and set its content and location
   protected createPopup(location: maplibregl.LngLatLike) {
     this.popup = new maplibregl.Popup({ maxWidth: 'none', closeButton: false }).setDOMContent(this.attributesEl).setLngLat(location).addTo(this.map);
@@ -244,41 +234,6 @@ export class OgmMap {
     return this.previewers.flatMap(previewer => previewer.layerIds);
   }
 
-  // Base map style based on the theme
-  protected 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';
-  }
-
-  // Fill colors for vector data, based on the theme
-  protected get fillColor() {
-    return readColorProperty(this.el, '--wa-color-brand-50');
-  }
-
-  // Fill color for vector data when selected, based on the theme
-  protected get fillHighlightColor() {
-    return readColorProperty(this.el, '--wa-color-success-50');
-  }
-
-  // Fill color for vector data when missing/invalid, based on the theme
-  protected get fillInvalidColor() {
-    return readColorProperty(this.el, '--wa-color-warning-50');
-  }
-
-  // Line/stroke color for vector data, based on the theme
-  protected get lineColor() {
-    return readColorProperty(this.el, '--wa-color-brand-80');
-  }
-
-  // Line/stroke color for vector data when selected, based on the theme
-  protected get lineHighlightColor() {
-    return readColorProperty(this.el, '--wa-color-success-80');
-  }
-
-  // Line/stroke color for vector data when missing/invalid, based on the theme
-  protected get lineInvalidColor() {
-    return readColorProperty(this.el, '--wa-color-warning-80');
-  }
-
   render() {
     return <div id="map" class={`wa-${this.theme}`}></div>;
   }

src/index.html

@@ -76,10 +76,15 @@ <h1>OpenGeoMetadata Viewer Preview</h1>
     <p>Click a button to load a record.</p>
     <div class="inputs">
       <div class="buttons">
+        <button
+          data-record-url="https://raw.githubusercontent.com/OpenGeoMetadata/edu.berkeley/02b742b5d7ea01aa77bad37a4429951164b34eab/metadata-aardvark/s7sq63/geoblacklight.json"
+        >
+          Calaveras Contours (Line, WMS)
+        </button>
         <button
           data-record-url="https://raw.githubusercontent.com/OpenGeoMetadata/edu.stanford.purl/b74664cbb36fb985fe2ebee8d0d6d9657f06ada1/metadata-aardvark/cg/357/zz/0321/geoblacklight.json"
         >
-          Contours (Line, WMS, Restricted)
+          Russian River Contours (Line, WMS, Restricted)
         </button>
         <button data-record-url="https://raw.githubusercontent.com/geoblacklight/geoblacklight/refs/heads/main/spec/fixtures/solr_documents/public_cog_princeton.json">
           Tibet (Scanned Map, COG)

src/lib/previewers/cog-deck.ts

@@ -4,21 +4,27 @@ import { DecoderPool } from '@developmentseed/geotiff';
 
 import Previewer from './previewer';
 import type Source from '../sources/source';
+import { type MapLibreStyle } from '../themes/maplibre';
 
 // Deck.gl-based previewer for Cloud Optimized GeoTIFF (COG) sources
 // Can warp COGs on the fly; supports projections other than Web Mercator
 // NOTE: can't be built currently due to a bug; see:
 // https://github.com/OpenGeoMetadata/ogm-viewer/issues/100
 export default class DeckCogPreviewer extends Previewer {
+  // Store reference to the map and styles
+  protected style: MapLibreStyle;
   protected map: maplibregl.Map;
+
+  // Store reference to the deck.gl overlay and the layer ID for cleanup
   protected deckOverlay: DeckOverlay;
   protected layerId: string | undefined = undefined;
 
   private bounds: maplibregl.LngLatBoundsLike | undefined = undefined;
 
-  constructor(source: Source, map: maplibregl.Map) {
+  constructor(source: Source, map: maplibregl.Map, style: MapLibreStyle) {
     super(source);
     this.map = map;
+    this.style = style;
     this.deckOverlay = this.getDeckOverlay();
   }
 

src/lib/previewers/cog.ts

@@ -3,7 +3,7 @@ import { cogProtocol } from '@geomatico/maplibre-cog-protocol';
 
 import RasterPreviewer from './raster';
 import CogSource from '../sources/cog';
-import { MapLibreOptions } from './maplibre';
+import { type MapLibreStyle } from '../themes/maplibre';
 
 // COG previewer using MapLibre COG protocol plugin
 // Only works for COGs in Web Mercator projection; can't warp in-browser
@@ -12,8 +12,8 @@ export default class CogPreviewer extends RasterPreviewer {
   declare protected source: CogSource;
 
   // Register the 'cog://' protocol handler with MapLibre when the previewer is created
-  constructor(source: CogSource, map: maplibregl.Map, options?: Partial<MapLibreOptions>) {
-    super(source, map, options);
+  constructor(source: CogSource, map: maplibregl.Map, style: MapLibreStyle) {
+    super(source, map, style);
     maplibregl.addProtocol('cog', cogProtocol);
   }
 

src/lib/previewers/index.ts

@@ -15,19 +15,21 @@ import PMTilesVectorPreviewer from './pmtiles-vector';
 import RasterPreviewer from './raster';
 import WmsPreviewer from './wms';
 
+import { type MapLibreStyle } from '../themes/maplibre';
+
 // Given a list of sources, return a list of previewers that can be used to preview them on a map
-export const getMapPreviewers = async (sources: Source[], map: maplibregl.Map, options: any) => {
+export const getMapPreviewers = async (sources: Source[], map: maplibregl.Map, style: MapLibreStyle) => {
   const previewers = [] as MapLibrePreviewer[];
 
   for (const source of sources) {
-    if (source instanceof OpenIndexMapSource) previewers.push(new OpenIndexMapPreviewer(source, map, options));
-    else if (source instanceof GeoJSONSource) previewers.push(new GeoJSONPreviewer(source, map, options));
+    if (source instanceof OpenIndexMapSource) previewers.push(new OpenIndexMapPreviewer(source, map, style));
+    else if (source instanceof GeoJSONSource) previewers.push(new GeoJSONPreviewer(source, map, style));
     else if (source instanceof PMTilesSource) {
-      if (await source.isVector()) previewers.push(new PMTilesVectorPreviewer(source, map, options));
-      else previewers.push(new PMTilesRasterPreviewer(source, map, options));
-    } else if (source instanceof WmsSource) previewers.push(new WmsPreviewer(source, map, options));
-    else if (source instanceof CogSource) previewers.push(new CogPreviewer(source, map, options));
-    else if (source instanceof RasterSource) previewers.push(new RasterPreviewer(source, map, options));
+      if (await source.isVector()) previewers.push(new PMTilesVectorPreviewer(source, map, style));
+      else previewers.push(new PMTilesRasterPreviewer(source, map, style));
+    } else if (source instanceof WmsSource) previewers.push(new WmsPreviewer(source, map, style));
+    else if (source instanceof CogSource) previewers.push(new CogPreviewer(source, map, style));
+    else if (source instanceof RasterSource) previewers.push(new RasterPreviewer(source, map, style));
   }
 
   return previewers;

src/lib/previewers/maplibre.ts

@@ -2,31 +2,26 @@ import type { SourceSpecification, AddLayerObject } from 'maplibre-gl';
 
 import Previewer from './previewer';
 import Source from '../sources/source';
-
-export type MapLibreOptions = {
-  padding: number; // pixels
-  opacity: number; // decimal between 0 and 1
-};
-
-const defaultOptions: MapLibreOptions = {
-  padding: 40,
-  opacity: 1,
-} as const;
+import { type MapLibreStyle } from '../themes/maplibre';
 
 export default abstract class MapLibrePreviewer extends Previewer {
+  // Store reference to the map and styles
+  protected style: MapLibreStyle;
+  protected map: maplibregl.Map;
+
   // Stored state for added source and layers to allow for cleanup
   sourceId: string | null = null;
   layerIds: string[] = [];
 
-  protected map: maplibregl.Map;
-  protected options: MapLibreOptions;
+  // Current opacity state
   protected opacity: number;
 
-  constructor(source: Source, map: maplibregl.Map, options?: Partial<MapLibreOptions>) {
+  // Initialize with opacity at the theme's opacity value
+  constructor(source: Source, map: maplibregl.Map, style: MapLibreStyle) {
     super(source);
     this.map = map;
-    this.options = { ...defaultOptions, ...options } as MapLibreOptions;
-    this.opacity = this.options.opacity;
+    this.style = style;
+    this.opacity = this.style.opacity;
   }
 
   // Add source and preview layers if they don't already exist

src/lib/previewers/pmtiles-vector.ts

@@ -19,6 +19,13 @@ export default class PMTilesVectorPreviewer extends VectorPreviewer {
     };
   }
 
+  protected createPolygonOutlineLayer(layerId: string): LineLayerSpecification {
+    return {
+      ...super.createPolygonOutlineLayer(layerId),
+      'source-layer': layerId,
+    };
+  }
+
   protected createLineLayer(layerId: string): LineLayerSpecification {
     return {
       ...super.createLineLayer(layerId),