@aguacerowx/react-native 0.0.8 → 0.0.12

package/src/MapManager.js

@@ -0,0 +1,156 @@
+// packages/react-native/src/MapManager.js
+
+import React, { useMemo, useEffect, useState, useRef } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import Mapbox from '@rnmapbox/maps';
+import { THEME_CONFIGS } from '@aguacerowx/javascript-sdk';
+import { StyleApplicator } from './StyleApplicator';
+import { AguaceroContext } from './AguaceroContext';
+import { mapRegistry } from './MapRegistry';
+
+const TERRAIN_LAYER_ID = 'AML_-_terrain';
+
+// --- UTILITIES ---
+function isObject(item) {
+    return (item && typeof item === 'object' && !Array.isArray(item));
+}
+
+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;
+}
+
+export const MapManager = ({ mapboxToken, customStyles, theme = 'light', mapOptions = {}, children }) => {
+    const mapRef = useRef(null);
+    const [mapStyle, setMapStyle] = useState(null);
+
+    // Register map with the global registry when it's ready
+    useEffect(() => {
+        if (mapRef.current) {
+            mapRegistry.setMap(mapRef.current);
+            console.log('📍 [MapManager] Registered map with registry');
+        }
+    }, []);
+
+    const contextValue = useMemo(() => ({
+        getMap: () => mapRef.current,
+        getCenter: () => {
+            return mapRef.current?._currentCenter || [-95.7129, 37.0902];
+        },
+    }), []);
+
+    useEffect(() => {
+        let lightTheme = JSON.parse(JSON.stringify(THEME_CONFIGS.light));
+        let darkTheme = JSON.parse(JSON.stringify(THEME_CONFIGS.dark));
+
+        if (customStyles) {
+            if (customStyles.light) {
+                lightTheme = deepMerge(lightTheme, customStyles.light);
+            }
+            if (customStyles.dark) {
+                darkTheme = deepMerge(darkTheme, customStyles.dark);
+            }
+        }
+        
+        setMapStyle(theme === 'dark' ? darkTheme : lightTheme);
+    }, [customStyles, theme]);
+
+    useEffect(() => {
+        if (mapboxToken) {
+            Mapbox.setAccessToken(mapboxToken);
+        } else {
+            console.error("MapManager: A 'mapboxToken' prop is required but was not provided.");
+        }
+    }, [mapboxToken]);
+
+    if (!mapboxToken) {
+        return (
+            <View style={[styles.container, styles.centerContent]}>
+                <Text style={styles.errorText}>Mapbox Token Missing</Text>
+                <Text style={styles.errorSubText}>Please provide the 'mapboxToken' prop.</Text>
+            </View>
+        );
+    }
+
+    const handleCameraChange = (event) => {
+        if (event?.properties?.center) {
+            const center = event.properties.center;
+            
+            // Store the current center in the ref for immediate access
+            if (mapRef.current) {
+                mapRef.current._currentCenter = center;
+            }
+            
+            mapRegistry.notifyCameraChange(center);
+        }
+    };
+    
+    const BASE_STYLE_URL = 'mapbox://styles/aguacerowx/cmfvox8mq004u01qm5nlg7qkt';
+
+    return (
+        <View style={styles.container}>
+            <AguaceroContext.Provider value={contextValue}>
+                <Mapbox.MapView
+                    ref={mapRef}
+                    style={styles.map}
+                    styleURL={BASE_STYLE_URL}
+                    scaleBarEnabled={false}
+                    onCameraChanged={handleCameraChange}
+                >
+                    <Mapbox.Camera
+                        defaultSettings={{
+                            centerCoordinate: mapOptions.center || [-95.7129, 37.0902],
+                            zoomLevel: 0,
+                            pitch: mapOptions.pitch || 0,
+                            bearing: mapOptions.bearing || 0,
+                            minZoomLevel: mapOptions.minZoom || 2,
+                            maxZoomLevel: mapOptions.maxZoom || 12,
+                        }}
+                    />
+                    
+                    {mapStyle && <StyleApplicator styles={mapStyle} />}
+
+                    <Mapbox.VectorSource id="mapbox-dem" url="mapbox://mapbox.mapbox-terrain-dem-v1"/>
+                    {children}
+                </Mapbox.MapView>
+            </AguaceroContext.Provider>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#1a1a2e',
+    },
+    centerContent: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    map: {
+        flex: 1,
+    },
+    errorText: {
+        color: '#FF6B6B',
+        fontSize: 22,
+        fontWeight: 'bold',
+    },
+    errorSubText: {
+        color: 'white',
+        fontSize: 16,
+        marginTop: 8,
+    }
+});

package/src/MapRegistry.js

@@ -0,0 +1,35 @@
+// Simple registry to share the map instance
+class MapRegistry {
+    constructor() {
+        this.mapRef = null;
+        this.listeners = [];
+    }
+
+    setMap(mapRef) {
+        console.log('📍 [MapRegistry] Map registered:', !!mapRef);
+        this.mapRef = mapRef;
+    }
+
+    getMap() {
+        return this.mapRef;
+    }
+
+    addCameraListener(listener) {
+        this.listeners.push(listener);
+        console.log('📍 [MapRegistry] Listener added, total:', this.listeners.length);
+    }
+
+    removeCameraListener(listener) {
+        const index = this.listeners.indexOf(listener);
+        if (index > -1) {
+            this.listeners.splice(index, 1);
+            console.log('📍 [MapRegistry] Listener removed, total:', this.listeners.length);
+        }
+    }
+
+    notifyCameraChange(center) {
+        this.listeners.forEach(listener => listener(center));
+    }
+}
+
+export const mapRegistry = new MapRegistry();

package/src/StyleApplicator.js

@@ -0,0 +1,241 @@
+import React from 'react';
+import Mapbox from '@rnmapbox/maps';
+
+// Re-implement the mapping from your web SDK for clarity and maintenance.
+const STYLE_LAYER_MAP = {
+    // Background and water layers
+    landColor: { layerId: 'AML_-_land' },
+    oceanColor: { layerId: 'AML_-_water' },
+    waterDepth: { layerId: 'AML_-_water-depth' },
+    nationalPark: { layerId: 'AML_-_national-park' },
+
+    // Line layers
+    roads: { layerId: 'AML_-_roads' },
+    airports: { layerId: 'AML_-_airports' },
+    countries: { layerId: 'AML_-_countries' },
+    states: { layerId: 'AML_-_states' },
+    counties: { layerId: 'AML_-_counties' },
+    waterways: { layerId: 'AML_-_waterway' },
+
+    // Symbol (label) layers
+    continents: { layerId: 'AML_-_continent-label' },
+    countriesLabels: { layerId: 'AML_-_country-label' },
+    statesLabels: { layerId: 'AML_-_state-label' },
+    citiesMajor: { layerId: 'AML_-_major-city-label' },
+    citiesMinor: { layerId: 'AML_-_minor-city-label' },
+    airportsLabels: { layerId: 'AML_-_airport-label' },
+    poi: { layerId: 'AML_-_poi-label' },
+    waterLabels: { layerId: 'AML_-_water-point-label' },
+    naturalLabels: { layerId: 'AML_-_natural-point-label' },
+    subdivisionLabels: { layerId: 'AML_-_subdivision-label' },
+};
+
+/**
+ * A utility to sanitize 8-digit hex colors (#rrggbbaa) to 6-digit hex (#rrggbb)
+ * as required by some Mapbox properties.
+ */
+function sanitizeColor(color) {
+    if (typeof color === 'string' && color.startsWith('#') && color.length === 9) {
+        return color.substring(0, 7);
+    }
+    return color;
+}
+
+/**
+ * Renders a set of Mapbox layers with styles derived from a theme object.
+ * This is the declarative, React Native equivalent of `applyStyleCustomizations`.
+ */
+export const StyleApplicator = ({ styles }) => {
+    if (!styles) {
+        return null;
+    }
+
+    const { landOcean, transportation, boundaries, waterFeatures, labels, terrain } = styles;
+
+    // --- Helper for Line Layer Styles ---
+    const getLineStyles = (config) => {
+        if (!config) return {};
+        const dashArray = { dashed: [2, 2], dotted: [0, 2], solid: [] };
+        return {
+            visibility: config.visible ? 'visible' : 'none',
+            lineColor: sanitizeColor(config.color),
+            lineWidth: config.width,
+            lineDasharray: dashArray[config.lineType] || [],
+        };
+    };
+
+    // --- Helper for Symbol (Label) Layer Styles ---
+    const getSymbolStyles = (config) => {
+        if (!config) return {};
+        return {
+            visibility: config.visible ? 'visible' : 'none',
+            textColor: sanitizeColor(config.color),
+            textHaloColor: sanitizeColor(config.outlineColor),
+            textHaloWidth: config.outlineWidth,
+            textSize: config.fontSize,
+            textFont: [config.fontFamily],
+        };
+    };
+
+    return (
+        <>
+            {/* --- Land & Water --- */}
+            {landOcean && (
+                <>
+                    <Mapbox.BackgroundLayer 
+                        id={STYLE_LAYER_MAP.landColor.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={{ backgroundColor: sanitizeColor(landOcean.landColor) }} 
+                    />
+                    <Mapbox.FillLayer 
+                        id={STYLE_LAYER_MAP.oceanColor.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={{ fillColor: sanitizeColor(landOcean.oceanColor) }} 
+                    />
+                    {landOcean.waterDepth && (
+                        <Mapbox.FillLayer 
+                            id={STYLE_LAYER_MAP.waterDepth.layerId} 
+                            existing={true} // FIX: Added existing prop
+                            style={{ 
+                                visibility: landOcean.waterDepth.visible ? 'visible' : 'none', 
+                                fillColor: sanitizeColor(landOcean.waterDepth.color) 
+                            }} 
+                        />
+                    )}
+                    {landOcean.nationalPark && (
+                        <Mapbox.FillLayer 
+                            id={STYLE_LAYER_MAP.nationalPark.layerId} 
+                            existing={true} // FIX: Added existing prop
+                            style={{ 
+                                visibility: landOcean.nationalPark.visible ? 'visible' : 'none', 
+                                fillColor: sanitizeColor(landOcean.nationalPark.color) 
+                            }} 
+                        />
+                    )}
+                </>
+            )}
+
+            {/* --- Boundaries & Transportation --- */}
+            {boundaries && (
+                <>
+                    <Mapbox.LineLayer 
+                        id={STYLE_LAYER_MAP.countries.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getLineStyles(boundaries.countries)} 
+                    />
+                    <Mapbox.LineLayer 
+                        id={STYLE_LAYER_MAP.states.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getLineStyles(boundaries.states)} 
+                    />
+                    <Mapbox.LineLayer 
+                        id={STYLE_LAYER_MAP.counties.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getLineStyles(boundaries.counties)} 
+                    />
+                </>
+            )}
+            {transportation && (
+                <>
+                    <Mapbox.LineLayer 
+                        id={STYLE_LAYER_MAP.roads.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getLineStyles(transportation.roads)} 
+                    />
+                    <Mapbox.LineLayer 
+                        id={STYLE_LAYER_MAP.airports.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getLineStyles(transportation.airports)} 
+                    />
+                </>
+            )}
+            {waterFeatures && (
+                <Mapbox.LineLayer 
+                    id={STYLE_LAYER_MAP.waterways.layerId} 
+                    existing={true} // FIX: Added existing prop
+                    style={getLineStyles(waterFeatures.waterways)} 
+                />
+            )}
+            
+            {/* --- Labels --- */}
+            {labels && (
+                <>
+                    <Mapbox.SymbolLayer 
+                        id={STYLE_LAYER_MAP.continents.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getSymbolStyles(labels.continents)} 
+                    />
+                    <Mapbox.SymbolLayer 
+                        id={STYLE_LAYER_MAP.countriesLabels.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getSymbolStyles(labels.countries)} 
+                    />
+                    <Mapbox.SymbolLayer 
+                        id={STYLE_LAYER_MAP.statesLabels.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getSymbolStyles(labels.states)} 
+                    />
+                    {labels.cities && (
+                        <>
+                            <Mapbox.SymbolLayer 
+                                id={STYLE_LAYER_MAP.citiesMajor.layerId} 
+                                existing={true} // FIX: Added existing prop
+                                style={getSymbolStyles(labels.cities.major)} 
+                            />
+                            <Mapbox.SymbolLayer 
+                                id={STYLE_LAYER_MAP.citiesMinor.layerId} 
+                                existing={true} // FIX: Added existing prop
+                                style={getSymbolStyles(labels.cities.minor)} 
+                            />
+                        </>
+                    )}
+                    <Mapbox.SymbolLayer 
+                        id={STYLE_LAYER_MAP.airportsLabels.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getSymbolStyles(labels.airports)} 
+                    />
+                    <Mapbox.SymbolLayer 
+                        id={STYLE_LAYER_MAP.poi.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getSymbolStyles(labels.poi)} 
+                    />
+                    <Mapbox.SymbolLayer 
+                        id={STYLE_LAYER_MAP.waterLabels.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getSymbolStyles(labels.waterLabels)} 
+                    />
+                    <Mapbox.SymbolLayer 
+                        id={STYLE_LAYER_MAP.naturalLabels.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getSymbolStyles(labels.naturalLabels)} 
+                    />
+                    <Mapbox.SymbolLayer 
+                        id={STYLE_LAYER_MAP.subdivisionLabels.layerId} 
+                        existing={true} // FIX: Added existing prop
+                        style={getSymbolStyles(labels.subdivisionLabels)} 
+                    />
+                </>
+            )}
+
+            {/* --- Terrain --- */}
+            {terrain && terrain.visible && Mapbox.Terrain && Mapbox.HillshadeLayer && (
+                <>
+                    <Mapbox.Terrain 
+                        sourceID="mapbox-dem" 
+                        style={{ exaggeration: 1 }}
+                    />
+                    <Mapbox.HillshadeLayer 
+                        id="hillshade" 
+                        sourceID="mapbox-dem"
+                        style={{
+                            hillshadeExaggeration: terrain.intensity,
+                            hillshadeShadowColor: sanitizeColor(terrain.shadowColor),
+                            hillshadeHighlightColor: sanitizeColor(terrain.highlightColor),
+                            hillshadeAccentColor: sanitizeColor(terrain.accentColor)
+                        }}
+                    />
+                </>
+            )}
+        </>
+    );
+};