Styling

The Style and StyleMap objects are used to control the styling of features in Vector Layer, such as Points, Lines, Vector Arrows, Linear Rings, Polygons and Clusters.

Basically, there are 3 different ways to define styles.

Vector Style

You can define the style for a specific vector during declaration as the code sample below:

Layer Style

The Vector Layer itself can have style. The style will apply to all features in this layer. An example static style for Vector layer:

var layer = new ALKMaps.Layer.Vector("ALKMaps Vector",
  {},
    style: new ALKMaps.Style({
      // define style here
  })
);

Apart from static style, you can define a style function that passes in the layer’s feature objects:

var layer = new ALKMaps.Layer.Vector("ALKMaps Vector",
  {},
    style: function(feature)({
      // define style here
      if (feature.get('class') === "redClass"){
        var styles = new ALKMaps.Style({
          fillColor: "red"
        })
        return styles;
        }
    })
  );

If you want to use a property value in the features, the common way is to use the attribute replacement syntax. For example, if you have a predefined featureColor property in your feature, you can do:

var layer = new ALKMaps.Layer.Vector("ALKMaps Vector",
    {},
    style: new ALKMaps.Style({
        // define style here
        fillColor: '$featureColor'
    })
);

StyleMap

A StyleMap is used with Vector layers to define styles for various rendering intents. The example here shows how to use StyleMap to style features with rule based styling. The styleMap here has different styles defined for the "default" and "select" intents.

Below is an example showing how to customize and differentiate styles based on feature’s Latitude, as well as how to define style for "select" rendering intents.

Style Classes Properties

The table below lists some commonly used properties for Style class. For comprehensive version, please see the ALK Maps API Documentation under feature/vector section.