Cómo crear un mapa con OpenLayers

por

openlayers

OpenLayers hace que sea fácil crear un mapa interactivo en cualquier página web. Puede mostrar teselas de mapas, datos vectoriales y marcadores desde cualquier fuente. OpenLayers ha sido desarrollado para promover el uso de información geográfica de todo tipo. Y es completamente gratis.

OpenLayers muestra los datos geoespaciales en cualquier navegador web de escritorio moderno o móvil. Es compatible con una gran variedad de tipos de datos y capas y se ha construido basándose en las últimas tecnologías de navegación como HTML5, WebGL y CSS3. Estos son los lenguajes que necesitamos para crear una aplicación webmapping.

Primeros pasos con OpenLayers

Vamos a crear nuestro propio mapa, para ello incluiremos en la cabecera <head> de una página web la hoja de estilo ol.css y la librería JavaScript ol.js:

<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css"> 
<script src="https://openlayers.org/en/v6.5.0/build/ol.js" type="text/javascript"></script>

Dentro de la etiqueta <body> encontramos el marcado para el mapa, que genera un único elemento de documento:

<div style="width:100%; height:100%" id="map"></div>

También damos al contenedor un atributo id para que podamos hacer referencia a él en nuestro código.

A continuación añadimos el código JavaScript, dentro de la etiqueta script:

<script>
var map = new ol.Map({ 
  layers: [ 
    new ol.layer.Tile({ 
       source: new ol.source.OSM() 
       }) 
    ], 
    target: 'map', 
    view: new ol.View({ 
      center: [0, 0], 
      zoom: 2 
    }) 
});

El mapa y la vista

Contrariamente a las versiones anteriores, OpenLayers3 diferencia entre el concepto de mapa, que tiene el control sobre las capas, controles, superposiciones, etc y la forma en la que lo visualizamos, que se realiza por la vista.

Un mapa está hecho de:

  • Capas
  • Una vista
  • Controles
  • Interacciones

La vista es como una ventana a través de la que vemos el mapa. Permite cambiar la ubicación que estamos buscando o de lo que está más cerca o más lejos.

El mapa  – ol.Map

Map es la clase que permite manejar el concepto de mapa en nuestra aplicación. Podemos añadir o eliminar capas, controles, superposiciones e interacciones (layers, controls, overlays e interactions).

En su forma más simple, la creación de una nueva instancia ol.Map requiere que el usuario especifique un objeto con las siguientes propiedades:

  • target el elemento HTML de destino, donde se representará el mapa.
  • layers una o más referencias de la capa con los datos que se mostrarán.
  • view una instancia ol.View es responsable de gestionar la forma de visualizar el mapa.

La primera línea de nuestro script crea un objeto nuevo ol.Map, que es conocido como constructor.

Las layers debe contener instancias de capas, que se define en el espacio de nombres ol.layer. En el ejemplo estamos utilizando una capa de teselas del proyecto OpenStreetMap como fuente de datos. Echa un vistazo a este post en el que te mostramos con más detenimiento, cómo añadir los proveedores de teselas como OSM, MapQuest o Bing.

El target es el identificador de elemento. El mapa será creado dentro del elemento target y se llenará por completo. El target permite componer o estilizar el mapa dentro de la página web.

La vista – View

La clase Map no es responsable de cosas como fijar  centro, el nivel de zoom, la proyección del mapa o el ángulo de rotación. En su lugar, éstas son propiedades de un objeto View – que representa una vista en 2D del mapa.

Cuando instanciamos una nueva vista necesitamos especificar una ubicación de centro (center) y nivel de zoom (o un valor de resolution) para tener una instancia de vista completa:

La instancia view que estamos pasando es una vista 2D inicializada en el nivel de zoom 7 y centrado cerca de Castilla y León. Como la fuente ol.source.OSM utiliza la proyección EPSG: 3857, el centro de la vista se debe establecerse en la misma proyección y, debido a que el centro se especifica en EPSG: 4326, debemos transformarla para estar en EPSG: 3857.

var view = new ol.View({ 
  center: [41.56, -4.63], 
  zoom: 7 
});

Por último añadimos un control de zoom deslizante: ol.control.ZoomSlider y finalizamos el script:

//Añadimos un control de zoom 

map.addControl(new ol.control.ZoomSlider()); 

</script>

El resultado y el código fuente utilizado puedes verlo haciendo clic en la imagen:

ol3

Puedes examinar los primeros ejemplos y explorar la documentación de la API.

Aunque es una librería muy completa, podemos extender su funcionalidad aun más mediante el uso de plugins o complementos. Estos plugins nos ofrecen funcionalidad adicional, bien extendiendo OpenLayers o integrándose en él. Aquí encontrarás una lista de los mejores plugins para OpenLayers que consideramos muy recomendables por su utilidad.

Si te ha gustado esta entrada compártela!

Let’s connect!

Date de alta en nuestra newsletter y te enviaremos GRATIS el ebook que te ayudará a impulsar tu perfil GIS:
Vitaminas MappingGIS

Tan solo una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos

SUSCRÍBETE

5 comentarios en «Cómo crear un mapa con OpenLayers»

  1. Saludos a todos estaba usando la version 2.13 de openlayer, necesito actualizarme a la versión 3.X, no he encontrado la forma de agregar varios marcadores sobre el mapa y que al hacer click sobre uno de ellos aparesca un popup con mas detalles del punto, es presiso que pueda poner los iconos de los puntos dinamicamente
    si alguien pudiera ayudarme, mi correo es eidy@si.cm.rimed.cu

  2. Buen post, enhorabuena por esta pequeña intro a lo que se viene en el mundo OL con esta nueva versión. Muy buenas expectativas acaecerán con OL3, …. espero que mejoren la documentación (yo soy de los que me gustaba la API de OL2, a pesar de las muchas críticas que tenía …. )

  3. Con la linea renderers: ol.RendererHints.createFromQueryData() se puede seleccionar un «renderer» con un parámetro en la url: ?renderer=canvas o ?renderer=webgl:

    http://mappinggis.com/visor.html?renderer=webgl

    Una de las novedades de OL3 es el renderer webgl que abre la puerta a las aplicaciones como el MapGL (Google map con webgl) o la 3D.

    Si no quieres seleccionar el renderer en la url, no necesitas el ol.RendererHints.

Los comentarios están cerrados.