Last updated June 15, 2012. Created on July 4, 2010.
Edited by ifrik, zzolo. Log in to edit this page.

The following theming functions are available in the OpenLayers 2.x module:


These themes are on the JS side.


This is the top level theming function for popups. It creates basic wrappers for the title and description in the popup. If you need to theme the output of the title and description variables, please see the PHP functions and the default available Views theme functions. If you wish to change how the popup bubble looks, then look at implementing a new popup behavior.


This is the same sort of thing as Drupal.theme.openlayersPopup(feature) but for the tooltip behavior.

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


timos’s picture

What's the best pratice method to overide the Drupal.theme.openlayersPopup(feature) ? I know how overide php theme function but not js theme function ?

Tim Baret

timos’s picture

Ok, i didn't look for that too much time. So after few minutes, i found out that to overide this type of function, i have just to write a js file with my own function Drupal.theme.openlayersPopup (feature) which overide the standard one who is in the openlayers_behavior_popup.js file who's in fact Drupal.theme.prototype.openlayersPopup (feature).

I found the information on a post about how overide js theme function in the relationship module.

Is this trick a good pratice ?


Tim Baret

kalidasan’s picture

Does anybody know how to alter width and height of the popup in custom js?


tatewaky’s picture

It is not enough just overwriting the theme, if you want to add more data you have to printed from the object feature.attributes, this is because the current theme is printing name and description only. so it would look like this:

Drupal.theme.prototype.openlayersTooltip = function(feature) {
  var output = '';

  if ( {
    output += '<div class="openlayers-popup openlayers-tooltip-name">' + + '</div>';

  if (feature.attributes.description) {
    output += '<div class="openlayers-popup openlayers-tooltip-description">' + feature.attributes.description + '</div>';

  if (feature.attributes.extra_field) {
    output += '<div class="openlayers-popup openlayers-tooltip-extra_field">' + feature.attributes.extra_field + '</div>';

  return output;

Jason Acuna

timos’s picture


Thanks for more precisions,

It's a long time i've not digged in openlayers but when i read you, i didn't find out how add extra data to feature object and i wondered about that.

Any idea about that ?

Tim Baret

tatewaky’s picture

i dont understand what you mean that when you read me?

Jason Acuna

timos’s picture

Sorry, i'm very confused about my dirty english

It's a french expression that i litteraly translate and it seems have no sence in english. It just means "when i read your answer"

Actually i just wanted to say i don't know how add extra data to the feature object.


Tim Baret

wemmies’s picture

After some other problems I had to work out, I figured that solution could work for openlayers popup as well, so here it is:

If you want to add more fields to your popup, you can also use the Views route. Say you want to have Field A, B and C as a description. In views ad thos fields to your OpenLayersDataOverlay.

Now set fields A and B to 'Exclude from display'

In Field C you set Rewrite Results to 'Rewrite the output of this field' and put your HTML there along with the replacement paterns [field_a], [field_b] and [field_c].

In your Format settings select Field C as your Description Field.

Save it all and check the result.

antoniotorres’s picture

Works perfectly.

wemmies’s picture

Deleting automatic double post

wemmies’s picture

Deleting automatic double post

rond49’s picture

Using the current version of openlayers (2.11), the popups come up with a dark grey (almost black) background, and the title text is dark blue, which is almost unreadable.

How do I change the title font color and the background color?

I tried to add the following to openlayers style.css, but it did not affect the style:

.openlayers-popup {
  color: #f8f800;
.openlayers-tooltip-name {
  color: #f8f800;

It's clear I have no knowledge of theming. Can someone help?

srsbl’s picture

To change brackground color try editing the image at sites/all/modules/openlayers/themes/default_dark/img/cloud-popup-relative.png

dlshannon’s picture

I changed the color of cloud-popup-relative.png from dark gray to white. And, yet, those popups are STILL dark gray. Yes, I flushed the cache...twice. How can it be this difficult to change the background color of those popups? Whoever decided to make the background image gray while keeping the text blue (and thus illegible) must believe that changing the colors would be simple. And, yet, it's puzzling a lot of people. I'm starting to believe that this is some kind of Drupal hazing.

Update: It turns out that I needed to clear my BROWSER's cache after changing the cloud-popup-relative.png file. Clearing the site cache didn't do the trick. That brings up another issue - do we have any control over what is in our user's cache? Can we prevent these objects from caching so that we don't have to worry about old objects on their systems messing up their pages?

ace11’s picture

Do not edit original cloud-popup-relative.png!

I think the best way to do it is to take a copy out of default_dark -folder and place it example in your own theme folder and rename the default_dark folder: sites/all/themes/FOOTHEME/openlayertheme/

Then go to your Openlayer map settings (admin/structure/openlayers/maps) and under Basic you can define path for your own custom Openlayer theme. So in this case it should be: sites/all/themes/FOOTHEME/openlayertheme/

Now you can edit all content of your own openlayertheme folder - and no need to worry when updateing Openlayer module.

wemmies’s picture

If the title is a link, it should be handled accordingly in your css. You could add a css class to your title text in views