Desarrollo de Web Apps Geográficas con MapLibre y JavaScript

Name: Desarrollo de Web Apps Geográficas con MapLibre y JavaScript
Rating: 4.8 (28 reviews)

Desarrollo Web GIS Frontend: Crea aplicaciones web geográficas con geocodificación, ruteo y visualización de datos

Role Play

Highest Rated

Created byJuan Manuel Suárez Rodríguez

Last updated 4/2026

Spanish

What you'll learn

Crear mapas interactivos utilizando MapLibre y datos GeoJSON, personalizando su apariencia y comportamiento.
Integrar APIs externas de servicios geoespaciales para añadir funcionalidades como geocodificación y cálculo de rutas.
Implementar una arquitectura modular en JavaScript para organizar el código de aplicaciones web GIS de manera profesional y mantenible.
Desplegar una aplicación web GIS completamente funcional en plataformas de hospedaje gratuitas como GitHub Pages.

Course content

9 sections • 28 lectures • 6h 52m total length

Presentación del curso y del instructor2:21
¡Hola! bienvenido(a) este curso de Desarrollo Web GIS Frontend.
Este curso intensivo guía a los estudiantes desde los fundamentos hasta la creación de una aplicación completa de mapas interactivos. A través de 9 capítulos y 28 videos prácticos, los participantes aprenderán a integrar MapLibre con JavaScript, consumir APIs geoespaciales, implementar funcionalidades de geocodificación, ruteo y filtrado, y finalmente publicar su aplicación en la web. Ideal tanto para desarrolladores web que desean especializarse en GIS como para profesionales GIS que quieren migrar hacia soluciones web interactivas.

Ahora permíteme contarte un poco sobre mi:
Soy Ingeniero Catastral y Geodesta, Especialista en Sistemas de Información Geográfica, Magister en Ciencias de la Información y las Comunicaciones con Énfasis en Geomática y estoy haciendo una especialización en Pedagogía. También tengo certificación CompTIA, ArcGIS Desktop Professional, ArcGIS Enterprise Professional y ArcGIS Utility Network.
Me encantan los sistemas de información geográfica, hacer análisis espaciales y aplicar ciencia de datos para crear modelos que permitan estudiar variables espaciales.
Programar es otro de mis grandes gustos. Java, Python, R, C# y JavaScript son algunos de los lenguajes que he usado. Además también me gusta enseñarlos.
Soy una persona autodidacta y curiosa. Me gusta enseñar, compartir y divulgar conocimiento de calidad y explicado de una manera fácil y práctica
Manejo tecnologías emergentes como Machine Learning, Realidad Aumentada, 3D, Internet de las Cosas y Big Data. Todo con un enfoque geoespacial.

¡Vamos a aprender juntos!

Reunión con el cliente3:54
La primera etapa de cualquier desarrollo siempre es reunirnos con nuestro cliente. Necesitamos hablar con él y entender cual es esa necesidad y cual es la visión que tiene de la aplicación.
¿Qué necesita el cliente?
¿Quiénes serán los usuarios finales?
¿Qué funcionalidades se esperan?
¿Qué tipo de dispositivos se usarán (móvil, escritorio, ambos)?
Funcionalidades principales: visualizar puntos turísticos, buscar sitios, marcar lugares visitados, etc.
Maquetación inicial de la interfaz10:43
En esta clase veremos como a partir de la reunión con el cliente, generar requerimientos funcionales, no funcionales e historias de usuario para empezar a aterrizar la idea del cliente en una solución.
Creación de un mockup o boceto a mano o con herramientas .
Definición de elementos clave: mapa, filtros, buscador, panel lateral, etc.
Selección de tecnologías a usar6:23
Luego de tener lista la maqueta inicial y documentar las necesidades del cliente, empezaremos a definir que tecnologías, plataformas y lenguajes utilizar. De tal forma que se adapten a esa necesidad.
HTML, CSS y JavaScript
Elección de la librería de mapas (MapLibre).
APIs para ruteo y geocodificación (LocationIQ).
Servidor geográfico
Segunda reunión con el cliente

Fundamentos del desarrollo web11:43
Empezaremos con una pequeña descripción y resumen de HTML, CSS y JavaScript, además de compartir documentación adicional.
Traducción del mockup a estructura HTML10:44
Usando la maqueta o mockup realizado anteriormente, vamos a empezar a crear la estructura de la aplicación web con HTML
Análisis del mockup desde el punto de vista del desarrollador.
Identificación de secciones clave: contenedor del mapa, barra de búsqueda, botones.
Diseño de la UI con CSS24:04
Usando la maqueta o mockup realizado anteriormente, vamos a empezar a agregarle diseño, colores y estilos a la aplicación web con CSS
Maquetación con Flexbox y CSS Grid para distribuir la interfaz.
Estilos base: colores, tamaños.
Responsive design7:38
Uno de los requerimientos del cliente es que la aplicación funcione tanto en Desktop como en Mobile. Por lo tanto es importante aplicar estilos que funcionen en ambas resoluciones
Media queries para adaptar la aplicación a distintas resoluciones.

Configuración inicial de MapLibre14:13
Empezamos a usar JavaScript para agregar desde MapLibre y MapTiler el mapa base que usará la aplicación de nuestro cliente.
Integración de MapLibre en un proyecto web.
Configuración de un mapa base para navegación.
¿Qué son los servicios web geográficos?9:32
Explicación sobre los servicios web geográficos. Que son, como se usan y cual es la importancia de usarlos.
Consumo y visualización de servicios geográficos web12:59
Usando JavaScript y MapLibre, empezaremos a consumir un servicio web geográfico mediante una URL de un servidor público y externo.
¿Qué son y cómo se integran en aplicaciones web?
Introducción al formato GeoJSON.
Consumir un servicio web en GeoJSON para agregar y visualizar puntos turísticos.
Simbología11:21
Ya con datos en nuestro mapa, es importante aplicarles simbología basada en categorías. Es decir, que cada categoría tenga su respectivo color en el mapa.
Modificar simbología de puntos turísticos.
PopUps17:22
¡El mapa está casi listo! El ultimo paso es configurarle los PopUps, esas ventanas emergentes que aparecen cuando le damos clic a un punto y muestra información del mismo.
Creación de popups

¿Qué es una API y una API Key?7:07
Explicación sobre que es una API y una API Key, sobre todo la importancia de estas.
Crear tu API Key de LocationIQ5:44
Primero vamos a crear una API Key del proveedor de servicios geográficos LocationIQ para poder hacer geocodificación y ruteo en nuestro mapa.
Geocodificación de direcciones30:35
Usaremos la API y API Key de LocationIQ para hacer geocodificación. Exploraremos la documentación de LocationIQ para ver todos los beneficios y servicios que ofrece.
Geocodificación de direcciones y visualización de puntos en el mapa
Obtener la ubicación del usuario9:40
Otro punto importante en nuestra aplicación es obtener la ubicación del usuario
Uso de la ubicación compartida del usuario como punto de origen.
Cálculo de rutas entre ubicaciones27:19
Luego de obtener la ubicación del usuario, es momento de usarla como punto de origen y hacer ruteo usando LocationIQ
Cálculo de rutas entre ubicaciones seleccionadas.

Creación de módulos en JavaScript7:56
En esta sección empezaremos a cubrir temas no tan básico, hazlo con calma y repite las veces que sea necesario el video.
Vamos a reorganizar el proyecto, mover y migrar código para que responda a un enfoque basado en componentes.
Dificultad para depurar.
Reutilización de código.
Legibilidad y trabajo colaborativo.
Separación por funcionalidades (por ejemplo: mapa, popups, control de capas, filtros).
Qué es un componente y cómo se estructura en JavaScript puro.
Refactorización del código24:58
Hazlo con calma y ten mucha paciencia si estas empezando, el camino se hace un poco complejo en este punto pero de seguro lo lograrás. Vamos a migrar nuestro código
Uso de import y export.
Configuración de un sistema de carpetas sencillo (/components, /data, /assets).
Mover la lógica del mapa, popups personalizados y el control de capas y filtros.
Calculo de rutas usando PopUps22:06
Luego de refactorizar nuestro código, ampliaremos la funcionalidad del ruteo para que ahora se pueda invocar desde el PopUp.

Diseño de la leyenda31:18
Retomaremos HTML y CSS, vamos a diseñar la leyenda que contendrá la información de las capas.
Construcción visual con HTML/CSS.
Asociar colores o íconos a cada categoría.
Interacción aplicando filtros23:20
Agregaremos funcionalidades a la leyenda mediante una lista desplegable para que el usuario pueda filtrar por categoría los puntos de interés.
Asignar eventos a los elementos de la leyenda para activar/desactivar categorías.
Aplicar filtros dinámicos al GeoJSON renderizado en el mapa.
Diseño de la sección favoritos13:11
Nuevamente manejaremos HTML y CSS, esta vez para agregar la sección de favoritos mediante un botón que se puede colapsar y otro en el PopUp.
Añadir un botón dentro del popup personalizado.
Agregar el punto a una capa temporal visual.
Agregar a favoritos usando PopUps28:18
Trabajaremos con arrays para almacenar los sitios favoritos
Guardar en una variable global (array).

Requirements

Conocimientos básicos recomendados: Fundamentos de HTML y CSS (estructura básica de páginas web) y Conceptos elementales de JavaScript (variables, funciones, eventos).
¡No te preocupes si eres principiante! El curso está diseñado para avanzar progresivamente, explicando cada concepto desde lo básico. Incluiremos recursos adicionales para quienes necesiten reforzar conocimientos previos.
Equipo necesario: Computadora con conexión a internet, Navegador web actualizado (Chrome, Firefox, Edge o Safari) y Editor de código (recomendados: Visual Studio Code)

Description

El curso "Desarrollo de Web Apps Geográficas con MapLibre y JavaScript" ofrece una experiencia completa de aprendizaje para aquellos interesados en combinar el desarrollo web con tecnologías geoespaciales. A lo largo de 7 capítulos estructurados metódicamente, los estudiantes evolucionarán desde comprender los conceptos básicos hasta implementar una aplicación web GIS totalmente funcional.

Comenzaremos estableciendo una base sólida con el análisis de requerimientos y el diseño de la interfaz de usuario, donde aprenderás a traducir las necesidades del cliente en un plan de desarrollo. Continuaremos con los fundamentos esenciales del desarrollo web, cubriendo HTML, CSS y JavaScript.

El núcleo del curso se centra en la integración de MapLibre, una biblioteca de código abierto para visualización de mapas interactivos. Aprenderás a configurar mapas personalizados, trabajar con datos GeoJSON, y crear simbologías. Implementarás ventanas emergentes (popups) interactivas que enriquecerán la experiencia del usuario.

Un componente clave será la integración de APIs geográficas. Trabajaremos con LocationIQ para implementar geocodificación (conversión de direcciones a coordenadas), obtención de la ubicación del usuario, y cálculo de rutas óptimas entre puntos de interés. Estas habilidades son fundamentales en el desarrollo de aplicaciones geoespaciales modernas.

Para asegurar que el código sea mantenible y escalable, dedicaremos tiempo a la estructuración adecuada mediante módulos en JavaScript y refactorización. Estas técnicas son esenciales para proyectos profesionales y te permitirán gestionar aplicaciones más complejas en el futuro. Culminaremos con la publicación tu aplicación en la web y hacerla accesible al público objetivo. Como valor añadido, exploraremos cómo la inteligencia artificial puede complementar y potenciar el rol del programador.

Este curso equilibra perfectamente teoría y práctica, con un enfoque "aprender haciendo" donde cada concepto se aplica inmediatamente en un proyecto de planificación turística. Al finalizar, no solo aprenderás de las tecnologías presentadas, sino que tendrás un proyecto completo para tu portafolio que demuestra tus habilidades en el desarrollo Web GIS.

Who this course is for:

Desarrolladores web junior que desean ampliar sus habilidades hacia aplicaciones geoespaciales y diferenciarse en el mercado laboral.
Profesionales GIS con experiencia en software de escritorio que quieren migrar hacia soluciones web interactivas sin necesidad de aprender frameworks complejos.
Estudiantes de sistemas de información geográfica, geografía, geociencias o similares con conocimientos básicos de programación que desean crear aplicaciones prácticas relacionadas con su campo.
No es necesario tener experiencia previa en sistemas GIS, ya que el curso cubre los conceptos fundamentales desde cero. Los estudiantes ideales tienen curiosidad por la programación web y les motiva crear soluciones visuales e interactivas basadas en mapas.

Desarrollo de Web Apps Geográficas con MapLibre y JavaScript

What you'll learn

Explore related topics

Course content

Bienvenida1 lecture • 2min

Levantamiento de Requerimientos, Análisis y Diseño de la Aplicación4 lectures • 21min

Desarrollo de la interfaz de usuario con HTML y CSS4 lectures • 54min

Desarrollo de mapas web con MapLibre5 lectures • 1hr 5min

Consumo de APIs geográficas5 lectures • 1hr 20min

Arquitectura por Componentes3 lectures • 55min

Leyenda Interactiva y Favoritos en Popups4 lectures • 1hr 36min

Publicación y despliegue2 lectures • 13min

Bonus1 lecture • 25min

Requirements

Description

Who this course is for: