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

Javascript

These themes are on the JS side.

Drupal.theme.openlayersPopup(feature)

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.

Drupal.theme.openlayersTooltip(feature)

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

Comments

timos’s picture

timos commented

Hi
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 ?
Thanks

Tim Baret

timos’s picture

timos commented

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 ?

Thanks.

Tim Baret

kalidasan’s picture

kalidasan commented

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

FYI:
https://www.drupal.org/node/888916#comment-9031295

tatewaky’s picture

tatewaky commented

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 (feature.attributes.name) {
    output += '<div class="openlayers-popup openlayers-tooltip-name">' + feature.attributes.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

timos commented

Hi,

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

tatewaky commented

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

--
Jason Acuna

timos’s picture

timos commented

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.

Cheers

Tim Baret

wemmies’s picture

wemmies commented

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

antoniotorres commented

Works perfectly.

wemmies’s picture

wemmies commented

Deleting automatic double post

wemmies’s picture

wemmies commented

Deleting automatic double post

rond49’s picture

rond49 commented

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

srsbl commented

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

dlshannon’s picture

dlshannon commented

srsbl,
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

ace11 commented

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

wemmies commented

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