Guía práctica para insertar un mapa con OpenLayer 3

Escenario

Lo que sigue es una guía práctica para colocar en un mapa (utilizando la versión 3 de OpenLayers) los puntos que determinen la dirección de una serie de ubicaciones. La dirección postal de cada ubicación será cargada en un nuevo tipo de contenido (llamado locations). Luego, utilizando geocoder, se cargará automáticamente en otro campo la latitud y longitud de dicha ubicación. Por último, una vista con dos "capas" se ocupará de mostrar el punto exacto de cada ubicación en un único mapa.

Módulos necesarios

Descargar los siguientes módulos:

• OpenLayers
• Address Field
• Views GeoJSON
• Geocoder
• Registry Autoload
• Service container
• Services raw response formatter
• Services

Descargar la versión 3 de Open Layers, en este ejemplo se utilizó la versión 3.5.0. Descomprimir en sites/all/libraries/openlayers3

Ahora, activar los siguientes módulos:

• OpenLayers Views
• Geofield
• Geocoder
• Address field
• OpenLayers Examples
• Views UI
• OpenLayers UI
• OpenLayers Services

Por dependencias, los suiente marea de módulos será activada por Drupal:

• Views
• Chaos tools
• OpenLayers
• Libraries
• Registry Autoload
• Service Container
• jQuery Update
• geoPHP
• GeoJSON
• OpenLayers Block Switcher
• OpenLayers Geofield
• Geofield
• Services
• Services Raw Response Formatter
• REST Server

Nuevo tipo de contenido

• Crear un nuevo tipo de contenido para contener las direcciones de las distintas sucursales
• Agregar un campo de tipo Dynamic address form. Lo llamaremos Address (field_address)
• Agregar otro campo, esta vez, de tipo Geofield que utilizará el widget Geocode from another field. Se llamará field_position

Configuración del campo field_position

• Seleccionar "Address" en el campo "Geocode from field"
• Seleccionar "Google geocoder" en el campo "Geocoder"
• Lo demás puede dejarse con los valores predefinidos

Una vez que el nuevo content type está listo, crear un poco de contenido de prueba, con direcciones reales

Drupal Vista

Ya se dispone de dos o tres contenidos cargados con sus respectivas direcciones. Ahora, crear una vista indicando:

• nombre: Locations
• tipo de contenido: Locations
• No seleccionar ni page ni block y continuar

Ahora, en la interfáz de Drupal Views:

• Agregar una vista de tipo "feed"
• Format: GeoJSON Feed
• Path: feeds/locations.json
• Agregar dos veces el campo "Position". Una para la latitud y otro para la longitud
• Asignar los campos a la configuración del formato GeoJSON Feed

La segunda vista

• Agregar una segunda vista de tipo "page"
• Cambiar el formato solo para esta vista a OpenLayers Views Map
• Save!

Ahora, no es seguro que sea extricatamente necesario, pero podría ser importante borrar la cache de Drupal: admin/config/development/performance

Configurar el nuevo mapa

Chusmeadno los mapas disponibles en admin/structure/openlayers/maps debería apacer uno con un nombre parecido a la vista creada anteriormente, en este caso es: Views Map: locations:page_1

Entrar a la configuración del mapa y configurar los siguientes parámetros:

• Layers
  • openlayers.layer.internal.Vector (layer_map_views_locations_page_1)
• Sources
  • openlayers.source.internal.GoogleMaps
  • openlayers.source.internal.Vector
• Component
  • Popup
    • Layer: layer_map_views_locations_page_1
    • Map center on mouse click
  • Zoom To Source Examples
    • Source: Views GeoJSON source: locations_feed_1
    • Zoom: 2
    • Max zoom: 0

Y aquí puede verse el resultado final: