I'm using new OpenLayers.Control.DrawFeature to draw polygons and OpenLayers.Control.SelectFeature to select a specific polygon. I'm drawing one polgon and then a smaller polygon on top of the first one.

PolyA is a large polygon(50 x 50)
PolyB is a smaller polgon (10 x 10) drawn within (on top of) PolyA

Initially I can select and unselect PolyB correctly. However, once I have selected and unselected PolyA, PolyB is now hidden behind it and can no longer be selected.

Why is that and what can I do to resolve it?

select code (straightforward)

select  = new OpenLayers.Control.SelectFeature(layer,
          highlightOnly: true,  
          clickout: true, toggle: true,
          onSelect: function(feature) {

          //do stuff    
  • 1
    show some code so we know how you are using the OpenLayers.Control.SelectFeature – CaptDragon May 22 '12 at 19:16
  • 1
    Show the "do stuff" code. Especially, are you changing the x, y or z-index of the selected item? – Vadim Aug 21 '12 at 10:28

One option is to enable zIndexing on vector layer's rendererOptions and assign 'graphicZIndex' to each feature. Make sure that upper features has smaller 'graphicZIndex' values. Following are some sample code:

var vector = new OpenLayers.Layer.Vector("vector layer", {
    styleMap: your_style_map,
    rendererOptions: {zIndexing: true}

//Set the featureAdded function to the OpenLayers.Control.DrawFeature, where
//you can assign the graphicZIndex to each feature you add on layer.
var drawControl = new OpenLayers.Control.DrawFeature(vector, {
    ... // other options
    featureAdded: featureAdded

var current_z_index = 1000; // global variable to store the new feature's z index

// featureAdded function
function featureAdded(feature) {
    var default_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style.default);
    var feature_style = OpenLayers.Util.extend(default_style, {graphicZIndex: current_z_index});
    feature.style = feature_style; // With these lines, we can make sure the features added later will always on top

you can achieve this with selecting multiple features at same time. after this you need to do is that put all features under for loop.

var info = []

select = new OpenLayers.Control.SelectFeature(layer, {
box: true,
multiple: true,
onSelect: function(f){
for (var a = 0; a < f.length; a++){
info.push(f[a].attributes.featureName) // or anything you want

beside this:

layer.selectedFeatures returns you as a result of all selected features..

  • Thanks but that doesn't address the issue. The issue is why a selected-then-unselected feature(polygon) remains in front of a feature it was originally behind. – pov May 23 '12 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.