@foodmarketmaker/mapag 0.0.24 → 0.0.25

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -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;
         }
@@ -14194,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
@@ -16205,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) {
@@ -16478,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,
             },
@@ -16742,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