Duración: aproximadamente 9-12 horas (repartidas en 6 sesiones)
Programa :
- Introducción a Leaflet online
- – Instalación, estructura básica de un mapa
- – Adición de fondos de mapa (OSM, mapas base de terceros)
- Capas e interactividad (online 02 /05/2025)
- – Puntos, polilíneas, polígonos
- – Personalización, eventos, interacciones
- Capas GeoJSON y datos externos (online 08 /05/2025)
- – Carga de datos GeoJSON
- – Visualización condicional, símbolos dinámicos
- Controles y herramientas de interfaz (online 12 /05/2025)
- – Tooltips, ventanas emergentes, leyendas, grupos de capas
- – Control de capas y filtros sencillos
- Eventos de usuario e interactividad (en línea el 19 /05/2025)
- – Reacción ante clics, hovers, selección de elementos
- – Creación de un mapa interactivo sencillo
- Miniproyecto de mapa web personalizado (en línea el 22 /05/2025)
- – Creación de un miniproyecto
- – Puesta en línea (GitHub Pages u otra solución gratuita)
Resultado esperado
Al final del curso, serás capaz de crear un mapa de Leaflet con tus propios datos y ponerlo en línea para compartirlo con el mundo.
Envíe su proyecto individual – Sesión 6
En la última sesión de este módulo, habrá realizado un proyecto individual que incorpore los principales elementos estudiados (capas, estilos, interacciones, controles, etc.).
Te invitamos a compartir tu proyecto con nosotros, para que podamos darte un feedback personalizado y, si lo deseas, incluirlo entre los ejemplos que aparecerán en nuestras futuras publicaciones
¿Cómo hacerlo?
Publique su proyecto (código y mapa) en GitHub o en un servicio equivalente (el método se describirá en la sesión 6) y, a continuación, envíenos el enlace a su repositorio mediante el formulario previsto a tal efecto.
Los proyectos se examinarán de acuerdo con los siguientes criterios:
- Buena utilización de la API del Leaflet
- Legibilidad y organización del código
- Calidad visual y funcional del mapa
- Pertinencia del tema y de los datos elegidos
Para los ejercicios del curso, puede descargar un kit de inicio en formato zip desde este enlace.
Descomprima el contenido en un directorio de su elección donde pueda almacenar todos los archivos de este curso.
Método de enseñanza del curso Leaflet
Este curso de introducción a Leaflet.js, la librería JavaScript para mapeo interactivo, está diseñado para ayudarle a aprender de forma progresiva, utilizando un enfoque activo, visual y guiado.
Cada sesión sigue una estructura didáctica sencilla y eficaz:
1. Presentación de diapositivas
Cada sesión comienza con una presentación de diapositivas en la que se resumen los conceptos esenciales que hay que recordar:
- conceptos ilustrados con ejemplos reales,
- extractos de código comentados,
- diagramas o capturas de pantalla,
- iconos y pistas visuales para ayudarle a recordar.
El objetivo: comprender rápidamente las funciones y posibilidades de Leaflet.let.
2. Texto explicativo detallado
Cada diapositiva va acompañada de un texto explicativo didáctico que:
- desarrolla el contenido de la diapositiva,
- explica el «por qué» y el «cómo» de cada función,
- sugiere variantes de código o consejos adicionales,
- introduce buenas prácticas y errores comunes que conviene evitar.
Este texto está concebido como una ayuda a la lectura autónoma, que puede consultarse antes o después de la sesión.ès la séance.
3. Ejercicio práctico al final de la sesión
Al final de cada sesión, encontrará un ejercicio práctico para completar:
- aplicación directa de los conceptos tratados,
- escenario realista: mapa de una ubicación, adición de marcadores, estilo dinámico, etc.
- instrucciones claras, con pasos guiados si es necesario.
Los ejercicios son una etapa esencial para afianzar su aprendizaje y poner a prueba su comprensión.
4. Clave de respuestas disponible… ¡pero después del esfuerzo!
Un enlace al final del artículo le lleva a la clave de respuestas del ejercicio, con:
- una solución comentada,
- código funcional para copiar y pegar o adaptar,
- a veces variantes o áreas de mejora.
Le recomendamos encarecidamente que realice el ejercicio usted mismo antes de consultar la solución.
Es la mejor manera de mejorar tu autonomía, reforzar tu memoria y asimilar los conceptos.
En resumen
Cada sesión del curso se basa en:
- una presentación visual de diapositivas para ayudarle a comprender rápidamente,
- un texto explicativo claro para ayudarle a profundizar,
- un ejercicio práctico para ayudarle a experimentar,
- una hoja de respuestas guiadas para ayudarle a corregirse y a ir más lejos.
Este método le permite aprender Leaflet paso a paso, a su ritmo, tanto si es principiante como si ya tiene conocimientos básicos de HTML/JavaScript.
¿Listo para empezar?
Ir a la primera sesión: ¡Mostrar un mapa con Leaflet!
