Warning: Undefined array key "typ" in /srv/vhost/diaridigital.net/home/html/sourcecode/main/articles.php on line 18

Mapas en páginas web usando OpenLayers

21-03-2022
Tiempo de lectura: 1 minutos

Mostrar un mapa con una localización o con una ruta, o con una capa de datos son elementos que enriquecen una página web a la hora de mostrar datos. Con OpenLayers es fácil y sin coste.

API para mapas

Una opción común para el uso de mapas en las págnas web, con JavaScript, es el uso de la API de Google Maps, o bien, un alternativa Open Source, sin costes, basado en la licencia 2-clause BSD y de fácil uso. Es decir, OpenLayers.

OpenLayers

OpenLayers permite un montón de visualizaciones, como muestra su página de ejemplos, y son de muy fácil uso utilizando JavaScript. Además tienen una gran biblioteca de capas con datos, terriotorios, áreas, etc, incluso se puden usar imágenes estáticas, como este ejemplo:

openlayers.org

Mapa de ejemplo con una imágen estática, creado con OpenLayers

Ejemplo de mapa

Vamos al lío. ¿Cómo se incorpora en una página web? Ante todo, utiizaremos Node ya que OpenLayers se ha desarrollado basándose en este entorno y es muy fácil poder probar los mapas y hacer el deploy en producción.

C:\> npm create ol-app my-map
C:\> cd my-map
C:\> npm start

Abrimos el navegador en la dirección local y puerto que nos indica, http://127.0.0.1:5173/
Primero creamos un contenedor para el mapa:

<div id='map' class='map'></div>

y le damos formato con css:

.map {
  position: absolute;
  top: 0;
  height: 400px;
  width: 100%;
}

También añadimos un script que incluirá el código JavaScript para montar el mapa. Este código debe aparecer después de haber definido el contenedor.

<script type='module' src='./main.js'>
</script>

Y el código para mostrar un mapa es el siguiente. Importamos lo elementos que necesitamos que son una vista (View) para el centrado y zoom, una capa (TitleLayer) y la fuente OSM:

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

Definimos el mapa para el target (contenedor) definido antes, la capa de mapa y la vista centrada:

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

Ahora nos queda refrescar la página del navegador para ver el resultado

openlayers.org

Mapa de ejemplo creado con OpenLayers

Referencias

Sitio de OpenLayers
https://openlayers.org
Ejemplos de mapas con OpenLayers
https://openlayers.org
BSD 2-Clause License
https://tldrlegal.com
Uso de imágenes estáticas para mapas
https://openlayers.org