@aguacerowx/react-native 0.0.28 → 0.0.30

package/src/MapManager.js

@@ -1,156 +1,219 @@
-// 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,
-    }
+// packages/react-native/src/MapManager.js
+
+import React, { useMemo, useEffect, useState, useRef, forwardRef, useImperativeHandle } 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 = forwardRef(({ mapboxToken, customStyles, theme = 'light', mapOptions = {}, children }, ref) => {
+    const mapRef = useRef(null);
+    const cameraRef = useRef(null);
+    const [mapStyle, setMapStyle] = useState(null);
+
+    // Expose camera and map methods via ref
+    useImperativeHandle(ref, () => ({
+        // Camera methods
+        flyTo: (config) => {
+            if (cameraRef.current) {
+                cameraRef.current.flyTo(config);
+            }
+        },
+        moveTo: (config) => {
+            if (cameraRef.current) {
+                cameraRef.current.moveTo(config);
+            }
+        },
+        zoomTo: (zoomLevel, duration = 2000) => {
+            if (cameraRef.current) {
+                cameraRef.current.zoomTo(zoomLevel, duration);
+            }
+        },
+        setCamera: (config) => {
+            if (cameraRef.current) {
+                cameraRef.current.setCamera(config);
+            }
+        },
+        
+        // Map methods
+        getCenter: async () => {
+            if (mapRef.current) {
+                return await mapRef.current.getCenter();
+            }
+            return null;
+        },
+        getZoom: async () => {
+            if (mapRef.current) {
+                return await mapRef.current.getZoom();
+            }
+            return null;
+        },
+        getCoordinateFromView: async (point) => {
+            if (mapRef.current) {
+                return await mapRef.current.getCoordinateFromView(point);
+            }
+            return null;
+        },
+        getPointInView: async (coordinate) => {
+            if (mapRef.current) {
+                return await mapRef.current.getPointInView(coordinate);
+            }
+            return null;
+        },
+        queryRenderedFeaturesAtPoint: async (point, filter, layerIds) => {
+            if (mapRef.current) {
+                return await mapRef.current.queryRenderedFeaturesAtPoint(point, filter, layerIds);
+            }
+            return null;
+        },
+        
+        // Direct access to refs (for advanced use cases)
+        getMapRef: () => mapRef.current,
+        getCameraRef: () => cameraRef.current,
+    }), []);
+
+    // 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
+                        ref={cameraRef}
+                        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

@@ -1,35 +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));
-    }
-}
-
+// 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();