@foodmarketmaker/mapag 0.0.6 → 0.0.8

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -14106,6 +14106,7 @@ class MapComponent {
     mapper = input(new MapboxMapperGroup(), ...(ngDevMode ? [{ debugName: "mapper" }] : []));
     mapContainer = viewChild('map', ...(ngDevMode ? [{ debugName: "mapContainer" }] : []));
     id = input('mapid', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    onMap = output();
     // accessToken = input.required<string>();
     // FontAwesome icons
     faPrint = faPrint;
@@ -14135,7 +14136,7 @@ class MapComponent {
             // style =  'https://demotiles.maplibre.org/style.json'
             if (container) {
                 // @ts-ignore - Type conflict between different maplibre-gl versions
-                this.map = new maplibregl.Map({
+                const map = new maplibregl.Map({
                     container: container.nativeElement,
                     // style: this.basemap(),
                     style: this.styles.style().url, // Default style
@@ -14143,37 +14144,43 @@ class MapComponent {
                     minZoom: 1,
                     zoom: 3,
                 });
+                this.map = map;
                 // disable map rotation using right click + drag
-                if (this.map) {
-                    this.map.dragRotate.disable();
-                    this.map.on('styledata', (e) => {
-                        console.log('= MAP STYLE DATA ===', e);
-                        if (!this.map)
-                            return;
-                        this.mapper().onStyleChange(this.map, this.svc);
+                map.dragRotate.disable();
+                // Forward style change events to the mapper
+                map.on('styledata', (e) => {
+                    this.zone.runOutsideAngular(() => {
+                        this.mapper().onStyleChange(map, this.svc);
                     });
-                    this.map.on('idle', () => {
-                        console.log('= MAP IDLE ===');
-                        if (!this.map)
-                            return;
-                        this.mapper().onStyleChange(this.map, this.svc);
+                });
+                // Forward style change events to the mapper
+                this.map.on('idle', () => {
+                    this.zone.runOutsideAngular(() => {
+                        this.mapper().onStyleChange(map, this.svc);
                     });
-                    this.map.on('load', () => {
-                        if (!this.map)
-                            return;
-                        console.log('Map loaded successfully');
-                        this.styles.initializeMap(this.map);
-                        // Setup the mapper
-                        const mapper = this.mapper();
-                        // Set the map in the services
-                        this.svc.setMap(this.map);
-                        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());
+                });
+                // Process when the map has finished loading
+                this.map.on('load', () => {
+                    this.styles.initializeMap(map);
+                    // Setup the mapper
+                    const mapper = this.mapper();
+                    // Set the map in the services
+                    this.svc.setMap(map);
+                    this.svc.setMapper(mapper);
+                    this.selectionSvc.setMap(map);
+                    this.selectionSvc.setMapper(mapper);
+                    // Just create our standard Layers
+                    const std = new StandardLayersMapper();
+                    std.onReady(map, this.svc);
+                    // Notify that the map is ready
+                    this.zone.runOutsideAngular(() => {
+                        this.onMap.emit(map);
                     });
-                }
+                    // Initialize the mapper(s)
+                    this.zone.runOutsideAngular(() => {
+                        this.mapper().onReady(map, this.svc);
+                    });
+                });
             }
         });
     }
@@ -14193,7 +14200,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 } }, 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: { onMap: "onMap" }, 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) {
@@ -14244,7 +14251,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 }] }] } });
+        }], 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"] }] } });
 // Define map styles
 const mapStyles = {
     'carto-positron': {
@@ -14634,7 +14641,8 @@ class HardinessMapper {
     constructor() {
         const _ = effect(() => {
             const settings = this.settings();
-            this._update(settings);
+            // this._update(settings);
+            this.create();
         }, ...(ngDevMode ? [{ debugName: "_" }] : []));
     }
     async create() {