OpenLayers + node.js: Así es cómo deberías trabajar a partir de ahora

OpenLayers, es una de las herramientas más populares para la publicación de mapas en la web, se trata de una biblioteca de JavaScript de código abierto. OpenLayers es modular, ofrece alto rendimiento y tiene muchas funciones para mostrar e interactuar con los mapas y datos geoespaciales.

La forma tradicional de utilizar OpenLayers (y quizá más sencilla pues no necesita ninguna instalación) era utilizando la librería mediante sus enlaces CDN a los archivos ol.js y ol.css. Como vimos en este tutorial de introducción a OpenLayers, en este caso solo necesitamos escribir un código HTML, con sus elementos css para los estilos y JavaScript para la creación del mapa.

Sin embargo, este método no es el más aconsejable. En entornos de producción se suele optar por utilizar OpenLayers + Node.js.

Ventajas de utilizar OpenLayers + node.js

Para entornos de producción actualmente es preferible utilizar node para crear el mapa, aunque mejor sería decir, para crear el proyecto.

1. La ventaja de utilizar node es que nos permite utilizar módulos. En lugar de descargar y utilizar toda la librería, se trata de seleccionar solo lo que necesitemos para nuestra aplicación. De esta forma, solo emplearemos aquella parte de OpenLayers (módulos) que necesitemos para nuestro proyecto. Podremos exportar nuestro proyecto generando los archivos para subir al servidor.
2. Otra ventaja importante es que node nos proporciona un servidor local en el que podremos ver nuestro mapa. Lógicamente los servicios que hemos creado en GeoServer (WMS, WFS, WCS…) tienen que estar disponibles en el mapa, por lo tanto, GeoServer debe estar funcionando.
3. Utilizar OpenLayers + Node.js es la forma actual de trabajar y en la que se muestran los ejemplos de la página web de OpenLayers: https://openlayers.org/en/latest/examples/

Cuando trabajemos con node tendremos dos servidores en funcionamiento:

1. El servidor GeoServer que nos suministra nuestro en mapas con los servicios OGC. http://
   localhost:8080/geoserver
2. El servidor de node en el que visualizaremos los mapas de OpenLayers. http://localhost:1234

Instalar Node

Node.js es un entorno de desarrollo y ejecución de aplicaciones JavaScript. Podemos simplificar la definición de lo que es node diciendo que es “JavaScript en el servidor”.

Node crea un entorno de desarrollo modular. Los módulos de OpenLayers son las partes (clases) de las que se compone. El desarrollo en módulos permite utilizar solo aquellas partes de la librería que nos interesan en nuestro proyecto concreto, prescindiendo del resto, lo que hace la aplicación más ligera.

La instalación de node en Windows es muy sencilla:

1. Lo primero es acudir a la página de descargas de node.
2. Una vez descargado el archivo .msi, lo ejecutamos y seguimos el asistente.

Para comprobar que la instalación ha tenido éxito, abrimos una ventana símbolo de sistema y escribimos node –v. Como resultado obtendremos la versión de node instalada:

Una vez que tenemos instalado node, procedemos a la instalación de OpenLayers.

Instalación de OpenLayers

En nuestra carpeta webmapping, creamos un nuevo directorio llamado OpenLayers, abrimos una ventana de comandos y nos situamos en él.

cd openlayers

Para inicializar el proyecto escribimos:

npm init

Como resultado de la operación anterior por la terminal se nos pedirá que respondamos a varias preguntas para su configuración. Respondemos a todas las preguntas formuladas con intro (no es necesario escribir nada).

Después de confirmar la ventana anterior veremos que nos ha creado un archivo llamado: package.json.

Ahora es el momento de instalar OpenLayers, escribimos:

npm install ol

Como resultado tendremos un nuevo directorio llamado: node_modules.

Se agregan las dependencias necesarias, escribiendo en la ventana de comandos:

npm install --save-dev parcel-bundler

Cuando la instalación finalice estaremos en disposición de empezar a desarrollar nuestra aplicación.

Si todo ha funcionado correctamente tendremos preparado OpenLayers para crear nuestro primer mapa.

Creando la aplicación

La aplicación inicialmente se compone de dos archivos:

1. Un archivo html con el contenido básico de la página web.
2. Un archivo js con los elementos de OpenLayers.

Veamos cómo son esos dos archivos.

El primero es el archivo con el código html, que como vemos a continuación, es muy sencillo, pues solo tiene la estructura del html, con los estilos. En el script solo escribimos la referencia al archivo index.js que será el que contenga la aplicación:

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
  <title>Using Parcel with OpenLayers</title> 
  <style> #map { width: 400px; height: 250px; } 
  </style> 
 </head> 
 <body> 
  <div id="map"></div> 
    <script src="./index.js">
    </script> 
 </body> 
</html>

El archivo index.js contendrá lo siguiente:

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

Como podemos observar tiene los elementos tradicionales de OpenLayers:

• La clase Map
• La referencia a id=»map».
• Las capas.
• Y la vista.

Pero también vemos que hay elementos nuevos. La sentencia import se usa para importar funciones que han sido exportadas desde un módulo externo.

Con estos módulos tenemos lo suficiente para crear un mapa que utilice a OpenStreetMap como mapa base.

Publicando el mapa

En los pasos anteriores hemos creado nuestra aplicación para OpenLayers, ahora necesitamos obtener los archivos para publicarla. Para conseguirlo realizaremos los siguientes pasos.

 Paso 1: Abrimos con un editor de texto el archivo package.json y añadimos las líneas

«start»: «parcel index.html»

«build»: «parcel build –public-url . index.html»

El archivo tiene que quedarnos de la siguiente forma:

{ 
"name": "openlayers", 
"version": "1.0.0", 
"description": "", 
"main": "index.js", 
"scripts": { 
 "test": "echo \"Error: no test specified\" && exit 1", 
 "start": "parcel index.html", 
 "build": "parcel build --public-url . index.html" 
 }, 
 "author": "", 
 "license": "ISC", 
 "dependencies": { 
    "ol": "^6.5.0" }, 
 "devDependencies": { 
 "parcel-bundler": "^1.10.3" 
} 
}

Paso 2: Volvemos a la terminal y escribimos:

npm start

Obtendremos un aviso indicando que

Server running at http://localhost:1234

Esto nos indica que el servidor está funcionando y podemos ver nuestro mapa. Si abrimos el navegador y acudimos a la url indicada veremos lo siguiente: