@foodmarketmaker/mapag 0.0.4 → 0.0.6

package/README.md

@@ -1,6 +1,54 @@
-# Mapag
+# @foodmarketmaker/mapag
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+Angular library for interactive maps with advanced geospatial features.
+
+## Installation
+
+```bash
+npm install @foodmarketmaker/mapag
+```
+
+## Asset Setup
+
+This library includes map preview images that need to be available in your application's assets folder.
+
+### Automatic Setup (Recommended)
+
+The library includes a postinstall script that automatically copies assets to your project. The assets will be available at `assets/mapag/src/assets/`.
+
+If the automatic setup fails, you can manually copy assets:
+
+```bash
+npx mapag-copy-assets
+```
+
+### Manual Setup
+
+If you need to manually copy the assets:
+
+1. Copy files from `node_modules/@foodmarketmaker/mapag/src/assets/` 
+2. To your project's `src/assets/mapag/src/assets/` folder
+
+## Usage
+
+```typescript
+import { MapagModule } from '@foodmarketmaker/mapag';
+
+@NgModule({
+  imports: [MapagModule],
+  // ...
+})
+export class AppModule { }
+```
+
+## Features
+
+- Interactive maps with MapLibre GL
+- Multiple basemap styles  
+- Drawing tools (rectangles, polygons)
+- Area selection components
+- Geospatial data layers
+- Customizable styling
 
 ## Code scaffolding
 

package/copy-assets.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Copy mapag assets to the consuming application's assets folder
+ * This ensures the library's assets are available at runtime
+ */
+
+function copyAssets() {
+  const sourceDir = path.join(__dirname, 'src', 'assets');
+  const targetDir = path.join(process.cwd(), 'src', 'assets', 'mapag', 'src', 'assets');
+  
+  console.log('📦 Copying @foodmarketmaker/mapag assets...');
+  console.log('From:', sourceDir);
+  console.log('To:', targetDir);
+  
+  try {
+    // Create target directory if it doesn't exist
+    fs.mkdirSync(targetDir, { recursive: true });
+    
+    // Copy all files from source to target
+    const files = fs.readdirSync(sourceDir);
+    let copiedCount = 0;
+    
+    files.forEach(file => {
+      const sourcePath = path.join(sourceDir, file);
+      const targetPath = path.join(targetDir, file);
+      
+      if (fs.statSync(sourcePath).isFile()) {
+        fs.copyFileSync(sourcePath, targetPath);
+        copiedCount++;
+        console.log(`✅ Copied: ${file}`);
+      }
+    });
+    
+    console.log(`🎉 Successfully copied ${copiedCount} asset files!`);
+    console.log('💡 Assets are now available at: assets/mapag/src/assets/');
+    
+  } catch (error) {
+    console.error('❌ Error copying assets:', error.message);
+    console.log('⚠️  You may need to manually copy assets from node_modules/@foodmarketmaker/mapag/src/assets/');
+    process.exit(1);
+  }
+}
+
+// Run if called directly
+if (require.main === module) {
+  copyAssets();
+}
+
+module.exports = { copyAssets };

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -32,16 +32,18 @@ function SaveMap(map) {
 }
 function AddLayer(map, layer, afterId) {
     if (!map)
-        return;
+        return false;
     try {
         if (map.getLayer(layer.id)) {
             console.log(`Layer ${layer.id} already exists`);
-            return;
+            return false;
         }
         map.addLayer(layer, afterId);
+        return true;
     }
     catch (error) {
         console.debug(`Error adding layer ${layer.id}`);
+        return false;
     }
 }
 function RemoveLayer(map, layerId) {
@@ -61,7 +63,6 @@ function AddSource(map, sourceId, source) {
         return;
     try {
         if (map.getSource(sourceId)) {
-            console.log(`Source ${sourceId} already exists`);
             return;
         }
         map.addSource(sourceId, source);
@@ -14169,6 +14170,7 @@ class MapComponent {
                         this.svc.setMapper(mapper);
                         this.selectionSvc.setMap(this.map);
                         this.selectionSvc.setMapper(mapper);
+                        this.mapper().onReady(this.map, this.svc);
                         this.map.addControl(new maplibregl.NavigationControl());
                     });
                 }
@@ -14601,118 +14603,223 @@ class CensusTractMapper {
     };
 }
 
+class LayerSettings {
+    visible = true;
+}
+class PolygonLayerSettings extends LayerSettings {
+    fillColor = '#888888';
+    fillOpacity = 0.5;
+    opacity = 0.7;
+    borderColor = '#ffffff';
+    borderWidth = 0.5;
+    borderOpacity = 0.8;
+}
+class DiscreteColors {
+    colors = {};
+}
+
 class HardinessMapper {
+    LAYER_ID = 'hardiness-layer';
+    SOURCE_ID = 'hardinessSource';
+    SOURCE_LAYER = 'hardiness2023';
+    PMTILES_URL = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/hardiness2023.pmtiles';
     current = null;
     currentFeatureID = undefined;
     over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
+    settings = signal(new HardinessSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
     async onStyleChange(map, svc) {
         console.log('=== MAP ON STYLE CHANGE - MapboxMapperGroup ===');
         // await this.onReady(map, svc);
     }
-    async onReady(map, svc) {
-        this.map = map;
-        const PMTILES_URL = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/hardiness2023.pmtiles';
+    constructor() {
+        const _ = effect(() => {
+            const settings = this.settings();
+            this._update(settings);
+        }, ...(ngDevMode ? [{ debugName: "_" }] : []));
+    }
+    async create() {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
         // Method 1: Get available layers from PMTiles metadata
-        const layers = await discoverLayers(PMTILES_URL);
+        const layers = await discoverLayers(this.PMTILES_URL);
         console.log('Discovered layers:', layers);
-        map.addSource('hardinessSource', {
+        AddSource(map, this.SOURCE_ID, {
             type: 'vector',
-            url: PMTILES_URL,
+            url: this.PMTILES_URL,
         });
-        map.addLayer({
-            id: 'hardiness-layer',
-            source: 'hardinessSource',
-            'source-layer': 'hardiness2023',
+        const added = AddLayer(map, {
+            id: this.LAYER_ID,
+            source: this.SOURCE_ID,
+            'source-layer': this.SOURCE_LAYER,
             type: 'fill',
-            paint: {
-                'fill-color': [
-                    'case',
-                    ['==', ['get', 'zone'], '1a'], '#1a237e',
-                    ['==', ['get', 'zone'], '1b'], '#283593',
-                    ['==', ['get', 'zone'], '2a'], '#3949ab',
-                    ['==', ['get', 'zone'], '2b'], '#3f51b5',
-                    ['==', ['get', 'zone'], '3a'], '#5c6bc0',
-                    ['==', ['get', 'zone'], '3b'], '#7986cb',
-                    ['==', ['get', 'zone'], '4a'], '#42a5f5',
-                    ['==', ['get', 'zone'], '4b'], '#29b6f6',
-                    ['==', ['get', 'zone'], '5a'], '#26c6da',
-                    ['==', ['get', 'zone'], '5b'], '#26a69a',
-                    ['==', ['get', 'zone'], '6a'], '#66bb6a',
-                    ['==', ['get', 'zone'], '6b'], '#9ccc65',
-                    ['==', ['get', 'zone'], '7a'], '#d4e157',
-                    ['==', ['get', 'zone'], '7b'], '#ffee58',
-                    ['==', ['get', 'zone'], '8a'], '#ffca28',
-                    ['==', ['get', 'zone'], '8b'], '#ffa726',
-                    ['==', ['get', 'zone'], '9a'], '#ff8a65',
-                    ['==', ['get', 'zone'], '9b'], '#ff7043',
-                    ['==', ['get', 'zone'], '10a'], '#f4511e',
-                    ['==', ['get', 'zone'], '10b'], '#e53935',
-                    ['==', ['get', 'zone'], '11a'], '#c62828',
-                    ['==', ['get', 'zone'], '11b'], '#ad1457',
-                    ['==', ['get', 'zone'], '12a'], '#8e24aa',
-                    ['==', ['get', 'zone'], '12b'], '#7b1fa2',
-                    ['==', ['get', 'zone'], '13a'], '#6a1b9a',
-                    ['==', ['get', 'zone'], '13b'], '#4a148c',
-                    '#cccccc' // default color for unknown zones
-                ],
-                'fill-opacity': 0.7,
-            },
-            maxzoom: 14,
         }, StandardLayersMapper.POLYGONS_BACKGROUND);
-        // map.showTileBoundaries = true;
-        // map.addLayer(
-        //   {
-        //     id: 'hardiness-layer-line',
-        //     source: 'hardinessSource',
-        //     'source-layer': 'hardiness2023',
-        //     type: 'line',
-        //     paint: {
-        //       'line-color': '#ffffff',
-        //       'line-width': 0.5,
-        //       'line-opacity': 0.8,
-        //     },
-        //     maxzoom: 14,
-        //   },
-        //   StandardLayersMapper.POLYGONS_BACKGROUND
-        // );
-        map.on('mousemove', 'hardiness-layer', (e) => {
-            this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
-        });
-        map.on('click', 'hardiness-layer', (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['zone']
-                    : 'Unknown';
-                // Ensure that if the popup is already open, we don't create a new one
-                if (this.popup) {
-                    this.popup.remove();
+        this._update(this.settings());
+        if (added) {
+            map.on('mousemove', this.LAYER_ID, (e) => {
+                this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
+            });
+            map.on('click', this.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['zone']
+                        : '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>Hardiness:</strong> ${name}<hr /><br/>${fields}`)
+                        .addTo(map);
                 }
-                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>Hardiness:</strong> ${name}<hr /><br/>${fields}`)
-                    .addTo(map);
-            }
-        });
+            });
+        }
+    }
+    update(newSettings) {
+        this.settings.set({ ...newSettings });
+    }
+    _update(settings) {
+        if (!this.map) {
+            return;
+        }
+        // Visiblitiy
+        if (settings.visible) {
+            this.map.setLayoutProperty(this.LAYER_ID, 'visibility', 'visible');
+        }
+        else {
+            this.map.setLayoutProperty(this.LAYER_ID, 'visibility', 'none');
+        }
+        // Update paint properties
+        this.map.setPaintProperty(this.LAYER_ID, 'fill-color', [
+            'case',
+            ['==', ['get', 'zone'], '1a'], settings.zone1a,
+            ['==', ['get', 'zone'], '1b'], settings.zone1b,
+            ['==', ['get', 'zone'], '2a'], settings.zone2a,
+            ['==', ['get', 'zone'], '2b'], settings.zone2b,
+            ['==', ['get', 'zone'], '3a'], settings.zone3a,
+            ['==', ['get', 'zone'], '3b'], settings.zone3b,
+            ['==', ['get', 'zone'], '4a'], settings.zone4a,
+            ['==', ['get', 'zone'], '4b'], settings.zone4b,
+            ['==', ['get', 'zone'], '5a'], settings.zone5a,
+            ['==', ['get', 'zone'], '5b'], settings.zone5b,
+            ['==', ['get', 'zone'], '6a'], settings.zone6a,
+            ['==', ['get', 'zone'], '6b'], settings.zone6b,
+            ['==', ['get', 'zone'], '7a'], settings.zone7a,
+            ['==', ['get', 'zone'], '7b'], settings.zone7b,
+            ['==', ['get', 'zone'], '8a'], settings.zone8a,
+            ['==', ['get', 'zone'], '8b'], settings.zone8b,
+            ['==', ['get', 'zone'], '9a'], settings.zone9a,
+            ['==', ['get', 'zone'], '9b'], settings.zone9b,
+            ['==', ['get', 'zone'], '10a'], settings.zone10a,
+            ['==', ['get', 'zone'], '10b'], settings.zone10b,
+            ['==', ['get', 'zone'], '11a'], settings.zone11a,
+            ['==', ['get', 'zone'], '11b'], settings.zone11b,
+            ['==', ['get', 'zone'], '12a'], settings.zone12a,
+            ['==', ['get', 'zone'], '12b'], settings.zone12b,
+            ['==', ['get', 'zone'], '13a'], settings.zone13a,
+            ['==', ['get', 'zone'], '13b'], settings.zone13b,
+            settings.fillColor,
+        ]);
+        this.map.setPaintProperty(this.LAYER_ID, 'fill-opacity', settings.fillOpacity);
+        // Set up the legend
+        if (settings.visible) {
+            this.legends = [
+                {
+                    title: 'USDA Plant Hardiness Zones',
+                    items: [
+                        { value: settings.zone1a, label: 'Zone 1a' },
+                        { value: settings.zone1b, label: 'Zone 1b' },
+                        { value: settings.zone2a, label: 'Zone 2a' },
+                        { value: settings.zone2b, label: 'Zone 2b' },
+                        { value: settings.zone3a, label: 'Zone 3a' },
+                        { value: settings.zone3b, label: 'Zone 3b' },
+                        { value: settings.zone4a, label: 'Zone 4a' },
+                        { value: settings.zone4b, label: 'Zone 4b' },
+                        { value: settings.zone5a, label: 'Zone 5a' },
+                        { value: settings.zone5b, label: 'Zone 5b' },
+                        { value: settings.zone6a, label: 'Zone 6a' },
+                        { value: settings.zone6b, label: 'Zone 6b' },
+                        { value: settings.zone7a, label: 'Zone 7a' },
+                        { value: settings.zone7b, label: 'Zone 7b' },
+                        { value: settings.zone8a, label: 'Zone 8a' },
+                        { value: settings.zone8b, label: 'Zone 8b' },
+                        { value: settings.zone9a, label: 'Zone 9a' },
+                        { value: settings.zone9b, label: 'Zone 9b' },
+                        { value: settings.zone10a, label: 'Zone 10a' },
+                        { value: settings.zone10b, label: 'Zone 10b' },
+                        { value: settings.zone11a, label: 'Zone 11a' },
+                        { value: settings.zone11b, label: 'Zone 11b' },
+                        { value: settings.zone12a, label: 'Zone 12a' },
+                        { value: settings.zone12b, label: 'Zone 12b' },
+                        { value: settings.zone13a, label: 'Zone 13a' },
+                        { value: settings.zone13b, label: 'Zone 13b' },
+                    ],
+                },
+            ];
+        }
+        else {
+            this.legends = undefined;
+        }
+    }
+    async onReady(map, svc) {
+        this.map = map;
+        this.create();
     }
     reset() { }
-    clear() { }
+    clear() {
+        RemoveLayer(this.map, this.LAYER_ID);
+        RemoveSource(this.map, this.SOURCE_ID);
+    }
     legends;
     count = 0;
     total = 0;
     map;
     popup = null;
 }
+class HardinessSettings extends PolygonLayerSettings {
+    zone1a = '#1a237e';
+    zone1b = '#283593';
+    zone2a = '#3949ab';
+    zone2b = '#3f51b5';
+    zone3a = '#5c6bc0';
+    zone3b = '#7986cb';
+    zone4a = '#42a5f5';
+    zone4b = '#29b6f6';
+    zone5a = '#26c6da';
+    zone5b = '#26a69a';
+    zone6a = '#66bb6a';
+    zone6b = '#9ccc65';
+    zone7a = '#d4e157';
+    zone7b = '#ffee58';
+    zone8a = '#ffca28';
+    zone8b = '#ffa726';
+    zone9a = '#ff8a65';
+    zone9b = '#ff7043';
+    zone10a = '#f4511e';
+    zone10b = '#e53935';
+    zone11a = '#c62828';
+    zone11b = '#ad1457';
+    zone12a = '#8e24aa';
+    zone12b = '#7b1fa2';
+    zone13a = '#6a1b9a';
+    zone13b = '#4a148c';
+    fillColor = '#cccccc'; // default color for unknown zones
+    fillOpacity = 0.7;
+    borderOpacity = 0;
+}
 
 class VectorTileServerMapper {
     src;
@@ -14824,43 +14931,73 @@ class VectorTileServerMapper {
 // }
 
 class WatershedMapper {
+    FILL_LAYER_ID = 'watershed-layer';
+    LINE_LAYER_ID = 'watershed-layer-line';
+    SOURCE_ID = 'watershedSource';
+    SOURCE_LAYER = 'watershedhu6';
+    settings = signal(new WatershedSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
     current = null;
     currentFeatureID = undefined;
     over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
-    async onReady(map, svc) {
-        this.map = map;
+    constructor() {
+        const _ = effect(() => {
+            const settings = this.settings();
+            this._update(settings);
+        }, ...(ngDevMode ? [{ debugName: "_" }] : []));
+    }
+    update(settings) {
+        this.settings.set({ ...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;
         const PMTILES_URL = 'pmtiles://https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/watershedhu6.pmtiles';
-        map.addSource('pmTileSourceName', {
+        AddSource(map, this.SOURCE_ID, {
             type: 'vector',
             url: PMTILES_URL,
         });
-        map.addLayer({
-            id: 'watershed-layer',
-            source: 'pmTileSourceName',
-            'source-layer': 'watershedhu6',
+        const addedFill = AddLayer(map, {
+            id: this.FILL_LAYER_ID,
+            source: this.SOURCE_ID,
+            "source-layer": this.SOURCE_LAYER,
             type: 'fill',
-            paint: {
-                'fill-color': 'steelblue',
-                'fill-opacity': 0.1,
-            },
-            maxzoom: 14,
         }, StandardLayersMapper.POLYGONS_BACKGROUND);
         // map.showTileBoundaries = true;
-        map.addLayer({
-            id: 'watershed-layer-line',
-            source: 'pmTileSourceName',
-            'source-layer': 'watershedhu6',
+        AddLayer(map, {
+            id: this.LINE_LAYER_ID,
+            source: this.SOURCE_ID,
+            "source-layer": this.SOURCE_LAYER,
             type: 'line',
-            paint: {
-                'line-color': 'steelblue',
-                'line-width': 1,
-            },
-            maxzoom: 14,
         }, StandardLayersMapper.POLYGONS_BACKGROUND);
-        map.on('mousemove', 'watershed-layer', (e) => {
+        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', 'watershed-layer', (e) => {
+        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) {
@@ -14887,14 +15024,32 @@ class WatershedMapper {
             }
         });
     }
+    async onReady(map, svc) {
+        this.map = map;
+        this.create();
+    }
     reset() { }
-    clear() { }
+    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 WatershedSettings {
+    visible = true;
+    fillColor = '#0000ff';
+    fillOpacity = 0.1;
+    borderColor = '#01018bff';
+    borderWidth = 1;
+    borderOpacity = 1.0;
+}
 
 class HttpBoundaryLoader {
     static NewCustom(http, path) {
@@ -14998,5 +15153,5 @@ class HttpBoundaryLoader {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLayer, AddSource, AreaMapperMapper, BackgroundMaskMapper, BaseMapLight, BasemapSelect, BasemapSelectMenu, CensusTractMapper, DrawingMapper, HardinessMapper, HttpBoundaryLoader, MapAreaSelectComponent, MapComponent, MapSelectionService, MapService, MapStyles, MapboxMapperGroup, NoOpMapper, RemoveLayer, RemoveSource, SaveMap, SelectMode, StandardLayersMapper, Styles, VectorTileServerMapper, WatershedMapper, discoverLayers, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxLoadImages, mapboxloadImage, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
+export { AddLayer, AddSource, AreaMapperMapper, BackgroundMaskMapper, BaseMapLight, BasemapSelect, BasemapSelectMenu, CensusTractMapper, DrawingMapper, HardinessMapper, HardinessSettings, HttpBoundaryLoader, MapAreaSelectComponent, MapComponent, MapSelectionService, MapService, MapStyles, MapboxMapperGroup, NoOpMapper, RemoveLayer, RemoveSource, SaveMap, SelectMode, StandardLayersMapper, Styles, VectorTileServerMapper, WatershedMapper, WatershedSettings, discoverLayers, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxLoadImages, mapboxloadImage, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
 //# sourceMappingURL=foodmarketmaker-mapag.mjs.map