Tutorial OpenLayers: marcadores, coordenadas, eventos y datos dinámicos

En este post te mostraré un ejemplo de proyecto con OpenLayers en donde se muestran:

• Introducción a OpenLayers
• Descargar OpenLayers
• Creación de mapa
• Centrado de mapa en determinada ubicación
• Marcadores personalizados con imagen propia
• Listener de eventos como click o zoom cambiado
• Consumo de API PHP para obtener los marcadores

Voy a desglosar cada cosa y al final dejaré el código del proyecto completo.

Introducción a OpenLayers

La librería se define a sí misma (traducida literalmente) como:

Una biblioteca llena de funciones y de alto rendimiento para todas sus necesidades de mapeo

En pocas palabras es una librería para manejar mapas, así como Google maps, pero esta es una alternativa gratuita y open source muy parecida a Google maps.

El punto que más destaca es que es gratis.

Puedes visitar el repositorio en https://github.com/openlayers/openlayers y ver su página web en https://openlayers.org/

Descargar OpenLayers

Si usas npm puedes instalar OpenLayers con:

npm install ol

En caso de que quieras usarlo sin NPM es totalmente posible. Aquí dejo los enlaces de la última versión que también se pueden obtener en unpkg.com

Css: https://unpkg.com/openlayers@4.6.5/dist/ol.css

JavaScript: https://unpkg.com/openlayers@4.6.5/dist/ol.js

Incluye ambos en tu HTML y estamos listos.

Creación y centrado de mapa

Vamos a ver cómo crear, en primer lugar, un mapa, y mostrarlo en un contenedor. En el HTML creamos un div con el id mapa y le damos el estilo necesario.

Después, con JavaScript, creamos el mapa:

Para crear un mapa creamos una nueva instancia de ol.Map, se va a montar en el elemento con el id mapa en la línea 6.

Después, por defecto, tiene una capa y una vista. En la vista (línea 12) utilizamos las coordenadas para centrarlo en determinada ubicación y le ponemos un zoom de 15.

Montando mapa con zoom y centrado en coordenadas

Marcadores

Podemos crear un marcador, para ello debemos crear una capa. Después, para agregarle el icono se indica el estilo. El marcador va dentro de una capa y finalmente la capa se agrega al mapa con el método addLayer.

El código queda así:

Lo resaltable es que se indican las coordenadas del mapa en la línea 3 y el icono del marcador en la línea 10.

Los marcadores son un arreglo, podemos invocar a push cuantas veces sea necesario para agregar un elemento al arreglo.

La capa se define en la línea 19 con los marcadores en features y finalmente se añade al mapa en la línea 25. Ahora tenemos un bonito marcador de una pizzería:

Agregar marcador a mapa de OpenLayers

Por cierto, la imagen fue tomada de Pixabay.

Eventos

El mapa que acabamos de crear tiene varios eventos. Vamos a ver dos de ellos.

Click

El click es cuando se hace click en un elemento del mapa o en el mapa; con esto podemos detectar si alguien hace click en un marcador.

Cambio de zoom

Del mismo modo podemos escuchar cuando el usuario aleja o acerca el mapa, es decir, cambia el zoom:

Consumo de API con PHP para marcadores dinámicos

Es momento de mostrar el pequeño proyecto o demostración. He colocado un select de categorías que sirve para ver categorías en el mapa. En el change del select hago una petición http con fetch a mi servidor con PHP y obtengo las coordenadas de los marcadores para dibujarlos.

Vamos parte por parte. Primero veamos el código HTML:

Existe la lista desplegable y el div con el id mapa. Estoy usando Bootstrap 4 para maquetar. Ahora veamos el script:

Lo único que se hace es escuchar el cambio de selección del elemento del select; cuando eso sucede se hace una petición y se obtienen los marcadores.

Como se está refrescando el mapa en cada cambio, debo obtener una referencia a la capa de los marcadores para removerla en cada actualización.

Finalmente veamos el servidor de PHP que por el momento muestra información a partir de un arreglo, pero podría fácilmente conectarse a una base de datos.

Es un simple if, que podría remplazarse por una consulta usando where. Por favor observa que estoy devolviendo el icono y las coordenadas, así fácilmente se puede configurar el diseño de cada marcador.

Aquí el resultado final:

Demostración openlayers con marcadores y coordenadas

Conclusión

Espero que todo haya quedado claro, fue un proyecto simple pero en donde aprendí mucho. Creo que con esto es suficiente para crear una aplicación web simple que utilice mapas y no requiera el poder de Google Maps.

Dejo el enlace al repositorio de GitHub para que puedas explorarlo.