@foodmarketmaker/mapag 0.0.21 → 0.0.22

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -14625,6 +14625,168 @@ class CensusTractMapper {
     };
 }
 
+class CropSequenceMapper {
+    static PMTILES = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/NationalCSB_2017_2024_rev23.pmtiles';
+    FILL_LAYER_ID = 'cropsequence-layer';
+    LINE_LAYER_ID = 'cropsequence-layer-line';
+    LABEL_LAYER_ID = 'cropsequence-layer-label';
+    SOURCE_ID = 'cropsequence-source';
+    SOURCE_LAYER = 'NationalCSB_2017_2024_rev23';
+    settings = signal(new CropSequenceSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
+    current = null;
+    currentFeatureID = undefined;
+    over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
+    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({ ...this.settings(), ...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);
+        const labelsVisible = settings.visible && settings.labelsVisible;
+        map.setLayoutProperty(this.LABEL_LAYER_ID, 'visibility', labelsVisible ? '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);
+        map.setLayoutProperty(this.LABEL_LAYER_ID, 'text-allow-overlap', settings.labelOverlap);
+    }
+    create() {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
+        let PMTILES_URL = CropSequenceMapper.PMTILES;
+        AddSource(map, this.SOURCE_ID, {
+            type: 'vector',
+            url: PMTILES_URL,
+        });
+        const addedFill = AddLayer(map, {
+            id: this.FILL_LAYER_ID,
+            source: this.SOURCE_ID,
+            "source-layer": this.SOURCE_LAYER,
+            type: 'fill',
+        }, StandardLayersMapper.POLYGONS_BACKGROUND);
+        map.showTileBoundaries = true;
+        AddLayer(map, {
+            id: this.LINE_LAYER_ID,
+            source: this.SOURCE_ID,
+            "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'],
+                'text-font': ['Open Sans Regular'],
+                'text-size': this.settings().labelsSize,
+                'text-allow-overlap': this.settings().labelOverlap,
+            },
+            paint: {
+                'text-color': this.settings().labelsColor,
+                'text-halo-color': this.settings().labelsHaloColor,
+                'text-halo-width': this.settings().labelsHaloWidth,
+            },
+        }, StandardLayersMapper.POLYGONS_BACKGROUND);
+        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', 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) {
+                const feature = e.features[0];
+                const coordinates = e.lngLat;
+                console.log('Feature properties:', feature.properties);
+                const name = feature.properties
+                    ? feature.properties['name']
+                    : '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>Watershed:</strong> ${name}<hr /><br/>${fields}`)
+                    .addTo(map);
+            }
+        });
+    }
+    async onReady(map, svc) {
+        this.map = map;
+        this.create();
+    }
+    reset() { }
+    clear() {
+        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);
+        }
+    }
+    legends;
+    count = 0;
+    total = 0;
+    map;
+    popup = null;
+}
+class CropSequenceSettings {
+    visible = true;
+    fillColor = '#0000ff';
+    fillOpacity = 0.1;
+    borderColor = '#01018b';
+    borderWidth = 1;
+    borderOpacity = 1.0;
+    labelsVisible = true;
+    labelsSize = 10;
+    labelsColor = '#000000';
+    labelsHaloColor = '#ffffff';
+    labelsHaloWidth = 1;
+    labelsOpacity = 1.0;
+    labelOverlap = false;
+}
+
 class CroplandDataLayerMapper {
     static PMTILES = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/cdl_2024_30m.pmtiles';
     LAYER_ID = 'cropland-data-layer';
@@ -16573,5 +16735,5 @@ class HttpBoundaryLoader {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLayer, AddSource, AreaMapperMapper, BackgroundMaskMapper, BackgroundMaskSettings, BaseMapLight, BasemapSelect, BasemapSelectMenu, CensusTractMapper, Codes, CroplandDataLayerMapper, CroplandDataLayerSettings, CroplandLegend, DEFAULT_GLYPHS, DrawingMapper, EsriMapper, EsriSettings, HardinessMapper, HardinessSettings, HttpBoundaryLoader, MapAreaSelectComponent, MapComponent, MapSelectionService, MapService, MapStyles, MapboxMapperGroup, NAASMapper, NAASSettings, NaicsMapper, NaicsMapperSettings, NoOpMapper, RemoveLayer, RemoveSource, SaveMap, SelectMode, SimpleMapper, StandardLayersMapper, Styles, VectorTileServerMapper, WatershedMapper, WatershedSettings, discoverLayers, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxLoadImages, mapboxloadImage, pmtilesPixelInfo, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
+export { AddLayer, AddSource, AreaMapperMapper, BackgroundMaskMapper, BackgroundMaskSettings, BaseMapLight, BasemapSelect, BasemapSelectMenu, CensusTractMapper, Codes, CropSequenceMapper, CropSequenceSettings, CroplandDataLayerMapper, CroplandDataLayerSettings, CroplandLegend, DEFAULT_GLYPHS, DrawingMapper, EsriMapper, EsriSettings, HardinessMapper, HardinessSettings, HttpBoundaryLoader, MapAreaSelectComponent, MapComponent, MapSelectionService, MapService, MapStyles, MapboxMapperGroup, NAASMapper, NAASSettings, NaicsMapper, NaicsMapperSettings, NoOpMapper, RemoveLayer, RemoveSource, SaveMap, SelectMode, SimpleMapper, StandardLayersMapper, Styles, VectorTileServerMapper, WatershedMapper, WatershedSettings, discoverLayers, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxLoadImages, mapboxloadImage, pmtilesPixelInfo, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
 //# sourceMappingURL=foodmarketmaker-mapag.mjs.map