Representar ubicaciones en un mapa con Leaflet

La meta

Representar en un sitio desarrollado con Drupal, ubicaciones (puntos en el mapa) contenidas en un tipo de contenido en un mapa utilizando la librería Leaflet.

Instalar los módulos para utilizar Leaflet

En Drupal, Leaflet representa ubicaciones en un mapa a través de su exposición mediante una vista. La información de dicha ubicacion está a su vez contenida en un tipo de campo especial: Geofield. Descargar los siguientes módulos:

• Libraries
• cTools
• Entity
• Leaflet
• Geofield
• Views
• Token
• Leaflet Markercluster
• Leaflet Hash
• Leaflet More Maps

Descargar y copiar la librería Leaflet en sites/all/libraries de manera que sea accesible el archivo sites/all/libraries/leaflet/leaflet.js

Descargar y copiar la librería leaflet-hash en sites/all/libraries de manera que sea accesible el archivo sites/all/libraries/leaflet-hash/leaflet-hash.js

Descargar y copiar la librería leaflet_markercluster en sites/all/libraries de manera que sea accesible el archivo sites/all/libraries/leaflet_markercluster/src/MarkerCluster.js

Activar los siguientes módulos:

• Leaflet (leaflet)
• Leaflet Hash (leaflet_hash)
• Leaflet Markercluster (leaflet_markercluster)
• Leaflet More Maps (leaflet_more_maps)
• Leaflet views (leaflet_views)
• Geofield

Crear un nuevo tipo de contenido

El primer paso es crear un tipo de contenido para contener las ubicaciones que posteriormente serán representadas en un mapa. A los habituales campos title y body será necesario crear uno de tipo Geofield. Si seleccionamos el widget Latitude / Longitude tendremos que ingresar los valores a mano. Si seleccionamos el widget Geocode from another field, los valores de latitud y longitud serán calculados a partir de los valores ingresados en otro campo, por ejemplo un address field. La idea no es mala, dependiendo de la precisión que se requiera.

Crear una nueva vista

Una vez que tenemos el nuevo tipo de contenido y ya hemos creado algún que otro node, podemos crear la vista que representará los puntos según la longitud y latitud. Crear una vista seleccionando el tipo de contenido y sin seleccionar ni pagina ni block.

Agregar los campos título, body y posición. Según donde se quiera representar el mapa, agregar una vista de tipo block, page o content pane si se quiere utilizar el mapa en Panels.

Seleccionar LeafLet Map como formato de la vista. Se la configuración del formato, seleccionar el campo que contiene la información de latitud y longitud. Más abajo será posible elegir el tipo de mapa y configurar parámetros para el zoom.

Tan simple como eso. Si todo salió bien, ya deberíamos tener el mapa en Drupal mostrando ubicaciones con markers.

Conclusión

Leaflet en comparación de otras librerías, como OpenLayers, parecer estar mejor integrada a Drupal. Con Leaflet resulta por ejemplo mucho más simple la interacción con el mapa utilizando javascript.