Using OpenLayers and GeoField to display maps in Drupal (Part 1)
Download and install all these modules:
- OpenLayers (we've used 7.x-2.x-dev since 7.x-2.0-beta1 gave some warnings): OpenLayers, Openlayers UI, OpenLayers Views
display any content with geo data in a map
- Address Field: Address Field
stores international postal addresses
- GeoField: GeoField
stores geographic data in Drupal
- GeoPHP: geoPHP (needed by GeoField)
Provides integration with the geoPHP library: https://github.com/phayes/geoPHP
- GeoCoder: Geocoder
geocode Addressfield addresses into Geofield points for display on Openlayers Maps
Configure a map
First we'll need to configure a map, so we have control over how the map is displayed.
Go to Structure > OpenLayers > Maps (admin/structure/openlayers/maps) and add a new map.
Use the Basics settings as shown:
You can change the width/height settings to match your layout.
Keep the default Center & Bounds settings.
Use the Layers & Styles settings as shown:
You'll need to save now before changing the Behaviours settings.
For the Behaviors settings, deselect all except:
- Navigation (keep subitems deselected)
- Zoom Control
- Zoom to Layer (use geofield_formatter and Point zoom level: 12 - 1)
Use a number higher than 12 to zoom further in
These are our basic behaviours settings, you can of course change these to your personal needs.
Add a map to a contenttype
- Add a 'Postal address' field to content type
- Add a 'Geofield' with a 'Geocode from another field' widget
- Link this Geofield to the Postal address field
- Use the Google Geocoder as the geocoder
When you'll enter an address in the Address field, the GeoCoder module will use the Google Geocoder handler to look up the address and convert this into GeoField data.
- Format: OpenLayers
- OpenLayers preset: Node Map (this is the map configuration created above)
When you now create a node, you'll get a map.
You might get a Google Map Data overlay.
This is discussed here: http://drupal.org/node/1540534
In Part 2, we'll show how to display multiple locations on one map using views.