Web Apps Geográficas para Dummies

En esta clase se explicará cómo desarrollar aplicaciones web cartográficas utilizando Leaflet, una de las librerías de JavaScript más populares para trabajar con SIG en entornos web. Una página web se fundamenta en tres pilares: HTML para la estructura, CSS para los estilos y JavaScript para la funcionalidad.

Estructura del Proyecto

Se creará un archivo index.html con una etiqueta DIV que servirá como contenedor para el mapa, asignándole un ID único. En el archivo style.css se definen las dimensiones del contenedor (width y height) para que el mapa sea visible.

<!-- Contenedor del mapa -->
<div id="map"></div>

Integración de Leaflet via CDN

La librería Leaflet se integra mediante CDN, copiando las etiquetas Link (CSS) y Script (JS) en el Head del documento HTML.

// Crear instancia del mapa
var mapa = L.map('map').setView([4.6, -74.08], 13);

// Añadir capa base de OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mapa);

Elementos Vectoriales Interactivos

Para crear marcadores y círculos con popups informativos:

// Marcador con popup
L.marker([4.6, -74.08])
    .bindPopup('¡Hola desde Bogotá!')
    .addTo(mapa);

// Círculo con radio en metros
L.circle([4.65, -74.1], {
    radius: 500,
    color: 'red'
}).bindPopup('Zona de interés').addTo(mapa);

Manejo de Eventos

Para capturar coordenadas donde el usuario hace clic:

// Evento de clic en el mapa
mapa.on('click', function(e) {
    var lat = e.latlng.lat;
    var lng = e.latlng.lng;
    alert('Coordenadas: ' + lat + ', ' + lng);
});

En esta clase se explicará cómo utilizar Mapbox GL JS para el desarrollo de aplicaciones web geográficas. A diferencia de otras librerías de código abierto, Mapbox es un proveedor de servicios y datos geográficos que requiere un token de acceso personal para acceder a sus recursos.

La estructura básica incluye archivos HTML, CSS y JavaScript. En el HTML se define un contenedor (div con ID único) y se vincula la librería mediante CDN. En el CSS se asignan dimensiones explícitas al contenedor.

Inicialización del Mapa

Mapbox maneja las coordenadas como longitud y latitud (orden inverso a otras librerías):

mapboxgl.accessToken = 'tu_token_de_acceso_aqui';

const mapa = new mapboxgl.Map({
    container: 'contenedor-del-mapa',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-74.07, 4.60],
    zoom: 11
});

Marcadores y Popups

Para añadir marcadores personalizados con ventanas emergentes:

const marcador = new mapboxgl.Marker({
    color: 'red',
    rotation: 45
})
.setLngLat([-74.06, 4.63])
.setPopup(new mapboxgl.Popup({ offset: 25 })
    .setHTML('<h3>Título</h3><p>Descripción</p>'))
.addTo(mapa);

Manejo de Eventos

Para capturar la interacción del usuario mediante clics:

mapa.on('click', (evento) => {
    const coordenadas = evento.lngLat;
    alert('Lat: ' + coordenadas.lat + ' Lng: ' + coordenadas.lng);
});

En esta clase se explicará cómo utilizar OpenLayers, una biblioteca de JavaScript avanzada para la creación de mapas interactivos. A diferencia de Leaflet o Mapbox, OpenLayers presenta un nivel de complejidad superior debido a su estructura orientada a objetos, lo que la convierte en una opción robusta para proyectos SIG profesionales.

Configuración del Proyecto

Se requiere Node.js y Git. El proyecto se genera mediante consola de comandos:

npm create ol-app mi-proyecto
cd mi-proyecto
npm start

Inicialización del Mapa

OpenLayers usa el orden longitud, latitud y requiere definir explícitamente el sistema de referencia (EPSG:4326):

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const mapa = new Map({
    target: 'map',
    layers: [new TileLayer({ source: new OSM() })],
    view: new View({
        center: [-74.07, 4.60],
        zoom: 12,
        projection: 'EPSG:4326'
    })
});

Elementos Vectoriales (Marcadores)

En OpenLayers se sigue un flujo: Point → Feature → VectorSource → VectorLayer:

import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';

const marcador = new Feature({
    geometry: new Point([-74.07, 4.60])
});

const capaVectorial = new VectorLayer({
    source: new VectorSource({ features: [marcador] })
});

mapa.addLayer(capaVectorial);

Manejo de Eventos

Para capturar clics sobre el mapa:

mapa.on('click', (evento) => {
    const lng = evento.coordinate[0];
    const lat = evento.coordinate[1];
    alert('Lng: ' + lng + ' Lat: ' + lat);
});

En esta clase se explicará cómo visualizar datos geográficos propios utilizando Leaflet, enfocándose en el formato GeoJSON. Este formato es el estándar nativo para Leaflet y consiste en una estructura de objetos JavaScript con geometrías (puntos, líneas, polígonos) y propiedades alfanuméricas. Es fundamental que los datos estén en EPSG:4326 (WGS84).

Integración de GeoJSON

Para integrar un archivo GeoJSON se usa la clase L.geoJSON:

// Cargar GeoJSON básico
L.geoJSON(misDatos).addTo(mapa);

Estilos Personalizados

Para definir la apariencia visual de las capas se usa la propiedad style:

L.geoJSON(misDatos, {
    style: {
        color: '#3388ff',
        fillColor: '#3388ff',
        fillOpacity: 0.5,
        weight: 2
    }
}).addTo(mapa);

Popups Dinámicos

Para mostrar información al hacer clic, se implementa onEachFeature con bindPopup:

L.geoJSON(misDatos, {
    onEachFeature: function(feature, layer) {
        layer.bindPopup(
            '<b>' + feature.properties.nombre + '</b>'
        );
    }
}).addTo(mapa);

Cargar Archivos KML con Omnivore

Para formatos no nativos como KML, se usa Leaflet Omnivore (via CDN):

// Cargar archivo KML
omnivore.kml('datos/mi_archivo.kml').addTo(mapa);

En esta clase se explicará cómo utilizar Mapbox GL JS para la visualización de datos geográficos, profundizando en la gestión de fuentes y capas. Se usa el evento load para asegurar que las capas se añadan después de que el mapa haya cargado completamente.

Fuentes y Capas (addSource/addLayer)

addSource define el origen de los datos, mientras que addLayer determina cómo se visualizan. Los datos pueden integrarse directamente, desde archivo local o URL externa:

mapa.on('load', () => {
    // Definir fuente de datos
    mapa.addSource('localidades', {
        type: 'geojson',
        data: './data/localidades.json'
    });

    // Crear capa visual
    mapa.addLayer({
        id: 'localidades-layer',
        type: 'fill',
        source: 'localidades',
        paint: {
            'fill-color': '#008000',
            'fill-opacity': 0.2
        }
    });
});

Tipos de Geometría

El tipo de capa define cómo se renderiza: 'circle' para puntos, 'line' para líneas, 'fill' para polígonos. La propiedad paint permite configurar estilos como circle-radius, circle-color, fill-color y fill-opacity.

Popups Interactivos

Para añadir interactividad con ventanas emergentes al hacer clic sobre una capa:

mapa.on('click', 'localidades-layer', (e) => {
    const props = e.features[0].properties;
    new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML('<b>' + props.nombre + '</b>')
        .addTo(mapa);
});

En esta sesión abordaremos técnicas avanzadas para integrar servicios GeoServer WFS (GeoJSON) y vincular imágenes dinámicas a popups, tanto en Leaflet como en Mapbox GL JS.

GeoServer en Leaflet (AJAX)

Para consumir capas de GeoServer sin descargar archivos, se usa el plugin leaflet-ajax:

var url = 'https://geoserver/ows?service=WFS&outputFormat=application/json...';
var capa = new L.GeoJSON.AJAX(url);
capa.addTo(map);

Imágenes en Popups (Leaflet)

Para mostrar imágenes almacenadas en las propiedades del GeoJSON:

L.geoJSON(puntos, {
    onEachFeature: function(feature, layer) {
        var html = '<h3>' + feature.properties.nombre + '</h3>' +
                   '<img src="' + feature.properties.imagen + '" width="200">';
        layer.bindPopup(html);
    }
}).addTo(map);

GeoServer en Mapbox GL JS

Mapbox lee URLs de GeoJSON de forma nativa, sin plugins adicionales:

map.addSource('departamentos', {
    type: 'geojson',
    data: 'https://geoserver/ows?service=WFS&outputFormat=application/json...'
});

map.addLayer({
    id: 'departamentos-layer',
    type: 'fill',
    source: 'departamentos',
    paint: { 'fill-color': '#0080ff', 'fill-opacity': 0.5 }
});

Imágenes en Popups (Mapbox)

Para mostrar imágenes al hacer clic sobre puntos:

map.on('click', 'puntos-layer', (e) => {
    var props = e.features[0].properties;
    var html = '<h3>' + props.nombre + '</h3>' +
               '<img src="' + props.imagen + '" width="200">';
    new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML(html)
        .addTo(map);
});