Ha, I worked out a solution that didn't involve a stylemap!
First, I defined separate styles for regular and highlight:
var green = {
fillColor: "#006633",
fillOpacity: 0.2,
};
var greenHighlight = {
fillColor: "#004411",
fillOpacity: 0.5,
};
And then I wrote event handlers to call the vector layer's drawFeature() method
with the appropriate style as the second argument (austAgder is an ID assigned
to the link corresponding to the county of Aust Agder):
Event.observe("austAgder", "mouseover", function(){
vector.drawFeature(vector.features[1], blueHighlight); });
Event.observe("austAgder", "mouseout", function(){
vector.drawFeature(vector.features[1], blue); });
You can see the results here:
http://bygdebok.library.und.edu/
I suspect I'm probably reinventing the wheel somewhere along the way, but I
don't mind; this way I know what it is that I've done. OpenLayers is a very
complex API, and I just don't have time to learn it as thoroughly as I'd like.
I have other things to do. So, this works, and I'm happy.
Will Martin
Michael<[email protected]> 10/11/2010 5:02 PM>>>
yeah, I had that problem too originally. I think the issue was that
when you write to {feature}.style, they all share the same style object,
so a change to one is a change to all
On 10/11/2010 2:02 PM, William Martin wrote:
Michael,
Thanks for the tips. I think I'll have to look into the style map option, and
the line-redrawing trick from the yacht-tracking site. I tried doing
substitution with ${tokens} in the style, followed by vector.redraw() commands,
but it didn't work; it would recolor all the counties that shared the same
initial color, not just the one I wanted.
It astounds me that something as simple as changing a color is this complex.
I've been plugging away at it for four and a half hours now and made no headway
...
Will
Michael<[email protected]> Mon 11 Oct 2010 1:23 PM>>>
In my (limited) experience, there are at least two effective ways of
doing this.
1. A: Use a stylemap with "default" and "select" styles in it. eg:
var myStyles = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeWidth: 2,
fillColor: "#00cc00",
fillOpacity: 0.5,
strokeOpacity: 0.7,
pointRadius: 19,
graphicZIndex: 1,
label: "${lab}",
labelYOffset: 17,
}
),
"select": new OpenLayers.Style({
strokeWidth: 3,
fillColor: "#66cc00",
strokeColor: "#ffff99",
graphicZIndex: 7
})
});
B: Then, add add it to your layer:
posLayer = new OpenLayers.Layer.Vector('posLayer',{
styleMap: myStyles
});
C: and add a controller to tell the layer to stay awake!
select = new OpenLayers.Control.SelectFeature(
posLayer,
{
hover:"true",
// there are other cool options you can add here
}
);
// ... add to the map
map.addControl(select);
2. The other thing you can do is use a variable attribute.
Define your fill color as a variable: fillColor: "${color}",
and programmatically set [featurename].attributes.color to be the value
you want.
However, if you want mouseover treatment, you will likely need to come
back to the tools of method 1, so I'd start with that.
Good luck.
Michael
On 10/11/2010 11:06 AM, William Martin wrote:
All,
I've got some vector features, and I'd like to change their opacity when the
user mouses over a link in a side-menu. The map always has a set number of
features (17 county outlines) with predictable feature indices, so I can get
appropriate vector feature easily enough:
vector = new OpenLayers.Layer.Vector("Vector Layer", {style:
OpenLayers.Feature.Vector.style['default']});
for(i = 1; i< counties.length; i++){
cur = counties[i];
var details = {name: cur.name, url: cur.url}
// Prep some attribues.
attributes = {name: cur.name};
style = cur.style; // The initial styles are set in the counties array.
// Draw the boundaries of the county.
vertices = new OpenLayers.Geometry.LinearRing(cur.bounds);
counties[i] = new OpenLayers.Feature.Vector(new
OpenLayers.Geometry.Polygon(vertices), details, style);
vector.addFeatures(counties[i]);
}
... and then I can get the county with vector.features[0] (or 1, 2, 3, etc).
So now that I've got that, how do I set the opacity of the selected feature?
I've tried this:
vector.features[0].style.fillOpacity = 0.5;
But it has no effect. I tried this to get a readout of all the properties and
methods of the feature:
for(i in vector.features[0]){ console.log(i); }
But it doesn't show a setOpacity method or anything. What am I missing, please?
Thanks.
Will Martin
_______________________________________________
Users mailing list
[email protected]
http://lists.osgeo.org/mailman/listinfo/openlayers-users
_______________________________________________
Users mailing list
[email protected]
http://lists.osgeo.org/mailman/listinfo/openlayers-users
