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 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
    })
 })
share|improve this question

3 Answers 3

up vote 1 down vote accepted

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.

share|improve this answer

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

share|improve this answer
1  
I don't see how this relates to lines overlapping each other and thus blocking the 'hover' of the underlying line. Does your trick somehow help with the zIndexing of the layer? –  Jeroen Jul 12 '12 at 21:04
    
I did not realise you were "trigging" the hover event, so you can chose the features to hover. If changing the Z-index does not work, OL is probably ignoring the change, Most Examples and api tests that OL do are static. I think you should destroy and re-create the features or instead of "hovers" you could simples crate popups on line centroid for instance. –  muchaxo Jul 12 '12 at 23:49
    
In the meantime I recall I have played with renderIntent. Maybe this can give you a clue github.com/openlayers/openlayers/issues/562 –  muchaxo Jul 13 '12 at 16:29

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.

share|improve this answer

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.