@foodmarketmaker/mapag 0.0.11 → 0.0.13

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -14973,11 +14973,13 @@ 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);
+        const watershedLabelVisible = settings.visible && settings.labelsVisible;
+        map.setLayoutProperty(this.LABEL_LAYER_ID, 'visibility', watershedLabelVisible ? 'visible' : 'none');
         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);
+        map.setPaintProperty(this.LABEL_LAYER_ID, 'text-opacity', settings.labelsOpacity);
+        map.setLayoutProperty(this.LABEL_LAYER_ID, 'text-size', settings.labelsSize);
     }
     create() {
         if (!this.map) {
@@ -15038,12 +15040,46 @@ class WatershedMapper {
             type: 'symbol',
             layout: {
                 'text-field': ['get', 'name'],
+                'text-size': this.settings().labelsSize,
+                'text-allow-overlap': true,
+            },
+            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);
         });
@@ -15102,10 +15138,12 @@ class WatershedSettings {
     borderWidth = 1;
     borderOpacity = 1.0;
     labelsVisible = true;
-    labelsSize = 12;
+    labelsSize = 10;
     labelsColor = '#000000';
     labelsHaloColor = '#ffffff';
     labelsHaloWidth = 1;
+    labelsOpacity = 1.0;
+    autoSelectLayer = false;
 }
 
 class HttpBoundaryLoader {