Dashboard Operativo de Emergencias con JavaScript, Leaflet y GeoJSON

Cuando suena la alarma, la información dispersa cuesta minutos — y los minutos cuestan mucho más.

Este curso nace de un proyecto real: la central operativa digital desarrollada para los Bomberos Voluntarios del partido de General Rodríguez, Buenos Aires. No construís un ejercicio de juguete: construís, línea por línea, el mismo sistema que se entrega a un cliente real, con datos reales de su zona de operaciones.

━━━━━━━━━━━━━━━━━━━━━━━━

¿QUÉ VAS A CONSTRUIR?

━━━━━━━━━━━━━━━━━━━━━━━━

Un dashboard operativo completo con:

✔ Mapa interactivo del partido con las 68 áreas del plano municipal

✔ Carga de emergencias con un click o buscando la dirección

✔ Sectorización SCI de cada incidente y asignación de unidades

✔ Seguimiento del estado de cada móvil (21 unidades, 91 bomberos)

✔ Panel meteorológico con alertas operativas por viento y lluvia

✔ Indicadores KPI en vivo, gráficos de actividad (Chart.js)

✔ Bitácora automática de novedades en tiempo real

✔ Persistencia sin servidores (localStorage + BroadcastChannel)

✔ Publicación del sistema terminado en Netlify

━━━━━━━━━━━━━━━━━━━━━━━━

TECNOLOGÍAS QUE VAS A DOMINAR

━━━━━━━━━━━━━━━━━━━━━━━━

HTML · CSS · JavaScript · Leaflet · Leaflet.draw · Turf.js · Chart.js · GeoJSON · Open-Meteo · Nominatim · localStorage · BroadcastChannel · Netlify

Sin frameworks. Sin instalaciones. El proyecto corre abriendo un archivo HTML.

━━━━━━━━━━━━━━━━━━━━━━━━

TEMARIO — 10 MÓDULOS

━━━━━━━━━━━━━━━━━━━━━━━━

MÓDULO 0 — Puesta a punto y anatomía del proyecto

Recorrido por el dashboard terminado, preparación del entorno y stack completo por CDN.

MÓDULO 1 — La interfaz de sala de operaciones

Layout NOC con CSS Grid, tema oscuro profesional, componentes (tarjetas, badges, modales) y diseño responsive en tres niveles.

MÓDULO 2 — Configuración y datos de la zona de operaciones

GeoJSON municipal, catálogos operativos y semilla de datos realista con la flota del cuartel.

MÓDULO 3 — La capa de datos

Patrón módulo en JS, API única de datos (CRUD), persistencia con localStorage, sincronización entre pestañas y sistema de backups.

MÓDULO 4 — El mapa operativo

Leaflet a fondo: mapa base oscuro, capa GeoJSON de barrios, marcadores personalizados con anillo pulsante y análisis point-in-polygon con Turf.js.

MÓDULO 5 — La lógica operativa: eventos, sectores y unidades

Ciclo de vida del evento, sectorización SCI con Leaflet.draw, asignaciones con trazabilidad y eliminación en cascada.

MÓDULO 6 — La interfaz viva

Render reactivo, KPIs, formularios CRUD en modales, panel de sectores y gráficos operativos con Chart.js.

MÓDULO 7 — Meteo operativo y búsqueda de direcciones

API Open-Meteo (sin API key), alertas por viento y lluvia, geocodificación con Nominatim.

MÓDULO 8 — El editor de zonas

Zonas operativas editables, importación/exportación GeoJSON y persistencia independiente.

MÓDULO 9 — Datos seguros, publicación y entrega

Gestión de localStorage, rutina de respaldo operativo, publicación en Netlify y checklist de entrega al cliente.

━━━━━━━━━━━━━━━━━━━━━━━━

¿QUÉ INCLUYE?

━━━━━━━━━━━━━━━━━━━━━━━━

📄 Documento teórico-práctico completo (paso a paso, módulo por módulo)

🎬 Videos explicativos de cada módulo

💻 Código fuente comentado de cada archivo, listo para comparar con el tuyo

💬 Acompañamiento 1 a 1 para resolver dudas durante toda la capacitación

━━━━━━━━━━━━━━━━━━━━━━━━

REQUISITOS

━━━━━━━━━━━━━━━━━━━━━━━━

✔ HTML, CSS y JavaScript básicos

✔ Nociones elementales de Leaflet

✗ ¿No tenés experiencia? Completá primero el curso gratuito «Introducción a Mapas Web» en YouTube antes de arrancar.

Modalidad: 100% asincrónica — avanzás a tu ritmo, sin horarios fijos.