Styling layers

To demonstrate some of the feature styling options that are available, we'll create a live editor in the side panel to style the features that are already loaded on to the map. To achieve this goal, we'll be using the jQuery UI library to create sliders and the jQuery plugin Spectrum for the color picker widget. The source code can be found in ch06/ch06-styling-layers. We'll end up with something that looks similar to the following screenshot:

For this recipe, we are going to apply styles at the layer level so that all features within a layer inherit the styling. The current state of all customizable styles will be reflected in the sidebar.

We'll be instantiating many instances of classes that belong to the ol.style object, such as ol.style.Stroke. Let's take a look at how this is implemented.

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 contains a lot of markup that...