(openlayers) Adding styled polygons from predefined toolbar?

Question

I'm looking for a solution where I could easily add differently styled polygons to a map?

Styles should be as "options" so that user can select e.g. blue or yellow polygon.

What different options there is to implement something like this? Is it to have two polygon buttons in toolbar? Or possibly some kind of attribute/style editing after polygons have been created?

The first one would be the most intuitive for end user and perhaps also easier for developer?

And what are the correct names for these ? From docs I can see that "controls" include "panel" which include "EditingToolbar controls" (http://dev.openlayers.org/docs/files/OpenLayers/Control/EditingToolbar-js.html).

How can I add another polygon button to toolbar that would use different custom styleset (or is stylemap in openlayers)?

Answer 1

1. You can add two polygon button in toolbar:

var polyBtn = new OpenLayers.Control.Button({
    displayClass: 'olControlPolyBtn ',
    title: "click it to change style polygon",
    id: 'polyBtn',
    trigger: changeStyle
    });  
//-----you must create a panel to add buttons in it
var panel = new OpenLayers.Control.Panel({defaultControl: polyBtn});
//-------you must add the button to the panel
panel.addControls([polyBtn]);
 map = new OpenLayers.Map( 'map', {
    controls: [
        new OpenLayers.Control.PanZoom(), 
        panel]
});

2.You can change style of features after added to layer:

function changeStyle() {
    var fts = layer.selectedFeatures[0];
    fts.style = {strokeColor:userColor,label:"test",fontStyle:"none",fillOpacity:0,strokeOpacity:.7,fillColor:userColor,'pointRadius': 5,strokeWidth:3 ,fontColor:"black"};
                    layer.redraw();
}

I hope can helps you.