@foodmarketmaker/mapag 0.0.9 → 0.0.11

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, effect, input, Input, Component, inject, NgZone, Injectable, output, viewChild, ChangeDetectionStrategy } from '@angular/core';
+import { signal, effect, input, Input, Component, ChangeDetectionStrategy, inject, NgZone, Injectable, output, viewChild } from '@angular/core';
 import { PMTiles, Protocol } from 'pmtiles';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -225,25 +225,36 @@ class Styles {
             return;
         }
         // Fetch and cache the style definition if not already cached
-        await this.fetchAndCacheStyle(styleData);
+        const styleSpec = await this.fetchAndCacheStyle(styleData);
+        if (!styleSpec) {
+            return;
+        }
         this.saveCustomSourcesAndLayers();
         this.map.once("styledata", () => {
             setTimeout(() => {
-                console.log('=== MAP ONCE ===');
                 // Update current basemap tracking from cached style
                 this.updateBasemapTracking(styleData);
                 // Then restore the custom sources/layers
                 this.restoreCustomSourcesAndLayers();
             }, 100);
         });
-        console.log('=== MAP SETTING STYLE ===');
-        this.map.setStyle(styleData.url);
+        // this.map.setStyle(styleData.url);
+        this.map.setStyle(styleSpec);
         this.style.set(styleData);
         this.currentStyleCode = styleData.code;
         if (this.onStyleChange) {
             this.onStyleChange(styleData);
         }
     }
+    async FetchStyleDefinition(styleData) {
+        const response = await fetch(styleData.url);
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const styleSpec = await response.json();
+        styleSpec.glyphs = 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf';
+        return styleSpec;
+    }
     async fetchAndCacheStyle(styleData) {
         // Skip if already cached
         if (this.styleCache[styleData.code]) {
@@ -260,6 +271,10 @@ class Styles {
                 throw new Error(`HTTP ${response.status}: ${response.statusText}`);
             }
             const styleSpec = await response.json();
+            // Add Glyphs
+            if (!styleSpec.glyphs) {
+                styleSpec.glyphs = 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf';
+            }
             // Extract source and layer IDs
             const sourceIds = Object.keys(styleSpec.sources || {});
             const layerIds = (styleSpec.layers || []).map((layer) => layer.id);
@@ -270,6 +285,7 @@ class Styles {
                 layers: layerIds
             };
             this.styleCache[styleData.code] = enhancedStyleData;
+            return styleSpec;
         }
         catch (error) {
             console.error('Failed to fetch style definition for:', styleData.code, ':', error);
@@ -295,9 +311,6 @@ class Styles {
     saveCustomSourcesAndLayers() {
         if (!this.map)
             return;
-        console.log('=== SAVING CUSTOM SOURCES AND LAYERS ===');
-        console.log('Current basemap sources:', Array.from(this.currentBasemapSources));
-        console.log('Current basemap layers:', Array.from(this.currentBasemapLayers));
         // Reset custom sources and layers
         this.customSourcesAndLayers = {
             sources: {},
@@ -305,31 +318,20 @@ class Styles {
             image: {},
         };
         const sources = this.map.getStyle().sources;
-        console.log('All current sources:', Object.keys(sources));
         for (const [sourceId, source] of Object.entries(sources)) {
             // Only save sources that are NOT part of the basemap
             if (!this.currentBasemapSources.has(sourceId)) {
-                console.log('Saving custom source:', sourceId);
                 this.customSourcesAndLayers.sources[sourceId] = source;
             }
             else {
-                console.log('Skipping basemap source:', sourceId);
             }
         }
         const layers = this.map.getStyle().layers;
-        console.log('All current layers:', layers.map(l => l.id));
         for (const layer of layers) {
-            if (layer.id === 'area-fill') {
-                console.log('TRACKING: AREA FILL');
-            }
             // Only save layers that are NOT part of the basemap
             if (!this.currentBasemapLayers.has(layer.id)) {
-                console.log('Saving custom layer:', layer.id);
                 this.customSourcesAndLayers.layers.push(layer);
             }
-            else {
-                console.log('Skipping basemap layer:', layer.id);
-            }
         }
         const allImageIDs = this.map.listImages();
         const customIDs = allImageIDs.filter((id) => id.startsWith("customImg-"));
@@ -343,50 +345,30 @@ class Styles {
                 }
             });
         }
-        console.log('=== SAVE COMPLETE ===');
-        console.log('Saved sources:', Object.keys(this.customSourcesAndLayers.sources));
-        console.log('Saved layers:', this.customSourcesAndLayers.layers.map(l => l.id));
-        console.log('Saved images:', Object.keys(this.customSourcesAndLayers.image));
     }
     restoreCustomSourcesAndLayers() {
         if (!this.map)
             return;
-        console.log('=== RESTORING CUSTOM SOURCES AND LAYERS ===');
-        console.log('Sources to restore:', Object.keys(this.customSourcesAndLayers.sources));
-        console.log('Layers to restore:', this.customSourcesAndLayers.layers.map(l => l.id));
         // Check what's actually on the map RIGHT NOW
         const currentSources = Object.keys(this.map.getStyle().sources || {});
         const currentLayers = (this.map.getStyle().layers || []).map(l => l.id);
-        console.log('ACTUAL current sources on map:', currentSources);
-        console.log('ACTUAL current layers on map:', currentLayers);
         // Add custom sources first
         for (const [sourceId, source] of Object.entries(this.customSourcesAndLayers.sources)) {
             AddSource(this.map, sourceId, source);
-            // try {
-            //   console.log('Adding custom source:', sourceId);
-            //   this.map.addSource(sourceId, source);
-            // } catch (error) {
-            //   console.error('Error adding source', sourceId, ':', error);
-            // }
         }
         // Add custom layers second
         for (const layer of this.customSourcesAndLayers.layers) {
             AddLayer(this.map, layer);
-            if (layer.id === 'area-fill') {
-                console.log('FOLUND: AREA FILL');
-            }
         }
         // Add all custom images
         for (const [imageId, image] of Object.entries(this.customSourcesAndLayers.image)) {
             try {
-                console.log('Adding custom image:', imageId);
                 this.map.addImage(imageId, image.data);
             }
             catch (error) {
                 console.error('Error adding image', imageId, ':', error);
             }
         }
-        console.log('=== RESTORE COMPLETE ===');
     }
 }
 const MapStyles = {
@@ -481,8 +463,6 @@ class BasemapSelect {
         }
         // Try different path approaches for debugging
         const originalPath = this.styleData.image;
-        console.log('Original image path:', originalPath);
-        console.log('StyleData:', this.styleData);
         // Return the original path first to test
         return `url(${originalPath})`;
     }
@@ -577,7 +557,6 @@ class BasemapSelectMenu {
         }
     }
     selectStyle(style) {
-        console.log('Style selected from popover:', style.name);
         const s = this.map().styles;
         if (s) {
             s.style.set(style);
@@ -636,11 +615,11 @@ class BasemapSelectMenu {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;width:200px;height:80px;position:relative}.basemap-container{position:relative;width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f5f5f5;overflow:hidden;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.basemap-container:hover{box-shadow:0 4px 16px #0003}.basemap-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#0000001a,#0000004d);border-radius:12px;pointer-events:none}.basemap-title{position:relative;z-index:2;color:#fff;font-size:19px;font-weight:600;text-align:center;padding:8px 16px;background:#0000;border-radius:8px;-webkit-user-select:none;user-select:none;text-shadow:0 2px 4px rgba(0,0,0,.8);max-width:90%;word-wrap:break-word;line-height:1.2}.basemap-container:not([style*=\"background-image: url\"]){background:linear-gradient(135deg,#667eea,#764ba2)}.basemap-container:not([style*=\"background-image: url\"]) .basemap-overlay{background:#0000001a}.style-popover{padding:16px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;border:1px solid rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;position:absolute;top:calc(100% + 8px);left:0;z-index:1000;max-width:90vw;max-height:80vh;overflow-y:auto;min-width:100%}.style-popover.show{opacity:1;visibility:visible;transform:translateY(0)}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;min-width:380px;max-width:600px}.style-item{cursor:pointer;transition:transform .2s ease}.style-item:hover{transform:scale(1.05)}@media (max-width: 768px){.style-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));min-width:300px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasemapSelect, selector: "mapag-basemap-select", inputs: ["styleData", "styles"] }] });
+  `, isInline: true, styles: [":host{display:block;width:200px;height:80px;position:relative}.basemap-container{position:relative;width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f5f5f5;overflow:hidden;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.basemap-container:hover{box-shadow:0 4px 16px #0003}.basemap-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#0000001a,#0000004d);border-radius:12px;pointer-events:none}.basemap-title{position:relative;z-index:2;color:#fff;font-size:19px;font-weight:600;text-align:center;padding:8px 16px;background:#0000;border-radius:8px;-webkit-user-select:none;user-select:none;text-shadow:0 2px 4px rgba(0,0,0,.8);max-width:90%;word-wrap:break-word;line-height:1.2}.basemap-container:not([style*=\"background-image: url\"]){background:linear-gradient(135deg,#667eea,#764ba2)}.basemap-container:not([style*=\"background-image: url\"]) .basemap-overlay{background:#0000001a}.style-popover{padding:16px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;border:1px solid rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;position:absolute;top:calc(100% + 8px);left:0;z-index:1000;max-width:90vw;max-height:80vh;overflow-y:auto;min-width:100%}.style-popover.show{opacity:1;visibility:visible;transform:translateY(0)}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;min-width:380px;max-width:600px}.style-item{cursor:pointer;transition:transform .2s ease}.style-item:hover{transform:scale(1.05)}@media (max-width: 768px){.style-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));min-width:300px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasemapSelect, selector: "mapag-basemap-select", inputs: ["styleData", "styles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BasemapSelectMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'mapag-basemap-select-menu', imports: [CommonModule, BasemapSelect], template: `
+            args: [{ selector: 'mapag-basemap-select-menu', imports: [CommonModule, BasemapSelect], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="basemap-container" 
          (mouseenter)="showPopover()" 
          (mouseleave)="hidePopover()"
@@ -12838,7 +12817,6 @@ class MapboxMapperGroup {
     svc;
     mappers = new Map();
     onStyleChange(map, svc) {
-        console.log('=== MAP ON STYLE CHANGE - MapboxMapperGroup ===');
         this.mappers.forEach((mapper) => {
             if (mapper.onStyleChange) {
                 mapper.onStyleChange(map, svc);
@@ -12847,7 +12825,7 @@ class MapboxMapperGroup {
     }
     set(name, mapper) {
         if (mapper == undefined) {
-            console.error('NO GOOD CAN COME FROM THIS');
+            return;
         }
         this.mappers.set(name, mapper);
         if (this.map && this.svc) {
@@ -12910,7 +12888,6 @@ class StandardLayersMapper {
     static POINTS = 'points';
     map;
     onStyleChange(map, svc) {
-        console.log('=== MAP ON STYLE CHANGE - StandardLayersMapper ===');
         this.onReady(map, svc);
     }
     onReady(map, svc) {
@@ -13003,7 +12980,6 @@ class AreaMapperMapper {
     }
     onStyleChange(map, svc) {
         // this.onReady(map, svc);
-        console.log('=== MAP ON STYLE CHANGE - AreaMapperMapper ===');
     }
     onReady(map, svc) {
         this.map = map;
@@ -14027,7 +14003,6 @@ class MapAreaSelectComponent {
         // this.m.areaType = this.areaType
         this.areaTypeSrc = Layers.FindVector(this.areaType);
         if (!this.areaTypeSrc) {
-            console.warn('MapAreaSelectComponent: No source found for area type ', this.areaType);
             return;
         }
         // Initialize the mapper
@@ -14125,22 +14100,20 @@ class MapComponent {
     ngOnDestroy() {
         this.styles.destroy();
     }
-    layerExists(map, layerId) {
-        if (map.getLayer(layerId) !== undefined) {
-            console.log(`Layer ${layerId} already exists`);
-        }
-    }
-    initializeMap() {
-        this.zone.runOutsideAngular(() => {
+    async initializeMap() {
+        this.zone.runOutsideAngular(async () => {
             const container = this.mapContainer();
-            let style = 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
-            // style =  'https://demotiles.maplibre.org/style.json'
+            // let style =
+            //   'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
+            // // style =  'https://demotiles.maplibre.org/style.json'
+            let style = await this.styles.FetchStyleDefinition(this.styles.style());
             if (container) {
                 // @ts-ignore - Type conflict between different maplibre-gl versions
                 const map = new maplibregl.Map({
                     container: container.nativeElement,
                     // style: this.basemap(),
-                    style: this.styles.style().url, // Default style
+                    // style: this.styles.style().url, // Default style
+                    style: style, // Default style
                     center: [-98, 38.88],
                     minZoom: 1,
                     zoom: 3,
@@ -14637,10 +14610,15 @@ class HardinessMapper {
     over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
     settings = signal(new HardinessSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
     async onStyleChange(map, svc) {
-        console.log('=== MAP ON STYLE CHANGE - MapboxMapperGroup ===');
         // await this.onReady(map, svc);
     }
-    constructor() {
+    constructor(settings) {
+        if (settings) {
+            this.settings.set({
+                ...this.settings(),
+                ...settings
+            });
+        }
         const _ = effect(() => {
             const settings = this.settings();
             // this._update(settings);
@@ -14699,7 +14677,7 @@ class HardinessMapper {
         }
     }
     update(newSettings) {
-        this.settings.set({ ...newSettings });
+        this.settings.set({ ...this.settings(), ...newSettings });
     }
     _update(settings) {
         if (!this.map) {
@@ -14941,28 +14919,47 @@ class VectorTileServerMapper {
 // }
 
 class WatershedMapper {
+    static WBDHU2 = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/WBDHU2.pmtiles';
+    static WBDHU4 = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/WBDHU4.pmtiles';
+    static WBDHU6 = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/watershedhu6.pmtiles';
+    static WBDHU8 = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/WBDHU8.pmtiles';
+    static WBDHU10 = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/WBDHU10.pmtiles';
+    static WBDHU12 = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/WBDHU12.pmtiles';
     FILL_LAYER_ID = 'watershed-layer';
     LINE_LAYER_ID = 'watershed-layer-line';
+    LABEL_LAYER_ID = 'watershed-layer-label';
     SOURCE_ID = 'watershedSource';
     SOURCE_LAYER = 'watershedhu6';
+    currentHU = 'HUC6';
     settings = signal(new WatershedSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
     current = null;
     currentFeatureID = undefined;
     over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
-    constructor() {
+    constructor(settings) {
+        if (settings) {
+            this.settings.set({
+                ...this.settings(),
+                ...settings
+            });
+        }
         const _ = effect(() => {
             const settings = this.settings();
             this._update(settings);
         }, ...(ngDevMode ? [{ debugName: "_" }] : []));
     }
     update(settings) {
-        this.settings.set({ ...settings });
+        this.settings.set({ ...this.settings(), ...settings });
     }
     _update(settings) {
         if (!this.map) {
             return;
         }
         const map = this.map;
+        if (this.currentHU !== settings.hydrologicUnit) {
+            this.clear();
+            this.currentHU = settings.hydrologicUnit;
+            this.create();
+        }
         if (settings.visible) {
             map.setLayoutProperty(this.FILL_LAYER_ID, 'visibility', 'visible');
             map.setLayoutProperty(this.LINE_LAYER_ID, 'visibility', 'visible');
@@ -14976,13 +14973,47 @@ class WatershedMapper {
         map.setPaintProperty(this.LINE_LAYER_ID, 'line-color', settings.borderColor);
         map.setPaintProperty(this.LINE_LAYER_ID, 'line-width', settings.borderWidth);
         map.setPaintProperty(this.LINE_LAYER_ID, 'line-opacity', settings.borderOpacity);
+        map.setLayoutProperty(this.LABEL_LAYER_ID, 'visibility', settings.labelsVisible ? 'visible' : 'none');
+        map.setPaintProperty(this.LABEL_LAYER_ID, 'text-size', settings.labelsSize);
+        map.setPaintProperty(this.LABEL_LAYER_ID, 'text-color', settings.labelsColor);
+        map.setPaintProperty(this.LABEL_LAYER_ID, 'text-halo-color', settings.labelsHaloColor);
+        map.setPaintProperty(this.LABEL_LAYER_ID, 'text-halo-width', settings.labelsHaloWidth);
     }
     create() {
         if (!this.map) {
             return;
         }
         const map = this.map;
-        const PMTILES_URL = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/watershedhu6.pmtiles';
+        let PMTILES_URL = WatershedMapper.WBDHU6;
+        switch (this.settings().hydrologicUnit) {
+            case 'HUC2':
+                PMTILES_URL = WatershedMapper.WBDHU2;
+                this.SOURCE_LAYER = 'WBDHU2';
+                break;
+            case 'HUC4':
+                PMTILES_URL = WatershedMapper.WBDHU4;
+                this.SOURCE_LAYER = 'WBDHU4';
+                break;
+            case 'HUC6':
+                PMTILES_URL = WatershedMapper.WBDHU6;
+                this.SOURCE_LAYER = 'watershedhu6';
+                break;
+            case 'HUC8':
+                PMTILES_URL = WatershedMapper.WBDHU8;
+                this.SOURCE_LAYER = 'WBDHU8';
+                break;
+            case 'HUC10':
+                PMTILES_URL = WatershedMapper.WBDHU10;
+                this.SOURCE_LAYER = 'WBDHU10';
+                break;
+            case 'HUC12':
+                PMTILES_URL = WatershedMapper.WBDHU12;
+                this.SOURCE_LAYER = 'WBDHU12';
+                break;
+            default:
+                PMTILES_URL = WatershedMapper.WBDHU6;
+                this.SOURCE_LAYER = 'watershedhu6';
+        }
         AddSource(map, this.SOURCE_ID, {
             type: 'vector',
             url: PMTILES_URL,
@@ -15000,6 +15031,15 @@ class WatershedMapper {
             "source-layer": this.SOURCE_LAYER,
             type: 'line',
         }, StandardLayersMapper.POLYGONS_BACKGROUND);
+        AddLayer(map, {
+            id: this.LABEL_LAYER_ID,
+            source: this.SOURCE_ID,
+            "source-layer": this.SOURCE_LAYER,
+            type: 'symbol',
+            layout: {
+                'text-field': ['get', 'name'],
+            },
+        }, StandardLayersMapper.POLYGONS_BACKGROUND);
         this._update(this.settings());
         if (!addedFill) {
             return;
@@ -15043,6 +15083,7 @@ class WatershedMapper {
         if (this.map) {
             this.map.removeLayer(this.FILL_LAYER_ID);
             this.map.removeLayer(this.LINE_LAYER_ID);
+            this.map.removeLayer(this.LABEL_LAYER_ID);
             this.map.removeSource(this.SOURCE_ID);
         }
     }
@@ -15053,12 +15094,18 @@ class WatershedMapper {
     popup = null;
 }
 class WatershedSettings {
+    hydrologicUnit = 'HUC6';
     visible = true;
     fillColor = '#0000ff';
     fillOpacity = 0.1;
     borderColor = '#01018bff';
     borderWidth = 1;
     borderOpacity = 1.0;
+    labelsVisible = true;
+    labelsSize = 12;
+    labelsColor = '#000000';
+    labelsHaloColor = '#ffffff';
+    labelsHaloWidth = 1;
 }
 
 class HttpBoundaryLoader {