[GIS] OpenLayers SelectFeature control ignores graphicZIndex

openlayers-2

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

Best Answer

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
        }
    })
});
Related Question