Openlayers

Openlayers behavior

I recently worked on a site where they had a map of their stores which enabled users to search for their local store. Each store had a popup if you clicked on the icon with the store name and a link to the store page, where you could find opening hours and additional information about the perticular store.

The customer wanted to change this so clicking on the store icon would send the user directly to the store page instead of opening a popup. The map was implemented using openlayers and there wasn't an exsiting behavior for this, which gave me the oppotunity to try and make a new open layers behavior.

First of all you need to create a module or modify an existing and you would properly want to add a dependency on openlayers.

Next you need to add hook_openlayers_behaviors()<(p>

  1. function my_module_openlayers_behaviors() {
  2.   return array(
  3.     'openlayers_behavior_my_behavior' => array(
  4.       'title' => t('My Behavior'),
  5.       'description' => t('On click go to store page'),
  6.       'type' => 'layer',
  7.       'path' => drupal_get_path('module', 'my_module') . '/includes/behaviors',
  8.       'file' => 'openlayers_behavior_my_behavior.inc',
  9.       'behavior' => array(
  10.         'class' => 'openlayers_behavior_my_behavior',
  11.         'parent' => 'openlayers_behavior',
  12.       ),
  13.     ),
  14.   );
  15. }

This will notify openlayers that you have a new behavior in your includes/behaviors folder.

In the openlayers_behavior_my_behavior.inc file you then declase a php class which describes how your behavior will work. In this class you have a number of options to acts on different stages of your behaviors life, but for this task we don't need to do much.

  1. class openlayers_behavior_mybehavior extends openlayers_behavior {}
  2.   function options_init() {
  3.     return array();
  4.   }
  5.  
  6.   function options_form($defaults) {
  7.     return array();
  8.   }
  9.  
  10.   function render(&$map) {
  11.     drupal_add_js(drupal_get_path('module', 'mybehavior') . '/includes/behaviors/js/openlayers_behavior_my_behavior.js');
  12.     return $this->options;
  13.   }
  14. }

The options_init function provides initial values for the options_form function. The options_form allows you to provide a number of settings for your behavior. Many behaviors will need this function but it is not required.

The render function is where the magic happens and it is a required function for the behavior. Here you can return any custom markup for your behavior but our case only needs to provide a javascript file.

If you would like to see some examples of the behavior class, checkout the default behaviors provided with the openlayers module. Especially the popup behavior I found to be a good starting point.

Next we have our javascript.

  1. Drupal.theme.prototype.openlayersLinkToNode = function(feature) {
  2.   var output = '';
  3.   return output;
  4. };
  5.  
  6. // Make sure the namespace exists
  7. Drupal.openlayers.linkToNode = Drupal.openlayers.linkToNode || {};
  8.  
  9. /**
  10.  * OpenLayers go to node Behavior
  11.  */
  12. Drupal.openlayers.addBehavior('openlayers_behavior_link_to_node', function (data, options) {
  13.   var map = data.openlayers;
  14.   var layers = [];
  15.   var selectedFeature;
  16.  
  17.   // For backwards compatiability, if layers is not
  18.   // defined, then include all vector layers
  19.   if (typeof options.layers == 'undefined' || options.layers.length == 0) {
  20.     layers = map.getLayersByClass('OpenLayers.Layer.Vector');
  21.   }
  22.   else {
  23.     for (var i in options.layers) {
  24.       var selectedLayer = map.getLayersBy('drupalID', options.layers[i]);
  25.       if (typeof selectedLayer[0] != 'undefined') {
  26.         layers.push(selectedLayer[0]);
  27.       }
  28.     }
  29.   }
  30.  
  31.   // if only 1 layer exists, do not add as an array.  Kind of a
  32.   // hack, see https://drupal.org/node/1393460
  33.   if (layers.length == 1) {
  34.     layers = layers[0];
  35.   }
  36.  
  37.   var linkToNodeSelect = new OpenLayers.Control.SelectFeature(layers, {
  38.       onSelect: function(feature) {
  39.         var nid = feature.attributes.nid;
  40.         window.location.href = 'node/' + nid;
  41.       },
  42.     }
  43.   );
  44.  
  45.   map.addControl(linkToNodeSelect);
  46.   linkToNodeSelect.activate();
  47.   Drupal.openlayers.linkToNode.linkToNodeSelect = linkToNodeSelect;
  48. });

Most of this javascript is there to ensure that the functionality works.

The important part of this script is the OpenLayers.Control.SelectFeature(layers, function) where we add our select functionality

There we go, I hope it helps you on your way to making the openlayers behaviors of your dreams. :)