Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
FeaturePopups wraps the management of popups and SelectFeature on OpenLayers.
JavaScript CSS Other
tree: 0d6013d7c5

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

Proposal for a new control for OpenLayers: FeaturePopups

FeaturePopups wraps the management of popups and SelectFeature control of OpenLayers.

Please, open a issue if you have questions or problems using this control.


Assign templates to the layers is the only requirement to display popups.


    var myLayer = new OpenLayers.Layer.Vector("My layer", {...}); 
    var fpControl = new OpenLayers.Control.FeaturePopups();
    fpControl.addLayer(mylayer, {
        templates: {
            single: "<h2>${.name}</h2>${.description}"
            // .name is on features, and so on.

The control shows two types of selection popups: single feature or features list (with two or more features). Into a list of features can be seen each feature in a single popup.

It also supports hover popups (both kinds single feature and features list) simultaneously with the selection


Using the control and templates to display popups:

Grids to show feature attributes using FeaturePopups:

Adaptation of OpenLayers examples to use FeaturePopups:

Adaptation of GeoExt examples to use FeaturePopups and GeoExt popups:


  • Prepare the contents of the popup using templates.
    • Templates as strings or functions.
    • Allows internationalization of the labels in templates.
  • Show popups by selection (click) or hover from multiple vector layers.
  • Multiple selection using box and show list of features selected into an popup.
  • Proper popups on clustered features (OpenLayers.Strategy.Cluster)
  • Safe selection: Features remain selected even after zooming or moving the map (using Cluster and BBOX strategies)
  • Safe selection also allows that clickout not fails after a zoom (using Cluster or BBOX strategies)
  • Triggers appropriate events when changing the selection or a layer features (to prevent flickering or other nuisances, events are triggered only if there has been an effective change)
  • By default:
    • Multi selection is enabled,
    • hover popups follows the cursor (to prevent flickering)
    • select popups are shown where the cursor is pressed.
  • Ability to customize the operation of the control.
  • Allow simultaneously display "list" and "itemList" popups without much overlap.


Adjustments on OL popups for proper calculation of the autosize

Have been proposed to OpenLayers team a set of patches to fix some autosize issues. These patches are grouped all in a code to can use these patches also in releases 2.11 and 2.12, see: lib/patches_OL-popup-autosize.js

The problems were fixed:

Patches to fix other problems not yet proposed to OL, but applied in this code:

Compatibility with OpenLayers releases:

The FeaturePopups control works correctly with release 2.11 or higher including the development version. This also includes patches for OL grouped in lib/patches_OL-popup-autosize.js.

Compatibility notes (with previous version "1-FeaturePopups"):

  • The layers can no longer be added implicitly, it is necessary to use the addLayer method or layers option of the constructor.
  • The templates are grouped into the object "templates" in options of addLayer method.
  • The scope of events of FeaturePopups.Popup and FeaturePopups.Layer has changed during development, now if you want to access to the control should be used evt.object.control instead of evt.object.
Something went wrong with that request. Please try again.