@foodmarketmaker/mapag 0.0.21 → 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';"
@@ -15158,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';
@@ -16573,5 +16778,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, TableBuilder, TableRow, VectorTileServerMapper, WatershedMapper, WatershedSettings, discoverLayers, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxLoadImages, mapboxloadImage, pmtilesPixelInfo, propertiesToTableHtml, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
 //# sourceMappingURL=foodmarketmaker-mapag.mjs.map