@aguacerowx/react-native 0.0.42 → 0.0.44

package/src/GridRenderLayer.js

@@ -1,199 +1,111 @@
 // packages/react-native/src/GridRenderLayer.js
 
-import React, { useRef, useImperativeHandle, forwardRef, useEffect } from 'react';
-import { UIManager, findNodeHandle, requireNativeComponent, StyleSheet, Platform } from 'react-native';
+import React, { useRef, useImperativeHandle, forwardRef } from 'react';
+import { UIManager, findNodeHandle, StyleSheet } from 'react-native';
 import GridRenderView from './GridRenderLayerNativeComponent';
 
-// This must match the module name exported in the native code
 const NATIVE_COMPONENT_NAME = 'GridRenderLayer';
 
-if (UIManager.getViewManagerConfig) {
-    const allComponents = Object.keys(UIManager).filter(key => 
-        !key.startsWith('_') && typeof UIManager[key] !== 'function'
-    );
-}
-
 export const GridRenderLayer = forwardRef((props, ref) => {
     const nativeRef = useRef(null);
-    
-    useEffect(() => {
-        
-        if (nativeRef.current) {
-            const handle = findNodeHandle(nativeRef.current);
-        }
-        
-        return () => {
-            console.log('🔴 [GridRenderLayer] Component unmounting');
-        };
-    }, []);
 
     const getCommandId = (commandName) => {
         try {
             const config = UIManager.getViewManagerConfig(NATIVE_COMPONENT_NAME);
-
-            const commandId = config?.Commands?.[commandName];
-            
-            return commandId;
-        } catch (error) {
-            console.error(`🔴 [GridRenderLayer] Error getting command ${commandName}:`, error);
+            return config?.Commands?.[commandName] ?? null;
+        } catch {
             return null;
         }
     };
 
     useImperativeHandle(ref, () => ({
         updateGeometry: (corners, gridDef) => {
-            if (nativeRef.current) {
-                const commandId = getCommandId('updateGeometry');
-                if (commandId != null) {
-                    const handle = findNodeHandle(nativeRef.current);
-                    
-                    UIManager.dispatchViewManagerCommand(
-                        handle,
-                        commandId,
-                        [corners, gridDef]
-                    );
-                } else {
-                    console.warn('⚠️ [GridRenderLayer] updateGeometry command ID not found');
-                }
-            } else {
-                console.warn('⚠️ [GridRenderLayer] nativeRef not available for updateGeometry');
-            }
+            if (!nativeRef.current) return;
+            const commandId = getCommandId('updateGeometry');
+            if (commandId == null) return;
+            const handle = findNodeHandle(nativeRef.current);
+            UIManager.dispatchViewManagerCommand(handle, commandId, [corners, gridDef]);
         },
 
         setVariable: (variableName) => {
-            if (nativeRef.current) {
-                const commandId = getCommandId('setVariable');
-                if (commandId != null) {
-                    UIManager.dispatchViewManagerCommand(
-                        findNodeHandle(nativeRef.current),
-                        commandId,
-                        [variableName]
-                    );
-                }
-            }
+            if (!nativeRef.current) return;
+            const commandId = getCommandId('setVariable');
+            if (commandId == null) return;
+            UIManager.dispatchViewManagerCommand(findNodeHandle(nativeRef.current), commandId, [variableName]);
         },
 
         updateDataTextureFromFile: (filePath, nx, ny, scale, offset, missing, scaleType) => {
-            if (nativeRef.current) {
-                const commandId = getCommandId('updateDataTexture');
-                if (commandId != null) {
-                    UIManager.dispatchViewManagerCommand(
-                        findNodeHandle(nativeRef.current),
-                        commandId,
-                        [filePath, Number(nx), Number(ny), Number(scale), Number(offset), Number(missing), scaleType || "linear"]
-                    );
-                }
-            } else {
-                console.warn('⚠️ [GridRenderLayer] nativeRef not available for updateDataTextureFromFile');
-            }
+            if (!nativeRef.current) return;
+            const commandId = getCommandId('updateDataTexture');
+            if (commandId == null) return;
+            UIManager.dispatchViewManagerCommand(
+                findNodeHandle(nativeRef.current),
+                commandId,
+                [filePath, Number(nx), Number(ny), Number(scale), Number(offset), Number(missing), scaleType || 'linear'],
+            );
         },
-        
+
         updateDataTexture: (base64Data, nx, ny, scale, offset, missing, scaleType) => {
-            if (nativeRef.current) {
-                const commandId = getCommandId('updateDataTexture');
-                if (commandId != null) {
-                    UIManager.dispatchViewManagerCommand(
-                        findNodeHandle(nativeRef.current),
-                        commandId,
-                        [base64Data, Number(nx), Number(ny), Number(scale), Number(offset), Number(missing), scaleType || "linear"]
-                    );
-                }
-            } else {
-                console.warn('⚠️ [GridRenderLayer] nativeRef not available for updateDataTexture');
-            }
+            if (!nativeRef.current) return;
+            const commandId = getCommandId('updateDataTexture');
+            if (commandId == null) return;
+            UIManager.dispatchViewManagerCommand(
+                findNodeHandle(nativeRef.current),
+                commandId,
+                [base64Data, Number(nx), Number(ny), Number(scale), Number(offset), Number(missing), scaleType || 'linear'],
+            );
         },
 
         updateColormapTexture: (colormapArray) => {
-            if (nativeRef.current) {
-                const commandId = getCommandId('updateColormapTexture');
-                if (commandId != null) {
-                    UIManager.dispatchViewManagerCommand(
-                        findNodeHandle(nativeRef.current),
-                        commandId,
-                        [colormapArray]
-                    );
-                }
-            } else {
-                console.warn('⚠️ [GridRenderLayer] nativeRef not available for updateColormapTexture');
-            }
+            if (!nativeRef.current) return;
+            const commandId = getCommandId('updateColormapTexture');
+            if (commandId == null) return;
+            UIManager.dispatchViewManagerCommand(findNodeHandle(nativeRef.current), commandId, [colormapArray]);
         },
 
-        updateDataParameters: (scale, offset, missing, scaleType) => {  // ADD scaleType parameter
-            if (nativeRef.current) {
-                const commandId = getCommandId('updateDataParameters');
-                if (commandId != null) {
-                    UIManager.dispatchViewManagerCommand(
-                        findNodeHandle(nativeRef.current),
-                        commandId,
-                        [Number(scale), Number(offset), Number(missing), Number(scaleType)]  // Pass 4 params
-                    );
-                }
-            }
+        updateDataParameters: (scale, offset, missing, scaleType) => {
+            if (!nativeRef.current) return;
+            const commandId = getCommandId('updateDataParameters');
+            if (commandId == null) return;
+            UIManager.dispatchViewManagerCommand(
+                findNodeHandle(nativeRef.current),
+                commandId,
+                [Number(scale), Number(offset), Number(missing), Number(scaleType)],
+            );
         },
 
         setSmoothing: (enabled) => {
-            if (nativeRef.current) {
-                nativeRef.current.setNativeProps({ smoothing: enabled });
-            } else {
-                console.warn('⚠️ [GridRenderLayer] nativeRef not available for setSmoothing');
-            }
+            if (!nativeRef.current) return;
+            nativeRef.current.setNativeProps({ smoothing: enabled });
         },
 
         clear: () => {
-            if (nativeRef.current) {
-                const commandId = getCommandId('clear');
-                if (commandId != null) {
-                    UIManager.dispatchViewManagerCommand(
-                        findNodeHandle(nativeRef.current),
-                        commandId,
-                        [] // No arguments needed
-                    );
-                }
-            }
+            if (!nativeRef.current) return;
+            const commandId = getCommandId('clear');
+            if (commandId == null) return;
+            UIManager.dispatchViewManagerCommand(findNodeHandle(nativeRef.current), commandId, []);
         },
-        // IOS. Methods
-        // Primes the GPU cache with all frame data. Android will ignore this.
+
         primeGpuCache: (frameInfo) => {
-            if (nativeRef.current) {
-                const commandId = getCommandId('primeGpuCache');
-                if (commandId != null) {
-                    UIManager.dispatchViewManagerCommand(
-                        findNodeHandle(nativeRef.current),
-                        commandId,
-                        [frameInfo]
-                    );
-                }
-            }
+            if (!nativeRef.current) return;
+            const commandId = getCommandId('primeGpuCache');
+            if (commandId == null) return;
+            UIManager.dispatchViewManagerCommand(findNodeHandle(nativeRef.current), commandId, [frameInfo]);
         },
 
-        // Sets the active frame from the cache. Android will ignore this.
         setActiveFrame: (cacheKey) => {
-            if (nativeRef.current) {
-                const commandId = getCommandId('setActiveFrame');
-                if (commandId != null) {
-                    UIManager.dispatchViewManagerCommand(
-                        findNodeHandle(nativeRef.current),
-                        commandId,
-                        [cacheKey]
-                    );
-                }
-            }
+            if (!nativeRef.current) return;
+            const commandId = getCommandId('setActiveFrame');
+            if (commandId == null) return;
+            UIManager.dispatchViewManagerCommand(findNodeHandle(nativeRef.current), commandId, [cacheKey]);
         },
 
-        // Clears the GPU cache. Android will ignore this.
         clearGpuCache: () => {
-             if (nativeRef.current) {
-                const commandId = getCommandId('clearGpuCache');
-                if (commandId != null) {
-                    UIManager.dispatchViewManagerCommand(
-                        findNodeHandle(nativeRef.current),
-                        commandId,
-                        []
-                    );
-                }
-            }
+            if (!nativeRef.current) return;
+            const commandId = getCommandId('clearGpuCache');
+            if (commandId == null) return;
+            UIManager.dispatchViewManagerCommand(findNodeHandle(nativeRef.current), commandId, []);
         },
-
     }));
 
     return (
@@ -213,4 +125,4 @@ const styles = StyleSheet.create({
     overlay: {
         ...StyleSheet.absoluteFillObject,
     },
-});
+});

package/src/MapManager.js

@@ -8,7 +8,7 @@ import { StyleApplicator } from './StyleApplicator';
 import { AguaceroContext } from './AguaceroContext';
 import { mapRegistry } from './MapRegistry';
 
-const TERRAIN_LAYER_ID = 'AML_-_terrain';
+const BASE_STYLE_URL = 'mapbox://styles/aguacerowx/cmfvox8mq004u01qm5nlg7qkt';
 
 // --- UTILITIES ---
 function isObject(item) {
@@ -33,11 +33,60 @@ function deepMerge(target, source) {
     return output;
 }
 
-export const MapManager = forwardRef(({ mapboxToken, customStyles, theme = 'light', mapOptions = {}, children }, ref) => {
+/**
+ * @param {object} props
+ * @param {string} props.mapboxToken
+ * @param {object} [props.customStyles]
+ * @param {'light'|'dark'} [props.theme]
+ * @param {object} [props.mapOptions] - `style` / `styleURL` / `styleUrl` set the map style when no top-level custom style pair is used (mapsgl parity).
+ * @param {string} [props.styleURL] - Custom Mapbox style URL (alias: `styleUrl`).
+ * @param {string} [props.styleUrl]
+ * @param {string} [props.belowID] - Style layer id to insert Aguacero weather **below** (alias: `weatherBeforeLayerId`). With `styleURL`, required for correct stacking; may be set alone to override the default `AML_-_terrain` anchor on the default style.
+ * @param {string} [props.weatherBeforeLayerId]
+ */
+export const MapManager = forwardRef(({
+    mapboxToken,
+    customStyles,
+    theme = 'light',
+    mapOptions = {},
+    styleURL: styleURLProp,
+    styleUrl: styleUrlProp,
+    belowID: belowIDProp,
+    weatherBeforeLayerId: weatherBeforeLayerIdProp,
+    children,
+}, ref) => {
     const mapRef = useRef(null);
     const cameraRef = useRef(null);
     const [mapStyle, setMapStyle] = useState(null);
 
+    const { resolvedStyleURL, weatherBeforeLayerId } = useMemo(() => {
+        const mo = mapOptions || {};
+        let resolved = BASE_STYLE_URL;
+        if (mo.style !== undefined) {
+            resolved = mo.style;
+        } else if (mo.styleURL !== undefined) {
+            resolved = mo.styleURL;
+        } else if (mo.styleUrl !== undefined) {
+            resolved = mo.styleUrl;
+        }
+
+        let anchor = null;
+        const customStyleUrl = styleURLProp || styleUrlProp;
+        const customBeforeId = belowIDProp || weatherBeforeLayerIdProp;
+        if (customStyleUrl) {
+            if (customBeforeId && String(customBeforeId).trim()) {
+                resolved = customStyleUrl;
+                anchor = String(customBeforeId).trim();
+            } else if (mo.style === undefined && mo.styleURL === undefined && mo.styleUrl === undefined) {
+                resolved = BASE_STYLE_URL;
+            }
+        } else if (customBeforeId && String(customBeforeId).trim()) {
+            anchor = String(customBeforeId).trim();
+        }
+
+        return { resolvedStyleURL: resolved, weatherBeforeLayerId: anchor };
+    }, [mapOptions, styleURLProp, styleUrlProp, belowIDProp, weatherBeforeLayerIdProp]);
+
     // Expose camera and map methods via ref
     useImperativeHandle(ref, () => ({
         // Camera methods
@@ -103,7 +152,6 @@ export const MapManager = forwardRef(({ mapboxToken, customStyles, theme = 'ligh
     useEffect(() => {
         if (mapRef.current) {
             mapRegistry.setMap(mapRef.current);
-            console.log('📍 [MapManager] Registered map with registry');
         }
     }, []);
 
@@ -112,7 +160,10 @@ export const MapManager = forwardRef(({ mapboxToken, customStyles, theme = 'ligh
         getCenter: () => {
             return mapRef.current?._currentCenter || [-95.7129, 37.0902];
         },
-    }), []);
+        /** @type {string | null} Null with default Aguacero style — use `AML_-_terrain` for weather insert (see WeatherLayerManager). */
+        weatherBeforeLayerId,
+        resolvedStyleURL,
+    }), [weatherBeforeLayerId, resolvedStyleURL]);
 
     useEffect(() => {
         let lightTheme = JSON.parse(JSON.stringify(THEME_CONFIGS.light));
@@ -133,8 +184,6 @@ export const MapManager = forwardRef(({ mapboxToken, customStyles, theme = 'ligh
     useEffect(() => {
         if (mapboxToken) {
             Mapbox.setAccessToken(mapboxToken);
-        } else {
-            console.error("MapManager: A 'mapboxToken' prop is required but was not provided.");
         }
     }, [mapboxToken]);
 
@@ -159,18 +208,21 @@ export const MapManager = forwardRef(({ mapboxToken, customStyles, theme = 'ligh
             mapRegistry.notifyCameraChange(center);
         }
     };
-    
-    const BASE_STYLE_URL = 'mapbox://styles/aguacerowx/cmfvox8mq004u01qm5nlg7qkt';
 
+    const handleMapPress = (payload) => {
+        mapRegistry.notifyMapPress(payload);
+    };
+    
     return (
         <View style={styles.container}>
             <AguaceroContext.Provider value={contextValue}>
                 <Mapbox.MapView
                     ref={mapRef}
                     style={styles.map}
-                    styleURL={BASE_STYLE_URL}
+                    styleURL={resolvedStyleURL}
                     scaleBarEnabled={false}
                     onCameraChanged={handleCameraChange}
+                    onPress={handleMapPress}
                 >
                     <Mapbox.Camera
                         ref={cameraRef}

package/src/MapRegistry.js

@@ -3,10 +3,11 @@ class MapRegistry {
     constructor() {
         this.mapRef = null;
         this.listeners = [];
+        /** @type {((payload: unknown) => void)[]} */
+        this.pressListeners = [];
     }
 
     setMap(mapRef) {
-        console.log('📍 [MapRegistry] Map registered:', !!mapRef);
         this.mapRef = mapRef;
     }
 
@@ -16,20 +17,40 @@ class MapRegistry {
 
     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));
     }
+
+    addPressListener(listener) {
+        this.pressListeners.push(listener);
+    }
+
+    removePressListener(listener) {
+        const index = this.pressListeners.indexOf(listener);
+        if (index > -1) {
+            this.pressListeners.splice(index, 1);
+        }
+    }
+
+    /** @param {unknown} payload - `@rnmapbox/maps` map press payload */
+    notifyMapPress(payload) {
+        this.pressListeners.forEach((listener) => {
+            try {
+                listener(payload);
+            } catch {
+                /* ignore */
+            }
+        });
+    }
 }
 
-export const mapRegistry = new MapRegistry();
+export const mapRegistry = new MapRegistry();

package/src/NexradRadarLayer.android.js

@@ -0,0 +1,125 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { StyleSheet, UIManager, findNodeHandle } from 'react-native';
+import NexradRadarLayerNative from './NexradRadarLayerNativeComponent';
+import { nexradDiag, nexradPerfSpan } from './nexrad/nexradDiag';
+
+const NATIVE_COMPONENT_NAME = 'NexradRadarLayer';
+
+function getCommandId(commandName) {
+    try {
+        const config = UIManager.getViewManagerConfig(NATIVE_COMPONENT_NAME);
+        return config?.Commands?.[commandName] ?? null;
+    } catch {
+        return null;
+    }
+}
+
+export const NexradRadarLayer = forwardRef((props, ref) => {
+    const nativeRef = useRef(null);
+
+    useImperativeHandle(ref, () => ({
+        uploadNexradFrame(json) {
+            const bridge = nexradPerfSpan('bridge.dispatchViewManagerCommand.uploadNexradFrame');
+            const id = getCommandId('uploadNexradFrame');
+            const handle = findNodeHandle(nativeRef.current);
+            if (id != null && handle != null) {
+                UIManager.dispatchViewManagerCommand(handle, id, [json]);
+                bridge.end({
+                    jsonChars: typeof json === 'string' ? json.length : 0,
+                    ok: true,
+                });
+            } else {
+                bridge.end({
+                    jsonChars: typeof json === 'string' ? json.length : 0,
+                    ok: false,
+                    commandId: id,
+                    hasHandle: handle != null,
+                    hasRef: nativeRef.current != null,
+                });
+                nexradDiag('bridge.uploadNexradFrameBlocked', {
+                    commandId: id,
+                    hasHandle: handle != null,
+                    hasRef: nativeRef.current != null,
+                });
+            }
+        },
+        uploadNexradStyleOnly(json) {
+            const bridge = nexradPerfSpan('bridge.dispatchViewManagerCommand.uploadNexradStyleOnly');
+            const id = getCommandId('uploadNexradStyleOnly');
+            const handle = findNodeHandle(nativeRef.current);
+            if (id != null && handle != null) {
+                UIManager.dispatchViewManagerCommand(handle, id, [json]);
+                bridge.end({
+                    jsonChars: typeof json === 'string' ? json.length : 0,
+                    ok: true,
+                });
+            } else {
+                bridge.end({
+                    jsonChars: typeof json === 'string' ? json.length : 0,
+                    ok: false,
+                    commandId: id,
+                    hasHandle: handle != null,
+                });
+                nexradDiag('bridge.uploadNexradStyleOnlyBlocked', {
+                    commandId: id,
+                    hasHandle: handle != null,
+                });
+            }
+        },
+        clearNexrad() {
+            const bridge = nexradPerfSpan('bridge.dispatchViewManagerCommand.clearNexrad');
+            const id = getCommandId('clearNexrad');
+            const handle = findNodeHandle(nativeRef.current);
+            if (id != null && handle != null) {
+                UIManager.dispatchViewManagerCommand(handle, id, []);
+                bridge.end({ ok: true });
+            } else {
+                bridge.end({ ok: false, commandId: id, hasHandle: handle != null });
+            }
+        },
+        activateNexradCachedFrame(nativeGpuCacheKey) {
+            const bridge = nexradPerfSpan('bridge.dispatchViewManagerCommand.activateNexradCachedFrame');
+            const id = getCommandId('activateNexradCachedFrame');
+            const handle = findNodeHandle(nativeRef.current);
+            if (id != null && handle != null && typeof nativeGpuCacheKey === 'string') {
+                UIManager.dispatchViewManagerCommand(handle, id, [nativeGpuCacheKey]);
+                bridge.end({
+                    keyLen: nativeGpuCacheKey.length,
+                    ok: true,
+                });
+            } else {
+                bridge.end({
+                    keyLen: typeof nativeGpuCacheKey === 'string' ? nativeGpuCacheKey.length : 0,
+                    ok: false,
+                    commandId: id,
+                    hasHandle: handle != null,
+                });
+                nexradDiag('bridge.activateNexradCachedFrameBlocked', {
+                    commandId: id,
+                    hasHandle: handle != null,
+                    keyType: typeof nativeGpuCacheKey,
+                });
+            }
+        },
+    }));
+
+    return (
+        <NexradRadarLayerNative
+            ref={nativeRef}
+            belowID={props.belowID}
+            style={styles.overlay}
+            pointerEvents="none"
+            collapsable={false}
+        />
+    );
+});
+
+const styles = StyleSheet.create({
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+    },
+});
+
+NexradRadarLayer.displayName = 'NexradRadarLayer';
+
+export default NexradRadarLayer;

package/src/NexradRadarLayer.ios.js

@@ -0,0 +1,15 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+
+/** NEXRAD native rendering is Android-only; iOS is a no-op stub. */
+export const NexradRadarLayer = forwardRef((props, ref) => {
+    useImperativeHandle(ref, () => ({
+        uploadNexradFrame() {},
+        uploadNexradStyleOnly() {},
+        clearNexrad() {},
+    }));
+    return null;
+});
+
+NexradRadarLayer.displayName = 'NexradRadarLayer';
+
+export default NexradRadarLayer;

package/src/NexradRadarLayerNativeComponent.ts

@@ -0,0 +1,11 @@
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type { HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface NativeProps extends ViewProps {
+  belowID?: string;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'NexradRadarLayer',
+) as HostComponent<NativeProps>;

package/src/NexradSitesMapLayer.js

@@ -0,0 +1,75 @@
+/**
+ * Mapbox GL circle markers for NEXRAD site picking on React Native (parity with mapsgl {@link NexradSitesOverlay}).
+ * Must render as a descendant of {@link Mapbox.MapView}.
+ */
+import React from 'react';
+import Mapbox from '@rnmapbox/maps';
+import nexradSitesPayload from './nexrad/nexradSitesUs.json';
+
+const SOURCE_ID = 'aguacero-nexrad-sites-src';
+const CIRCLE_LAYER_ID = 'aguacero-nexrad-sites-circles';
+
+function buildNexradSitesFeatureCollection() {
+    const raw = nexradSitesPayload?.sites;
+    if (!Array.isArray(raw)) {
+        return { type: 'FeatureCollection', features: [] };
+    }
+    const features = [];
+    for (const item of raw) {
+        if (!item) continue;
+        const lon = Number(item.lon ?? item.lng ?? item.longitude);
+        const lat = Number(item.lat ?? item.latitude);
+        const id = String(item.id ?? item.station ?? '').toUpperCase();
+        if (!id || !Number.isFinite(lat) || !Number.isFinite(lon)) continue;
+        features.push({
+            type: 'Feature',
+            geometry: { type: 'Point', coordinates: [lon, lat] },
+            properties: { id, name: id },
+        });
+    }
+    return { type: 'FeatureCollection', features };
+}
+
+const NEXRAD_SITES_FEATURE_COLLECTION = buildNexradSitesFeatureCollection();
+
+/**
+ * @param {object} props
+ * @param {boolean} props.visible
+ * @param {(siteId: string) => void} [props.onSelectSite]
+ * @param {string} [props.belowLayerID] - Optional style layer id to insert under (e.g. weather anchor).
+ */
+export function NexradSitesMapLayer({ visible, onSelectSite, belowLayerID }) {
+    const handlePress = (e) => {
+        const list = e?.features;
+        const f = Array.isArray(list) && list.length > 0 ? list[0] : null;
+        const id = f?.properties?.id ?? f?.properties?.name;
+        if (id && typeof onSelectSite === 'function') {
+            onSelectSite(String(id));
+        }
+    };
+
+    if (!visible || !NEXRAD_SITES_FEATURE_COLLECTION.features.length) {
+        return null;
+    }
+
+    return (
+        <Mapbox.ShapeSource
+            id={SOURCE_ID}
+            shape={NEXRAD_SITES_FEATURE_COLLECTION}
+            onPress={handlePress}
+            hitbox={{ width: 44, height: 44 }}
+        >
+            <Mapbox.CircleLayer
+                id={CIRCLE_LAYER_ID}
+                belowLayerID={belowLayerID}
+                style={{
+                    circleRadius: 5,
+                    circleColor: '#3b82f6',
+                    circleStrokeWidth: 1,
+                    circleStrokeColor: '#ffffff',
+                    circleOpacity: 0.95,
+                }}
+            />
+        </Mapbox.ShapeSource>
+    );
+}