OpenLayers para entorno de producción

Una de las herramientas más populares para la publicación de mapas en la web es OpenLayers, que es 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. En este blog ya se trató con anterioridad como crear un mapa con OpenLayers, en aquella ocasión utilizábamos HTML para escribir el código y llamar a las librerías js y css de OpenLayers. Este es un camino sencillo y por supuesto eficaz de crear una aplicación, muy útil para hacer pruebas y desarrollos.

Pero para producción se recomienda otra estrategia. Basándonos en la documentación de OpenLayers vamos a escribir un ejemplo que nos permita obtener los archivos necesarios para publicar un mapa en la web.

¿Cómo empezar?

JavaScript actualmente funciona mejor cuando se utiliza mediante módulos y esta es la forma que aconseja OpenLayers. En lugar de descargar y utilizar toda la librería se trata de seleccionar solo lo que necesitemos para nuestra aplicación. En consecuencia la forma que nos recomienda OpenLayers para utilizar su librería es instalando el paquete ol. Para crear la aplicación necesitamos tener instalado node.js.

El primer paso es crear un nuevo directorio vacío para el proyecto, por lo que abrimos una terminal y escribimos:

navegamos al nuevo directorio ejecutando:

Para inicializar el proyecto escribimos

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 imprescindible escribir nada).

A continuación instalamos OpenLayers mediante:

Se agregan las dependencias necesarias:

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. Un archivo html con el contenido básico de la página web y un archivo js con los elementos de OpenLayers. Veamos cómo son esos dos archivos.

Creamos el archivo index.js.

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.

Creamos el archivo index.html

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 lineas

«start»: «parcel index.html»

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

El archivo tiene que quedarnos de la siguiente forma:

Paso 2: Volvemos a la terminal y escribimos:

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:

Cada vez que cambiemos algo, en los archivos index, la página se volverá a cargar automáticamente para mostrar el resultado de sus cambios.

Hay que tener en cuenta que se ha creado un solo archivo JavaScript con todo el código de la aplicación y  las dependencias utilizadas. Del paquete OpenLayers, solo estamos utilizando los componentes requeridos en nuestro caso, prescindiendo del resto.

Paso 3: Para crear un paquete con la aplicación, hay que escribir.

Obtenemos una carpeta /dist que contiene todo lo que necesitamos para publicar nuestra aplicación. Esa es la carpeta que subiremos al servidor.

Deja un comentario