How to make custom behavior in Openlayers module with Drupal 7


Drupal with Openlayers

Couple of days back I was working with Openlayers in one of my project in D7. I got stuck with some functionality which forced me to make custom behavior which should work with Openlayer module in Drupal 7. I found Openlayers has very less documentation so I thought to write this blog. I will make some introduction about how to start with creating custom behavior which work with Openlayers. I am not focusing on some particular functionality but on giving base to your functionality.

I am assuming you know how to configure Openlayers and display map in Drupal 7.  So , here’s the situation you faced that you need to achieve some functionality which Openlayers don’t provide and then you have to create some module which should work with Openlayers.

Next step is to make a custom module . Go to sites/all/modules/ and create your module directory containing files

  • module_name.info
  • module_name.module

Also create some more directory in your module directory like

  • include — [It will contain all .inc files]
  • js — [javascript files ]
  • css — [css files ]

Now we will write some things in your modules .info file.

name = Module name
description = Allow you to draw polygon on map and it will search locations on map based on polygon draw.
core = 7.x
package = “Openlayers”
dependencies[] = openlayers

files[] = module_name.module
files[] = include/openlayers_behavior.inc

Step 2: We will add some code in modulename.module file.

<?php

// implementing hook_init()

function modulename_init(){
        

// here we are adding our css and javascript file
         drupal_add_js(drupal_get_path(‘module’, ‘open_draw’) .
      ‘/js/openlayers_behavior_drawfeatures.js’);
    drupal_add_css(drupal_get_path(‘module’, ‘open_draw’)  .
      ‘/css/openlayers_behavior_drawfeatures.css’);
 }
        

// implementing hook_openlayers_behaviors()
function modulename_openlayers_behaviors() {
  return array(
         ‘openlayers_behavior_region_click’ => array(   
    ‘title’ => t(‘Polygon search’),
    ‘description’ => t(‘It will allow search on maps when user will draw polygon on map’),
    ‘type’ => ‘layer’,
    ‘path’ => drupal_get_path(‘module’, ‘open_draw’) . ‘/include’,
    ‘behavior’ => array(
        ‘file’ => ‘openlayers_behavior.inc’,
      ‘class’ => ‘openlayers_behavior_drawfeatures’,
      ‘parent’ => ‘openlayers_behavior’,
    ),
   ),
  );
}

Step 3: We will make openlayers_behavior.inc in our include directory and add some behavior in it.

<?php

/**
 * behavior
 */
class openlayers_behavior extends openlayers_behavior {
  /**
   * Provide initial values for options.
   */
  function options_init() {
    return array(
      ‘element_id’ => ”,
      ‘feature_types’ => array(),
      ‘feature_limit’ => 0,
    );
  }

  function options_form($defaults = array()) {
    $features = array(
      ‘polygon’ => t(‘Polygon’),
    );

    return array(
      ‘feature_types’ => array(
        ‘#title’ => t(‘Available Features’),
        ‘#type’ => ‘checkboxes’,
        ‘#options’ => $features,
        ‘#description’ => t(‘Select what features are available to draw.’),
        ‘#default_value’ => isset($defaults[‘feature_types’]) ? $defaults[‘feature_types’] : array(),
      ),
    );
     }
}

That’s it now just enable your module and you can see your behavior in behavior section of Openlayers map settings.

Of course now our behavior are not doing anything we just able to see our behavior’s settings in Openlayers map settings. In order to make behavior functional now you have to just add javascript or Jquery in you /js directory and css in /css directory.

Building maps using Openlayers in Drupal 7


Implementing maps in Drupal7 is not easy as it was in Drupal6 using Gmap but Gmap module is not developed for Drupal7. I was working with maps in Drupal7 and personally I felt that there are less documentation on maps in Drupal7. So, I thought to write this blog which can probably help my readers in implementation of maps. Related to implementation luckily we have Openlayers module in Drupal7.

Openlayers with maps, what sounds like the small task of showing some nodes on a map with the following collection of modules and dependencies:

  • Geofield : which hold the geo coordinates in our content
  • Address field: to hold postal address in our content
  • Geocoder: to convert address data into geographical data
  • geoPHP: Geocoder dependency
  • Openlayers

With some additional dependencies

  • Ctools
  • Views 3

Step 1: First you have to install above module and enable them included with Openlayers and its sub modules

  • openlayers_ui
  • openlayers_views

Step 2: Create content and add following fields

  • Addressfield : Postal address , zipcode , city
  • Location : field_type – Geofield , Widget – Geocode from another field

Selection_012

Address field will store your postal address of your business and geofield will take those address in location field and fetch geo coordinates of all businesses.

Selection_013

Step 3: Creating a Map

Openlayers come with many configurable option. I will describe basic options which you need for creating map. We need a base layer which is our map with some additional behaviors and styles on it. Secondly, Openlayer overlay which we will setup using views later.

Getting started with creating map

Go to structures > Openlayers > maps. Click add map and fill all details. Your map details should look like below.

Selection_014

Configure layer & style for your map.

Selection_015

Configure some behavior for map.

Selection_017

Selection_019

Now we are done with creating map which we will use for displaying data on it later.

Step 4: Creating Openlayer Overlay or you can say map view.

We need two things

  • Openlayer overlay to display data on map
  • Page or block to display map

Go to structures > Views > add new view .

Values for view

  • Show : Content
  • of type : Business information
  • create a page : Checked

Click on continue & edit. Here we will change some things in our view.

Add these values to your view

  • Format : Map > business map > Apply(all display)

Selection_020

  • Add Fields : 1) Title 2) Location . You should also set path of you page.

Now we will change some settings of our Openlayers overlay. Click on settings side by Format Openlayers Data Overlay | Settings.

  • Map data sources > WKT
  • WKT field > content : Location
  • Title Field > content : Title

Selection_021

What just we did ?

We created our map and added overlay for our data to display on map using views.

Last Step

We will add this Overlay to our map which we created earlier . Go to Structures > Openlayers > Maps > business map > layers & style . You probably see your view their in list . Just enable them so this map will use overlay for displaying content.

Selection_023

That’s it at this point we had a page available containing map with overlays displaying data when you hover them.

Selection_024

Thanks to Sonali , Anirudha , Chetan for reading draft of this.