Si alguna vez viste un mapa web interactivo y pensaste ¡yo quiero hacer eso, pero ni idea por dónde empezar!, estás en el lugar indicado. Este artículo es para ti, que no eres experto ni en programación ni en SIG, pero tienes la curiosidad de crear tus propias aplicaciones de mapas. Vamos a explorar todo lo que necesitas para iniciarte en este mundo, con ejemplos fáciles de entender.
Que es una app de mapas web
Una aplicación de mapas web es una página que muestra información sobre un mapa interactivo. Puede ser algo tan simple como mostrar las ubicaciones de tiendas o tan avanzado como rastrear en tiempo real los buses de una ciudad.
No necesitas ser experto para hacerlo. De hecho, solo necesitas tres cosas:
- Un navegador web (como Chrome o Firefox).
- Un poco de HTML y JavaScript.
- Y sobre todo, ganas de aprender.
Tipos de aplicaciones de mapas
Visor geográfico
Un visor es como una ventana al mundo. Solo muestra capas de información en un mapa. No guarda, no calcula, no analiza. Ejemplo: un mapa donde puedes ver los colegios públicos de tu ciudad y hacer clic para ver detalles.
Tecnologías comunes: Leaflet, Mapbox, OpenLayers. No requiere backend.
Aplicación geográfica (app SIG)
Aquí ya hay interacción: puedes filtrar, editar, guardar o analizar datos espaciales. Ejemplo: un funcionario marca zonas de riesgo, calcula áreas de impacto y guarda los resultados en una base de datos.
Tecnologías comunes: Frontend (Leaflet, Mapbox, React), Backend (Python, Node.js, PostGIS), servidores como GeoServer.
Geoportal
Es el “todo incluido”. Un sitio con visores, descargas, catálogos de datos, documentación y más. Ejemplo: el geoportal del IGAC o de IDECA.
Tecnologías comunes: GeoNode, ArcGIS Enterprise, CMS con plugins SIG.
Qué necesitas realmente para empezar
1. Mentalidad de aprendiz
Lo primero es dejar de pensar que “esto no es para mí”. Si sabes abrir una web y copiar código, ya puedes comenzar.
2. HTML y JavaScript básico
No necesitas frameworks ni saber programación avanzada. Solo entender etiquetas básicas como <div>, cómo agregar scripts y cómo mostrar un mapa.
HTML: estructura la página. CSS: le da estilo. JavaScript: la hace interactiva.
3. Una librería para mapas
Leaflet
- Gratis, ligera y fácil.
- Tiene mucha documentación.
- Perfecta para empezar desde cero.
Mapbox
- Más avanzada y visual.
- Requiere crear cuenta y usar un token.
- Ideal si quieres mapas más estilizados.
Ambas permiten usar datos propios y fuentes como OpenStreetMap.
4. Datos geográficos
Puedes usar:
- Archivos GeoJSON (formato ideal para empezar).
- Archivos CSV con coordenadas.
- Shapefiles si ya tienes experiencia.
Puedes usar datos abiertos de IDECA, IGAC o datos.gov.co.
5. PostGIS (opcional)
Cuando tu proyecto crezca, vas a querer guardar tus datos. PostGIS convierte a PostgreSQL en una base de datos geográfica. Puedes hacer consultas espaciales directamente en SQL.
6. GeoServer (opcional)
¿Quieres mostrar datos en línea? GeoServer te permite publicar capas que luego puedes cargar en Leaflet o Mapbox usando solo una URL.
Ejemplo: Tienes tus datos en PostGIS → los publicas con GeoServer → los cargas en tu mapa.
7. ¿Y si no quiero instalar nada?
¡No hay problema! Puedes empezar así:
- Un archivo HTML guardado en tu computador.
- Cargar un mapa base de OpenStreetMap con Leaflet.
- Agregar un archivo GeoJSON con tus datos.
¡Y ya tienes un visor funcionando!
Recursos gratuitos para aprender
- leafletjs.com: documentación oficial.
- docs.mapbox.com: guías de Mapbox.
- johagis.com: tutoriales, plantillas y más en español.
- Datos abiertos: IDECA, IGAC, datos.gov.co, OpenStreetMap.
¿Y ahora qué?
Piensa en qué tipo de mapa te gustaría crear:
- ¿Uno para encontrar veterinarias?
- ¿Un mapa turístico?
- ¿Rutas de transporte escolar?
Si quieres una guía paso a paso, descarga esta: Guía para crear un mapa desde 0 con Leaflet
También puedes ver más contenido en el canal de YouTube: JohaGIS en YouTube
¡Nos vemos en el próximo tutorial!
