Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question
add comment

1 Answer

up vote 4 down vote accepted
+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
        }
    })
});
share|improve this answer
    
Nice! but a bit enigmatic to me ;-) Do you have any idea of such behavior? –  simo Jan 30 '12 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 Jan 30 '12 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 ;) –  Loki Kriasus Jan 30 '12 at 16:41
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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