¿Qué encuentra aquí?
Síntesis
Mapa de contenidos
Síntesis
Mapas
Capitulo 3 del proyecto cartográfico y geocientífico Litorales de Colombia
Archivo sin características responsivas. Apto para la vista en ordenadores. Navegue al menú de herramientas superior derecho ➤ para mejorar su experiencia.
- ¿Cómo citar este recurso? - Litorales de Colombia. (2025). Capítulo de proyecto 3 - Mapas. Proyecto colaborativo en descripción cartográfica y geocientífica de las costas colombianas. Recurso en línea sobre su versión 2.0.0., licencias GNU GPL v3. para datos y código / CC BY-NC 4.0. para multimedia. Disponible a través la web www.desarrolloscreativos.dev.
Banco de mapas de Litorales
Muchos mapas de litorales de Colombia se construyen con propósitos de apoyo, algo casual en contexto de los mapas puesto que la mayoría se construye como un medio y no tanto como un fin, aunque quien disfruta de esta arte hace un poco de ambos; es por esta razón que la mayoría de los aquí contenidos se derivan del capítulo de Artículos y se contextualizan en un compilado de regiones que busca servir a los usuarios como indice para reconocer el territorio sobre características aleatorias de los contenidos.
Este apartado se halla en construcción
Estética y arte
Muchas piezas gráficas requieren habilidades en el uso de colores, contrastes, características de accesibilidad y sensibilidad a la persepción de los productos frente al público, lo que puede ser un reto para todo amante del dibujo de mapas. Es con esta motivación que se introducen algunos conceptos funcionales para sus primeros o más avanzados trabajos en base a las experiencias y estudios de los autores.
Este apartado se halla en construcción
Estándares
Como si no bastara con la aplicación correcta de aspectos estéticos, para facilidad de lectura y mayor productividad de diferentes piezas cartográficas, existen convenciones y reglas se asumen claras en determinados gremios y contextos que pueden pasarle desapercibidas si no se encuentra inmerso en sus tareas. Es de esta forma que se extiende la invitación a que conozca reglas de instituciones que pueden documentarle los autores.
Este apartado se halla en construcción
Históricos
De entre las piezas de cartografía que más valoran los autores se encuentran las que se convierten en patrimonio y es que, algunas representaciones, más allá de su calidad geográfica y valor contextual cuentan con detalles destacables para los métodos y capacidades técnicas al alcance a lo que se le reconoce un gran mérito.
Este apartado trata un ejercicio de sensibilidad y empatía con el oficio cartográfico y espera encontrar lugar o apoyo en el público que le apasione este tema, el cual se divide en dos secciones.
Internacionales
Sigue trabajos sobre hitos de la representación del territorio especialmente costero en el mundo.
Este apartado se halla en construcción.
Nacionales
Señala los aprendizajes cartográficos y las mejoras del trabajo colombiano en estos aspectos.
Este apartado se halla en construcción.
Mapas estáticos
Las representaciones del territorio costero colombiano por parte del proyecto, que no requieran interactividad y busquen transmitir la mayor información con los menores recursos de código, se realizan en formatos .png .tiff y .geotiff a través del uso de Sistemas de Información Geográfica libres como las versiones que así lo especifican de Quantum-GIS, más abiertamente entendido como QGIS.
Lo anterior se relaciona a la necesidad de recurir a recursos open source con filosofías de programación y consumo similares a este proyecto. De hecho, el criterio para usar esta tecnología también se basa en evitar conflictos en el mantenimiento de licencias de software pagas, así como la intención de aprender e innovar sobre estos recursos que libres que, aunque menos atractivos visualmente y más complicados de implementar en algunos aspectos, se hallan a la vanguardia de diferentes ambitos tecnológicos gracias a el apoyo de robustas cominidades de programadores y cartografos que esperamos encuentren esta decisión correcta.
Mapas en la web
El proyecto de litorales de Colombia se está construyendo en base a tecnologías front-end, donde más allá del uso de HTML y CSS para la organización de contenidos, se destaca el uso de Javascript (JS) como la oportunidad para generar visualizaciones de datos georeferenciados sin un servidor gráfico que requiere conexiones de redes al sistema y mayor extensión de servicios para habilitar su funcionamiento. Así el grupo de trabajo comparte las opciones barajadas para el desarrollo de mapas interactivos (no estáticos).
¿Cómo funcionan los mapas?
Todas estas soluciones se basan en el uso de interfaces de programación de aplicaciones (API) de terceros para conseguir recursos base como mapas de fondo, por lo que es importante reconocer cuales requiere llaves o credenciales, cuales son limitados y cuáles completamente abiertas, gratuitas y aparentemente ilimitadas. (MappingGIS, 2022).
| Servicio | Usa llave API | Uso limitado |
|---|---|---|
| OpenStreetMap | No | No |
| Stamen Maps | No | Sí |
| CartoDB | No | Sí |
| Mapbox | Sí | No |
| Google Maps | Sí | No |
| Revise tecnologías en (MappingGIS, 2022). | ||
Frameworks y librerías
Durante la experimentación de la programación de la web de litorales se practica con tres métodos de despliegue interactivo de los contenidos georeferenciados, los cuales puede consultar a continuación:
Leaflet.
Se trata de un framework de Javascript desplegable en cualquier página web, el cual facilita el control total sobre cualquier mapa que se desee presentar, lo que permite desplegar capas SIG avanzadas (WMS, GeoJSON, etc.). Este un recurso 100% del lado del usuario final (frontend) que presenta un alta interactividad y un peso ligero para cualquier proyecto de software o servicio web. Facilita el uso de API de terceros para presentar sus contenidos. (Leaflet, 2025).
Ejemplo de código:
// Primero se debe añadir la hoja de estilos a el elemento <head> de la forma:
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
// Luego se deber añadir una etiqueta <div> al HTML donde se desea presentar el mapa final, que también debe identificarse:
<div id="map" style="height: 400px; margin: 20px 0;"></div>
// Posteriormente se hace enlace al modulo del motor de mapeo:
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
// Finalmente se construye el mapa:
// se empieza por los bordes:
const bounds = [
[9.5, -77], // suroeste (lat, lng)
[12, -72.5] // noreste (lat, lng)
];
// Luego se crea un objeto del tipo mapa (a través de un constructor) en el cual se indica el identificador de contenedor que va a albergar el mapa, así como se dan detalles para su navegación:
const map = L.map('map',{
maxBounds: bounds, // Inserta los límites del usuario
maxBoundsViscosity: 1.0, // Fuerza la navgeación a los límites
minZoom: 6,
maxZoom: 12
}).setView([10.4, -75.5], 7);
// Se agrega una capa base, en este caso de OpenStreetMap:
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Luego se añade un marcador sobre Cartagena de Indias con información adicional si se desea:
const marker = L.marker([10.4, -75.5]).addTo(map);
marker.bindPopup("Cartagena de Indias Puerta del Caribe colombiano.").openPopup();
// Del mismo modo, se pueden añadir más marcadores:
const barranquilla = L.marker([10.9685, -74.7813]).addTo(map)
.bindPopup("Barranquilla");
const santaMarta = L.marker([11.2408, -74.1990]).addTo(map)
.bindPopup("Santa Marta");
// A continuación se presenta el resultado de la implementación:
De las prácticas se determina que Leaflet.js se integra de manera más natural y rápida en el código, además de que parece presentar la visual más sencilla de navegar frente al usuario final, lo que es beneficioso. Bajo estas observaciones dicha librería se hace el estándar más sencillo para la implementación en futuras entregas.
Folium.
Se trata de una biblioteca Python que tras la ejecución de su script en máquina de desarrolladores crea un archivo HTML que puede ser añadido a la web en construcción. Ofrece una solución sencilla con lógica similar a lógica similar a la de librerías como matplotlib con interactividad limitada a opciones de zoom, capas, popups; además de tener que realizar cambios de programación desde código de servidor, el cual no se conecta directamente al front-end del proyecto, lo que genera problemas de actualización y mantenimiento del código. Es favorable la integración con dataframes pandas de python y el soporte de capas raster, vectoriales, WMS.
En el fondo usa Leaflet como el motor de mapas, es decir, usa internamente esta librería para renderizar productos interactivo. (MappingGIS, 2022).
Esta herramienta no tiene muestra de código porque resulta un esfuerzo significativo implementar su resultado en la web actual.
Puede intentar implementarel código de python:
import folium
# Definir el límite (bounds) del mapa
bounds = [[9.5, -77], [12, -72.5]]
# Crear el mapa centrado en un punto dentro del límite, por ejemplo, Cartagena
map = folium.Map(location=[10.4, -75.5], zoom_start=7, max_bounds=True,
max_bounds_viscosity=1.0)
# Establecer el límite para que el mapa no se desplace más allá de los extremos definidos
map.fit_bounds(bounds)
# Añadir capa base de OpenStreetMap (es la capa predeterminada)
folium.TileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attr='© OpenStreetMap contributors').add_to(map)
# Añadir marcador para Cartagena
folium.Marker([10.4, -75.5], popup="Cartagena de Indias Puerta del Caribe colombiano.").add_to(map)
# Añadir marcador para Barranquilla
folium.Marker([10.9685, -74.7813], popup="Barranquilla").add_to(map)
# Añadir marcador para Santa Marta
folium.Marker([11.2408, -74.1990], popup="Santa Marta").add_to(map)
# Guardar el mapa como archivo HTML
map.save("mapa_con_extremos_y_marcadores.html")
Por su parte Folium resulta más difícil de utilizar a la escala del presente proyecto, ya que requiere el uso de recursos backend y combinaciones de scripts, las cuales si se cargan una a una consumen mucho tiempo como para considerarse implemnentables, menos aún sostenibles. Por lo anterior, se descarta su uso en futuras entregas.
Plotly.js
Plotly se puede usar para crear productos 2D con naturaleza geográfica y estadística, ad altamente interactivos. Aunque generalmente a la librería se le asocie con Python, esta opción tiene una versión JavaScript, que facilita crear gráficos directamente en el navegador sin depender de lenguajes de servidor. En términos de código es una opción un poco compleja, pero flexible, además de personalizable con zoom, hover, 3D, animaciones. Como dato adicional, el uso de esta librería puede combinarse con el framework React. (Plotly, 2025).
Ejemplo de código:
// Primero se debe añadir los recurso de código de plotly en el <head> de la forma:
<script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>>
// Luego se deber añadir una etiqueta <div> al HTML donde se desea presentar el mapa final, que también debe identificarse:
<div id="map2" style="height: 400px; width: 100%; margin: 20px 0;"></div>
// Posteriormente se especifican datos de gráfica:
const data = [{type: "scattermapbox",
mode: "markers+text", textposition: "top right",
marker: {
size: 12,
color: "red"
},
lat: [10.4, 10.9685, 11.2408], lon: [-75.5, -74.7813, -74.199],
text: [
"Cartagena de Indias Puerta del Caribe colombiano", "Barranquilla", "Santa Marta"]}];
// Luego se especifica la forma de dibujo:
const layout = {
mapbox: {
style: "open-street-map",
center: { lat: 10.7, lon: -74.9 },
zoom: 7,
bounds: {
west: -77,
east: -72.5,
south: 9.5,
north: 12}},
margin: { t: 0, b: 0, l: 0, r: 0 }};
// Por último se renderiza:
Plotly.newPlot("map2", data, layout);
// A continuación se presenta el resultado de la implementación:
Bajo un juicio neutro, Plotly.js puede ser menos amigable que Leaflet.js pero presenta un particularidad y es que, sirve sus resultados como gráficas descargables y versátiles para el amnejo de datos, lo que puede ser beneficioso en el proyecto de implementar soluciones de este tipo. Por lo anterior, su consumo se deja como herramienta esporádica frente a futurras entregas.
Bibliografía
Créditos
Producto de Litorales, por:
- Andrés Agudelo Bermúdez
Líder del equipo
Líder del equipo
Edición para la web
- Andrés Agudelo
Responsable de maquetación y código
Aporte nuevos contenidos a:
Correo: litoralescolombia@gmail.com
Celular: +57 323 421 3355
Revisores
- Andrés Agudelo Bermúdez
BSc.Ingeniero geólogo. - Nila Parra León
MSc. en Geografía, BSc. Ingeniera Geóloga.
Proyecto litorales de Colombia. Versión 2.0.0. de Abril de 2025. El código de este proyecto está licenciado bajo GNU GPL v3. Los contenidos multimedia relacionan CC BY-NC 4.0.
El proyecto se reserva la posibilidad de introducir licencias comerciales, de terceros o tipo SaaS (Software as a Service) o de suscripción para nuevos módulos de código, así como contenido multimedia que se referencie de esta manera, a partir de nuevas versiones del proyecto. No obstante, el contenido de versiones actuales permanece libre y accesible bajo sus respectivos términos.