Get some color in your face :)

In my last post of this series I explained how to draw a on your map. But the drawn features are currently very colorless. So let's add some beautiful colors. To get colors into your map I will show you how you can style features.

First we have to define the colors we need to beautify our geometries.

window.example.styles = {
        strokeColor: [0, 153, 255, 1],
        fillColor: [255, 255, 255, .5]
    };

In OpenLayers 3 each color is defined by an array of four numbers: [red, green, blue, alpha]. The colors I have defined above are the default colors we will use. These are also the default colors that are used by OpenLayers 3. Since I’m going to change them later on, they need to be defined at the beginning.

We have to update the style of the feature after we have finished drawing it. Therefore, we have to hook into on the drawing process. There are two events you can use to act on this process:

  • ol.interaction.DrawEventType.DRAWSTART
  • ol.interaction.DrawEventType.DRAWEND

In the example application I will use the DRAWEND-event to update the drawn feature, especially the style of it. I use the DRAWEND-event because in this event I can access the drawn feature to modify the style.

   // Set an event listener on the DRAWEND event of the drawing interaction
this.drawingInteraction_.on(ol.interaction.DrawEventType.DRAWEND, function (evt) {
        var feature = evt.feature;

        // Create a new stroke style
        var stroke = new ol.style.Stroke({
            // Clone the color array to prevent color changes
            // on existing features
            color: window.example.styles.strokeColor.slice(0)
        });

        // Create a new fill style
        var fill = new ol.style.Fill({
            // Clone the color array to prevent color changes
            // on existing features
            color: window.example.styles.fillColor.slice(0)
        });

        // Set the new style after drawing is finished
        feature.setStyle(new ol.style.Style({
            // The image style is used
            // for point geometry
            image: new ol.style.Circle({
                fill: fill,
                stroke: stroke,
                radius: 5
            }),
            fill: fill,
            stroke: stroke
        }));
    }, this);

To listen for the DRAWEND-event on my interaction I've to call the on()-function and define a callback. Internally the on()-function uses the Google Closure Library I introduced in my last post - especially goog.events.listen(). To set the new style on the drawn feature there is a method setStyle() that can be called. In OpenLayers 3 styles are defined within the ol.style.Style-class.

A style has different properties you can use to define the appearance of the drawn feature. In the example I use three to define all styles I need to get some color in my drawn face.

  • fill: Defines the fill-style used for the feature.
  • stroke: Defines the stroke-style used for the feature.
  • image: The image property is used to define the style for a point geometry. I use a circle-style to define the style of point.

Each style has different properties on its own. For the filland stroke-style the color-property is used to set my favored color. The circle-style used to define the colors of my point i a little bit special. Instead of only defining a single color I have to define a fill-color, a stroke-color and a radius. This is because a point is no "simple"-geometry but rather a circle itself.

With all the modifications to the example application I now can draw a colored smiley face. :)

As you noticed if you tested the drawing feature in the example there is always a preview what you are currently drawing.

But although we changed the colors of the drawing feature, the color of the preview did not change. If you draw the different parts of the face there is still the default style when previewing the geometry. We have to fix this and update the preview style so the preview looks like the drawn geometry.

In my next post I will show how we can update the sample application so the preview feature get some neat colors, too!

As usual you can find the example on GitHub.

Stay tuned and have fun. :-)

About Steffen Jahr

Hi. I'm Steffen from Karlsruhe.
I am working as software developer @ awesome Thinktecture AG. Next to software development I'm addicted to Star Wars :)