Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Drupal Openlayers - Display your content on a map

Parent Feed: 
One of the classical challenges when working with maps is - How to set a map with two content layers, each with it's own markers color ( with no code involved ). We'll use the OpenLayers module that bringing the OpenLayers JavaScript library into Drupal. Although it's most convenient to work with, settings are not always trivial and can be a bit confusing at the beginning. We'll try to go over the settings process and pass through all obstacles. Drupal core - Drupal 6.x Modules – cck.module, views.module, openlayers.module ###CCK settings Each content that needs to be shown on a map, should contain the relevant geographic data, so first we need to add the Latitude/Longitude field for each content type which is to be displayed on our map. We are using the **Openlayers WKT (Well Known Text)** field which comes with the Openlayers CCK module. Other geo-data input formats, like the new geo.module module can be used as well). In the settings page select the "Input Map Preset" (see how to create and set preset in the Openlayers settings section below). The map preset will be displayed in the node edit form, to help us assign our points, lines and polygons visually. *Figure 1 - Node edit form - mark your feature straight on the map or by input WKT markup* ###Views settings Our map is built out of (at least) two displays of views. The first one is the data display named "*OpenLayers Data*". Each OpenLayers Data display will create a layer for our map. We can add as many layers as we need. Under the *style settings*, select the "*OpenLayers Data*" style (it's the only one there). In the settings under the *Map Data Sources* select *Openlayers WKT* (this is the data type we use). Select the WKT field we added in the CCK settings section (remember to add it first in the Fields box. The WKT field is the only required filed, although we probably want to add a title and a description as well). Any additional fields added under the Fields box, will be able to be selected under the other drop downs. If we select them, the will show on the popup/tooltip on the map. Remember to add filters as needed. *Figure 2 - The view form - OpenLayers Data display with OpenLayers Data style* The second type of display is the map display. We'll add a new page display and select the "*OpenLayers Map*" style under the style settings box. Select the map preset under *Style Settings* (we'll see how to set it up in the Openlayers settings section). Next, we need to set the page URL and menu item. ###Openlayers Settings **Layers** - In this page, in addition to the external layers that are included in the module, we can now see the layers we defined as a data display in our view. **Styles** – are referring to features (points/lines/polygons) on the map. Under *Edit* we can select color, shape, radius, image (optional), etc. Note that a style can be assigned for the features (again - points/lines/polygons) of each layer. **Presets** – Preset is define for each map-display, and include all the settings for the map. We now have at least two maps. The first one we defined as CCK field to assign features on the map, which will appear in the edit form (to assign the preset to the field use the field's setting page). The second one is the main map that we defined in the views map-page display. We have assigned that preset in the views map-page display in the style settings box. This means that we need at least two presets, one for each map. First, we'll set the general information for the name, title description, and dimensions. Then, under the Center & Bounds, we'll figure the initial focus and zoom for the map by simply setting it visually. Under Behaviors, we'll select the ones we would like to add to our map. Zoom bar, layer switcher, popup, fullscreen button, permalink, etc. Finally, under *Layers & Styles settings*, leave the default settings – 900913 for map projection and 4326 for display projection. This should be fine for most cases. Under Base Layers, select the background maps images that serve you the best. Under the Overlay Layers we'll see the data layers that we created in our view. Here you can enable, activate and assign the styles to the features of the layer. *Figure 3 - The preset form - Select the map and and the layers will be available for display.* That's it, here is our map with two content layers, each with different markers color. *Figure 4 - The map.*
Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web