4

I am having trouble with SelectFeature control with hover = true and highlightOnly = true.

There are two adjacent polygons on the same layer, one on top of the other. There's also a SelectFeature control that highlights a polygon on hover. Layer has styleMap with 'default' and 'select' intents. Select intent has a higher graphicZIndex. But it's ignored - whenever I hover upper polygon its lower border (the one that's common with the lower polygon) is rendered under the lower polygon.

If you go to http://jsfiddle.net/vLpt6/12/ you'll see two adjacent polygons - hover the upper polygon and its lower border will be rendered under the lower polygon as if graphicZIndex had no effect.

Here's the HTML code:

<div id="map" style="width: 600px; height: 480px; border: 1px solid black"></div>

And javascript code:

var map = new OpenLayers.Map({
    div: 'map',
    allOverlays: true,
    controls: [],
    fractionalZoom: true
});    

var layer = new OpenLayers.Layer.Vector('Layer');
map.addLayer(layer);

layer.rendererOptions = { zIndexing: true };
layer.styleMap = new OpenLayers.StyleMap({
    'default': {
        fillColor: '#a9a8a7',
        strokeColor: '#ffffff',
        strokeWidth: 1,
        graphicZIndex: 10
    },
    'select': {
        fillColor: '#a9a8a7',
        strokeColor: '#5d7cc4',
        strokeWidth: 5,
        cursor: 'pointer',
        graphicZIndex: 100
    }
});


var format = new OpenLayers.Format.WKT();
var features = [
    format.read('POLYGON((0 0, 100 0, 100 50, 0 50, 0 0))'),
    format.read('POLYGON((0 0, 0 -50, 100 -50, 100 0, 0 0))')
];
layer.addFeatures(features);

map.zoomToExtent(layer.getDataExtent());


var hoverControl = new OpenLayers.Control.SelectFeature(
    [layer],
    {
        hover: true,
        highlightOnly: true
    }
);
map.addControl(hoverControl);
hoverControl.activate();

What should I correct so that graphicsZIndex would have effect?map

1 Answer 1

6
+100

This seems to work: Your modified DEMO

All i did was move your options in to the layer's constructor like this:

var layer = new OpenLayers.Layer.Vector('Layer', {
    rendererOptions: { zIndexing: true }, 
    styleMap: new OpenLayers.StyleMap({
        'default': {
            fillColor: '#a9a8a7',
            strokeColor: '#ffffff',
            strokeWidth: 1,
            graphicZIndex: 10
        },
        'select': {
            fillColor: '#a9a8a7',
            strokeColor: '#5d7cc4',
            strokeWidth: 5,
            cursor: 'pointer',
            graphicZIndex: 100
        }
    })
});
3
  • Nice! but a bit enigmatic to me ;-) Do you have any idea of such behavior?
    – simo
    Commented Jan 30, 2012 at 14:50
  • @simo : I really wish i did. It must have something to do with the OpenLayers.Layer.Vector constructor calling its prototype .apply(this, arguments). But the style's got a applied so not sure why :/
    – CaptDragon
    Commented Jan 30, 2012 at 15:15
  • Finally! Thank you, capdragon! Actually, it's enough to move rendererOptions to the constructor only, styleMap can be left where it is. I can't award the bounty for the next 17 hours but it'll be yours after that time ;) Commented Jan 30, 2012 at 16:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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