Dashboard interactivo de precipitación en tiempo real para la Ciudad de México. Muestra un radar de lluvia animable sobre las 16 alcaldías, con dirección del sistema, geolocalización y una interfaz estilo iOS nativo. Todo en un solo archivo HTML, sin build, sin dependencias que instalar y sin API keys.
Demo: https://ironsss.github.io/lluviaTest/
Capturas de la versión Android (en desarrollo), que usa esta misma interfaz. Radar, pronóstico de +10 a +60 min y ruta A → B con el tiempo de lluvia por tramo. Las capturas se tomaron con el radar sin lluvia (0%).
- Radar de lluvia real — reflectividad de precipitación de RainViewer, la misma que usan apps meteorológicas profesionales, refrescada cada 5 minutos.
- Línea de tiempo animable — reproduce las últimas 2 horas de lluvia y frames de nowcast (pronóstico a corto plazo) para ver hacia dónde se mueve el sistema.
- Campo vectorial de dirección — estima hacia dónde se desplaza la lluvia mediante flujo óptico entre los dos frames de radar más recientes.
- Pronóstico en la línea de tiempo (+10 a +60 min) — al final de la barra de tiempo, después de la marca ahora, aparecen cuadros de pronóstico (zona verde) que muestran la lluvia desplazada según el movimiento estimado del radar, con más suavizado y transparencia cuanto más lejano el horizonte. Los botones +10 … +60 saltan a cada cuadro e indican la probabilidad de lluvia en tu punto.
- Ruta y lluvia (A → B) — escribe origen y destino (lugares o direcciones, con sugerencias) o elígelos en el mapa; la ruta sigue las calles reales (a pie, bici o auto) y muestra cuánto tiempo te tocaría de lluvia en el trayecto. Cada tramo se evalúa con el pronóstico a la hora en que lo recorrerías, y se compara salir ahora, +10, +20 o +30 min. El pronóstico llega a 60 min.
- Mi ubicación — botón de geolocalización con marcador "estás aquí" y círculo de precisión, para saber si te va a llover encima ahora mismo.
- Interfaz móvil-first — mapa a pantalla completa con bottom sheet deslizable, glassmorphism sutil y switches estilo iOS. Respeta el notch y la barra inferior del iPhone.
- Modo pantalla completa y capas conmutables (radar, flecha, nowcast, auto-actualización).
- Tolerante a fallos — los errores de red muestran un estado claro y el radar se reintenta automáticamente.
El dashboard combina tres fuentes de datos en un mapa de Leaflet:
┌─────────────────────────────────────────────┐
│ Etiquetas de calles y colonias (Esri) │ ← siempre encima
├─────────────────────────────────────────────┤
│ Radar de lluvia (RainViewer, translúcido) │ ← capa intermedia
├─────────────────────────────────────────────┤
│ Mapa base oscuro sin etiquetas (Esri) │ ← fondo
└─────────────────────────────────────────────┘
+ flujo de dirección (canvas, desplazamiento observado por radar)
El radar se sirve como tiles de imagen (una sola petición ligera por refresco), lo que evita por completo los límites de cuota que aparecen al muestrear precipitación punto por punto sobre una malla.
Todas gratuitas y sin API key para uso personal/educativo.
| Fuente | Endpoint | Uso | Frecuencia |
|---|---|---|---|
| RainViewer | api.rainviewer.com/public/weather-maps.json |
Radar de lluvia (capa principal + timeline) | 1 petición / 5 min |
| Esri Dark Gray | server.arcgisonline.com |
Tiles del mapa base y etiquetas | Bajo demanda (pan/zoom) |
| OpenFreeMap (OpenStreetMap, vectorial) | tiles.openfreemap.org |
Calles y nombres nítidos sobre el radar (respaldo: tiles raster de OSM) | Bajo demanda (pan/zoom) |
| Open-Meteo | api.open-meteo.com |
Modelo meteorológico por hora (próximas 3 h) para contrastar con el radar | 1 petición por punto cada 10 min |
| Esri World Geocoder | geocode.arcgis.com (respaldos: photon.komoot.io, nominatim.openstreetmap.org) |
Búsqueda de lugares y direcciones con sugerencias | Al escribir (con pausa de 280 ms) |
| OSRM (FOSSGIS) | routing.openstreetmap.de |
Ruta real por calles a pie / bici / auto | 1 petición por ruta |
| Geolocation API | navigator.geolocation |
Ubicación del usuario (local del dispositivo) | Al tocar el botón |
- RainViewer ofrece resolución nativa hasta el nivel de zoom ~7 (≈1 km por celda). Al acercar más, la lluvia se ve suavizada — es normal en cualquier radar meteorológico.
- La dirección se calcula localmente en el navegador comparando los dos frames más recientes; no requiere otra API ni una clave.
Entra a https://ironsss.github.io/IluviaTest/ desde cualquier navegador. En iPhone, para que se sienta como app nativa: Compartir → Agregar a inicio; así se abre a pantalla completa, sin barra del navegador.
git clone https://github.com/ironsss/IluviaTest.git
cd IluviaTest
# abrir index.html en el navegador, o servirlo:
python3 -m http.server 8000
# luego visita http://localhost:8000Importante: la geolocalización solo funciona sobre
https://olocalhost. Abrir el archivo confile://deshabilita el botón de ubicación.
- Sube
index.html(y esteREADME.md) a la raíz del repositorio. - Añade un archivo vacío llamado
.nojekyllen la raíz — evita que Pages intente procesar el sitio con Jekyll y falle. - Settings → Pages → Source:
Deploy from a branch→ ramamain→ carpeta/ (root)→ Save. - Espera ~1 minuto. La URL aparecerá en esa misma página.
Si el build falla con
Conversion error: Jekyll::Converters::Scss, es justamente el paso 2: falta el.nojekyll.
| Control | Acción |
|---|---|
| 🎯 Botón de ubicación | Centra el mapa en tu posición y marca "estás aquí" |
| ⛶ Botón de pantalla completa | Maximiza el mapa (colapsa el panel en iOS) |
| ▶ / ❚❚ | Reproduce/pausa la animación de la lluvia |
| Deslizador de tiempo | Muévete entre frames pasados y nowcast |
| Bottom sheet | Arrástralo hacia arriba para ver stats, capas y leyenda |
| Switches | Activa/desactiva radar, flecha, nowcast y auto-actualización |
- HTML + CSS + JavaScript vanilla — un solo archivo, cero build.
- Leaflet 1.9.4 — motor de mapas (vía CDN).
- SVG — campo vectorial de dirección.
- CSS moderno —
backdrop-filter(glassmorphism),env(safe-area-inset-*), panes personalizados de Leaflet para el orden de capas. - Bottom sheet con física de arrastre propia (touch events + snap points).
- El radar de RainViewer depende de la disponibilidad de los datos de origen; RainViewer no garantiza continuidad.
- La dirección es una estimación visual del desplazamiento de la precipitación, no una medición de viento ni un pronóstico. Si no hay suficiente lluvia entre frames, aparece como no disponible.
- La resolución del radar es meteorológica (~1 km), no calle por calle. Las calles del mapa base sí se ven nítidas a cualquier zoom.
Este proyecto usa datos de terceros bajo sus respectivas licencias:
- Radar: RainViewer — uso personal y educativo. Se requiere mencionar la fuente con enlace.
- Mapa base: Esri World Dark Gray y OpenStreetMap contributors.
El código de este repositorio se publica bajo licencia MIT (ver LICENSE).
Desarrollado por David García (@ironsss).
Contribuciones y sugerencias son bienvenidas — abre un issue o un pull request.