Last updated 16 June 2012. Created on 27 March 2010.
Edited by ifrik, naught101, florisla, zzolo. Log in to edit this page.

This page describes how to do variable styling in OpenLayers 2.x module.

To actually create the styles, check out at

Attribute Replacement

The OpenLayers library allows you to use a specific syntax, ${variable_name}, to easily style a feature based on its attributes. The most direct use of this is with the OpenLayers Views Display plugin.

  1. Setup your Views Display according to Getting Started with OpenLayers.
  2. Add fields to your view that you want to use for styling (the 'attributes'). These attributes may be used as radius or color, or even icon URL later on.
  3. The values of these attributes are included in the OpenLayers Data view. This view produces in an Overlay layer that you can add to any preset.
  4. You need to reference each attribute by its machine-readable ID. Lookup the ID trough the Attributes and Styling information in the style options setings of the map data view. They have names like field_myfield_value.
  5. In the style associated with your preset, you can apply your attribute as a style like this:
    • pointRadius: ${field_radius_value}
    • fillColor: ${field_color_value}
  6. Finally, create your map with your Views layer and assign it your new style; then when your map is rendered, OpenLayers will replace these values per feature.

The above is the most basic way to add variable styling to a map. However, it has the disadvantage that you need to include layout information directly in your views.

There are other, slightly more complex ways to add variable styling to a map:

  • Calculate a custom attribute on the fly with a PHP code snippet using Views custom field. This method is fairly easy, but it's not recommended because of performance issues.
  • Write a style plugin by implementing hook_openlayers_styles(). See the documentation on API: Styles.
  • Create a behavior that applies openlayers style rules to a layer. For example, the standard 'scalepoints' behavior works like this. (note: more info is necessary)

More info and pointers can be found in these issues:

Looking for support? Visit the forums, or join #drupal-support in IRC.


tmcw’s picture

Please post on the OpenLayers Issue queue with any bug reports and support requests. We cannot provide support on Book Pages.