Trouble with OpenLayers Styles

Question

So, tired of always seeing the bright orange default regular polygons, I'm trying to learn to style OpenLayers.

I've had some success with:

     var layer_style = OpenLayers.Util.extend({},OpenLayers.Feature.Vector.style['default']);
  layer_style.fillColor = "#000000";
 layer_style.strokeColor = "#000000";
 polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer");
 polygonLayer.style = layer_style;

But sine I am drawing my polygons with DrawFeature, my style only takes effect once I've finished drawing, and seeing it snap from bright orange to grey is sort of disconcerting. So, I learned about temporary styles, and tried:

 var layer_style =  new OpenLayers.Style({"default": {fillColor: "#000000"}, "temporary": {fillColor: "#000000"}})
polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer");
polygonLayer.style = layer_style;

This got me a still orange square--until I stopped drawing, when it snapped into completely opaque black. I figured maybe I had to explicitly set the fillOpacity...no dice. Even when I changed both fill colors to be pink and blue, respectively, I still saw only orange and opaque black.

I've tried messing with StyleMaps, since I read that if you only add one style to a style map, it uses the default one for everything, including the temporary style.

var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
var style_map = new OpenLayers.StyleMap(layer_style);
polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer");
polygonLayer.style = style_map;

That got me the black opaque square, too. (Even though that layer style works when not given to a map). Passing the map to the layer itself like so:

polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer", style_map);

Didn't get me anything at all. Orange all the way, even after drawn.

polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer", {styleMap: style_map});

Is a lot more succesful: Orange while drawing, translucent black with black outline when drawn. Just like when I didn't use a map. Problem is, still no temporary...

So, I tried initializing my map this way:

var style_map = new OpenLayers.StyleMap({"default": layer_style, "temporary": layer_style});

No opaque square, but no dice for the temporary, either... Still orange snapping to black transparent. Even if I make a new Style (layer_style2), and set temporary to that, still no luck. And no luck with setting "select" style, either.

What am I doing wrong? Temporary IS for styling things that are currently being sketched, correct? Is there some other way specific to the drawFeature Controller?

Edit: setting extendDefault to be true doesn't seem to help, either...

var style_map = new OpenLayers.StyleMap({"default": layer_style, "temporary": layer_style}, {"extendDefault": "true"});

Answer 1

I've found two solutions for this problem. In both solution, you have to change some parameters of DrawFeature to get the functionality you wish.

1.Change handler style of the DrawFeature. Function drawFeature in OpenLayers.Handler.Polygon uses parameter style of the handler for the feature. So you have to change this style.

When creating Feature use:

var drawPolygon = new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon, {handlerOptions:{style:myStyle}});

Later, you can change it by:

drawPolygon.handler.style = myStyle;

2.Change create callback of the DrawFeature. Change style of the newly created temporary feature in create callback.

var drawPolygon = new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon, {
        callbacks:{create: function(vertex, feature) {
            feature.style = myStyle;
            this.layer.events.triggerEvent("sketchstarted", {vertex:vertex,feature:feature})
}}});

Similarly, you can change the callback later.

Answer 2

If you want all vectors to be of a constant style, but not the boring orange then try this:

vecLayer = new OpenLayers.Layer.Vector(
    "Route Layer",  //layer name
    {styleMap: new OpenLayers.StyleMap({
        pointRadius: "6", 
        fillColor: "#666666" 
    }),
    renderers:renderer}
);

You have loads of properties you can mess about with, have a look at these pages:

• dev.openlayers (check the Constants section)

• docs.openlayers (more useful info)