martes, 24 de enero de 2012

Insertando un mapa en Drupal 7 con Openlayers

Por fin voy viendo la luz en este apasionante modulo. Openlayers nos permite añadir mapas de distintos proveedores a nuestra web. Los proveedores puede ser Google Maps, Virtual Earth, Yahoo Maps y OpenStreetMaps (OSM), este ultimo es un proyecto colaborativo para crear mapas libres y editables.

Al grano, empiezo explicando lo mas básico que es añadir un mapa con una localización en un tipo de contenido, mediante un campo del tipo GeoField.
Antes de nada debemos de habilitar los modulos necesarios que son:
  1. Geofield
  2. Libraries
  3. Openlayers (habilito Openlayers, Openlayers UI y Openlayers Views)
  4. GeoPHP es un extra, debemos de descargarlo a sites/all/libraries/geoPHP.
    • En la versión  7.x-2.0-beta7 no es necesario descargar esta libreria, por lo menos para las configuraciones básicas, es necesario y suficiente  el modulo geophp que tambien se integra con lal ibreria GeoPHP (23-01-2014)
  5. OpenLayers biblioteca de OpenLayers Javascript . Se descarga un tar.gz de openlayers.org y se descomprime en sites/all/libraries/openlayers

Ahora ya podemos añadir un campo Mapa en un tipo de contenido. Este campo debe de ser de tipo GeoField  y con un control: Openlayers Map. Lo creamos y aceptamos el resto de opciones por defecto. Como segundo paso tendremos que Gestionar la presentación de ese campo,  elegimos como Formato: OpenLayers y clikamos en la ruedita de la derecha y como OpenLayers Preset dejamos el que esta: Geofield Formatter Map y como Data options: Use full geometry.
Con estos pasos ya podríamos añadir una localización sobre el mapa en un tipo de contenido. El inconveniente de usar las configuraciones por defecto es que al crear un contenido veremos un mapa mundial y tendremos que ir haciendo sucesivos zoom  hasta llegar a la zona que queremos y lo mismo sucederá cuando queramos visualizar ese contenido. La solución pasa por crear un mapa personalizado, centrado en la zona que queramos. Para ello hay que hacer lo siguiente:
  • Estructura -> OpenLayers y vamos a la pestaña Mapas y clickamos en el boton Agregar.
  • Le indicamos nombre, titulo, descripción , ancho y alto del nuevo mapa.

  • Lo centramos en el lugar deseado.


  • En la pestaña Layers & Style elegimos que capas queremos que se vean en el mapa y si queremos que al visualizar el nodo que contiene el mapa, también se vea centrado, debemos de marcar en Overlay Layers la opcion Placeholder for Geofield Formatter. Si no habilitamos esta opción no lo veremos como opción en la configuración de la visualización del nodo.



  • Por ultimo en la pestaña Behaviors la opción obligatoria para poder ver el mapa personalizado al introducir un contenido es  Geofield, en donde le indicaremos que características de marcado van a estar disponibles en el mapa. (23-01-2014)  con la versión de openlayers 7.x-2.0-beta7 tenemos que marcar la opcion Geofield, en esta version ya no apareceran las opciones de Available Features, estan bajo la opcion Draw Features pero curiosamente si las activo no podre usar el mapa para añadir datos al mapa desde el field.

Guardamos el nuevo mapa y ahora solo nos quedaría indicarle al campo GeoField del tipo de contenido que use el nuevo mapa. Para ello editamos el campo del mapa y le indicamos en la OpenLayers Map que use nuestro mapa personalizado:

Y lo mismo con la gestión de visualización del campo que quedaría configurado de la siguiente forma:

Y el resultado :

Esto es lo mas básico en OpenLayers, ahora estoy mirando el tema de OpenLayers + Views que es donde realmente se ve la potencia de este modulo.


3 comentarios:

  1. estimado, muchas gracias por el tutorial.

    descargue todos los modulos y los descomprimi en las rutas que indicas,
    sin embargo, no me reconoce el geoPHP que descargue de aqui mismo y lo extraje en "sites/all/libraries/geoPHP" (tengo activado el modulo libraries). por lo tanto no puedo activar el modulo geofield ni geofield map.
    cual podría ser la causa?
    gracias.

    ResponderEliminar
  2. Hola Pablo,
    Tengo este blog un poco abandonado, lo empiezas con ganas, pero lo que suele pasar, por falta de tiempo pues lo voy dejando.
    El problema no es que no te encuentra la libreria geoPHP, lo que no te encuentra es el módulo geoPHP, http://drupal.org/project/geophp.
    Cuando escribí este post, el módulo geoPHP no estaba programado y supongo que se utilizaba la libreria geopPHP para las funciones que ahora hace el nuevo modulo.
    Solución, instala el módulo geoPHP y problema resuelto.
    Vete siguiendo los pasos que describo en el tutorial, es posible, que con las actualizaciones que van apareciendo de los módulos cambie un poco la interface pero la filosofía de funcionamiento de OpenLayers seguro que es la misma.
    Saludos

    ResponderEliminar
  3. Muy bien explicado tu post, he hecho en algun momento también esta configuración pero ahora quiero volverlo a utilizar y encontré tu post.

    ResponderEliminar