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.