Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

FeaturePopups wraps the management of popups and SelectFeature on OpenLayers.

branch: gh-pages
README.md

Control for OpenLayers to manage popups of features

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

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

Operation:

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

Example:

    ...
    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 attributes.name on features, and so on.
        }
    });
    map.addControl(fpControl);
    ...

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

Examples:

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:

Features:

  • 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.

Documentation:

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 v0.9.0 or higer works correctly with releases from 2.11 to 2.13.1 and whith development version. This also includes patches for OL grouped in lib/patches_OL-popup-autosize.js.

Something went wrong with that request. Please try again.