Playing with StyleMap and the render intents

There are some controls, such as SelectFeature, ModifyFeature, or EditingToolbar, which change the style of the feature depending on its current state, that is, if it is selected or is currently being edited. How does OpenLayers manage this? The answer is, through the render intents:

This recipe shows how we can modify the styles used for each render intent to change the look of our applications.

This way, features will be drawn on the map using blue instead of orange. Temporary features, those that are going to be created, will be drawn using green. Finally, those features that are selected, or are in the middle of the modification process, will be drawn using orange.

How to do it...

1. Create a new HTML file and add the OpenLayers dependencies. The first step is to add the div element to hold the map instance:

   <div id="ch07_rendering_intents" style="width: 100%; height: 95%;"></div>

2. In the JavaScript section, initialize the map instance...