Cargando…
Recargar el documento 
Abrir en una nueva pestaña Objetivos de la sesión: Creación de un miniproyecto cartográfico
El objetivo de esta sesión es utilizar todos los conocimientos adquiridos en el curso de introducción a Leaflet para crear un mapa interactivo completo.
Los alumnos eligen un tema entre varias propuestas de miniproyectos y aplican los conceptos técnicos y metodológicos tratados en las sesiones anteriores.
Objetivos de aprendizaje
- Diseñar un mapa web interactivo coherente
- Organizar datos geográficos (puntos, líneas, polígonos)
- Manejar eventos e interactividad (clics, hovers, filtros, etc.)
- Integrar una interfaz de usuario (menús, filtros, leyendas, etc.)
- Publicar el mapa en un entorno local o en línea
Temas sugeridos para los miniproyectos
1. Mapa de rutas de senderismo
Objetivo: crear un mapa que muestre una o varias rutas de senderismo.
Contenido posible :
- Trazados de senderos GPX/GeoJSON
- Puntos de interés: puntos de partida, miradores, merenderos, etc.
- Pop-ups ilustrados (texto + imágenes)
- Carta del senderista (popup o enlace)
- Minimapa o escala
- Botón de zoom en la ruta
Conocimientos necesarios :
- Visualización de líneas y puntos
- Utilización de estilos personalizados
- Adición de iconos e imágenes
- Controles de leaflet (escala, minimapa, control de capas)
2. Mapa turístico de un pueblo
Objetivo: crear un mapa interactivo para los visitantes.
Contenido posible :
- Monumentos, museos, alojamientos, restaurantes
- Filtros por categoría (alojamiento / cultura / naturaleza, etc.)
- Descripciones y horarios de apertura en ventanas emergentes
- Añadir un mapa temático de fondo (por ejemplo, OpenStreetMap Humanitario, Topo, etc.)
Habilidades utilizadas :
- Grupos de capas y capas filtrables
- Ventanas emergentes dinámicas
- Integración de iconos personalizados
- Control de leyendas y menús HTML interactivos
3. Mapa de localización de los servicios públicos
Objetivo: crear un mapa útil para residentes o visitantes.
Contenido posible:
- Ubicación de colegios, hospitales, ayuntamientos, oficinas de correos, comisarías, etc.
- Consultas sencillas: mostrar escuelas en un radio de X km
- Rutas o enlaces a Google Maps
- Mostrar horarios o contactos
Competencias requeridas:
- Gestión de datos ad hoc
- Reacciones a eventos (clic en una categoría → actualización del mapa)
- Ventanas emergentes mejoradas
- Adición de menús desplegables
Resultados esperados
Un mapa interactivo funcional compuesto por :
- Un mapa de fondo y capas de datos geográficos
- Una o varias formas de interacción (clics, menús, filtros, etc.)
- Un diseño limpio, legible y atractivo
Este mapa puede publicarse en un repositorio de GitHub o integrarse en un sitio personal o blog.
Presentación de GitHub Pages
GitHub Pages es un servicio de alojamiento gratuito que te permite publicar un sitio web estático directamente desde un repositorio de GitHub. Es especialmente útil para alojar proyectos personales, portafolios o proyectos como mapas interactivos creados con Leaflet. Este servicio es perfecto para pequeños proyectos web en los que necesitas publicar rápidamente una versión online sin tener que preocuparte de configurar un servidor.
Pasos para utilizar GitHub Pages :
1. Crear un repositorio en GitHub
- ¿Qué es un repositorio GitHub?
- Un repositorio GitHub es donde almacenas todos los archivos relacionados con tu proyecto. Esto incluye archivos HTML, CSS y JavaScript, así como recursos como imágenes y archivos de datos.
- Cómo crear un repositorio ?
- Conéctate a tu cuenta de GitHub.Haz clic en el botón «Nuevo» o «Crear un nuevo repositorio».Ponle un nombre a tu repositorio (por ejemplo, mi-leaflet-map).Si es necesario, añade una descripción de tu proyecto.Asegúrate de que el repositorio es público para poder hacerlo accesible en línea.
- Una vez creado el repositorio, GitHub te proporcionará una URL del repositorio (por ejemplo, https://github.com/francpoisatilio/cartes-leaflet).
2. Sube o empuja tu código al repositorio
Una vez que tu repositorio ha sido creado, necesitas añadir los archivos de tu proyecto a él. Hay varios métodos para hacerlo, dependiendo de tus preferencias.
Método 1: Subir archivos manualmente
- Haz clic en el botón «Añadir archivo» en tu repositorio de GitHub, luego selecciona «Subir archivos».
- Arrastra y suelta tus archivos (HTML, CSS, JavaScript, imágenes, etc.) en la ventana de subida.
- Haz clic en «Confirmar cambios» para guardar los archivos en tu repositorio.
Método 2: Empuja tu código desde Git
Si trabajas localmente con Git, puedes insertar los archivos directamente en el repositorio con los siguientes comandos :
·git init
·git add .
·git commit -m "Initial commit"
·git remote add origin https://github.com/username/ma-carte-leaflet.git
·git push -u origin master
3. Ve a la configuración del repositorio y activa GitHub Pages en la sección «Pages».
- Una vez subidos los archivos de tu proyecto al repositorio, tienes que activar GitHub Pages para publicar el sitio online.
- Pasos:
- Abre tu repositorio en GitHub.Ve a la pestaña «Configuración» del repositorio.En el menú lateral, desplázate hasta la sección «GitHub Pages».Bajo el encabezado «Fuente», elige la rama desde la que quieres alojar el sitio. Por lo general, se utiliza la rama «main» o «master».
- Haz clic en el botón «Guardar» para activar GitHub Pages.
A continuación, GitHub generará una URL única para tu sitio web, con el siguiente aspecto
https://username.github.io/ma-carte-leaflet/Esta URL será la dirección pública en la que se podrá acceder a tu mapa de Leaflet.
4. Tu sitio será accesible a través de la URL generada
- URL pública: Una vez que hayas activado GitHub Pages, la URL generada será la siguiente:
- https://username.github.io/mi-tarjeta-hoja/
- Es importante tener en cuenta que la página puede tardar unos minutos en generarse. A continuación, puede acceder a su tarjeta Leaflet abriendo esta URL en un navegador.
- Si quieres personalizar el nombre de dominio de tu sitio, GitHub te permite utilizar un nombre de dominio personalizado (por ejemplo, www.macarteleaflet.com) añadiendo un archivo CNAME a tu repositorio.
Consejos adicionales:
- Verificación: Antes de hacer público tu sitio, asegúrate de que todos los archivos necesarios están correctamente incluidos en tu repositorio, incluidos los archivos de mapas, recursos JavaScript (Leaflet, etc.) y archivos CSS.
- Repositorio privado: Si tienes un repositorio privado y deseas utilizar GitHub Pages, ten en cuenta que esta opción sólo está disponible para usuarios de pago. Sin embargo, para proyectos públicos sencillos, la versión gratuita de GitHub Pages funciona perfectamente.
- Solución de problemas: Si tu mapa no se muestra correctamente, comprueba que todos los archivos están enlazados correctamente y que los enlaces a recursos externos (por ejemplo, Leaflet CDN) son válidos.
Con estos pasos, puede poner en línea fácilmente sus mapas interactivos creados con Leaflet. Esto proporciona una forma rápida y sencilla de compartir sus proyectos con otros usuarios, o incluso de desplegarlos en un servidor personal.
Presentación de Netlify
Netlify es una plataforma de alojamiento rápida y moderna para sitios web estáticos. Facilita el despliegue, la gestión y el alojamiento de sitios web, con despliegue automatizado desde un repositorio Git (GitHub, GitLab, Bitbucket). Netlify destaca por su facilidad de uso, su integración continua y sus múltiples funcionalidades como la gestión de redirecciones, formularios y nombres de dominio personalizados.
Con Netlify, puedes desplegar sitios web estáticos (como mapas Leaflet), aplicaciones modernas y otros proyectos en tan solo unos clics. También ofrece servicios gratuitos de CDN (Content Delivery Network), SSL y optimización del rendimiento.
Pasos para utilizar Netlify :
Crear una cuenta Netlify
- ¿Qué es una cuenta Netlify?
Una cuenta Netlify te permitirá gestionar tus despliegues de sitios web estáticos. Puedes registrarte con tu dirección de correo electrónico, o más fácilmente utilizando tu cuenta de GitHub, GitLab o Bitbucket. - Pasos para crear una cuenta:
- Ve a Netlify.
- Haz clic en «Regístrate».
- Elige un método de registro (correo electrónico o a través de GitHub).
- Sigue las instrucciones para configurar tu cuenta.
Conecta tu repositorio GitHub
- Conexión a GitHub:
Una vez que hayas creado tu cuenta de Netlify, necesitas conectar Netlify a tu repositorio de GitHub donde se encuentra el código de tu proyecto (el mapa de Leaflet). - Pasos para conectar GitHub a Netlify:
- Ve a tu panel de Netlify.
- Haz clic en «Nuevo sitio desde Git».Elige GitHub como fuente.Netlify te pedirá que permitas el acceso a tu cuenta de GitHub, lo que le permitirá recuperar tus repositorios.
- Selecciona el repositorio de GitHub que contiene tu proyecto Leaflet (por ejemplo, my-leaflet-map).
Seleccione el proyecto a desplegar
- Selección del proyecto:
Después de conectar tu cuenta de GitHub a Netlify, Netlify mostrará todos tus repositorios de GitHub. Seleccione el repositorio que contiene el código para su proyecto de mapa. - Configurar los ajustes del proyecto:
- Netlify le pedirá que configure los ajustes de despliegue (por ejemplo, qué rama desplegar, normalmente main o master).Si tiene archivos particulares que generar o compilar antes del despliegue (por ejemplo, si está utilizando un generador de sitios estáticos como Jekyll o Hugo), puede especificar comandos de compilación. Para un proyecto Leaflet sencillo, no necesita ninguna configuración adicional.
- Haga clic en «Desplegar sitio» para iniciar el despliegue.
Netlify desplegará automáticamente su sitio y generará una URL única
- Despliegue automático:
Después de seleccionar el repositorio y configurar los ajustes, Netlify inicia el proceso de despliegue. El sitio se construye y publica automáticamente. - URL generada:
Una vez completado el despliegue, Netlify generará una URL única para acceder a su mapa en línea. La URL será típicamente de la forma
https://nombre-del-proyecto.netlify.app/Ejemplo: Si su proyecto se llama mi-mapa-leaflet, la URL podría ser:
https://mi-mapa-leaflet.netlify.app/Consejos adicionales:
Cambia la URL del sitio: Si quieres utilizar un nombre de dominio personalizado (por ejemplo, www.macarteleaflet.com), puedes configurarlo fácilmente en el panel de Netlify añadiendo un dominio personalizado y configurando DNS.
Controla las actualizaciones: Netlify ofrece un sistema de despliegue continuo, lo que significa que tan pronto como empujes cambios a tu repositorio de GitHub, el sitio se actualizará automáticamente.
Monitorización del rendimiento: Netlify también ofrece herramientas para monitorizar el rendimiento de tu sitio (tiempo de carga, disponibilidad, etc.).
Ventajas de Netlify para alojar tu mapa Leaflet:
- Despliegue rápido y sencillo: Publica tu mapa en tan solo unos clics.
- Alojamiento CDN: Netlify pone a tu disposición una infraestructura CDN que optimiza la velocidad de carga de tus páginas.
- SSL gratuito : Cada sitio desplegado en Netlify se beneficia automáticamente de un certificado SSL (HTTPS).
- Soporte para sitios estáticos: Perfecto para alojar mapas Leaflet y otros proyectos web estáticos.
- Despliegue continuo: Automatiza el proceso de actualización de tu sitio tan pronto como subas nuevos cambios a GitHub.
Con estos pasos, puedes subir rápidamente tu mapa Leaflet a Netlify y compartirlo fácilmente con otros. Es una gran manera de alojar proyectos de mapas interactivos, sin tener que gestionar servidores complejos.
Presente su proyecto de folleto
En esta sesión final, 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 y envíenos el enlace a su repositorio a través del formulario que encontrará a continuación.
Los proyectos se examinarán de acuerdo con los siguientes criterios:
Buen uso de la API de Leaflet
- Legibilidad y organización del código
- Calidad visual y funcional del mapa
- Pertinencia del tema y de los datos elegidos
- Rellene el siguiente formulario. Recibirá una respuesta personalizada en unos días.
