Variable Styling

The following describes how to get variable styling into your OpenLayers 1.x map. Please note that there is not any way to do variable styling without coding. Please note that some of these methods have examples in the OpenLayers Test module.

Simple Attribute Replacements

The OpenLayers library has a neat, simple way to replace styles with attribute values in each feature. First define your styles with the replacement syntax:

$map = array(
  // ...various map properties
  'styles' => array(
    'default' => array(
      'pointRadius' => '${radius}',
      'fillColor' => '${color}',
      'strokeColor' => '${color}',
      'strokeWidth' => 4,
      'fillOpacity' => 0.95,
    ),
  ),
  // ..other map properties
);

Then when you add the features to your vector layer, you simply define the attributes, similar to the following:

$colors = array('red', 'blue', 'yellow', 'purple');
$map = array(
  // ...various map properties
  'layers' => array(
    'style_vector' => array(
      'id' => 'style_vector',
      'type' => 'Vector',
      'name' => t('Style Test Vector'),
      'feature_x' => array(
        'wkt' => 'POINT(4 5)',
        'projection' => '4326',
        'attributes' => array(
          'radius' => rand(7, 12),
          'color' => $colors[rand(0, count($colors) - 1)],
        ),
      ),
    ),
  ),
  // ...other map properties
);

Note that in each OpenLayers View, field values are put in the attributes of each feature.

Context Callbacks

The OpenLayers library allows you to define a set of callbacks that will be called when features are rendered. This is a good method to save code, but these methods get called every time a feature is rendered (even when zooming).

On the PHP map array side, define a callback and the correct style syntax, like the following:

$map = array(
  // ...various map properties
  'styles' => array(
    'default' => array(
      'pointRadius' => '${getRadius}',
      'fillColor' => '${getColor}',
      'strokeColor' => '${getColor}',
      'strokeWidth' => 1,
      'fillOpacity' => 0.95,
    ),
  ),
  'styleContextCallback' => 'OLTest.Testing.StyleContextCallback',
  // ...other map properties
);

Then, on the JS side, create the callback like the following. Please note that there is no built in way to include this JS.

/**
 * Test Callback for Style Context
 */
OLTest.Testing.StyleContextCallback = function(mapid, layerid, render_intent) {
  return {
    'getColor': function(feature) {
      var colors = ["red", "green", "blue"];
      return colors[Math.floor(Math.random() * 4)];
    },
    'getRadius': function(feature) {
      return Math.floor(Math.random() * 8) + 4;
    }
  };
}

Note that the Views OpenLayers plugin allows you to define this for each view.

Map Theme Override

This is not the best way to do variable styling, but you can override how styles are defined by overriding the following theme function:

/**
 * Theme function to be able to override styles
 */
function theme_openlayers_vector_styles($styles = array(), $map = array()) {
  // Default is to just send the processed styles back
  return $styles;
}

Views Theme Override

The OpenLayers Views module passes each feature through a theme function to allow for variable theming. You can override the following function and use the views data to determine the styling for the feature:

/**
 * Theme function for openlayers_views_feature_style
 */
function theme_openlayers_views_feature_style($view = NULL, $row = NULL, $group = NULL) {
  $output = array();

  // Here is where styles based on the view or row can be created
  return $output;
}

Views Style Snippet

There is the ability to put in PHP code into the OpenLayers Views plugins options that can be used to style features. The following is an example:

// Use $fields to get field data
// Use $record to get specific data on the record being put together
return array(
  'fillColor' => '#445566',
  // other style property
);