Skip to content

Instantly share code, notes, and snippets.

@tmcw
Created February 16, 2010 20:20
Show Gist options
  • Save tmcw/305868 to your computer and use it in GitHub Desktop.
Save tmcw/305868 to your computer and use it in GitHub Desktop.
# The OpenLayers Module
## Basic Concept
The OpenLayers module makes the construction of OpenLayers maps easier by storing map *presets*, *layers*, *behaviors*, and *styles* as objects in Drupal, and combining them in any way possible. It also provides an easy user interface for configuring these various parts, and the option to export each to code or include them in a feature with the Features module.
## Minimal Example
The simplest useful OpenLayers map will display a node location on a map. To make this happen, you'll need to download and enable a few modules:
* In OpenLayers:
* openlayers
* openlayers_ui
* openlayers_views
* CTools
* In Views
* views
* views_ui
* In CCK
* cck
* number
Note that, for the sake of flexibility, the flow of the simplest OpenLayers map is:
A View with Style: OpenLayers Map -> OpenLayers Preset -> A View with Display: OpenLayers Data -> Node Data
Why does it take four steps?
* The first view is just a way to put the preset on a page, a block, in a listing, or anywhere else that views can put something. It doesn't contain much besides a reference to a map preset.
* The map preset is the biggest thing in the mix: it references layers, behaviors, and styles, and assembles them into a map. It also contains some configuration for the map, like its size.
* The OpenLayers Data view queries nodes, or data, or users, and knows what field is a latitude/longitude field or WKT. You'll never access the Data view directly, instead, presets call them and take their data when the Map view is called.
So, let's get started with the simplest implementation possible.
Let's add fields to the 'story' content type:
![Adding Longitude](http://img.skitch.com/20100208-qdknrr4f71thudyumtdcgxtms8.png)
And then add an example node:
![Adding a Node](http://img.skitch.com/20100208-gctp3u81gm8iu4kfggswr6cpsr.png)
Now let's make an OpenLayers Data view that will grab this node (and any other nodes that you make in the future).
Add the Title, Body, Latitude, and Longitude fields to this view, and then add an OpenLayers Data display to it. Choose 'OpenLayers Data' as the style plugin of that display.
Configure the style plugin to pull the correct latitude, longitude, title, and description fields:
![Selecting Fields on the Style Plugin](http://img.skitch.com/20100208-qw5ktgdskuctehgpchhf9sw5w3.png)
Now we've got everything we need to make a map preset, let's create a new one.
In the Layers & Styles tab of the preset editor, it's good to click 900913 as the 'map projection', because most common layers use this, so you'll be able to use MapBox, OSM, Google Maps, etc., tiles.
![Setting up layers](http://img.skitch.com/20100208-j4cpx4ajk4ywff4ddj8n1acdi5.png)
Now you're ready to actually display this map. Go back to the view you created, and add a new Page display to it.
![Setting up display view](http://img.skitch.com/20100208-p6kptbyraaadn22h6kw89uye3t.png)
Make sure to click 'override' before selecting 'OpenLayers Map' as the preset. Then click on the link next to 'Path', and add a path, like worldmap.
Go to that path, and you will have a map with your new point on it!
![Finished Map](http://img.skitch.com/20100208-8k4xg2gtx3rxb62rdfyweafnfe.png)
## Making Maps Zoom to a Point or Place
The best option for this is to use the zoomtolayer option. In many cases, you don't want to add point data or a bounding box directly to nodes (especially if many nodes will be in the same position). So, this functionality works with the Geo Taxonomy module. Simply create a new term in Geo Taxonomy, and there is an intuitive form to enter the centerpoint & bounding box.
Bounding Boxes are best if the things you are zooming to are not of uniform size. Countries vary tremendously.
So, create a new OpenLayers Data view with the nodes or taxonomy you want to display, And select Other: Bounding Box as the Data Source in the OpenLayers Data style plugin. The Geo Taxonomy module provides fields that match up with the top / left / right / bottom values that are required.
Then, add this new layer to your preset, and make sure to choose the 'Invisible' style for it, so that you don't have a big orange box around the desired country. Then add the 'Zoom To Layer' behavior to your preset, and select that view as the layer to zoom to.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment