/** * Mapa de features usando OpenStreetMap via Leaflet y WebView. * Elimina la dependencia de la API Key de Google Maps. */ import React, { useMemo, useRef } from 'react'; import { StyleSheet, View } from 'react-native'; import { WebView } from 'react-native-webview'; import { Feature } from '../api/types'; import { COLORS } from './components'; export function FeatureMap({ features, selectedId, onSelect, }: { features: Feature[]; selectedId: number | null; onSelect: (id: number) => void; }) { const webViewRef = useRef(null); // Convertimos las features a un objeto GeoJSON simple para Leaflet const geoData = useMemo(() => { return { type: 'FeatureCollection', features: features.map((f) => ({ type: 'Feature', id: f.id, geometry: typeof f.geometry === 'string' ? JSON.parse(f.geometry) : f.geometry, properties: { name: f.name, status: f.status, selected: f.id === selectedId, }, })), }; }, [features, selectedId]); const htmlContent = useMemo(() => `

`, [geoData]); const onMessage = (event: any) => { try { const data = JSON.parse(event.nativeEvent.data); if (data.type === 'select') { onSelect(data.id); } } catch (e) { console.warn('Error parsing WebView message:', e); } }; return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f0f0f0' }, map: { flex: 1 }, });