@foodmarketmaker/mapag 0.0.22 → 0.0.23

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -228,6 +228,54 @@ async function pmtilesPixelInfo(url, map, e) {
     // const a = pixel[3];
     return pixel;
 }
+function propertiesToTableHtml(properties) {
+    let html = '<table style="border-collapse: collapse; width: 100%; border: none; font-size: 9px;">';
+    for (const key in properties) {
+        if (properties.hasOwnProperty(key)) {
+            html += `<tr>
+        <td style="padding: 2px; font-weight: bold;">${key}</td>
+        <td style="padding: 2px;">${properties[key]}</td>
+      </tr>`;
+        }
+    }
+    html += '</table>';
+    return html;
+}
+class TableBuilder {
+    rows = [];
+    headerStyle = `style="padding: 2px; padding-top:6ps; font-size: 9px; font-weight: bold;"`;
+    rowStyle1 = `style="padding: 2px; font-size: 9px; font-weight: bold;"`;
+    rowStyle2 = `style="padding: 2px; font-size: 9px;`;
+    addHeader(...cells) {
+        this.rows.push(new TableRow(cells, true));
+        return this;
+    }
+    add(...cells) {
+        this.rows.push(new TableRow(cells));
+        return this;
+    }
+    toHtml() {
+        const rowHtml = this.rows.map(row => row.toHtml()).join('');
+        return `<table style="border-collapse: collapse; width: 100%; font-size: 9px;">${rowHtml}</table>`;
+    }
+}
+class TableRow {
+    isHeader;
+    cells;
+    headerStyle = `padding: 2px; padding-top:6px; font-size: 9px; font-weight: bold; text-align: left;`;
+    rowStyle1 = `padding: 2px; font-size: 9px; font-weight: bold;`;
+    rowStyle2 = `padding: 2px; font-size: 9px;`;
+    constructor(cells, isHeader = false) {
+        this.cells = cells;
+        this.isHeader = isHeader;
+    }
+    toHtml() {
+        if (this.isHeader) {
+            return `<tr>${this.cells.map(cell => `<th style="${this.headerStyle}">${cell}</th>`).join('\n')}</tr>`;
+        }
+        return `<tr>${this.cells.map((cell, index) => `<td style="${index == 0 ? this.rowStyle1 : this.rowStyle2}">${cell}</td>`).join('')}</tr>`;
+    }
+}
 
 const DEFAULT_GLYPHS = "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf";
 // export const DEFAULT_GLYPHS = "'https://geoserveis.icgc.cat/contextmaps/glyphs/{fontstack}/{range}.pbf';"
@@ -14625,168 +14673,6 @@ 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';
@@ -15320,6 +15206,163 @@ Dbl Crop Barley/Soybeans          254        433      47.5%      52.5%      0.47
 
 */
 
+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';
+    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);
+    }
+    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);
+        AddLayer(map, {
+            id: this.LINE_LAYER_ID,
+            source: this.SOURCE_ID,
+            "source-layer": this.SOURCE_LAYER,
+            type: 'line',
+        }, 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;
+                if (this.popup) {
+                    this.popup.remove();
+                }
+                const tb = new TableBuilder();
+                const crop2017 = this.lookupClass(feature.properties ? feature.properties['CDL2017'] : null);
+                const crop2018 = this.lookupClass(feature.properties ? feature.properties['CDL2018'] : null);
+                const crop2019 = this.lookupClass(feature.properties ? feature.properties['CDL2019'] : null);
+                const crop2020 = this.lookupClass(feature.properties ? feature.properties['CDL2020'] : null);
+                const crop2021 = this.lookupClass(feature.properties ? feature.properties['CDL2021'] : null);
+                const crop2022 = this.lookupClass(feature.properties ? feature.properties['CDL2022'] : null);
+                const crop2023 = this.lookupClass(feature.properties ? feature.properties['CDL2023'] : null);
+                const crop2024 = this.lookupClass(feature.properties ? feature.properties['CDL2024'] : null);
+                tb.addHeader('Year', 'Crop Type');
+                tb.add('2024', crop2024 ?? 'Unknown');
+                tb.add('2023', crop2023 ?? 'Unknown');
+                tb.add('2022', crop2022 ?? 'Unknown');
+                tb.add('2021', crop2021 ?? 'Unknown');
+                tb.add('2020', crop2020 ?? 'Unknown');
+                tb.add('2019', crop2019 ?? 'Unknown');
+                tb.add('2018', crop2018 ?? 'Unknown');
+                tb.add('2017', crop2017 ?? 'Unknown');
+                tb.addHeader('Location', "");
+                tb.add('State FIPS', feature.properties ? feature.properties['STATEFIPS'] : 'Unknown');
+                tb.add('County', feature.properties ? feature.properties['CNTY'] : 'Unknown');
+                tb.add('County FIPS', feature.properties ? feature.properties['CNTYFIPS'] : 'Unknown');
+                tb.add('ASD', feature.properties ? feature.properties['ASD'] : 'Unknown');
+                tb.add('Area (M²)', feature.properties ? feature.properties['Shape_Area'] : 'Unknown');
+                const fieldsHtml = tb.toHtml();
+                this.currentFeatureID = feature?.properties?.['globalid'];
+                this.popup = new Popup({ maxWidth: '400px' })
+                    .setLngLat(coordinates)
+                    .setHTML(`<strong>Crop Sequence</strong><br/>${fieldsHtml}`)
+                    .addTo(map);
+            }
+        });
+    }
+    lookupClass(code) {
+        const found = CroplandLegend.find((item) => {
+            return item.code == code;
+        });
+        if (found) {
+            return found.class;
+        }
+        return undefined;
+    }
+    lookup(code) {
+        const found = CroplandLegend.find((item) => {
+            return item.code == code;
+        });
+        return found;
+    }
+    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.removeSource(this.SOURCE_ID);
+        }
+    }
+    legends;
+    count = 0;
+    total = 0;
+    map;
+    popup = null;
+}
+class CropSequenceSettings {
+    visible = true;
+    fillColor = '#1aac39';
+    fillOpacity = 0.2;
+    borderColor = '#006e16';
+    borderWidth = 1;
+    borderOpacity = 0.5;
+}
+
 class EsriMapper {
     jsonUrl = 'https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/styles/root.json';
     SOURCE_ID = 'esri';
@@ -16735,5 +16778,5 @@ class HttpBoundaryLoader {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, TableBuilder, TableRow, VectorTileServerMapper, WatershedMapper, WatershedSettings, discoverLayers, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxLoadImages, mapboxloadImage, pmtilesPixelInfo, propertiesToTableHtml, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
 //# sourceMappingURL=foodmarketmaker-mapag.mjs.map