@foodmarketmaker/mapag 0.0.22 → 0.0.24

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, effect, input, Input, Component, ChangeDetectionStrategy, inject, NgZone, Injectable, output, viewChild } from '@angular/core';
+import { signal, effect, input, Input, Component, viewChild, ChangeDetectionStrategy, inject, NgZone, Injectable, output } from '@angular/core';
 import { PMTiles, Protocol } from 'pmtiles';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -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';"
@@ -602,89 +650,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
 
 class BasemapSelectMenu {
     map = input.required(...(ngDevMode ? [{ debugName: "map" }] : []));
-    isPopoverVisible = false;
+    styleDialog = viewChild.required('styleDialog');
     mapStylesArray = Object.values(MapStyles);
-    popoverTimeout;
-    constructor() {
-    }
     get currentStyle() {
         return this.map().styles.style();
     }
     getBackgroundImage() {
         const currentStyle = this.map().styles.style();
-        // Try different path approaches for debugging
         const originalPath = currentStyle.image;
-        // Return the original path first to test
         return `url(${originalPath})`;
     }
-    showPopover() {
-        if (this.popoverTimeout) {
-            clearTimeout(this.popoverTimeout);
-        }
-        this.isPopoverVisible = true;
-    }
-    hidePopover() {
-        this.popoverTimeout = window.setTimeout(() => {
-            this.isPopoverVisible = false;
-        }, 200); // Small delay to allow moving to popover
+    openDialog(event) {
+        event.stopPropagation();
+        const dialog = this.styleDialog().nativeElement;
+        dialog.showModal();
     }
-    keepPopoverOpen() {
-        if (this.popoverTimeout) {
-            clearTimeout(this.popoverTimeout);
-            this.popoverTimeout = undefined;
-        }
+    closeDialog() {
+        const dialog = this.styleDialog().nativeElement;
+        dialog.close();
     }
     selectStyle(style) {
         const s = this.map().styles;
         if (s) {
             s.style.set(style);
         }
-        this.isPopoverVisible = false;
-    }
-    onClick() {
-        // Keep the original cycling behavior as fallback
-        const s = this.map().styles;
-        const current = this.map().styles.style();
-        const next = this.nextStyle(current);
-        s.style.set(next);
-    }
-    nextStyle(current) {
-        const s = this.map().styles;
-        if (!current) {
-            // If no current style, return the first one
-            const firstKey = Object.keys(MapStyles)[0];
-            return MapStyles[firstKey];
-        }
-        // Get all the keys from MapStyles
-        const styleKeys = Object.keys(MapStyles);
-        // Find the current style's index
-        const currentIndex = styleKeys.findIndex(key => MapStyles[key].code === current.code);
-        // If current style not found, return the first one
-        if (currentIndex === -1) {
-            return MapStyles[styleKeys[0]];
-        }
-        // Get the next index, wrapping around to 0 if we're at the end
-        const nextIndex = (currentIndex + 1) % styleKeys.length;
-        // Return the next style
-        return MapStyles[styleKeys[nextIndex]];
+        this.closeDialog();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BasemapSelectMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", type: BasemapSelectMenu, isStandalone: true, selector: "mapag-basemap-select-menu", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", type: BasemapSelectMenu, isStandalone: true, selector: "mapag-basemap-select-menu", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "styleDialog", first: true, predicate: ["styleDialog"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="basemap-container" 
-         (mouseenter)="showPopover()" 
-         (mouseleave)="hidePopover()"
-         (click)="onClick()"
          [style.background-image]="getBackgroundImage()">
       <div class="basemap-title" [style.color]="currentStyle?.nameColor || '#ffffff'">
         {{ currentStyle?.name || 'No Style Selected' }}
       </div>
-      <!-- <div class="basemap-overlay"></div> -->
+      <button class="dialog-button" 
+              (click)="openDialog($event)"
+              title="Choose basemap style">
+        ...
+      </button>
     </div>
     
-    <div class="style-popover"
-         [class.show]="isPopoverVisible"
-         (mouseenter)="keepPopoverOpen()"
-         (mouseleave)="hidePopover()">
+    <dialog #styleDialog class="style-dialog">
+      <div class="dialog-header">
+        <h3>Select Basemap Style</h3>
+        <button class="close-button" (click)="closeDialog()">✕</button>
+      </div>
       <div class="style-grid">
         <div *ngFor="let style of mapStylesArray" 
              class="style-item"
@@ -692,27 +702,29 @@ class BasemapSelectMenu {
           <mapag-basemap-select [styleData]="style" [styles]="map().styles"></mapag-basemap-select>
         </div>
       </div>
-    </div>
-  `, isInline: true, styles: [":host{display:block;width:200px;height:80px;position:relative}.basemap-container{position:relative;width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f5f5f5;overflow:hidden;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.basemap-container:hover{box-shadow:0 4px 16px #0003}.basemap-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#0000001a,#0000004d);border-radius:12px;pointer-events:none}.basemap-title{position:relative;z-index:2;color:#fff;font-size:19px;font-weight:600;text-align:center;padding:8px 16px;background:#0000;border-radius:8px;-webkit-user-select:none;user-select:none;text-shadow:0 2px 4px rgba(0,0,0,.8);max-width:90%;word-wrap:break-word;line-height:1.2}.basemap-container:not([style*=\"background-image: url\"]){background:linear-gradient(135deg,#667eea,#764ba2)}.basemap-container:not([style*=\"background-image: url\"]) .basemap-overlay{background:#0000001a}.style-popover{padding:16px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;border:1px solid rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;position:absolute;top:calc(100% + 8px);left:0;z-index:1000;max-width:90vw;max-height:80vh;overflow-y:auto;min-width:100%}.style-popover.show{opacity:1;visibility:visible;transform:translateY(0)}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;min-width:380px;max-width:600px}.style-item{cursor:pointer;transition:transform .2s ease}.style-item:hover{transform:scale(1.05)}@media (max-width: 768px){.style-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));min-width:300px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasemapSelect, selector: "mapag-basemap-select", inputs: ["styleData", "styles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </dialog>
+  `, isInline: true, styles: [":host{display:block;width:200px;height:60px;position:relative}.basemap-container{position:relative;width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f5f5f5;overflow:hidden;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.basemap-title{position:relative;z-index:1;color:#fff;font-size:19px;font-weight:600;text-align:center;padding:8px 16px;background:#0000;border-radius:8px;-webkit-user-select:none;user-select:none;text-shadow:0 2px 4px rgba(0,0,0,.8);max-width:90%;word-wrap:break-word;line-height:1.2}.dialog-button{position:absolute;top:50%;transform:translateY(-50%);right:8px;background:#ffffffe6;border:none;border-radius:6px;padding:4px 10px;font-size:18px;font-weight:700;cursor:pointer;z-index:2;transition:background-color .2s ease,transform .2s ease;box-shadow:0 2px 4px #0003;letter-spacing:1px}.dialog-button:hover{background:#fff;transform:translateY(-50%) scale(1.1)}.dialog-button:active{transform:translateY(-50%) scale(.95)}.basemap-container:not([style*=\"background-image: url\"]){background:linear-gradient(135deg,#667eea,#764ba2)}.style-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;border:none;border-radius:12px;padding:0;max-width:90vw;max-height:80vh;box-shadow:0 8px 32px #00000040;background:#fff}.style-dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.1)}.dialog-header h3{margin:0;font-size:18px;font-weight:600;color:#333}.close-button{background:transparent;border:none;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#666;transition:background-color .2s ease,color .2s ease}.close-button:hover{background-color:#0000000d;color:#333}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:20px;min-width:380px;max-width:600px;overflow-y:auto}.style-item{cursor:pointer;transition:transform .2s ease}.style-item:hover{transform:scale(1.05)}@media (max-width: 768px){.style-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));min-width:300px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasemapSelect, selector: "mapag-basemap-select", inputs: ["styleData", "styles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BasemapSelectMenu, decorators: [{
             type: Component,
             args: [{ selector: 'mapag-basemap-select-menu', imports: [CommonModule, BasemapSelect], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="basemap-container" 
-         (mouseenter)="showPopover()" 
-         (mouseleave)="hidePopover()"
-         (click)="onClick()"
          [style.background-image]="getBackgroundImage()">
       <div class="basemap-title" [style.color]="currentStyle?.nameColor || '#ffffff'">
         {{ currentStyle?.name || 'No Style Selected' }}
       </div>
-      <!-- <div class="basemap-overlay"></div> -->
+      <button class="dialog-button" 
+              (click)="openDialog($event)"
+              title="Choose basemap style">
+        ...
+      </button>
     </div>
     
-    <div class="style-popover"
-         [class.show]="isPopoverVisible"
-         (mouseenter)="keepPopoverOpen()"
-         (mouseleave)="hidePopover()">
+    <dialog #styleDialog class="style-dialog">
+      <div class="dialog-header">
+        <h3>Select Basemap Style</h3>
+        <button class="close-button" (click)="closeDialog()">✕</button>
+      </div>
       <div class="style-grid">
         <div *ngFor="let style of mapStylesArray" 
              class="style-item"
@@ -720,9 +732,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
           <mapag-basemap-select [styleData]="style" [styles]="map().styles"></mapag-basemap-select>
         </div>
       </div>
-    </div>
-  `, styles: [":host{display:block;width:200px;height:80px;position:relative}.basemap-container{position:relative;width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f5f5f5;overflow:hidden;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.basemap-container:hover{box-shadow:0 4px 16px #0003}.basemap-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#0000001a,#0000004d);border-radius:12px;pointer-events:none}.basemap-title{position:relative;z-index:2;color:#fff;font-size:19px;font-weight:600;text-align:center;padding:8px 16px;background:#0000;border-radius:8px;-webkit-user-select:none;user-select:none;text-shadow:0 2px 4px rgba(0,0,0,.8);max-width:90%;word-wrap:break-word;line-height:1.2}.basemap-container:not([style*=\"background-image: url\"]){background:linear-gradient(135deg,#667eea,#764ba2)}.basemap-container:not([style*=\"background-image: url\"]) .basemap-overlay{background:#0000001a}.style-popover{padding:16px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;border:1px solid rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;position:absolute;top:calc(100% + 8px);left:0;z-index:1000;max-width:90vw;max-height:80vh;overflow-y:auto;min-width:100%}.style-popover.show{opacity:1;visibility:visible;transform:translateY(0)}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;min-width:380px;max-width:600px}.style-item{cursor:pointer;transition:transform .2s ease}.style-item:hover{transform:scale(1.05)}@media (max-width: 768px){.style-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));min-width:300px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: true }] }] } });
+    </dialog>
+  `, styles: [":host{display:block;width:200px;height:60px;position:relative}.basemap-container{position:relative;width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f5f5f5;overflow:hidden;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.basemap-title{position:relative;z-index:1;color:#fff;font-size:19px;font-weight:600;text-align:center;padding:8px 16px;background:#0000;border-radius:8px;-webkit-user-select:none;user-select:none;text-shadow:0 2px 4px rgba(0,0,0,.8);max-width:90%;word-wrap:break-word;line-height:1.2}.dialog-button{position:absolute;top:50%;transform:translateY(-50%);right:8px;background:#ffffffe6;border:none;border-radius:6px;padding:4px 10px;font-size:18px;font-weight:700;cursor:pointer;z-index:2;transition:background-color .2s ease,transform .2s ease;box-shadow:0 2px 4px #0003;letter-spacing:1px}.dialog-button:hover{background:#fff;transform:translateY(-50%) scale(1.1)}.dialog-button:active{transform:translateY(-50%) scale(.95)}.basemap-container:not([style*=\"background-image: url\"]){background:linear-gradient(135deg,#667eea,#764ba2)}.style-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;border:none;border-radius:12px;padding:0;max-width:90vw;max-height:80vh;box-shadow:0 8px 32px #00000040;background:#fff}.style-dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.1)}.dialog-header h3{margin:0;font-size:18px;font-weight:600;color:#333}.close-button{background:transparent;border:none;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#666;transition:background-color .2s ease,color .2s ease}.close-button:hover{background-color:#0000000d;color:#333}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:20px;min-width:380px;max-width:600px;overflow-y:auto}.style-item{cursor:pointer;transition:transform .2s ease}.style-item:hover{transform:scale(1.05)}@media (max-width: 768px){.style-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));min-width:300px}}\n"] }]
+        }], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: true }] }], styleDialog: [{ type: i0.ViewChild, args: ['styleDialog', { isSignal: true }] }] } });
 
 const BaseMapLight = {
     "version": 8,
@@ -14625,168 +14637,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 +15170,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 +16742,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