Change zIndex of Vectors in openlayers

Question

I have a bunch of linestring features on a vector layer. Some of them overlap. If I trigger the hover event on those features, I want them be in front. I did find some functions to set the z-index of layers, but nothing for manipulation individual features. I tried using the individual style maps, but that doesn't work. What am I doing wrong?

    // Add vectory layer
    this.vector = new OpenLayers.Layer.Vector("Track", {
        renderers: ['Canvas', 'SVG', 'VML'],
        rendererOptions: { zIndexing: true },
        styleMap: myStyle
    });
    tbMap.map.addLayer(this.vector);

In a loop various lines are added like so:

        //make the new tracksegment
        myTrack = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(path), {hash: hash});

        // Draw vector on the layer
        this.vector.addFeatures([myTrack]);

And the stylemap:

var myStyle = new OpenLayers.StyleMap({
    "default": new OpenLayers.Style({
        pointRadius: config.pointRadius,
        strokeColor: config.strokeColor,
        fillColor: config.fillColor,
        fillOpacity: config.fillOpacity,
        strokeWeigth: config.strokeWeigth,
        strokeWidth: config.trackWeight,
        strokeOpacity: config.strokeOpacity,
        fontColor: config.fontColor,
        fontSize: config.fontSize,
        fontFamily: config.fontFamily,
        graphicZIndex: 0
    }),
    "select": new OpenLayers.Style({
        pointRadius: config.pointRadius,
        strokeColor: config.strokeColor_selected,
        fillColor: config.fillColor,
        fillOpacity: config.fillOpacity,
        strokeWeigth: config.strokeWeigth,
        strokeOpacity: config.strokeOpacity,
        fontColor: config.fontColor,
        fontSize: config.fontSize,
        fontFamily: config.fontFamily,
        graphicZIndex: 100
    }),
    "hover": new OpenLayers.Style({
        pointRadius: config.pointRadius,
        strokeColor: config.strokeColor_hover,
        fillColor: config.fillColor,
        fillOpacity: config.fillOpacity,
        strokeWeigth: config.strokeWeigth,
        strokeWidth: config.trackWeight,
        strokeOpacity: config.strokeOpacity,
        fontColor: config.fontColor,
        fontSize: config.fontSize,
        fontFamily: config.fontFamily,
        graphicZIndex: 100
    })
 })

Answer 1

You can trigger the render intents (select, hover, default) in the stylemap with the SelectFeature control.

Here is a DEMO

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

UPDATE:

As you can see from this question It only started working when the rendererOptions are moved to the constructor. I know... doesn't make sense, but it works.

I striked out the above because you do have renderOptions in the constructor. Just use SelectFeature to acitvate correct renderintents on hover.

Answer 2

I had a similar problem, I was reading polygons and point features from one WFS call and adding these to a OL Vector layer. Some polygons would capture the "hover event" hiding the points "hover event". My solution was to add all vectors to the layer but send the points to a JS array. Later I would add all features of the array to the Vector layer.

layer.addFeatures( pointFeatures, {style: myStyleForPoints});

regards, Joaquim Muchaxo Ithaca.pt

Answer 3

I think the safest (and probably easiest) way to achieve what you want is to simply add a Vector layer, say it's called highlight, on top of all others and then move (or copy) features into this layer as they are selected.