Implement Dynamic Styles in OpenLayers

When you create a vector layer in OpenLayers, it comes with default styles or when you use Draw or Modify interaction, they also use default styles. OpenLayers style module is use for creating custom style for your vector layers like defining new color, border color, border width, fill color or fill pattern.

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.

In other words, OpenLayers Style is a like a CSS to your vector layers.

Following are the modules in OpenLayers that are use for defining custom styles.

Lets talk about these modules in order to understand OpenLayers style better.

ol.style.Style is the main style object in which you encapsulates other style properties such as Fill, Stroke and Circle.

To implement a style for line , you need to only implement stroke property using ol.style.Stroke. Stroke property define the width and color. Something like below code:

To implement polygon style, you need to set Stroke property for border of polygon and Fill property for polygon area. Something like below code:

To implement style for point, we will use ol.style.Image. We can define other properties like radius of point, fill color and stroke for outer boundary. Something like below code:

In this tutorial, we will look into two types of style:

1. Static Style
2. Dynamic Style

Static Style:

To define custom static style, we define same style for whole vector layer. All the features in vector layer will have same defined style. With in the style, you can use stroke, fill, image etc. properties to tweak your style. The style for vector layer is set using setStyle function(see line number 26). In setStyle function, we pass style object. In below code, we have common style for all features.

Dynamic Style:

You can define different style for different features of a vector layer either based on feature or geometry. In our case, we will define our style based on geometry because of layer have all kinds of geometry. We will define three different style object in dictionary (at line number 2) for point, line and polygon. And then we will invoke these style objects using setStyle function of vector layer.

In line number 32, we are invoking these style objects using setStyle function of vector layer. If our style mode is static(defined using radio button, see image below), then we will invoke simple static style which will be implemented on all features. If our style mode is dynamic, we will invoke a dynamic style which will be implemented to specific features based on condition.

If you closely see line number 37, instead of passing style object, we are passing an anonymous function. This anonymous function will inherently take event type argument which is automatically passed into this function during rendering. Using that event object, we can get feature information and their geometry type. Once we get geometry type of the feature, we can return appropriate style. See line number 171, 173 and 175, we are returning style based on geometry type.

Dynamic Style is very important to represent your features/layers using different colors, widths or fills. Appropriate style can make your web map very intuitive and informative for your clients or users.

I hope this tutorial has helped you in understanding OpenLayers Style.

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.