expo-osm-sdk
Version:
OpenStreetMap component for React Native with Expo
132 lines • 6.14 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MapContainer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const OSMView_1 = __importDefault(require("./OSMView"));
const DefaultFallback = ({ error }) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.fallbackContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fallbackTitle, children: "Map Error" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fallbackText, children: error }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fallbackHint, children: "Make sure you're using a development build and have configured the plugin correctly." })] }));
exports.MapContainer = (0, react_1.forwardRef)(({ fallbackComponent: FallbackComponent = DefaultFallback, showDebugInfo = __DEV__, onError, ...osmViewProps }, ref) => {
const [mapReady, setMapReady] = (0, react_1.useState)(false);
const [error, setError] = (0, react_1.useState)(null);
const [debugInfo, setDebugInfo] = (0, react_1.useState)({ markersCount: 0 });
(0, react_1.useEffect)(() => {
// Validate props in development
if (__DEV__) {
try {
if (osmViewProps.initialCenter) {
const { latitude, longitude } = osmViewProps.initialCenter;
if (latitude < -90 || latitude > 90) {
throw new Error('initialCenter.latitude must be between -90 and 90');
}
if (longitude < -180 || longitude > 180) {
throw new Error('initialCenter.longitude must be between -180 and 180');
}
}
if (osmViewProps.initialZoom && (osmViewProps.initialZoom < 1 || osmViewProps.initialZoom > 18)) {
throw new Error('initialZoom must be between 1 and 18');
}
}
catch (err) {
const errorMessage = err instanceof Error ? err.message : 'Unknown validation error';
setError(errorMessage);
onError?.(err instanceof Error ? err : new Error(errorMessage));
return;
}
}
}, [osmViewProps.initialCenter, osmViewProps.initialZoom, onError]);
const handleMapReady = () => {
setMapReady(true);
setError(null);
osmViewProps.onMapReady?.();
};
const handleRegionChange = (region) => {
if (showDebugInfo) {
setDebugInfo(prev => ({ ...prev, region }));
}
osmViewProps.onRegionChange?.(region);
};
const handleMarkerPress = (markerId) => {
if (showDebugInfo) {
setDebugInfo(prev => ({ ...prev, lastInteraction: `Marker pressed: ${markerId}` }));
}
// Find the marker coordinate by ID
const marker = osmViewProps.markers?.find(m => m.id === markerId);
if (marker && osmViewProps.onMarkerPress) {
osmViewProps.onMarkerPress(markerId, marker.coordinate);
}
};
const handlePress = (coordinate) => {
if (showDebugInfo) {
setDebugInfo(prev => ({
...prev,
lastInteraction: `Map pressed at: ${coordinate.latitude.toFixed(4)}, ${coordinate.longitude.toFixed(4)}`
}));
}
osmViewProps.onPress?.(coordinate);
};
// Update markers count when markers change
(0, react_1.useEffect)(() => {
setDebugInfo(prev => ({
...prev,
markersCount: osmViewProps.markers?.length || 0
}));
}, [osmViewProps.markers]);
if (error) {
return (0, jsx_runtime_1.jsx)(FallbackComponent, { error: error });
}
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(OSMView_1.default, { ...osmViewProps, onMapReady: handleMapReady, onRegionChange: handleRegionChange, onMarkerPress: handleMarkerPress, onPress: handlePress }), showDebugInfo && mapReady && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.debugInfo, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.debugText, children: ["Map Ready: ", mapReady ? '✅' : '⏳'] }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.debugText, children: ["Markers: ", debugInfo.markersCount] }), debugInfo.region && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.debugText, children: ["Region: ", debugInfo.region.latitude.toFixed(4), ", ", debugInfo.region.longitude.toFixed(4)] })), debugInfo.lastInteraction && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.debugText, children: ["Last: ", debugInfo.lastInteraction] }))] }))] }));
});
const styles = react_native_1.StyleSheet.create({
container: {
flex: 1,
},
fallbackContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f8d7da',
borderColor: '#f5c6cb',
borderWidth: 1,
borderRadius: 8,
padding: 20,
margin: 10,
},
fallbackTitle: {
fontSize: 18,
fontWeight: 'bold',
color: '#721c24',
marginBottom: 10,
},
fallbackText: {
fontSize: 14,
color: '#721c24',
textAlign: 'center',
marginBottom: 10,
},
fallbackHint: {
fontSize: 12,
color: '#856404',
textAlign: 'center',
fontStyle: 'italic',
},
debugInfo: {
position: 'absolute',
top: 10,
right: 10,
backgroundColor: 'rgba(0, 0, 0, 0.7)',
padding: 8,
borderRadius: 4,
minWidth: 150,
},
debugText: {
color: 'white',
fontSize: 10,
marginBottom: 2,
},
});
exports.MapContainer.displayName = 'MapContainer';
//# sourceMappingURL=MapContainer.js.map