• Choose a category
• All
• Classic-Fiction

Figure 6-13. GMap Views theme information

OpenLayers Theming

The simplest way to change the appearance of the pop up in OpenLayers is to use CSS. If you need to add or alter the markup, you will need to understand JavaScript theming.

The OpenLayers module uses Drupal’s JavaScript Theming method. This is not as powerful as Views theming, because we are limited to using JavaScript rather than PHP, but we can achieve similar results. The following code is what the OpenLayers module uses to theme pop ups:

/**

* Javascript Drupal Theming function for inside of Popups

*

* To override, define: Drupal.theme.openlayersPopup

*

* @param feature

* OpenLayers feature object.

* @return

* Formatted HTML.

*/

Drupal.theme.prototype.openlayersPopup = function(feature) {

var output = '';

if (feature.attributes.name) {

output += '

}

if (feature.attributes.description) {

output += '

}

return output;

}

To override this theme, you need to define a Drupal.theme.openlayersPopup() method in a JavaScript file in your module or theme. The Drupal JavaScript API handbook page explains how to do this (the documentation linked is for Drupal 6, but it will work for Drupal 7, too).

OpenLayers Pop Up Style

In OpenLayers Module, we saw how OpenLayers allows us to override images used in the map interface; the pop up can also be changed by following those instructions. The pop up is formed from a CSS Sprite image that is named cloud-popup-relative.png. Figure 6-14 shows the image that gets used in the CSS Sprite; the thin outlines are hard to see, but it has several lines that make up edges, corners, and arrows that all get put together to form the pop up.

Figure 6-14. Original OpenLayers pop up sprite

Figure 6-15 shows a new image to replace to replace the default OpenLayers sprite image. The sprite creates a hard-corned translucent dark pop up. This pop up will soon be the default for the OpenLayers module.

Figure 6-16 shows how this pop up looks on a map.

Figure 6-15. Replaced OpenLayers pop up sprite

Figure 6-16. Replaced OpenLayers pop up final example

Map Tiles

Map tiles are small images tiled together to create a map, usually the base layer for a web map. A tileset is a specific set of these images. What tileset you choose can have a drastic effect on the visual nature of your map.

Adding Base Layers to GMap

GMap can be extended to add base layers. This has to be done directly with code. We will not go into great detail here, but will give a short overview.

To add some layer options in the GMap configuration form, we will use hook_gmap() again (this function was previously explained in Add geolocation options to maps). In hook_gmap(), for the baselayers operation, return an array structured like the following:

$layers['Section Name']['layer_id'] = array(

'title' => t('Title of layer'),

'default' => TRUE,

'help' => t('Description of layer'),

);

Also, within hook_gmap(), in the pre_theme_map operation, use drupal_add_js() to include the JavaScript that will add the layer to the map.

Within the JavaScript file referenced in the previous step, include code similar to the following:

Drupal.gmap.addHandler('gmap',function(elem) {

var gmap = this;

obj.bind('bootstrap_options', function() {

var opts = gmap.opts;

var layers = gmap.vars.baselayers;

// Put layers here (??)

opts.mapTypes.push();

opts.mapTypeNames.push();

});

});

NOTE

The MapBox module has an implementation for adding base layers to GMap and will be the easiest way to do this, though it is still fairly undocumented. The MapBox module is discussed more at MapBox.

Adding Base Layers to OpenLayers

Adding base layers is one of the greatest strengths of the OpenLayers