Time for Action – common style examples

Let's take a look at what some of these common properties do through an example. We'll also demonstrate how to use two different intents—the default intent and the selected intent.

1. Make a copy of the previous example's file. We'll be using the same code, but modifying the feature styles a bit. We'll also use the select intent, so we'll need two style objects. Let's first recreate the default style object:

   var vector_style = new OpenLayers.Style({ 
       'cursor': 'pointer', 
       'fillColor': '#787878', 
       'fillOpacity': .8, 
       'fontColor': '#343434', 
       'pointRadius': 14, 
       'strokeColor': '#232323', 
       'strokeDashstyle': 'dot', 
       'strokeWidth': 3
   });

2. Now, let's create a style object to use when the feature is selected. We'll change the border to solid, change the fill color, increase the point's radius a little bit, change the graphicName to 'square', and add a label that will display 'X'.

   var vector_style_select = new OpenLayers.Style({ 
   ...