@foodmarketmaker/mapag 0.0.10 → 0.0.12

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -225,7 +225,10 @@ 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(() => {
@@ -235,13 +238,23 @@ class Styles {
                 this.restoreCustomSourcesAndLayers();
             }, 100);
         });
-        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]) {
@@ -258,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);
@@ -268,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);
@@ -14082,17 +14100,20 @@ class MapComponent {
     ngOnDestroy() {
         this.styles.destroy();
     }
-    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,
@@ -14898,10 +14919,18 @@ 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;
@@ -14926,6 +14955,11 @@ class WatershedMapper {
             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');
@@ -14939,13 +14973,48 @@ 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);
+        const watershedLabelVisible = settings.visible && settings.labelsVisible;
+        map.setLayoutProperty(this.LABEL_LAYER_ID, 'visibility', watershedLabelVisible ? '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,
@@ -14963,10 +15032,51 @@ 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'],
+            },
+            paint: {
+                'text-color': this.settings().labelsColor,
+                'text-halo-color': this.settings().labelsHaloColor,
+                'text-halo-width': this.settings().labelsHaloWidth,
+                // 'text-size': this.settings().labelsSize,
+            },
+        }, StandardLayersMapper.POLYGONS_BACKGROUND);
         this._update(this.settings());
         if (!addedFill) {
             return;
         }
+        map.on('zoomend', () => {
+            if (!this.settings().visible) {
+                return;
+            }
+            const zoom = map.getZoom();
+            if (this.settings().autoSelectLayer) {
+                if (zoom >= 0 && zoom < 5 && this.currentHU !== 'HUC2') {
+                    this.update({ hydrologicUnit: 'HUC2' });
+                }
+                else if (zoom >= 5 && zoom < 7 && this.currentHU !== 'HUC4') {
+                    this.update({ hydrologicUnit: 'HUC4' });
+                }
+                else if (zoom >= 7 && zoom < 9 && this.currentHU !== 'HUC6') {
+                    this.update({ hydrologicUnit: 'HUC6' });
+                }
+                else if (zoom >= 9 && zoom < 11 && this.currentHU !== 'HUC8') {
+                    this.update({ hydrologicUnit: 'HUC8' });
+                }
+                else if (zoom >= 11 && zoom < 13 && this.currentHU !== 'HUC10') {
+                    this.update({ hydrologicUnit: 'HUC10' });
+                }
+                else if (zoom >= 13 && this.currentHU !== 'HUC12') {
+                    this.update({ hydrologicUnit: 'HUC12' });
+                }
+            }
+        });
         map.on('mousemove', this.FILL_LAYER_ID, (e) => {
             this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
         });
@@ -15006,6 +15116,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);
         }
     }
@@ -15016,12 +15127,19 @@ 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;
+    autoSelectLayer = false;
 }
 
 class HttpBoundaryLoader {