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
})
})
Best Answer
You can trigger the render intents (select, hover, default) in the stylemap with the SelectFeature control.
Here is a DEMO
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.