Merge pull request #7 from boettiger-lab/feat/default-style-tooltip-visible

feat: config-driven default style, hover tooltip, and default visibility

Author: cboettig

app/dataset-catalog.js

@@ -156,6 +156,9 @@ export class DatasetCatalog {
                     url: asset.href,
                     sourceLayer: asset['vector:layers']?.[0] || asset['pmtiles:layer'] || assetId,
                     description: asset.description || '',
+                    defaultStyle: perAsset.default_style || null,
+                    tooltipFields: perAsset.tooltip_fields || null,
+                    defaultVisible: perAsset.visible === true,
                 });
             } else if (type.includes('geotiff') || type.includes('tiff')) {
                 const colormap = perAsset.colormap || options.colormap || 'reds';
@@ -357,8 +360,10 @@ export class DatasetCatalog {
                             url: `pmtiles://${ml.url}`,
                         },
                         sourceLayer: ml.sourceLayer,
-                        paint: { 'fill-color': '#2E7D32', 'fill-opacity': 0.5 },
+                        paint: ml.defaultStyle || { 'fill-color': '#2E7D32', 'fill-opacity': 0.5 },
                         columns: ds.columns,
+                        tooltipFields: ml.tooltipFields || null,
+                        defaultVisible: ml.defaultVisible || false,
                     });
                 } else if (ml.layerType === 'raster') {
                     let tilesUrl = `${this.titilerUrl}/cog/tiles/WebMercatorQuad/{z}/{x}/{y}.png?url=${encodeURIComponent(ml.cogUrl)}&colormap_name=${ml.colormap}`;

app/map-manager.js

@@ -55,6 +55,11 @@ export class MapManager {
         this.ready = new Promise(resolve => {
             this.map.on('load', resolve);
         });
+
+        // Shared hover tooltip element
+        this._tooltip = document.createElement('div');
+        this._tooltip.className = 'map-tooltip';
+        document.body.appendChild(this._tooltip);
     }
 
     /**
@@ -72,7 +77,7 @@ export class MapManager {
      * Register a single layer on the map.
      */
     registerLayer(config) {
-        const { layerId, datasetId, displayName, type, source, sourceLayer, paint, columns } = config;
+        const { layerId, datasetId, displayName, type, source, sourceLayer, paint, columns, tooltipFields, defaultVisible } = config;
         const sourceId = `src-${layerId.replace(/\//g, '-')}`;
         const mapLayerId = `layer-${layerId.replace(/\//g, '-')}`;
 
@@ -85,7 +90,7 @@ export class MapManager {
         const layerDef = {
             id: mapLayerId,
             source: sourceId,
-            layout: { visibility: 'none' },
+            layout: { visibility: defaultVisible ? 'visible' : 'none' },
         };
 
         if (type === 'vector') {
@@ -108,11 +113,35 @@ export class MapManager {
             displayName,
             type,
             sourceLayer: sourceLayer || null,
-            visible: false,
+            visible: defaultVisible || false,
             filter: null,
             columns: columns || [],
             defaultPaint: { ...(paint || {}) },
+            tooltipFields: tooltipFields || null,
         });
+
+        // Wire hover tooltip if fields are declared
+        if (tooltipFields && tooltipFields.length > 0) {
+            this.map.on('mousemove', mapLayerId, (e) => {
+                if (!e.features || e.features.length === 0) return;
+                const props = e.features[0].properties;
+                const rows = tooltipFields
+                    .filter(f => props[f] !== undefined && props[f] !== null && props[f] !== '')
+                    .map(f => `<tr><th>${f}</th><td>${props[f]}</td></tr>`)
+                    .join('');
+                if (!rows) return;
+                this._tooltip.innerHTML = `<table>${rows}</table>`;
+                this._tooltip.style.display = 'block';
+                this._tooltip.style.left = (e.originalEvent.clientX + 12) + 'px';
+                this._tooltip.style.top = (e.originalEvent.clientY - 12) + 'px';
+                this.map.getCanvas().style.cursor = 'pointer';
+            });
+
+            this.map.on('mouseleave', mapLayerId, () => {
+                this._tooltip.style.display = 'none';
+                this.map.getCanvas().style.cursor = '';
+            });
+        }
     }
 
     // ---- Layer Visibility ----

app/style.css

@@ -251,6 +251,44 @@ body {
     border-color: rgba(0, 124, 191, 0.35);
 }
 
+/* Hover tooltip */
+.map-tooltip {
+    display: none;
+    position: fixed;
+    z-index: 100;
+    background: rgba(255, 255, 255, 0.95);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    padding: 8px 10px;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 12px;
+    color: #333;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    pointer-events: none;
+    max-width: 260px;
+}
+
+.map-tooltip table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.map-tooltip th {
+    font-weight: 600;
+    color: #666;
+    text-align: left;
+    padding: 2px 10px 2px 0;
+    white-space: nowrap;
+}
+
+.map-tooltip td {
+    color: #333;
+    padding: 2px 0;
+    word-break: break-word;
+}
+
 #h3-res-badge {
     position: absolute;
     z-index: 1;

example-ghpages/layers-input.json

@@ -31,7 +31,22 @@
         {
             "collection_id": "pad-us-4.1-combined",
             "assets": [
-                "pmtiles"
+                {
+                    "id": "pmtiles",
+                    "display_name": "Protected Areas (PAD-US)",
+                    "visible": true,
+                    "default_style": {
+                        "fill-color": ["match", ["get", "GAP_Sts"],
+                            1, "#26633A",
+                            2, "#3E9C47",
+                            3, "#7EB3D3",
+                            4, "#BDBDBD",
+                            "#888888"
+                        ],
+                        "fill-opacity": 0.7
+                    },
+                    "tooltip_fields": ["Unit_Nm", "GAP_Sts", "Mang_Type"]
+                }
             ]
         },
         {

example-k8s/layers-input.json

@@ -13,7 +13,22 @@
         {
             "collection_id": "pad-us-4.1-combined",
             "assets": [
-                "pmtiles"
+                {
+                    "id": "pmtiles",
+                    "display_name": "Protected Areas (PAD-US)",
+                    "visible": true,
+                    "default_style": {
+                        "fill-color": ["match", ["get", "GAP_Sts"],
+                            1, "#26633A",
+                            2, "#3E9C47",
+                            3, "#7EB3D3",
+                            4, "#BDBDBD",
+                            "#888888"
+                        ],
+                        "fill-opacity": 0.7
+                    },
+                    "tooltip_fields": ["Unit_Nm", "GAP_Sts", "Mang_Type"]
+                }
             ]
         },
         {