Styling features using symbolizers

To see the most basic form of styling a feature, we are going to create a little map editor that allows adding new features by specifying some few style properties:

Each OpenLayers.Feature.Vector instance can have a style associated with it. This style is called symbolizer, which is nothing more than a JavaScript object with some fields that specify the fill color, stroke, and so on. For example:

{ 
    fillColor: "#ee9900", 
    fillOpacity: 0.4, 
    strokeColor: "#ee9900", 
    strokeOpacity: 1, 
    strokeWidth: 1 
}

In the code, every time a feature is going to be added to the map, the code will get the fill and stroke properties from the controls on the left-hand side and will create a new symbolizer hash to be used by the new feature.

Getting ready

The source code has two main sections, one for HTML, where all the controls are placed, and a second one for the JavaScript code.

The HTML section has plenty of codes related with the controls used to select...