MapApp Nicaragua

Aplicación móvil desarrollada con Expo/React Native para explorar lugares emblemáticos de Nicaragua en un mapa interactivo, descubrir sitios cercanos a tu ubicación, marcar favoritos, agregar tus propios puntos de interés y acceder a un modo educativo con línea de tiempo y quiz.

Características principales

• Mapa interactivo con Leaflet embebido en WebView.
• Búsqueda y filtros por categoría y departamento.
• Vista "Cerca de mí" con cálculo de distancia y trazado de rutas simples (polilínea) desde tu ubicación.
• Detalle del sitio con galería de imágenes, video (si está disponible), y acciones del modo educativo.
• Favoritos persistentes con AsyncStorage.
• Agregar sitio propio (con uso opcional de ubicación actual vía GPS).
• Modo educativo: progreso de quizzes por sitio con persistencia local.
• Navegación por pestañas y stacks: Mapa, Favoritos, Explorar, Educativo.

Stack y dependencias clave

• Expo SDK ~53 (expo, expo-status-bar)
• React Native 0.79, React 19
• Navegación: @react-navigation/native, @react-navigation/bottom-tabs, @react-navigation/native-stack
• react-native-webview para renderizar Leaflet en HTML
• expo-location para permisos y ubicación del usuario
• @react-native-async-storage/async-storage para persistencia local
• Estilos: estilos en línea/StyleSheet; nativewind está instalado pero no se requiere para ejecutar

Revisa package.json para la lista completa de dependencias y scripts.

Estructura del proyecto

.
├─ App.tsx                           # Tabs principales y providers
├─ index.ts                          # Entry point
├─ app.json                          # Configuración de app Expo (iconos, permisos Android)
├─ eas.json                          # Perfiles de build con EAS
├─ src/
│  ├─ screen/
│  │  ├─ MapScreen.tsx              # Mapa Leaflet con búsqueda/filtros y botón "Agregar sitio"
│  │  ├─ ExploreScreen.tsx          # "Cerca de mí": ubicación, radio, lista y trazo de ruta (polilínea)
│  │  ├─ FavoritesScreen.tsx        # Lista de favoritos
│  │  ├─ SiteDetailScreen.tsx       # Detalle del sitio, galería, video, acceso al modo educativo
│  │  ├─ AddSiteScreen.tsx          # Formulario para crear sitios del usuario
│  │  ├─ MapStack.tsx               # Stack de Mapa (Mapa, Detalle, Agregar)
│  │  └─ ExploreStack.tsx           # Stack de Explorar (Explorar, Detalle)
│  ├─ favorites/
│  │  └─ FavoritesContext.tsx       # Contexto de favoritos con AsyncStorage
│  ├─ education/
│  │  ├─ EduStack.tsx               # Stack educativo (Home, Site, Timeline, Quiz)
│  │  ├─ EduContext.tsx             # Contexto y persistencia de progreso de quiz
│  │  ├─ screens/                   # Pantallas educativas (no listadas aquí)
│  │  └─ data/                      # Datos de soporte educativo (si aplica)
│  └─ data/
│     ├─ lugares.json               # Dataset base de lugares (id, nombre, categoría, etc.)
│     ├─ image_overrides.json       # URLs prioritarias de imágenes por id (ej. Wikimedia)
│     └─ userSites.ts               # Utilidades para sitios creados por el usuario
└─ assets/                          # Iconos, splash, etc.

Configuración y scripts

• npm start / pnpm start / yarn start: inicia el servidor de desarrollo de Expo.
• npm run android: abre el proyecto en un emulador/dispositivo Android con Expo Go.
• npm run ios: abre en iOS (requiere macOS y Xcode).
• npm run web: arranca la versión web (limitaciones: el mapa con Leaflet en WebView está pensado para móvil; en web se renderiza el HTML igualmente pero la experiencia puede variar).

Requisitos:

• Node.js LTS recomendado.
• Expo CLI (se instalará al usar los scripts de expo).
• Para Android: Android Studio + SDKs.
• Para iOS: Xcode (solo macOS).

Permisos

• Android (app.json):
  • ACCESS_COARSE_LOCATION
  • ACCESS_FINE_LOCATION

Los permisos se solicitan en tiempo de ejecución en ExploreScreen.tsx y en AddSiteScreen.tsx (cuando se usa la ubicación actual).

Funcionalidades en detalle

• Mapa (src/screen/MapScreen.tsx)

  • Renderiza Leaflet dentro de un WebView con tiles de OpenStreetMap.
  • Filtros por categoría y departamento y búsqueda por nombre.
  • Markers dinámicos desde src/data/lugares.json combinados con sitios del usuario (userSites).
  • Popup con botón "Ver detalles" (navega a SiteDetailScreen).
  • Botón flotante para navegar a "Agregar sitio".

• Explorar (src/screen/ExploreScreen.tsx)

  • Solicita permisos de ubicación y obtiene tu posición actual.
  • Calcula distancia Haversine y muestra sitios dentro de un radio seleccionable (5/10/25/50 km).
  • Lista horizontal de sitios cercanos y botón por pastillas de radio.
  • Permite trazar una ruta simple (polilínea) desde tu ubicación hasta el sitio seleccionado dentro del WebView.

• Favoritos (src/screen/FavoritesScreen.tsx, src/favorites/FavoritesContext.tsx)

  • Persistencia en AsyncStorage bajo la clave @mapa_nicaragua_favorites.
  • Desde el detalle se puede alternar favorito (ícono corazón).

• Detalle (src/screen/SiteDetailScreen.tsx)

  • Muestra título, metadatos y descripción.
  • Galería de imágenes (prioriza image_overrides.json por id si existe).
  • Reproducción de videos si site.video o site.videos está presente (usa expo-av).
  • Accesos al modo educativo: "Línea de tiempo" y "Quiz".

• Agregar sitio (src/screen/AddSiteScreen.tsx)

  • Formulario para crear un UserSite con id generado (slugify simplificado).
  • Opción "Usar mi ubicación" para autocompletar lat/lng.
  • Guarda el sitio vía utilidades en src/data/userSites.ts.

• Modo educativo (src/education/)

  • EduContext.tsx persiste progreso de quizzes en AsyncStorage bajo @mapa_nicaragua_edu_progress.
  • EduStack.tsx define pantallas: Home, Site, Timeline, Quiz.
  • Desde el Detalle del sitio se navega directamente a Timeline o Quiz con el siteId actual.

Datos

• src/data/lugares.json: lista principal de lugares con id, nombre, categoría, departamento, lat, lng, descripcion e imágenes.
• src/data/image_overrides.json: asigna una URL principal por id para asegurar imágenes confiables (por ejemplo, desde Wikimedia Commons).
• src/data/userSites.ts: provee getUserSites() y addUserSite() para leer/escribir sitios personalizados (persistencia local).

Construcción con EAS

El proyecto incluye perfiles en eas.json:

• build.preview.android.buildType: apk para generar APK de pruebas.
• build.production.android.buildType: app-bundle para generar AAB de producción.

Comandos típicos (requiere eas-cli logueado con tu cuenta y el projectId ya configurado en app.json → extra.eas.projectId):

# Previsualización (APK)
eas build -p android --profile preview

# Producción (AAB)
eas build -p android --profile production

# Envío a tiendas (opcional)
eas submit -p android --profile production

Notas y buenas prácticas

• Los mapas usan Leaflet en HTML a través de WebView, por lo que no depende de react-native-maps en estas pantallas.
• Verifica conectividad a Internet para cargar tiles de OpenStreetMap e imágenes remotas.
• En producción, considera políticas de caché y gestión de permisos para mejorar la experiencia.
• Si agregas muchos puntos, podrías considerar clustering de marcadores en el HTML de Leaflet.

Desarrollo rápido

1. Instalar dependencias

npm install
# o
pnpm install

2. Ejecutar en desarrollo

npm start
# luego presiona a para Android, i para iOS, w para web

3. Ejecutar directamente en Android

npm run android

Personalización

• Icono y splash: assets/Logo.png y assets/Logo.svg (app.json).
• Nombre de app y paquete Android: app.json (expo.name, android.package).
• Tabs y rutas: App.tsx, src/screen/*Stack.tsx.
• Dataset de lugares: edita src/data/lugares.json o añade lógica para cargar desde una API.

Licencia

No se ha especificado una licencia. Añade una sección de licencia si corresponde.