¿Cómo hacer mapas con openlayers?

Openlayer es una librería de JavaScript que permite crear mapas interactivos a partir de una fuente de datos. Existen diferentes versiones de esta librería y cada una de ellas utiliza una sintaxis diferente, así que siempre es bueno asegurarse de que siempre trabajamos sobre la misma versión. Yo trabajo con la versión Openlayer 3 y javascript SE 5. Openlayer 3 también es compatible con JavaScript SE 6. Aquí dejo los enlaces desde donde puedes descargarte la librería para diferentes versiones:

• Librería en desuso, Openlayers 2: https://openlayers.org/two
• Openlayers 3 (JavaScript SE5): https://openlayers.org/en/latest/doc/quickstart.html
• Usando NPM, Openlayers 3 (JAvaScript SE6): https://openlayers.org/en/latest/doc/tutorials/bundle.html

¿OpenLayers o Google Maps API?

Siempre he construido mapas usando la API de Google Maps, hasta que este decidió restringir su uso. La API de Google Maps es gratuita siempre que no se superen las 200 visitas/mes y hablemos de mapas estáticos, a partir de ahí empiezan a cobrar. Para más información sobre los precios de la API de Google Maps consultar el siguiente enlace: https://cloud.google.com/maps-platform/pricing/sheet/?hl=es

El principal inconveniente de la API de Google Maps es que restringe su uso a las capas de mapas suministradas por Google. Con Openlayer se puede mostrar y publicar diferentes servicios de mapas disponibles: WMS, WFS, TMS, WMS-C. Por ejemplo, podemos añadir OpenStreetMap como una capa TMS, sin coste alguno. Existen directorios webs desde donde te puedes descargar un estilo específico para tu mapa. Este servicio lo tienes disponible desde thunderforest, pero si indagas por Interent seguro que encuentras más sitios.

Empezando a construir mapas con Openlayers 3

En Openlayers 3, los mapas se componen de:

• Capas
• Vistas
• Controles
• Interacciones

Mapas

Son los elementos que renderizamos en el DOM de nuestro documento web. Los mapas se renderizan de tres formas diferentes: ‘webgl’, ‘canvas’ o ‘image’. Para indicar donde renderizar el mapa utilizamos la etiqueta target:

var mymap = new ol.Map({
    target:'map',
    render: 'canvas'
});

Capas

Los mapas constan de capas o – layers -. Los layers se definen como una array de capas con información sobre la fuente de datos en formato imagen, vector o fragmento (tiles). Habitualmente se usa una capa hecha a partir de fragmentos usando como fuente OpenStreetMap. Esto se representaría así:

var mymap = new ol.Map({
    target:'map',
    render: 'canvas',
    layer:[mylayerOSM]
});

var mylayerOSM = new ol.layer.Tile({
    source: new ol.source.OSM()
})

El código anterior crea una capa a partir de fragmentos desde la fuente OSM (OpenStreetMap). Si deseamos, superponer datos vectoriales a nuestro mapa, podríamos modificar el código anterior como sigue:

var mymap = new ol.Map({
    target:'map',
    render: 'canvas',
    layer:[mylayerOSM, vectorLayer]
});

var mylayerOSM = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var vectorLayer = new ol.layer.Vector({
   source: new ol.source.Vector({
       url: ‘data/geojson/map.geojson,’
       format: new ol.format.GeoJSON()
  })
})

Aquí es importante tener en cuenta dos puntos:

• Evitar CORS Error: La fuente de datos vectorial que se pase como url, debe mantenerse en el mismo dominio que el mapa, para que no nos dé el error «Cross–Origin Request Blocked: The Same Origin Policy…».
• Usar geojson.io: Existe una herramienta online que permite crear datos vectoriales de manera sencilla: https://geojson.io/#map=2/20.0/0.0

Vistas

Es la responsable del nivel de zoom, centrado del mapa y el tipo de proyección. Una proyección consiste en representar un mapa 3D y esférico en un plano y para ello se define una resolución, unas unidades de medidas y unas escalas. Existen diferentes tipos de proyecciones y dependiendo de su uso, se elige un tipo de proyección u otro. El más habitual es EPSG:3857 (Spherical Mercator), que utiliza la escala del metro. Podemos incluir nuevas proyecciones a través de la libreria proj4.js, pero no recomiendo hacerlo hasta que se tenga un buen dominio de esta herramienta. De momento, el uso de proyecciones se restringen a las vistas o cuando creemos una fuente de datos para nuestro mapa. Por ejemplo, podemos crear una vista que consista en centrar el mapa en un punto y a un nivel de zoom:

view: new ol.View({
   center: ol.proj.transform([lon,lat],'EPSG:3857','EPSG:4326'),
   zoom: 13
});

También podemos definir una proyección para una fuente de datos:

var vectorSource = new ol.source.Vector({
   projection: 'EPSG:4326'
});

Controles

Tal y como su nombre indica, esta propiedad nos permite indicar si queremos que aparezcan los controles del zoom, escalay atribución en nuestro mapa. Para poder mostrar estos controles, es muy importante incluir el archivo CSS que nos proporciona openlayer, de lo contrario no funcionará.

controls: ol.control.defaults({
   zoom:true,
   attribution: true,
   rotate: false,
});

Recapitulando

Uniendo todo lo anterior podemos crear nuestro mapa, empezando por uno sencillo e ir complicandolo poco a poco: