Tu Primer Mapa — Ecuador

¡Es hora de ver algo en pantalla! En este ejercicio centraremos nuestro mapa en Ecuador.

Coordenadas de la Mitad del Mundo

Ecuador está aproximadamente en el centro del mundo occidental. Para configurar nuestro mapa, necesitamos entender dos valores:

1. Latitud: Negativa porque estamos al sur de la línea equinoccial (-1.8312).
2. Longitud: Negativa porque estamos al oeste del meridiano de Greenwich (-78.1834).

Implementación: app/index.tsx

Para usar el mapa, simplemente importamos nuestro componente MapaLeaflet. No necesitas configuraciones complejas de UI; el mapa ocupará el espacio que le asignes en tu layout.

Implementación: app/index.tsx

Copia el código real en tu archivo principal. Nota cómo superponemos el título y los botones usando z-10.

import { useState } from 'react';
import { View, Button } from 'react-native';
// 🗺️ Importamos el componente que encapsula la lógica de Leaflet dentro de un WebView.
// Lo llamamos "MapaLeaflet" para diferenciarlo del Mapa Nativo de Google/Apple.
import { MapaLeaflet } from '../components/MapaLeaflet';

// 📌 Concepto: Centro geográfico de Ecuador
// Las coordenadas son fundamentales. Latitud (lat) norte/sur y Longitud (lng) este/oeste.
const ECUADOR_CENTER = { lat: -1.8312, lng: -78.1834 };

export default function MapaBasico() {
    // 💡 Usamos un estado para el zoom. El zoom define qué tan cerca vemos el suelo.
    // En Leaflet, 6 es nivel país, 12 es ciudad y 18 es nivel calle.
    const [zoom, setZoom] = useState(6);

    // ➕ Función para acercar el mapa. No podemos subir de 18 (límite de la mayoría de mapas).
    const handleZoomIn = () => setZoom(prev => Math.min(prev + 1, 18));

    // ➖ Función para alejar el mapa. Un valor muy bajo (como 3) permite ver todo el continente.
    const handleZoomOut = () => setZoom(prev => Math.max(prev - 1, 3));

    return (
        <View style={{ flex: 1, backgroundColor: '#111' }}>
            {/* 📍 El mapa necesita el centro (objeto {lat, lng}) y el nivel de zoom actual. */}
            {/* "height" se define en % o píxeles para que el WebView sepa cuánto espacio ocupar. */}
            <MapaLeaflet center={ECUADOR_CENTER} zoom={zoom} height="100%" />

            {/* 🕹️ Controles manuales: Como el mapa está en un WebView, a veces es más cómodo
                tener botones nativos de React Native para controlar la cámara. */}
            <View style={{ position: 'absolute', bottom: 40, right: 20, gap: 10 }}>
                <Button title="＋" onPress={handleZoomIn} />
                <Button title="－" onPress={handleZoomOut} />
            </View>
        </View>
    );
}

Ejercicio Guiado

Cambia el valor de zoom inicial a 12 y las coordenadas a las de tu ciudad natal. ¿Cómo se ve el mapa ahora?