Herramientas para crear un mapa web interactivo

En este artículo vamos a tratar de ver una panorámica general sobre cómo podemos interactuar con un servidor para construir un mapa web interactivo o dinámico.

Las aplicaciones web de mapas se han convertido en una herramienta imprescindible para mostrar los datos geográficos. Ahora disponemos de mecanismos que permiten la interacción del usuario, de tal forma que el usuario pueda seleccionar los datos e incluso modificar o añadir nuevos datos.

¿Qué significa web mapping y web mapping interactivo?

Entendemos por web mapping la publicación de mapas en la web. En consecuencia, web mapping interactivo será aquel que permita que el usuario pueda acceder a los datos para visualizarlos, tratarlos y modificarlos. Esto requiere algún tipo de comunicación con el servidor.

Se parte del supuesto de que los datos geográficos se encuentran almacenados en una base de datos (PostGIS, MySQL…), aunque pueden estar también en cualquier tipo de los formatos que soportan datos GIS (shp, geoTIFF…) La consulta de los datos puede realizarse principalmente por dos métodos:

1. Consultas WMS, WFS, WCS a un servidor de mapas.
2. Conexión y peticiones al servidor utilizando HTTP.

¿Por qué utilizamos bases de datos?

El núcleo de cualquier aplicación son los datos. Hay muchos tipos de formatos y métodos para guardar y procesar esos datos. Lo más frecuente es que tengamos una base de datos en un servidor que será el encargado de suministrar los datos. Son varias las razones para utilizar bases de datos geográficas, como por ejemplo:

1. Cuando los datos se actualizan periódicamente. Hay datos como los de la altura de las olas enviados por boyas situadas en el mar, o geolocalizaciones de aviones, barcos, vehículos o personas que necesitan ser actualizados constantemente.
2. Gran volumen de datos. Si tenemos un conjunto pequeño de datos podemos guardarlos en los formatos GIS tradicionales como shp o GeoJSON, pero si el volumen de datos es muy grande resultan poco prácticos.
3. Control del acceso a los datos. Necesitamos controlar el acceso a los datos según el perfil del usuario. No todos los usuarios pueden tener acceso a todos los datos o modificarlos.

La base de datos espacial más utilizada es posiblemente PostGIS. Es una extensión de PostgreSQL que se utiliza con frecuencia por ser un estándar para servicios como GeoServer. La combinación GeoServer+PostGIS con una librería JavaScript como OpenLayers o Leaflet es habitual para crear una arquitectura GIS WEB basada en software libre.

Otra base de datos que podemos utilizar es MySQL. Esta base de datos posiblemente será de las de uso más extendido. Sin embargo, para datos geográficos tradicionalmente ha sido relegada por PostGIS. Las razones por las que esto sucede así no creemos que estén muy justificadas: MySQL puede utilizarse como soporte para datos geográficos y tiene la ventaja de que casi cualquier servidor que contratemos la tiene, cosa que no sucede con PostgreSQL. Además, son muchas las empresas que disponen de sus datos en MySQL, por lo que parece lógico que para los datos geográficos se utilizase la misma herramienta.

Hay otras bases de datos no relacionales como MongoDB que, aunque parece la solución del futuro, actualmente no está tan implantada como las anteriores.

Interacción mediante el empleo de servidores como GeoServer o Mapserver

Siguiendo el esquema anterior vemos que las bases de datos proporcionan recursos que son procesados por servidores de mapas como GeoServer o MapServer.

Los datos puedes ser procesados por un servidor de mapas que nos proporcione un servicio WMS, WFS o WCS. Un cliente WFS puede descargar datos vectoriales para su uso, en consecuencia podrá manipular esos datos para realizar análisis espaciales y otras operaciones. El servidor de mapas (Geoserver o Mapserver) actuará como un intermediario entre las bases de datos y el usuario.

Esto tiene ventajas evidentes: es eficaz, sencillo de manejar y utilizar. Pero también presenta algunos inconvenientes: el servidor de mapas proporciona un archivo GML, que es un estándar de la OGC. Este archivo, si se trata de un mapa con muchos datos puede ser lento, aunque existen mecanismos para filtrar entidades. En esta configuración es el proveedor del servicio el que se encarga de la configuración de los datos.

Como alternativa a la situación anterior, el usuario puede acceder directamente a los datos alojados en el servidor y establecer una comunicación con él mediante el empleo de HTTP. La ventaja que aporta este método es la flexibilidad en la consulta de datos. En los apartados siguientes analizamos las arquitecturas posibles utilizando HTTP.

Interacción mediante HTTP

HTTP es un protocolo que define las reglas para la comunicación entre un cliente y un servidor web. El cliente envía una solicitud HTTP al servidor. El servidor responde con la información solicitada (página web, un archivo, un recurso multimedia, etc).

Hay varios métodos para las solicitudes HTTP:

• GET: para obtener recursos.
• POST: para enviar datos al servidor.
• PUT: para actualizar recursos.
• DELETE: para eliminar recursos.

Aquí podemos encontrarnos con varias alternativas tanto para la parte del cliente (Frontend) como la del servidor (Backend).

Herramientas del lado del Cliente

La situación que podemos considerar clásica emplea HTML, CSS y JavaScript para construir la interfaz de usuario y Leaflet u OpenLayers para construir los mapas.  Además se pueden utilizar Frameworks como React o Angular para dar estructura a la aplicación.

En esta arquitectura el cliente envía una solicitud HTTP al servidor que contiene los datos Geoespaciales, es decir la base de datos. Este servidor procesa los datos y los devuelve en formato JSON. Los datos recibidos por el cliente son renderizados con OpenLayers o Leaflet. Las operaciones CRUD (Crear, Leer, Actualizar, Borrar) se hacen mediante solicitudes POST, PUT o DELETE.

Como alternativa a esta situación «clásica», las solicitudes HTTP se pueden realizar con Axios o Fetch.

• Axios es un Cliente HTTP basado en promesas para node.js y el navegador.
• Fetch es una función de JavaScript que se utiliza para hacer solicitudes HTTP (como GET, POST, PUT, DELETE) desde el navegador.

Herramientas del lado del Servidor

Del lado del servidor podemos encontrarnos con varias posibilidades según el lenguaje de programación que utilicemos.

Soluciones basadas en JavaScript

PostGIS + Node (Express) + Leaflet-React / OpenLayers

En este caso podemos utilizar Node.js con Express.

Puedes ver un esquema de esta arquitectura en el diagrama siguiente:

El flujo de trabajo en este caso es el siguiente:

1. El cliente React solicita datos geoespaciales al servidor Express a través de solicitudes HTTP (Axios, Fetch).
2. El servidor Express recibe las solicitudes y realiza consultas a la base de datos PostGIS.
3. La base de datos PostGIS responde con los datos solicitados, que son enviados de vuelta al cliente React a través de la respuesta HTTP.
4. El cliente React utiliza los datos recibidos para renderizar el mapa utilizando Leaflet.

Todas las herramientas se basan en JavaScript por lo que no se necesita aprender otro lenguaje de programación.

Esta opción es excelente para crear aplicaciones de una sola página (SPA). Permite una eficaz interacción con el servidor.

Soluciones basadas en Python

PostGIS + Django y GeoDjango + Leaflet / OpenLayers

Django es un framework web de alto nivel que permite el desarrollo rápido de sitios web seguros y mantenibles. Por otra parte, GeoDjango proporciona herramientas específicas para la gestión y visualización de datos geoespaciales.

Entre las ventajas de este sistema podemos indicar la excelente comunicación con PostGIS. Como inconveniente, se necesita conocer Python además de JavaScript.

Soluciones basadas en PHP

PostGIS + PHP + Leaflet /OpenLayers

Hypertext Preprocessor (preprocesador de hipertexto) PHP es un lenguaje de script que se ejecuta del lado del servidor y que puede incorporarse en una página HTML tradicional.

• PHP puede ser utilizado en la mayoría de los servidores web y por todos los sistemas operativos.
• PHP es software libre.
• PHP trabaja del lado del servidor. Por tanto necesitaremos un servidor o tener en nuestro ordenador un servidor como Xampp que pueda interpretar el script php.
• PHP permite hacer páginas web dinámicas en donde parte del contenido es generado en el servidor en el momento de invocar la página web.

Este método tiene la ventaja de que PHP es ampliamente utilizado y fácil de instalar en cualquier servidor. Como desventaja, que no dispone de algunas herramientas modernas disponibles en Node. También tiene el inconveniente de que se necesita aprender otro lenguaje de programación como es PHP.