Set size (width) of popups

The popup behavior packaged with OpenLayers currently passes null for the size parameter when it creates FramedCloud popups. Why this is baked into HTML is a combination of 1) bad design on the OpenLayers library side, which they've been working to correct since it was implemented 2) sometimes this width is automatically adjusted with javascript.

So, you can customize it in that behavior, clone the behavior, or use openlayers_plus for popups.

subscribe

Hi @garbo, you can technically override the original popup behavior by redefining the function, or you can clone it and make a new one.

Also, the popup behavior can be expanded to include parameters for the FramedCloud, like width.
http://dev.openlayers.org/releases/OpenLayers-2.9.1/doc/apidocs/files/Op...

Now a duplicate of: http://drupal.org/node/743306

Can anyone explain how to do this? (redefining the function, or clone it and make a new one) I've read everything I can find on the subject and can't figure this out. It looks like I need to include a custom .js file in a custom module, but what does the .js file need to include to enable me to control the width of the FramedCloud?

This issue seems different than the above-referenced one, which is about tooltips.

Thanks in advance.

It's possible to limit the width of pop-ups with css. As far as I recall without digging into my stylesheets, I limited the width of the elements inside the pop-up so that the balloon does not display too wide.

.openlayers-tooltip-description{
  width:300px;
  font-size:.9em;
}

I just used that and it works every time no problem

Yeah, I have been able to target the items within the popup and have it work fine.

Please re-open if there are other questions.

In my case, width autoresizes but height is not autoresizing to desired height. The content overflows beyond the background.

I have installed openlayers_plus drupal module.
But still I can't control Width and height of the pop up.

Can any one please tell me how to control width and height of openlayer pop up (#popup_contentDiv) ?

@kalidasan
You can control the popup size in your CSS using the class olPopup.

Example

.openlayers-views-map .olPopup {
  width:300px;
}

This could be in either your themes CSS or create a new OpenLayers map theme.

Your Theme's CSS

I've setup Omega sub-themes that use the various breakpoint CSS files to set different size Popups.

Creating a new OpenLayers Map Theme

1) You can duplicate the default theme at sites/all/modules/openlayers/themes/default_dark
2) Set the path to your new theme in the settings at admin/structure/openlayers/maps/list/MACHINE_NAME_OF_MAP/edit).

@greenSkunk
I have tried to control popup size by CSS but no luck.

Below link contains solution to do that. Here problem is, I'm adjusting width and height from core js (modules\contrib\openlayers\plugins\behaviors\openlayers_behavior_popup.js)

http://stackoverflow.com/questions/13522328/updating-resizing-popup-framed-cloud-in-openlayers

// Create FramedCloud popup.
        popup = new OpenLayers.Popup.FramedCloud(
          'popup',
          feature.geometry.getBounds().getCenterLonLat(),
          null,
          Drupal.theme('openlayersPopup', feature),
          null,
          true,
          function(evt) {
            while( map.popups.length ) {
              map.removePopup(map.popups[0]);
              }
            Drupal.openlayers.popup.popupSelect.unselect(selectedFeature);
          }
        );
popup.setSize(new OpenLayers.Size(250, 240)); - This line of changes is working fine.

But How can I control/ adjust size in my custom js?