OpenLayers Basemap


En este tutorial veremos como crear un mapa básico con el cliente ligero OpenLayers. Anteriormente habíamos realizado este mismo proceso con el cliente ligero Leaflet.


El código completo para visualizar el mapa a pantalla competa en formato HTML lo tenéis a continuación, para los que no estén familiarizados con el lenguaje HTML, solo tenéis que copiar y pegar en un editor de texto, (os recomiendo utilizar Sublime Text pero son perfectamente validos otros como el bloc de notas o Notepad++) y guardarlo con la extensión .html

Finalmente, una vez guardado podéis abrirlo con cualquier navegador.

						
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

    <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([0.258526, 42.55382]),
          zoom: 13
        })
      });
    </script>
  </body>
</html>
						

					

Si queréis saber un poco más sobre el código de OpenLayers:

La primera parte del código se inserta en la cabecera o head, en ella aparecen dos enlaces una es los estilos o CSS y otra es el JavaScript necesario para que el mapa sea interactivo.

						
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
						
					

Notaréis que estamos utilizando la nueva versión de OpenLayers v6.1.1.

La segunda parte del código que también se incluye en el head, hace referencia a los estilos de este mapa en particular, en nuestro caso le estamos obligando a que el mapa ocupe el 100% de la ventana, sin márgenes ni bordes.

						
<style>
  body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
						
					

Una variante de este estilo es por ejemplo si queremos insertar el mapa en un post o parte de una página web, en ese caso:

						
<style>
  #map { height: 600px }
</style>
						
					

Donde height es la altura en píxeles.

La tercera parte del código y una vez dentro del cuerpo o body, corresponde al contenedor, veréis que esta directamente relacionado con los estilos (#map), ya que tiene un identificador id=map.

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

Finalmente tenemos la parte del Script, encontramos el código que hace referencia a las coordenadas geográficas del punto central del mapa en grados decimales, donde la primera coordenadas es la Longitud y la segunda coordenada es la Latitud (LonLat).

El numero que aparece a continuación es el zoom del mapa, en nuestro caso zoom 13

						
<script type="text/javascript">
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([0.258526, 42.55382]),
      zoom: 13
    })
  });
</script>
						
					

Modificando mínimamente este código podemos hacer mapas muy atractivos con OpenLayers, rápidos y que funcionaran en cualquier navegador y dispositivo.

¿Alguna pregunta?¿Quieres realizar sinergias o colaboraciones?¿Te gustaría enviarnos feedback sobre el tutorial? No dudes en contactar a jgabas@geopois.com.



Sobre el Autor


Javier Gabás Jiménez

Soy un apasionado de los mapas y la infraestructura de datos espaciales, me divierto mucho buscando formas de comprender y presentar datos visualmente, así como entender la programación que hay debajo. Ingeniero en geomática y topografía por la Universidad Politécnica de Madrid, cuando no estoy trabajando o estudiando, estaré viajando y disfrutando de la vida junto a mi pareja.



Formamos parte del programa de emprendimiento #17actuaupm