@aguacerowx/mapsgl 0.0.57 → 0.0.58

package/src/MapManager.js

@@ -1,198 +1,198 @@
-// aguacero-api/src/MapManager.js
-
-import { THEME_CONFIGS } from '@aguacerowx/javascript-sdk';
-import { applyStyleCustomizations } from './style-applicator.js';
-import { STYLE_LAYER_MAP } from './style-layer-map.js';
-import { EventEmitter } from '@aguacerowx/javascript-sdk';
-
-/**
- * A utility to recursively merge two objects.
- * The source object's properties will overwrite the target's properties.
- * This is a "non-mutating" version; it returns a new object.
- * @param {object} target - The base object.
- * @param {object} source - The object with properties to merge in.
- * @returns {object} A new, merged object.
- */
-function deepMerge(target, source) {
-    const output = { ...target };
-
-    if (isObject(target) && isObject(source)) {
-        Object.keys(source).forEach(key => {
-            if (isObject(source[key])) {
-                if (!(key in target)) {
-                    Object.assign(output, { [key]: source[key] });
-                } else {
-                    output[key] = deepMerge(target[key], source[key]);
-                }
-            } else {
-                Object.assign(output, { [key]: source[key] });
-            }
-        });
-    }
-
-    return output;
-}
-// Helper for the deepMerge utility
-function isObject(item) {
-    return (item && typeof item === 'object' && !Array.isArray(item));
-}
-
-
-const BASE_STYLE_URL = 'mapbox://styles/aguacerowx/cmfvox8mq004u01qm5nlg7qkt';
-
-export class MapManager extends EventEmitter {
-    /**
-     * @param {string} containerId - DOM element id for the Mapbox map container.
-     * @param {object} options
-     * @param {string} [options.accessToken] - Mapbox access token (required unless `mapboxToken` is set).
-     * @param {string} [options.mapboxToken] - Alias for `accessToken` (e.g. React Native parity).
-     * @param {object} [options.mapOptions] - Passed through to `mapboxgl.Map` (after defaults); `style` here is used unless a valid custom style + anchor pair is set.
-     * @param {object} [options.customStyles] - Per-theme style overrides merged into {@link THEME_CONFIGS}.
-     * @param {'light'|'dark'} [options.defaultTheme]
-     * @param {'light'|'dark'} [options.theme] - Alias for `defaultTheme`.
-     * @param {string} [options.styleUrl] - Custom Mapbox style URL (alias: `styleURL`).
-     * @param {string} [options.styleURL] - Same as `styleUrl`.
-     * @param {string} [options.weatherBeforeLayerId] - Style layer id to insert Aguacero layers below (alias: `belowID`).
-     * @param {string} [options.belowID] - Same as `weatherBeforeLayerId`. With `styleUrl`/`styleURL`, required for correct stacking; default Aguacero style uses `AML_-_terrain` in {@link WeatherLayerManager} when omitted.
-     */
-    constructor(containerId, options = {}) {
-        super();
-        const accessToken = options.accessToken || options.mapboxToken;
-        if (!containerId || !accessToken) {
-            throw new Error('A container ID and a Mapbox access token are required.');
-        }
-
-        mapboxgl.accessToken = accessToken;
-
-        // --- THE FIX IS HERE ---
-
-        // 1. Start with clean copies of the base themes
-        let lightTheme = JSON.parse(JSON.stringify(THEME_CONFIGS.light));
-        let darkTheme = JSON.parse(JSON.stringify(THEME_CONFIGS.dark));
-
-        // 2. If developer provides custom styles, merge them into the defaults
-        if (options.customStyles) {
-            if (options.customStyles.light) {
-                lightTheme = deepMerge(lightTheme, options.customStyles.light);
-            }
-            if (options.customStyles.dark) {
-                darkTheme = deepMerge(darkTheme, options.customStyles.dark);
-            }
-        }
-
-        // 3. Store the final, potentially merged, themes
-        this.themes = {
-            light: lightTheme,
-            dark: darkTheme
-        };
-        
-        // --- END OF FIX ---
-
-        const defaultThemeName = options.theme || options.defaultTheme || 'light';
-        this.currentCustomizations = this.themes[defaultThemeName];
-        this.currentThemeName = defaultThemeName;
-
-        this.weatherLayerManagers = new Map();
-
-        const mapOptions = options.mapOptions || {};
-        let initialStyle = mapOptions.style !== undefined ? mapOptions.style : BASE_STYLE_URL;
-        /** @type {string | null} */
-        let weatherBeforeLayerId = null;
-
-        const customStyleUrl = options.styleURL || options.styleUrl;
-        const customBeforeId = options.belowID || options.weatherBeforeLayerId;
-        if (customStyleUrl) {
-            if (customBeforeId && String(customBeforeId).trim()) {
-                initialStyle = customStyleUrl;
-                weatherBeforeLayerId = String(customBeforeId).trim();
-            } else {
-                console.warn(
-                    '[MapManager] A custom style (`styleUrl` / `styleURL`) was provided without a non-empty `weatherBeforeLayerId` / `belowID`. ' +
-                        'Weather layers need a style layer id to insert below; keeping the default Aguacero style.'
-                );
-                if (mapOptions.style === undefined) {
-                    initialStyle = BASE_STYLE_URL;
-                }
-            }
-        }
-
-        this.weatherBeforeLayerId = weatherBeforeLayerId;
-
-        this.map = new mapboxgl.Map({
-            container: containerId,
-            center: [-98, 39],
-            zoom: 3.5,
-            ...mapOptions,
-            style: initialStyle,
-        });
-
-        this.map.__aguaceroMapsgl = { weatherBeforeLayerId };
-        
-        this.map.on('load', () => {
-             applyStyleCustomizations(this.map, this.currentCustomizations);
-             this.emit('style:applied', {
-                 themeName: this.currentThemeName,
-                 styles: this.currentCustomizations
-             });
-        });
-    }
-    
-    // The rest of the methods (setTheme, setLabelGroupVisibility, etc.) are correct and remain unchanged...
-    setTheme(themeName) {
-        if (!this.themes[themeName]) {
-            return;
-        }
-        
-        const newThemeStyles = JSON.parse(JSON.stringify(this.themes[themeName]));
-        const oldLabelStyles = this.currentCustomizations.labels;
-
-        if (oldLabelStyles) {
-            for (const category in oldLabelStyles) {
-                if (oldLabelStyles[category]?.hasOwnProperty('visible') && newThemeStyles.labels[category]) {
-                    newThemeStyles.labels[category].visible = oldLabelStyles[category].visible;
-                }
-                for (const subKey in oldLabelStyles[category]) {
-                    if (oldLabelStyles[category][subKey]?.hasOwnProperty('visible') && newThemeStyles.labels[category]?.[subKey]) {
-                        newThemeStyles.labels[category][subKey].visible = oldLabelStyles[category][subKey].visible;
-                    }
-                }
-            }
-        }
-        
-        this.currentCustomizations = newThemeStyles;
-        this.currentThemeName = themeName;
-        
-        applyStyleCustomizations(this.map, this.currentCustomizations);
-        
-        this.emit('style:applied', {
-            themeName: this.currentThemeName,
-            styles: this.currentCustomizations
-        });
-    }
-
-    setLabelGroupVisibility(groupKey, visible) {
-        const path = `labels.${groupKey}.visible`;
-        let current = this.currentCustomizations;
-        const parts = path.split('.');
-        for (let i = 0; i < parts.length - 1; i++) {
-            current = current[parts[i]];
-            if (!current) {
-                 return;
-            }
-        }
-        current[parts[parts.length - 1]] = visible;
-        
-        const mapKey = groupKey.replace(/\.(.)/g, (match, p1) => p1.toUpperCase());
-        const layerId = STYLE_LAYER_MAP[mapKey]?.layerId;
-        
-        if (layerId && this.map.getLayer(layerId)) {
-            this.map.setLayoutProperty(layerId, 'visibility', visible ? 'visible' : 'none');
-        }
-    }
-    
-    addWeatherManager(manager) {
-        this.weatherLayerManagers.set(manager.layerId, manager);
-    }
-    
-    getMap() { return this.map; }
+// aguacero-api/src/MapManager.js
+
+import { THEME_CONFIGS } from '@aguacerowx/javascript-sdk';
+import { applyStyleCustomizations } from './style-applicator.js';
+import { STYLE_LAYER_MAP } from './style-layer-map.js';
+import { EventEmitter } from '@aguacerowx/javascript-sdk';
+
+/**
+ * A utility to recursively merge two objects.
+ * The source object's properties will overwrite the target's properties.
+ * This is a "non-mutating" version; it returns a new object.
+ * @param {object} target - The base object.
+ * @param {object} source - The object with properties to merge in.
+ * @returns {object} A new, merged object.
+ */
+function deepMerge(target, source) {
+    const output = { ...target };
+
+    if (isObject(target) && isObject(source)) {
+        Object.keys(source).forEach(key => {
+            if (isObject(source[key])) {
+                if (!(key in target)) {
+                    Object.assign(output, { [key]: source[key] });
+                } else {
+                    output[key] = deepMerge(target[key], source[key]);
+                }
+            } else {
+                Object.assign(output, { [key]: source[key] });
+            }
+        });
+    }
+
+    return output;
+}
+// Helper for the deepMerge utility
+function isObject(item) {
+    return (item && typeof item === 'object' && !Array.isArray(item));
+}
+
+
+const BASE_STYLE_URL = 'mapbox://styles/aguacerowx/cmfvox8mq004u01qm5nlg7qkt';
+
+export class MapManager extends EventEmitter {
+    /**
+     * @param {string} containerId - DOM element id for the Mapbox map container.
+     * @param {object} options
+     * @param {string} [options.accessToken] - Mapbox access token (required unless `mapboxToken` is set).
+     * @param {string} [options.mapboxToken] - Alias for `accessToken` (e.g. React Native parity).
+     * @param {object} [options.mapOptions] - Passed through to `mapboxgl.Map` (after defaults); `style` here is used unless a valid custom style + anchor pair is set.
+     * @param {object} [options.customStyles] - Per-theme style overrides merged into {@link THEME_CONFIGS}.
+     * @param {'light'|'dark'} [options.defaultTheme]
+     * @param {'light'|'dark'} [options.theme] - Alias for `defaultTheme`.
+     * @param {string} [options.styleUrl] - Custom Mapbox style URL (alias: `styleURL`).
+     * @param {string} [options.styleURL] - Same as `styleUrl`.
+     * @param {string} [options.weatherBeforeLayerId] - Style layer id to insert Aguacero layers below (alias: `belowID`).
+     * @param {string} [options.belowID] - Same as `weatherBeforeLayerId`. With `styleUrl`/`styleURL`, required for correct stacking; default Aguacero style uses `AML_-_terrain` in {@link WeatherLayerManager} when omitted.
+     */
+    constructor(containerId, options = {}) {
+        super();
+        const accessToken = options.accessToken || options.mapboxToken;
+        if (!containerId || !accessToken) {
+            throw new Error('A container ID and a Mapbox access token are required.');
+        }
+
+        mapboxgl.accessToken = accessToken;
+
+        // --- THE FIX IS HERE ---
+
+        // 1. Start with clean copies of the base themes
+        let lightTheme = JSON.parse(JSON.stringify(THEME_CONFIGS.light));
+        let darkTheme = JSON.parse(JSON.stringify(THEME_CONFIGS.dark));
+
+        // 2. If developer provides custom styles, merge them into the defaults
+        if (options.customStyles) {
+            if (options.customStyles.light) {
+                lightTheme = deepMerge(lightTheme, options.customStyles.light);
+            }
+            if (options.customStyles.dark) {
+                darkTheme = deepMerge(darkTheme, options.customStyles.dark);
+            }
+        }
+
+        // 3. Store the final, potentially merged, themes
+        this.themes = {
+            light: lightTheme,
+            dark: darkTheme
+        };
+        
+        // --- END OF FIX ---
+
+        const defaultThemeName = options.theme || options.defaultTheme || 'light';
+        this.currentCustomizations = this.themes[defaultThemeName];
+        this.currentThemeName = defaultThemeName;
+
+        this.weatherLayerManagers = new Map();
+
+        const mapOptions = options.mapOptions || {};
+        let initialStyle = mapOptions.style !== undefined ? mapOptions.style : BASE_STYLE_URL;
+        /** @type {string | null} */
+        let weatherBeforeLayerId = null;
+
+        const customStyleUrl = options.styleURL || options.styleUrl;
+        const customBeforeId = options.belowID || options.weatherBeforeLayerId;
+        if (customStyleUrl) {
+            if (customBeforeId && String(customBeforeId).trim()) {
+                initialStyle = customStyleUrl;
+                weatherBeforeLayerId = String(customBeforeId).trim();
+            } else {
+                console.warn(
+                    '[MapManager] A custom style (`styleUrl` / `styleURL`) was provided without a non-empty `weatherBeforeLayerId` / `belowID`. ' +
+                        'Weather layers need a style layer id to insert below; keeping the default Aguacero style.'
+                );
+                if (mapOptions.style === undefined) {
+                    initialStyle = BASE_STYLE_URL;
+                }
+            }
+        }
+
+        this.weatherBeforeLayerId = weatherBeforeLayerId;
+
+        this.map = new mapboxgl.Map({
+            container: containerId,
+            center: [-98, 39],
+            zoom: 3.5,
+            ...mapOptions,
+            style: initialStyle,
+        });
+
+        this.map.__aguaceroMapsgl = { weatherBeforeLayerId };
+        
+        this.map.on('load', () => {
+             applyStyleCustomizations(this.map, this.currentCustomizations);
+             this.emit('style:applied', {
+                 themeName: this.currentThemeName,
+                 styles: this.currentCustomizations
+             });
+        });
+    }
+    
+    // The rest of the methods (setTheme, setLabelGroupVisibility, etc.) are correct and remain unchanged...
+    setTheme(themeName) {
+        if (!this.themes[themeName]) {
+            return;
+        }
+        
+        const newThemeStyles = JSON.parse(JSON.stringify(this.themes[themeName]));
+        const oldLabelStyles = this.currentCustomizations.labels;
+
+        if (oldLabelStyles) {
+            for (const category in oldLabelStyles) {
+                if (oldLabelStyles[category]?.hasOwnProperty('visible') && newThemeStyles.labels[category]) {
+                    newThemeStyles.labels[category].visible = oldLabelStyles[category].visible;
+                }
+                for (const subKey in oldLabelStyles[category]) {
+                    if (oldLabelStyles[category][subKey]?.hasOwnProperty('visible') && newThemeStyles.labels[category]?.[subKey]) {
+                        newThemeStyles.labels[category][subKey].visible = oldLabelStyles[category][subKey].visible;
+                    }
+                }
+            }
+        }
+        
+        this.currentCustomizations = newThemeStyles;
+        this.currentThemeName = themeName;
+        
+        applyStyleCustomizations(this.map, this.currentCustomizations);
+        
+        this.emit('style:applied', {
+            themeName: this.currentThemeName,
+            styles: this.currentCustomizations
+        });
+    }
+
+    setLabelGroupVisibility(groupKey, visible) {
+        const path = `labels.${groupKey}.visible`;
+        let current = this.currentCustomizations;
+        const parts = path.split('.');
+        for (let i = 0; i < parts.length - 1; i++) {
+            current = current[parts[i]];
+            if (!current) {
+                 return;
+            }
+        }
+        current[parts[parts.length - 1]] = visible;
+        
+        const mapKey = groupKey.replace(/\.(.)/g, (match, p1) => p1.toUpperCase());
+        const layerId = STYLE_LAYER_MAP[mapKey]?.layerId;
+        
+        if (layerId && this.map.getLayer(layerId)) {
+            this.map.setLayoutProperty(layerId, 'visibility', visible ? 'visible' : 'none');
+        }
+    }
+    
+    addWeatherManager(manager) {
+        this.weatherLayerManagers.set(manager.layerId, manager);
+    }
+    
+    getMap() { return this.map; }
 }