This tutorial demonstrates some features of OpenLayers. I had been searching for a way to sort nodes by proximity and chose OpenLayers. Two other proximity modules that I am aware of are Location and Geo. I did learn how to use Location but it appears to require use of a zip code table in the database and required more data be input to locate an address than Geo and Openlayers which use an API. Geo may be a fine option but I could not figure out how to make it work, and OpenLayers has Views and Rules integration which may or may not exist with Geo.
This tutorial demonstrates the following features:
- Adding location to a node using OpenLayers and OpenLayers Geocoder
- Viewing a map within the node
- Viewing an aggregate map with node markers
- Install all the above modules using the normal method.
Setting up your content type:
- Create a new content type, eg. "Map Node". (you can also just do this by adding the fields below to an existing content type)
- Go to "Manage fields", and add a new field, called "OL Geo Info" or similar:
- OpenLayers WKT
- Widget type
- OpenLayers Geocoder
- Go to Display Fields, set both Teaser and Full Node to OpenLayers Map: Default Map
See screen images.
Setting up the data view
For this method, we require two views: the first one aggregates data into a format readable by OpenLayers, the second one displays the open layers map. First we set up the data aggregator view:
- Go to
admin/build/viewsand create a new Node View, Call it something useful, like "OpenLayers Map Data"
- Add a filter: Node Type (same as was just created, in this case "Map Node"), and any other filters you want to limit the nodes that are displayed.
- Make sure your view is set to "display all items".
- Add a new "Openlayers Data" display to the view.
- Set the Style to OpenLayers Data
- Add the WKT Value field, (technically, you can do this with any numerical field, but let's stick to the method...)
- (Optional) Add any other fields you might want to display on the map (ie. node title, body/teaser).
- Edit the OpenLayers Data Style options (click the cog icon), and set the map source to OpenLayers WKT, and select the appropriate field: WKT Value.
(Change this if you've used another method, and want to use eg. numerical lat/long fields)
OpenLayers - Map Preset
Next step is to configure the map.
- Go to Site Building -> OpenLayers -> Presets -> Add. Create a new map preset, with a memorable name, eg. "My Map"
- There are four tabs with options to set. The first two are pretty basic - set the options you want.
- On the layers and styles tab, you probably want to enable at least one background map (eg. OSM, google maps). For some of those maps you'll need an API key. To add an API key, go to
Site Building -> OpenLayers -> Layers -> API Keys.
- Enable your view-based OpenLayers overlay layer
- On the Behaviours tab, enable any behaviours that you want. You probably want at least "Navigation" and "PanZoom bar". If you want to display more info about your nodes than just their location, then you probably also want to enable the "Pop up" behaviour for your overlay layer.
View 2 - Map Display
This view will display the map that you have just configured.
- Create a new node type view, call it something like "OL Map Display"
- Add a Page display. Give it a path, say "my-map", and (optionally) a menu entry
- Set the style to OpenLayers Map. In the style settings, select your map (You didn't really call it "My Map", did you?)
If you now go to http://www.mysite.com/my-map you should now be able to see a map of all the nodes with appropriate geographical data. If you enabled the "Pop up" behaviour in your preset, you should also be able to click the map nodes, and get more info about them, including a link to their node page.
Due to the field display settings on the node, you should also have a map on each node page.
Apparently there are some problems with CSS loading in IE, especially for complex maps. If this happens to you, try the IE Unlimited CSS Loader module.