En el ámbito de las aplicaciones web existen multitud de herramientas para representar información espacial. Diversas compañías como Mapbox o Carto ofrecen sus plataformas para almacenar y mostrar mapas y datos geográficos. En ciertos casos, el entorno de estas plataformas es limitado y puede no adaptarse a nuestras necesidades. Como alternativa, existen herramientas como OpenLayers o Leaflet que nos permiten crear incluir mapas interactivos en una aplicación web. La ventaja es que estas librerías de Javascript no conforman un entorno cerrado sino que son un componente más dentro de nuestra web, lo que nos aporta total flexibilidad a la hora de mostrar el contenido.
Fuente: USGS
Hoy vamos a explicar cómo instalar y utilizar una de ellas: OpenLayers. Esta librería se caracteriza por se muy completa e incluir todas las herramientas que podamos necesitar en un visor web. Vamos a comentar las dos formas principales de incluir OpenLayers en vuestras aplicaciones web.
Mediante un archivo externo
Habitualmente, las librerías de JavaScript requieren la importación de varios ficheros en nuestro código para poder usar sus funcionalidades (archivos .js para las funciones y .css para el estilo). Es común que estos ficheros están almacenados en Redes de Distribución de Contenidos (CDN por sus siglas en inglés). Las CDN permiten compartir ficheros muy rápidamente entre el servidor en el que están alojados y el ordenador que los solicita. De esta forma, en lugar de almacenar las librerías en nuestra propia aplicación web podemos importarlos desde un CDN cada vez que la web se ejecuta.
En el caso de OpenLayers debemos importar un archivo .css y uno .js en la cabecera de nuestro fichero HTML. La URL de cada uno de estos archivos la podemos encontrar en la página web oficial de OpenLayers. Para la versión actual (6.2.1 a fecha de redacción de esta entrada), la importación de ficheros de OpenLayers quedaría de esta manera:
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h1>Mapa</h1>
</body>
</html>
En la cabecera de nuestro HTML, justo encima del título, hemos colocado las etiquetas correspondientes al estilo (CSS) y las funcionalidades (Javascript) de OpenLayers. En ambos casos, los ficheros se encuentran alojados remotamente en un CDN. Hecho esto, podríamos utilizar esta librería para crear nuestro mapa. Tendríamos que hacer los siguientes pasos en el body de nuestro HTML:
- Crear un elemento DIV para albergar el mapa
- Emplear las funciones de OpenLayers para generar un marco visor y añadir un mapa base
- Añadir algo de estilo para definir las dimensiones de nuestro mapa
El código completo quedaría así:
<!DOCTYPE html>
<html lang="es">
<head>
<style>
html, body {
margin: 0;
height: 100vh;
width: 100%;
}
h1 {
margin: 0;
padding: 10px;
}
.mapa {
margin: 0;
height: 400px;
width: 600px;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
<title>Visor ejemplo de OpenLayers</title>
</head>
<body>
<h1>Mapa</h1>
<div id="mapa" class="mapa"></div>
<script type="text/javascript">
var mapa = new ol.Map({
target: 'mapa',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([2, 40]),
zoom: 4
})
});
</script>
</body>
</html>
Mediante NPM
El método que anterior puede parecer simple y rápido de aplicar; sin embargo, no es el más óptimo para un entorno de producción. Depender de ficheros externos supone ser susceptible a fallos de conexión al servidor o a cambios no controlados de versiones. Además, el fichero Javascript que importamos contiene multitud de funciones y clases, aunque solo se utilicen unas pocas. Esto conlleva ineficiencia y más lentitud en la carga de la página web. Es por eso que en entornos de producción se utilizan manejadores de paquetes. NPM es un instalador y manejador de paquetes que funciona en un entorno de Node.js. Teniendo NPM instalado en nuestro entorno de desarrollo, instalar OpenLayers es tan sencillo como ejecutar esto en el directorio de nuestro proyecto:
npm install ol
La librería OpenLayers se instalará en el directorio de nuestro proyecto y todos los ficheros necesarios serán importados desde dicha carpeta, sin depender de servidores externos. Ahora podremos importar únicamente aquellas clases que vayamos a utilizar, maximizando la eficiencia de nuestra aplicación. La estructura HTML será similar a la del caso anterior, con la diferencia de que separaremos el código Javascript en un fichero diferente. El código quedaría de esta manera:
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<style>
html, body {
margin: 0;
height: 100vh;
width: 100%;
}
h1 {
margin: 0;
padding: 10px;
}
.map {
margin: 0;
height: 400px;
width: 600px;
}
</style>
<title>Visor ejemplo de OpenLayers</title>
</head>
<body>
<h1>Mapa</h1>
<div id="mapa" class="mapa"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
var mapa = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'mapa',
view: new View({
center: [0, 0],
zoom: 2
})
});
En cualquiera de los dos casos, el resultado final será el mismo. En el navegador se mostrará lo siguiente:
Este es solo el primer paso para crear tus propios visores web. Si quieres explotar al máximo sus funcionalidades y aprender más herramientas de Web GIS, te animo a que le eches un vistazo a nuestro curso de Desarrollo de aplicaciones WebGIS con OpenLayers y Leaflet.
(3 votos, promedio: 5,00 de 5)
Cargando...
Formación de calidad impartida por profesionales
Deja tu comentario