@foodmarketmaker/mapag 0.0.5 → 0.0.8

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -32,16 +32,18 @@ function SaveMap(map) {
 }
 function AddLayer(map, layer, afterId) {
     if (!map)
-        return;
+        return false;
     try {
         if (map.getLayer(layer.id)) {
             console.log(`Layer ${layer.id} already exists`);
-            return;
+            return false;
         }
         map.addLayer(layer, afterId);
+        return true;
     }
     catch (error) {
         console.debug(`Error adding layer ${layer.id}`);
+        return false;
     }
 }
 function RemoveLayer(map, layerId) {
@@ -61,7 +63,6 @@ function AddSource(map, sourceId, source) {
         return;
     try {
         if (map.getSource(sourceId)) {
-            console.log(`Source ${sourceId} already exists`);
             return;
         }
         map.addSource(sourceId, source);
@@ -14105,6 +14106,7 @@ class MapComponent {
     mapper = input(new MapboxMapperGroup(), ...(ngDevMode ? [{ debugName: "mapper" }] : []));
     mapContainer = viewChild('map', ...(ngDevMode ? [{ debugName: "mapContainer" }] : []));
     id = input('mapid', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    onMap = output();
     // accessToken = input.required<string>();
     // FontAwesome icons
     faPrint = faPrint;
@@ -14134,7 +14136,7 @@ class MapComponent {
             // style =  'https://demotiles.maplibre.org/style.json'
             if (container) {
                 // @ts-ignore - Type conflict between different maplibre-gl versions
-                this.map = new maplibregl.Map({
+                const map = new maplibregl.Map({
                     container: container.nativeElement,
                     // style: this.basemap(),
                     style: this.styles.style().url, // Default style
@@ -14142,36 +14144,43 @@ class MapComponent {
                     minZoom: 1,
                     zoom: 3,
                 });
+                this.map = map;
                 // disable map rotation using right click + drag
-                if (this.map) {
-                    this.map.dragRotate.disable();
-                    this.map.on('styledata', (e) => {
-                        console.log('= MAP STYLE DATA ===', e);
-                        if (!this.map)
-                            return;
-                        this.mapper().onStyleChange(this.map, this.svc);
+                map.dragRotate.disable();
+                // Forward style change events to the mapper
+                map.on('styledata', (e) => {
+                    this.zone.runOutsideAngular(() => {
+                        this.mapper().onStyleChange(map, this.svc);
                     });
-                    this.map.on('idle', () => {
-                        console.log('= MAP IDLE ===');
-                        if (!this.map)
-                            return;
-                        this.mapper().onStyleChange(this.map, this.svc);
+                });
+                // Forward style change events to the mapper
+                this.map.on('idle', () => {
+                    this.zone.runOutsideAngular(() => {
+                        this.mapper().onStyleChange(map, this.svc);
                     });
-                    this.map.on('load', () => {
-                        if (!this.map)
-                            return;
-                        console.log('Map loaded successfully');
-                        this.styles.initializeMap(this.map);
-                        // Setup the mapper
-                        const mapper = this.mapper();
-                        // Set the map in the services
-                        this.svc.setMap(this.map);
-                        this.svc.setMapper(mapper);
-                        this.selectionSvc.setMap(this.map);
-                        this.selectionSvc.setMapper(mapper);
-                        this.map.addControl(new maplibregl.NavigationControl());
+                });
+                // Process when the map has finished loading
+                this.map.on('load', () => {
+                    this.styles.initializeMap(map);
+                    // Setup the mapper
+                    const mapper = this.mapper();
+                    // Set the map in the services
+                    this.svc.setMap(map);
+                    this.svc.setMapper(mapper);
+                    this.selectionSvc.setMap(map);
+                    this.selectionSvc.setMapper(mapper);
+                    // Just create our standard Layers
+                    const std = new StandardLayersMapper();
+                    std.onReady(map, this.svc);
+                    // Notify that the map is ready
+                    this.zone.runOutsideAngular(() => {
+                        this.onMap.emit(map);
                     });
-                }
+                    // Initialize the mapper(s)
+                    this.zone.runOutsideAngular(() => {
+                        this.mapper().onReady(map, this.svc);
+                    });
+                });
             }
         });
     }
@@ -14191,7 +14200,7 @@ class MapComponent {
         this.map.triggerRepaint();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: MapComponent, isStandalone: true, selector: "mapag-map", inputs: { mapper: { classPropertyName: "mapper", publicName: "mapper", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["map"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: MapComponent, isStandalone: true, selector: "mapag-map", inputs: { mapper: { classPropertyName: "mapper", publicName: "mapper", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMap: "onMap" }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["map"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="mapcontainer" #map>
       @if (mapper().legends.length) { @for (legend of mapper().legends; track
       legend) {
@@ -14242,7 +14251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     </div>
     <ng-content></ng-content>
   `, styles: [":host{height:100%;position:relative;overflow:hidden}.mapcontainer{margin:0;padding:0;height:100%;width:100%}.legend{position:absolute;top:10px;right:10px;background:#fff;padding:10px;border-radius:5px;box-shadow:0 2px 4px #0003;z-index:1000}.buttons{position:absolute;top:10px;left:10px;z-index:1000}.buttons>button{border-radius:5px;border:1px solid #ccc;background:#fff;color:#333;padding:8px 12px;cursor:pointer;box-shadow:0 2px 4px #0003}.buttons>button:hover{background-color:#f0f0f0}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { mapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapper", required: false }] }], mapContainer: [{ type: i0.ViewChild, args: ['map', { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { mapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapper", required: false }] }], mapContainer: [{ type: i0.ViewChild, args: ['map', { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], onMap: [{ type: i0.Output, args: ["onMap"] }] } });
 // Define map styles
 const mapStyles = {
     'carto-positron': {
@@ -14601,118 +14610,224 @@ class CensusTractMapper {
     };
 }
 
+class LayerSettings {
+    visible = true;
+}
+class PolygonLayerSettings extends LayerSettings {
+    fillColor = '#888888';
+    fillOpacity = 0.5;
+    opacity = 0.7;
+    borderColor = '#ffffff';
+    borderWidth = 0.5;
+    borderOpacity = 0.8;
+}
+class DiscreteColors {
+    colors = {};
+}
+
 class HardinessMapper {
+    LAYER_ID = 'hardiness-layer';
+    SOURCE_ID = 'hardinessSource';
+    SOURCE_LAYER = 'hardiness2023';
+    PMTILES_URL = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/hardiness2023.pmtiles';
     current = null;
     currentFeatureID = undefined;
     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);
     }
-    async onReady(map, svc) {
-        this.map = map;
-        const PMTILES_URL = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/hardiness2023.pmtiles';
+    constructor() {
+        const _ = effect(() => {
+            const settings = this.settings();
+            // this._update(settings);
+            this.create();
+        }, ...(ngDevMode ? [{ debugName: "_" }] : []));
+    }
+    async create() {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
         // Method 1: Get available layers from PMTiles metadata
-        const layers = await discoverLayers(PMTILES_URL);
+        const layers = await discoverLayers(this.PMTILES_URL);
         console.log('Discovered layers:', layers);
-        map.addSource('hardinessSource', {
+        AddSource(map, this.SOURCE_ID, {
             type: 'vector',
-            url: PMTILES_URL,
+            url: this.PMTILES_URL,
         });
-        map.addLayer({
-            id: 'hardiness-layer',
-            source: 'hardinessSource',
-            'source-layer': 'hardiness2023',
+        const added = AddLayer(map, {
+            id: this.LAYER_ID,
+            source: this.SOURCE_ID,
+            'source-layer': this.SOURCE_LAYER,
             type: 'fill',
-            paint: {
-                'fill-color': [
-                    'case',
-                    ['==', ['get', 'zone'], '1a'], '#1a237e',
-                    ['==', ['get', 'zone'], '1b'], '#283593',
-                    ['==', ['get', 'zone'], '2a'], '#3949ab',
-                    ['==', ['get', 'zone'], '2b'], '#3f51b5',
-                    ['==', ['get', 'zone'], '3a'], '#5c6bc0',
-                    ['==', ['get', 'zone'], '3b'], '#7986cb',
-                    ['==', ['get', 'zone'], '4a'], '#42a5f5',
-                    ['==', ['get', 'zone'], '4b'], '#29b6f6',
-                    ['==', ['get', 'zone'], '5a'], '#26c6da',
-                    ['==', ['get', 'zone'], '5b'], '#26a69a',
-                    ['==', ['get', 'zone'], '6a'], '#66bb6a',
-                    ['==', ['get', 'zone'], '6b'], '#9ccc65',
-                    ['==', ['get', 'zone'], '7a'], '#d4e157',
-                    ['==', ['get', 'zone'], '7b'], '#ffee58',
-                    ['==', ['get', 'zone'], '8a'], '#ffca28',
-                    ['==', ['get', 'zone'], '8b'], '#ffa726',
-                    ['==', ['get', 'zone'], '9a'], '#ff8a65',
-                    ['==', ['get', 'zone'], '9b'], '#ff7043',
-                    ['==', ['get', 'zone'], '10a'], '#f4511e',
-                    ['==', ['get', 'zone'], '10b'], '#e53935',
-                    ['==', ['get', 'zone'], '11a'], '#c62828',
-                    ['==', ['get', 'zone'], '11b'], '#ad1457',
-                    ['==', ['get', 'zone'], '12a'], '#8e24aa',
-                    ['==', ['get', 'zone'], '12b'], '#7b1fa2',
-                    ['==', ['get', 'zone'], '13a'], '#6a1b9a',
-                    ['==', ['get', 'zone'], '13b'], '#4a148c',
-                    '#cccccc' // default color for unknown zones
-                ],
-                'fill-opacity': 0.7,
-            },
-            maxzoom: 14,
         }, StandardLayersMapper.POLYGONS_BACKGROUND);
-        // map.showTileBoundaries = true;
-        // map.addLayer(
-        //   {
-        //     id: 'hardiness-layer-line',
-        //     source: 'hardinessSource',
-        //     'source-layer': 'hardiness2023',
-        //     type: 'line',
-        //     paint: {
-        //       'line-color': '#ffffff',
-        //       'line-width': 0.5,
-        //       'line-opacity': 0.8,
-        //     },
-        //     maxzoom: 14,
-        //   },
-        //   StandardLayersMapper.POLYGONS_BACKGROUND
-        // );
-        map.on('mousemove', 'hardiness-layer', (e) => {
-            this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
-        });
-        map.on('click', 'hardiness-layer', (e) => {
-            // Publish
-            this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
-            if (e.features && e.features.length > 0) {
-                const feature = e.features[0];
-                const coordinates = e.lngLat;
-                console.log('Feature properties:', feature.properties);
-                const name = feature.properties
-                    ? feature.properties['zone']
-                    : 'Unknown';
-                // Ensure that if the popup is already open, we don't create a new one
-                if (this.popup) {
-                    this.popup.remove();
+        this._update(this.settings());
+        if (added) {
+            map.on('mousemove', this.LAYER_ID, (e) => {
+                this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
+            });
+            map.on('click', this.LAYER_ID, (e) => {
+                // Publish
+                this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
+                if (e.features && e.features.length > 0) {
+                    const feature = e.features[0];
+                    const coordinates = e.lngLat;
+                    console.log('Feature properties:', feature.properties);
+                    const name = feature.properties
+                        ? feature.properties['zone']
+                        : 'Unknown';
+                    // Ensure that if the popup is already open, we don't create a new one
+                    if (this.popup) {
+                        this.popup.remove();
+                    }
+                    const fields = feature.properties
+                        ? Object.entries(feature.properties)
+                            .map(([key, value]) => `<strong>${key}:</strong> ${value}`)
+                            .join('<br/>')
+                        : '';
+                    this.currentFeatureID = feature?.properties?.['globalid'];
+                    this.popup = new Popup({ maxWidth: '400px' })
+                        .setLngLat(coordinates)
+                        .setHTML(`<strong>Hardiness:</strong> ${name}<hr /><br/>${fields}`)
+                        .addTo(map);
                 }
-                const fields = feature.properties
-                    ? Object.entries(feature.properties)
-                        .map(([key, value]) => `<strong>${key}:</strong> ${value}`)
-                        .join('<br/>')
-                    : '';
-                this.currentFeatureID = feature?.properties?.['globalid'];
-                this.popup = new Popup({ maxWidth: '400px' })
-                    .setLngLat(coordinates)
-                    .setHTML(`<strong>Hardiness:</strong> ${name}<hr /><br/>${fields}`)
-                    .addTo(map);
-            }
-        });
+            });
+        }
+    }
+    update(newSettings) {
+        this.settings.set({ ...newSettings });
+    }
+    _update(settings) {
+        if (!this.map) {
+            return;
+        }
+        // Visiblitiy
+        if (settings.visible) {
+            this.map.setLayoutProperty(this.LAYER_ID, 'visibility', 'visible');
+        }
+        else {
+            this.map.setLayoutProperty(this.LAYER_ID, 'visibility', 'none');
+        }
+        // Update paint properties
+        this.map.setPaintProperty(this.LAYER_ID, 'fill-color', [
+            'case',
+            ['==', ['get', 'zone'], '1a'], settings.zone1a,
+            ['==', ['get', 'zone'], '1b'], settings.zone1b,
+            ['==', ['get', 'zone'], '2a'], settings.zone2a,
+            ['==', ['get', 'zone'], '2b'], settings.zone2b,
+            ['==', ['get', 'zone'], '3a'], settings.zone3a,
+            ['==', ['get', 'zone'], '3b'], settings.zone3b,
+            ['==', ['get', 'zone'], '4a'], settings.zone4a,
+            ['==', ['get', 'zone'], '4b'], settings.zone4b,
+            ['==', ['get', 'zone'], '5a'], settings.zone5a,
+            ['==', ['get', 'zone'], '5b'], settings.zone5b,
+            ['==', ['get', 'zone'], '6a'], settings.zone6a,
+            ['==', ['get', 'zone'], '6b'], settings.zone6b,
+            ['==', ['get', 'zone'], '7a'], settings.zone7a,
+            ['==', ['get', 'zone'], '7b'], settings.zone7b,
+            ['==', ['get', 'zone'], '8a'], settings.zone8a,
+            ['==', ['get', 'zone'], '8b'], settings.zone8b,
+            ['==', ['get', 'zone'], '9a'], settings.zone9a,
+            ['==', ['get', 'zone'], '9b'], settings.zone9b,
+            ['==', ['get', 'zone'], '10a'], settings.zone10a,
+            ['==', ['get', 'zone'], '10b'], settings.zone10b,
+            ['==', ['get', 'zone'], '11a'], settings.zone11a,
+            ['==', ['get', 'zone'], '11b'], settings.zone11b,
+            ['==', ['get', 'zone'], '12a'], settings.zone12a,
+            ['==', ['get', 'zone'], '12b'], settings.zone12b,
+            ['==', ['get', 'zone'], '13a'], settings.zone13a,
+            ['==', ['get', 'zone'], '13b'], settings.zone13b,
+            settings.fillColor,
+        ]);
+        this.map.setPaintProperty(this.LAYER_ID, 'fill-opacity', settings.fillOpacity);
+        // Set up the legend
+        if (settings.visible) {
+            this.legends = [
+                {
+                    title: 'USDA Plant Hardiness Zones',
+                    items: [
+                        { value: settings.zone1a, label: 'Zone 1a' },
+                        { value: settings.zone1b, label: 'Zone 1b' },
+                        { value: settings.zone2a, label: 'Zone 2a' },
+                        { value: settings.zone2b, label: 'Zone 2b' },
+                        { value: settings.zone3a, label: 'Zone 3a' },
+                        { value: settings.zone3b, label: 'Zone 3b' },
+                        { value: settings.zone4a, label: 'Zone 4a' },
+                        { value: settings.zone4b, label: 'Zone 4b' },
+                        { value: settings.zone5a, label: 'Zone 5a' },
+                        { value: settings.zone5b, label: 'Zone 5b' },
+                        { value: settings.zone6a, label: 'Zone 6a' },
+                        { value: settings.zone6b, label: 'Zone 6b' },
+                        { value: settings.zone7a, label: 'Zone 7a' },
+                        { value: settings.zone7b, label: 'Zone 7b' },
+                        { value: settings.zone8a, label: 'Zone 8a' },
+                        { value: settings.zone8b, label: 'Zone 8b' },
+                        { value: settings.zone9a, label: 'Zone 9a' },
+                        { value: settings.zone9b, label: 'Zone 9b' },
+                        { value: settings.zone10a, label: 'Zone 10a' },
+                        { value: settings.zone10b, label: 'Zone 10b' },
+                        { value: settings.zone11a, label: 'Zone 11a' },
+                        { value: settings.zone11b, label: 'Zone 11b' },
+                        { value: settings.zone12a, label: 'Zone 12a' },
+                        { value: settings.zone12b, label: 'Zone 12b' },
+                        { value: settings.zone13a, label: 'Zone 13a' },
+                        { value: settings.zone13b, label: 'Zone 13b' },
+                    ],
+                },
+            ];
+        }
+        else {
+            this.legends = undefined;
+        }
+    }
+    async onReady(map, svc) {
+        this.map = map;
+        this.create();
     }
     reset() { }
-    clear() { }
+    clear() {
+        RemoveLayer(this.map, this.LAYER_ID);
+        RemoveSource(this.map, this.SOURCE_ID);
+    }
     legends;
     count = 0;
     total = 0;
     map;
     popup = null;
 }
+class HardinessSettings extends PolygonLayerSettings {
+    zone1a = '#1a237e';
+    zone1b = '#283593';
+    zone2a = '#3949ab';
+    zone2b = '#3f51b5';
+    zone3a = '#5c6bc0';
+    zone3b = '#7986cb';
+    zone4a = '#42a5f5';
+    zone4b = '#29b6f6';
+    zone5a = '#26c6da';
+    zone5b = '#26a69a';
+    zone6a = '#66bb6a';
+    zone6b = '#9ccc65';
+    zone7a = '#d4e157';
+    zone7b = '#ffee58';
+    zone8a = '#ffca28';
+    zone8b = '#ffa726';
+    zone9a = '#ff8a65';
+    zone9b = '#ff7043';
+    zone10a = '#f4511e';
+    zone10b = '#e53935';
+    zone11a = '#c62828';
+    zone11b = '#ad1457';
+    zone12a = '#8e24aa';
+    zone12b = '#7b1fa2';
+    zone13a = '#6a1b9a';
+    zone13b = '#4a148c';
+    fillColor = '#cccccc'; // default color for unknown zones
+    fillOpacity = 0.7;
+    borderOpacity = 0;
+}
 
 class VectorTileServerMapper {
     src;
@@ -14824,43 +14939,73 @@ class VectorTileServerMapper {
 // }
 
 class WatershedMapper {
+    FILL_LAYER_ID = 'watershed-layer';
+    LINE_LAYER_ID = 'watershed-layer-line';
+    SOURCE_ID = 'watershedSource';
+    SOURCE_LAYER = 'watershedhu6';
+    settings = signal(new WatershedSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
     current = null;
     currentFeatureID = undefined;
     over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
-    async onReady(map, svc) {
-        this.map = map;
+    constructor() {
+        const _ = effect(() => {
+            const settings = this.settings();
+            this._update(settings);
+        }, ...(ngDevMode ? [{ debugName: "_" }] : []));
+    }
+    update(settings) {
+        this.settings.set({ ...settings });
+    }
+    _update(settings) {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
+        if (settings.visible) {
+            map.setLayoutProperty(this.FILL_LAYER_ID, 'visibility', 'visible');
+            map.setLayoutProperty(this.LINE_LAYER_ID, 'visibility', 'visible');
+        }
+        else {
+            map.setLayoutProperty(this.FILL_LAYER_ID, 'visibility', 'none');
+            map.setLayoutProperty(this.LINE_LAYER_ID, 'visibility', 'none');
+        }
+        map.setPaintProperty(this.FILL_LAYER_ID, 'fill-color', settings.fillColor);
+        map.setPaintProperty(this.FILL_LAYER_ID, 'fill-opacity', settings.fillOpacity);
+        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);
+    }
+    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';
-        map.addSource('pmTileSourceName', {
+        AddSource(map, this.SOURCE_ID, {
             type: 'vector',
             url: PMTILES_URL,
         });
-        map.addLayer({
-            id: 'watershed-layer',
-            source: 'pmTileSourceName',
-            'source-layer': 'watershedhu6',
+        const addedFill = AddLayer(map, {
+            id: this.FILL_LAYER_ID,
+            source: this.SOURCE_ID,
+            "source-layer": this.SOURCE_LAYER,
             type: 'fill',
-            paint: {
-                'fill-color': 'steelblue',
-                'fill-opacity': 0.1,
-            },
-            maxzoom: 14,
         }, StandardLayersMapper.POLYGONS_BACKGROUND);
         // map.showTileBoundaries = true;
-        map.addLayer({
-            id: 'watershed-layer-line',
-            source: 'pmTileSourceName',
-            'source-layer': 'watershedhu6',
+        AddLayer(map, {
+            id: this.LINE_LAYER_ID,
+            source: this.SOURCE_ID,
+            "source-layer": this.SOURCE_LAYER,
             type: 'line',
-            paint: {
-                'line-color': 'steelblue',
-                'line-width': 1,
-            },
-            maxzoom: 14,
         }, StandardLayersMapper.POLYGONS_BACKGROUND);
-        map.on('mousemove', 'watershed-layer', (e) => {
+        this._update(this.settings());
+        if (!addedFill) {
+            return;
+        }
+        map.on('mousemove', this.FILL_LAYER_ID, (e) => {
             this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
         });
-        map.on('click', 'watershed-layer', (e) => {
+        map.on('click', this.FILL_LAYER_ID, (e) => {
             // Publish
             this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
             if (e.features && e.features.length > 0) {
@@ -14887,14 +15032,32 @@ class WatershedMapper {
             }
         });
     }
+    async onReady(map, svc) {
+        this.map = map;
+        this.create();
+    }
     reset() { }
-    clear() { }
+    clear() {
+        if (this.map) {
+            this.map.removeLayer(this.FILL_LAYER_ID);
+            this.map.removeLayer(this.LINE_LAYER_ID);
+            this.map.removeSource(this.SOURCE_ID);
+        }
+    }
     legends;
     count = 0;
     total = 0;
     map;
     popup = null;
 }
+class WatershedSettings {
+    visible = true;
+    fillColor = '#0000ff';
+    fillOpacity = 0.1;
+    borderColor = '#01018bff';
+    borderWidth = 1;
+    borderOpacity = 1.0;
+}
 
 class HttpBoundaryLoader {
     static NewCustom(http, path) {
@@ -14998,5 +15161,5 @@ class HttpBoundaryLoader {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLayer, AddSource, AreaMapperMapper, BackgroundMaskMapper, BaseMapLight, BasemapSelect, BasemapSelectMenu, CensusTractMapper, DrawingMapper, HardinessMapper, HttpBoundaryLoader, MapAreaSelectComponent, MapComponent, MapSelectionService, MapService, MapStyles, MapboxMapperGroup, NoOpMapper, RemoveLayer, RemoveSource, SaveMap, SelectMode, StandardLayersMapper, Styles, VectorTileServerMapper, WatershedMapper, discoverLayers, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxLoadImages, mapboxloadImage, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
+export { AddLayer, AddSource, AreaMapperMapper, BackgroundMaskMapper, BaseMapLight, BasemapSelect, BasemapSelectMenu, CensusTractMapper, DrawingMapper, HardinessMapper, HardinessSettings, HttpBoundaryLoader, MapAreaSelectComponent, MapComponent, MapSelectionService, MapService, MapStyles, MapboxMapperGroup, NoOpMapper, RemoveLayer, RemoveSource, SaveMap, SelectMode, StandardLayersMapper, Styles, VectorTileServerMapper, WatershedMapper, WatershedSettings, discoverLayers, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxLoadImages, mapboxloadImage, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
 //# sourceMappingURL=foodmarketmaker-mapag.mjs.map