@foodmarketmaker/mapag 0.0.8 → 0.0.10

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, effect, input, Input, Component, inject, NgZone, Injectable, output, viewChild, ChangeDetectionStrategy } from '@angular/core';
+import { signal, effect, input, Input, Component, ChangeDetectionStrategy, inject, NgZone, Injectable, output, viewChild } from '@angular/core';
 import { PMTiles, Protocol } from 'pmtiles';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -229,14 +229,12 @@ class Styles {
         this.saveCustomSourcesAndLayers();
         this.map.once("styledata", () => {
             setTimeout(() => {
-                console.log('=== MAP ONCE ===');
                 // Update current basemap tracking from cached style
                 this.updateBasemapTracking(styleData);
                 // Then restore the custom sources/layers
                 this.restoreCustomSourcesAndLayers();
             }, 100);
         });
-        console.log('=== MAP SETTING STYLE ===');
         this.map.setStyle(styleData.url);
         this.style.set(styleData);
         this.currentStyleCode = styleData.code;
@@ -295,9 +293,6 @@ class Styles {
     saveCustomSourcesAndLayers() {
         if (!this.map)
             return;
-        console.log('=== SAVING CUSTOM SOURCES AND LAYERS ===');
-        console.log('Current basemap sources:', Array.from(this.currentBasemapSources));
-        console.log('Current basemap layers:', Array.from(this.currentBasemapLayers));
         // Reset custom sources and layers
         this.customSourcesAndLayers = {
             sources: {},
@@ -305,31 +300,20 @@ class Styles {
             image: {},
         };
         const sources = this.map.getStyle().sources;
-        console.log('All current sources:', Object.keys(sources));
         for (const [sourceId, source] of Object.entries(sources)) {
             // Only save sources that are NOT part of the basemap
             if (!this.currentBasemapSources.has(sourceId)) {
-                console.log('Saving custom source:', sourceId);
                 this.customSourcesAndLayers.sources[sourceId] = source;
             }
             else {
-                console.log('Skipping basemap source:', sourceId);
             }
         }
         const layers = this.map.getStyle().layers;
-        console.log('All current layers:', layers.map(l => l.id));
         for (const layer of layers) {
-            if (layer.id === 'area-fill') {
-                console.log('TRACKING: AREA FILL');
-            }
             // Only save layers that are NOT part of the basemap
             if (!this.currentBasemapLayers.has(layer.id)) {
-                console.log('Saving custom layer:', layer.id);
                 this.customSourcesAndLayers.layers.push(layer);
             }
-            else {
-                console.log('Skipping basemap layer:', layer.id);
-            }
         }
         const allImageIDs = this.map.listImages();
         const customIDs = allImageIDs.filter((id) => id.startsWith("customImg-"));
@@ -343,50 +327,30 @@ class Styles {
                 }
             });
         }
-        console.log('=== SAVE COMPLETE ===');
-        console.log('Saved sources:', Object.keys(this.customSourcesAndLayers.sources));
-        console.log('Saved layers:', this.customSourcesAndLayers.layers.map(l => l.id));
-        console.log('Saved images:', Object.keys(this.customSourcesAndLayers.image));
     }
     restoreCustomSourcesAndLayers() {
         if (!this.map)
             return;
-        console.log('=== RESTORING CUSTOM SOURCES AND LAYERS ===');
-        console.log('Sources to restore:', Object.keys(this.customSourcesAndLayers.sources));
-        console.log('Layers to restore:', this.customSourcesAndLayers.layers.map(l => l.id));
         // Check what's actually on the map RIGHT NOW
         const currentSources = Object.keys(this.map.getStyle().sources || {});
         const currentLayers = (this.map.getStyle().layers || []).map(l => l.id);
-        console.log('ACTUAL current sources on map:', currentSources);
-        console.log('ACTUAL current layers on map:', currentLayers);
         // Add custom sources first
         for (const [sourceId, source] of Object.entries(this.customSourcesAndLayers.sources)) {
             AddSource(this.map, sourceId, source);
-            // try {
-            //   console.log('Adding custom source:', sourceId);
-            //   this.map.addSource(sourceId, source);
-            // } catch (error) {
-            //   console.error('Error adding source', sourceId, ':', error);
-            // }
         }
         // Add custom layers second
         for (const layer of this.customSourcesAndLayers.layers) {
             AddLayer(this.map, layer);
-            if (layer.id === 'area-fill') {
-                console.log('FOLUND: AREA FILL');
-            }
         }
         // Add all custom images
         for (const [imageId, image] of Object.entries(this.customSourcesAndLayers.image)) {
             try {
-                console.log('Adding custom image:', imageId);
                 this.map.addImage(imageId, image.data);
             }
             catch (error) {
                 console.error('Error adding image', imageId, ':', error);
             }
         }
-        console.log('=== RESTORE COMPLETE ===');
     }
 }
 const MapStyles = {
@@ -481,8 +445,6 @@ class BasemapSelect {
         }
         // Try different path approaches for debugging
         const originalPath = this.styleData.image;
-        console.log('Original image path:', originalPath);
-        console.log('StyleData:', this.styleData);
         // Return the original path first to test
         return `url(${originalPath})`;
     }
@@ -577,7 +539,6 @@ class BasemapSelectMenu {
         }
     }
     selectStyle(style) {
-        console.log('Style selected from popover:', style.name);
         const s = this.map().styles;
         if (s) {
             s.style.set(style);
@@ -636,11 +597,11 @@ class BasemapSelectMenu {
         </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"] }] });
+  `, 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 });
 }
 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], template: `
+            args: [{ selector: 'mapag-basemap-select-menu', imports: [CommonModule, BasemapSelect], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="basemap-container" 
          (mouseenter)="showPopover()" 
          (mouseleave)="hidePopover()"
@@ -12838,7 +12799,6 @@ class MapboxMapperGroup {
     svc;
     mappers = new Map();
     onStyleChange(map, svc) {
-        console.log('=== MAP ON STYLE CHANGE - MapboxMapperGroup ===');
         this.mappers.forEach((mapper) => {
             if (mapper.onStyleChange) {
                 mapper.onStyleChange(map, svc);
@@ -12847,7 +12807,7 @@ class MapboxMapperGroup {
     }
     set(name, mapper) {
         if (mapper == undefined) {
-            console.error('NO GOOD CAN COME FROM THIS');
+            return;
         }
         this.mappers.set(name, mapper);
         if (this.map && this.svc) {
@@ -12910,7 +12870,6 @@ class StandardLayersMapper {
     static POINTS = 'points';
     map;
     onStyleChange(map, svc) {
-        console.log('=== MAP ON STYLE CHANGE - StandardLayersMapper ===');
         this.onReady(map, svc);
     }
     onReady(map, svc) {
@@ -13003,7 +12962,6 @@ class AreaMapperMapper {
     }
     onStyleChange(map, svc) {
         // this.onReady(map, svc);
-        console.log('=== MAP ON STYLE CHANGE - AreaMapperMapper ===');
     }
     onReady(map, svc) {
         this.map = map;
@@ -14027,7 +13985,6 @@ class MapAreaSelectComponent {
         // this.m.areaType = this.areaType
         this.areaTypeSrc = Layers.FindVector(this.areaType);
         if (!this.areaTypeSrc) {
-            console.warn('MapAreaSelectComponent: No source found for area type ', this.areaType);
             return;
         }
         // Initialize the mapper
@@ -14106,7 +14063,8 @@ class MapComponent {
     mapper = input(new MapboxMapperGroup(), ...(ngDevMode ? [{ debugName: "mapper" }] : []));
     mapContainer = viewChild('map', ...(ngDevMode ? [{ debugName: "mapContainer" }] : []));
     id = input('mapid', ...(ngDevMode ? [{ debugName: "id" }] : []));
-    onMap = output();
+    onMapReady = output();
+    mapReady = signal(undefined, ...(ngDevMode ? [{ debugName: "mapReady" }] : []));
     // accessToken = input.required<string>();
     // FontAwesome icons
     faPrint = faPrint;
@@ -14124,11 +14082,6 @@ class MapComponent {
     ngOnDestroy() {
         this.styles.destroy();
     }
-    layerExists(map, layerId) {
-        if (map.getLayer(layerId) !== undefined) {
-            console.log(`Layer ${layerId} already exists`);
-        }
-    }
     initializeMap() {
         this.zone.runOutsideAngular(() => {
             const container = this.mapContainer();
@@ -14174,7 +14127,8 @@ class MapComponent {
                     std.onReady(map, this.svc);
                     // Notify that the map is ready
                     this.zone.runOutsideAngular(() => {
-                        this.onMap.emit(map);
+                        this.onMapReady.emit(map);
+                        this.mapReady.set(map);
                     });
                     // Initialize the mapper(s)
                     this.zone.runOutsideAngular(() => {
@@ -14200,7 +14154,7 @@ class MapComponent {
         this.map.triggerRepaint();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: MapComponent, isStandalone: true, selector: "mapag-map", inputs: { mapper: { classPropertyName: "mapper", publicName: "mapper", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMap: "onMap" }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["map"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: MapComponent, isStandalone: true, selector: "mapag-map", inputs: { mapper: { classPropertyName: "mapper", publicName: "mapper", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMapReady: "onMapReady" }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["map"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="mapcontainer" #map>
       @if (mapper().legends.length) { @for (legend of mapper().legends; track
       legend) {
@@ -14251,7 +14205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
     </div>
     <ng-content></ng-content>
   `, styles: [":host{height:100%;position:relative;overflow:hidden}.mapcontainer{margin:0;padding:0;height:100%;width:100%}.legend{position:absolute;top:10px;right:10px;background:#fff;padding:10px;border-radius:5px;box-shadow:0 2px 4px #0003;z-index:1000}.buttons{position:absolute;top:10px;left:10px;z-index:1000}.buttons>button{border-radius:5px;border:1px solid #ccc;background:#fff;color:#333;padding:8px 12px;cursor:pointer;box-shadow:0 2px 4px #0003}.buttons>button:hover{background-color:#f0f0f0}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { mapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapper", required: false }] }], mapContainer: [{ type: i0.ViewChild, args: ['map', { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], onMap: [{ type: i0.Output, args: ["onMap"] }] } });
+        }], ctorParameters: () => [], propDecorators: { mapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapper", required: false }] }], mapContainer: [{ type: i0.ViewChild, args: ['map', { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], onMapReady: [{ type: i0.Output, args: ["onMapReady"] }] } });
 // Define map styles
 const mapStyles = {
     'carto-positron': {
@@ -14635,10 +14589,15 @@ class HardinessMapper {
     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);
     }
-    constructor() {
+    constructor(settings) {
+        if (settings) {
+            this.settings.set({
+                ...this.settings(),
+                ...settings
+            });
+        }
         const _ = effect(() => {
             const settings = this.settings();
             // this._update(settings);
@@ -14697,7 +14656,7 @@ class HardinessMapper {
         }
     }
     update(newSettings) {
-        this.settings.set({ ...newSettings });
+        this.settings.set({ ...this.settings(), ...newSettings });
     }
     _update(settings) {
         if (!this.map) {
@@ -14947,14 +14906,20 @@ class WatershedMapper {
     current = null;
     currentFeatureID = undefined;
     over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
-    constructor() {
+    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({ ...settings });
+        this.settings.set({ ...this.settings(), ...settings });
     }
     _update(settings) {
         if (!this.map) {