@foodmarketmaker/mapag 0.0.23 → 0.0.25

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';
@@ -277,7 +277,8 @@ class TableRow {
     }
 }
 
-const DEFAULT_GLYPHS = "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf";
+const DEFAULT_GLYPHS2 = "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf";
+const DEFAULT_GLYPHS = "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf";
 // export const DEFAULT_GLYPHS = "'https://geoserveis.icgc.cat/contextmaps/glyphs/{fontstack}/{range}.pbf';"
 class Styles {
     style = signal(MapStyles["streetmap"], ...(ngDevMode ? [{ debugName: "style" }] : []));
@@ -350,6 +351,7 @@ class Styles {
         }
         const styleSpec = await response.json();
         console.debug("Glyphs property:", styleSpec.glyphs);
+        // Only set a default glyphs URL when the fetched style doesn't include one.
         if (!styleSpec.glyphs) {
             styleSpec.glyphs = DEFAULT_GLYPHS;
         }
@@ -650,89 +652,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"
@@ -740,27 +704,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"
@@ -768,9 +734,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,
@@ -14230,9 +14196,6 @@ class MapComponent {
     async initializeMap() {
         this.zone.runOutsideAngular(async () => {
             const container = this.mapContainer();
-            // let style =
-            //   'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
-            // // style =  'https://demotiles.maplibre.org/style.json'
             let style = await this.styles.FetchStyleDefinition(this.styles.style());
             if (container) {
                 // @ts-ignore - Type conflict between different maplibre-gl versions
@@ -16241,6 +16204,369 @@ const Codes = [
     return (a.Category + ' - ' + a.Name).localeCompare(b.Category + ' - ' + b.Name);
 });
 
+class RailroadsMapper {
+    static PMTILES = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/railroads.pmtiles';
+    LINE_LAYER_ID = 'ust-railroads-layer-line';
+    LABEL_LAYER_ID = 'ust-railroads-layer-label';
+    SOURCE_ID = 'ust-railroads-source';
+    SOURCE_LAYER = 'railroads';
+    settings = signal(new RailroadSettings(), ...(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 });
+    }
+    updateUsageSettings(key, usageSettings) {
+        const s = this.settings();
+        s[key] = { ...s[key], ...usageSettings };
+        this.settings.set({ ...s });
+    }
+    _update(settings) {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
+        if (settings.visible) {
+            map.setLayoutProperty(this.LINE_LAYER_ID, 'visibility', 'visible');
+        }
+        else {
+            map.setLayoutProperty(this.LINE_LAYER_ID, 'visibility', 'none');
+        }
+        this.filterByUsage();
+        map.setPaintProperty(this.LINE_LAYER_ID, 'line-color', this.lineColorSteps());
+        map.setPaintProperty(this.LINE_LAYER_ID, 'line-width', this.lineWidthSteps());
+        map.setPaintProperty(this.LINE_LAYER_ID, 'line-opacity', this.lineOpacitySteps());
+        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);
+        this.legends = this.getLegends();
+    }
+    create() {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
+        let PMTILES_URL = RailroadsMapper.PMTILES;
+        AddSource(map, this.SOURCE_ID, {
+            type: 'vector',
+            url: PMTILES_URL,
+        });
+        const added = AddLayer(map, {
+            id: this.LINE_LAYER_ID,
+            source: this.SOURCE_ID,
+            "source-layer": this.SOURCE_LAYER,
+            type: 'line',
+        }, StandardLayersMapper.POLYGONS_BACKGROUND);
+        // Add labels (symbol) layer only if the style exposes a glyphs endpoint.
+        // Some raster-only styles (or styles lacking a `glyphs` URL) will cause
+        // MapLibre to attempt to fetch glyph PBFs from an undefined/invalid URL
+        // which can produce PBF parsing errors (eg. "Unimplemented type: 3").
+        const style = map.getStyle && map.getStyle();
+        const hasGlyphs = !!(style && style.glyphs);
+        if (hasGlyphs) {
+            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 Semibold'], //,'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);
+        }
+        else {
+            console.warn('RailroadsMapper: style has no `glyphs` URL — skipping labels layer to avoid PBF/glyph parse errors. Switch to a style with glyphs to enable labels.');
+        }
+        this._update(this.settings());
+        if (!added) {
+            return;
+        }
+        map.on('click', this.LINE_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 name = feature.properties['name'];
+                const tb = new TableBuilder();
+                tb.add('Length', this.fmtDistance(feature.properties['lengthkm']));
+                tb.add('Owner', feature.properties['railowner'] ?? '');
+                tb.add('Owner Code', feature.properties['railownercode'] ?? '');
+                tb.add('Usage', this.usageLabel(feature.properties['railusage'] ?? 0));
+                tb.add('Source', feature.properties['source_datadesc'] ?? '');
+                tb.add('Originator', feature.properties['source_originator'] ?? '');
+                tb.add('Load Date', feature.properties['loaddate'] ?? '');
+                const fieldsHtml = tb.toHtml();
+                let html = "";
+                if (name) {
+                    html += `<strong>${name}</strong><br/>`;
+                }
+                html += fieldsHtml;
+                this.currentFeatureID = feature?.properties?.['globalid'];
+                this.popup = new Popup({ maxWidth: '400px' })
+                    .setLngLat(coordinates)
+                    .setHTML(html)
+                    .addTo(map);
+            }
+        });
+    }
+    fmtDistance(km) {
+        if (!km) {
+            return "";
+        }
+        return km.toFixed(1) + ' km / ' + (km * 0.621371).toFixed(1) + ' mi';
+    }
+    async onReady(map, svc) {
+        this.map = map;
+        this.create();
+    }
+    reset() { }
+    clear() {
+        if (this.map) {
+            this.map.removeLayer(this.LINE_LAYER_ID);
+            this.map.removeLayer(this.LABEL_LAYER_ID);
+            this.map.removeSource(this.SOURCE_ID);
+        }
+    }
+    filterByUsage() {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
+        if (!map.getLayer(this.LINE_LAYER_ID)) {
+            return;
+        }
+        const settings = this.settings();
+        if (!settings.perUsageDisplay) {
+            this.map.setFilter(this.LINE_LAYER_ID, null);
+            return;
+        }
+        map.setFilter(this.LINE_LAYER_ID, [
+            "match",
+            ["get", "railusage"],
+            "F", settings.freight.visible,
+            "P", settings.passenger.visible,
+            "M", settings.mixed.visible,
+            "I", settings.inactive.visible,
+            "O", settings.other.visible,
+            "Y", settings.yard.visible,
+            "U", settings.unknown.visible,
+            false
+        ]);
+    }
+    lineColorSteps() {
+        const settings = this.settings();
+        if (!settings.perUsageDisplay) {
+            return settings.lineColor;
+        }
+        return [
+            "match",
+            ["get", "railusage"],
+            "F", settings.freight.lineColor, // Freight = blue
+            "P", settings.passenger.lineColor, // Passenger = orange
+            "M", settings.mixed.lineColor, // Both = green
+            "I", settings.inactive.lineColor, // Inactive = gray
+            "O", settings.other.lineColor, // Other = red
+            "Y", settings.yard.lineColor, // Yard = purple
+            "U", settings.unknown.lineColor, // Unknown = brown
+            "#000000" // Default = black
+        ];
+    }
+    lineOpacitySteps() {
+        const settings = this.settings();
+        if (!settings.perUsageDisplay) {
+            return settings.lineOpacity;
+        }
+        return [
+            "match",
+            ["get", "railusage"],
+            "F", settings.freight.lineOpacity, // Freight = blue
+            "P", settings.passenger.lineOpacity, // Passenger = orange
+            "M", settings.mixed.lineOpacity, // Both = green
+            "I", settings.inactive.lineOpacity, // Inactive = gray
+            "O", settings.other.lineOpacity, // Other = red
+            "Y", settings.yard.lineOpacity, // Yard = purple
+            "U", settings.unknown.lineOpacity, // Unknown = brown
+            settings.lineOpacity // Default = black
+        ];
+    }
+    lineWidthSteps() {
+        const settings = this.settings();
+        if (!settings.perUsageDisplay) {
+            return settings.lineWidth;
+        }
+        return [
+            "match",
+            ["get", "railusage"],
+            "F", settings.freight.lineWidth, // Freight = blue
+            "P", settings.passenger.lineWidth, // Passenger = orange
+            "M", settings.mixed.lineWidth, // Both = green
+            "I", settings.inactive.lineWidth, // Inactive = gray
+            "O", settings.other.lineWidth, // Other = red
+            "Y", settings.yard.lineWidth, // Yard = purple
+            "U", settings.unknown.lineWidth, // Unknown = brown
+            settings.lineWidth // Default = black
+        ];
+    }
+    usageLabel(usage) {
+        switch (usage) {
+            case "F":
+                return "Freight rail line";
+            case "P":
+                return "Passenger rail line";
+            case "M":
+                return "Mixed use (freight and passenger)";
+            case "O":
+                return "Other (yard, spur, industrial, or special use)";
+            case "I":
+                return "Inactive or abandoned";
+            case "Y":
+                return "Yard tracks";
+            case "U":
+                return "Unknown or unspecified";
+            default:
+                return `Unrecognized code (${usage})`;
+        }
+    }
+    getLegends() {
+        const settings = this.settings();
+        const items = [];
+        if (!settings.perUsageDisplay) {
+            items.push({
+                value: settings.lineColor,
+                label: 'Railroads',
+            });
+        }
+        else {
+            items.push({ value: settings.freight.lineColor, label: settings.freight.description });
+            items.push({ value: settings.passenger.lineColor, label: settings.passenger.description });
+            items.push({ value: settings.mixed.lineColor, label: settings.mixed.description });
+            items.push({ value: settings.inactive.lineColor, label: settings.inactive.description });
+            items.push({ value: settings.other.lineColor, label: settings.other.description });
+            items.push({ value: settings.yard.lineColor, label: settings.yard.description });
+            items.push({ value: settings.unknown.lineColor, label: settings.unknown.description });
+        }
+        const l = {
+            title: 'Railroads',
+            items: items
+        };
+        // Implementation for generating legends based on settings
+        return [l];
+    }
+    legends;
+    count = 0;
+    total = 0;
+    map;
+    popup = null;
+}
+class RailroadSettings {
+    perUsageDisplay = false;
+    visible = true;
+    lineColor = '#000000';
+    lineWidth = 1;
+    lineOpacity = 0.5;
+    labelsVisible = false;
+    labelsSize = 10;
+    labelsColor = '#000000';
+    labelsHaloColor = '#ffffff';
+    labelsHaloWidth = 1;
+    labelsOpacity = 1.0;
+    labelOverlap = false;
+    freight = {
+        code: "F",
+        description: "Freight rail line",
+        visible: true,
+        lineColor: "#1f77b4",
+        lineWidth: 2,
+        lineOpacity: 0.8
+    };
+    passenger = {
+        code: "P",
+        description: "Passenger rail line",
+        visible: true,
+        lineColor: "#ff7f0e",
+        lineWidth: 2,
+        lineOpacity: 0.8
+    };
+    mixed = {
+        code: "M",
+        description: "Mixed use (freight and passenger)",
+        visible: true,
+        lineColor: "#2ca02c",
+        lineWidth: 2,
+        lineOpacity: 0.8
+    };
+    inactive = {
+        code: "I",
+        description: "Inactive or abandoned",
+        visible: false,
+        lineColor: "#7f7f7f",
+        lineWidth: 2,
+        lineOpacity: 0.5
+    };
+    other = {
+        code: "O",
+        description: "Other (yard, spur, industrial, or special use)",
+        visible: true,
+        lineColor: "#d62728",
+        lineWidth: 2,
+        lineOpacity: 0.5
+    };
+    yard = {
+        code: "Y",
+        description: "Yard tracks",
+        visible: true,
+        lineColor: "#9467bd",
+        lineWidth: 2,
+        lineOpacity: 0.5
+    };
+    unknown = {
+        code: "U",
+        description: "Unknown or unspecified",
+        visible: false,
+        lineColor: "#8c564b",
+        lineWidth: 2,
+        lineOpacity: 0.5
+    };
+}
+class RailroadUsageSettings {
+    code = "";
+    description = "";
+    visible = true;
+    lineColor = '#000000';
+    lineWidth = 1;
+    lineOpacity = 0.5;
+}
+
 class SimpleMapper {
     reset() {
         if (this.map) {
@@ -16514,7 +16840,8 @@ class WatershedMapper {
             type: 'symbol',
             layout: {
                 'text-field': ['get', 'name'],
-                'text-font': ['Open Sans Regular'],
+                // 'text-font': ['Open Sans Regular'],
+                'text-font': ['Open Sans Semibold'], //,'Open Sans Regular'
                 'text-size': this.settings().labelsSize,
                 'text-allow-overlap': this.settings().labelOverlap,
             },
@@ -16778,5 +17105,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, TableBuilder, TableRow, VectorTileServerMapper, WatershedMapper, WatershedSettings, discoverLayers, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxLoadImages, mapboxloadImage, pmtilesPixelInfo, propertiesToTableHtml, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
+export { AddLayer, AddSource, AreaMapperMapper, BackgroundMaskMapper, BackgroundMaskSettings, BaseMapLight, BasemapSelect, BasemapSelectMenu, CensusTractMapper, Codes, CropSequenceMapper, CropSequenceSettings, CroplandDataLayerMapper, CroplandDataLayerSettings, CroplandLegend, DEFAULT_GLYPHS, DEFAULT_GLYPHS2, DrawingMapper, EsriMapper, EsriSettings, HardinessMapper, HardinessSettings, HttpBoundaryLoader, MapAreaSelectComponent, MapComponent, MapSelectionService, MapService, MapStyles, MapboxMapperGroup, NAASMapper, NAASSettings, NaicsMapper, NaicsMapperSettings, NoOpMapper, RailroadSettings, RailroadUsageSettings, RailroadsMapper, 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