Skip to main content

Styling

Contents

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.

Option Type Description
fill Boolean Set to false if no fill is desired.
fillColor String This is a RGB hex color used for filling in Polygons(e.g. "#FF0000" for red). It is also used in the center of marks for points: the interior color of circles or other shapes. It is not used if an externalGraphic is applied to a point. Default is #ee9900.
fillOpacity Number This is the opacity used for filling in Polygons(range 0-1). It is also used in the center of marks for points: the interior color of circles or other shapes. It is not used if an externalGraphic is applied to a point. Default is 0.4.
stroke Boolean Set to false if no stroke is desired.
strokeColor String This is a RGB hex color of the line on features(e.g. "#FF0000" for red). On polygons and point marks, it is used as an outline to the feature. On lines, this is the representation of the feature. Default is #ee9900.
strokeOpacity Number This is opacity of the line on features(range 0-1). On polygons and point marks, it is used as an outline to the feature. On lines, this is the representation of the feature. Its range is (0-1). Default is 1.
strokeWidth Number This is width of the line on features in pixel. On polygons and point marks, it is used as an outline to the feature. On lines, this is the representation of the feature. Default is 1.
strokeLinecap String Options are butt, round, or square. This property is similar to the SVG stroke-linecap property. It determines what the end of lines should look like. Default is round.
strokeDashstyle String Stroke dash style according to the SLD spec. Note that the ALKMaps values for strokeDashstyle (dot, dash, dashdot, longdash, longdashdot, or solid) will not work in SLD, but most SLD patterns will render correctly in ALKMaps. Default is Solid.
pointRadius Number The radius of a point in pixel.
pointerEvents String Only used by the SVG Renderer. Default is visiblePainted.
cursor boolean Cursor used when mouse is over the feature. Default is "" which inherits from parent elements.
externalGraphic String Url to an external graphic that will be used for rendering points.
graphicWidth,graphicHeight Number These properties define the pixel height and width of an externalGraphic. This is an alternative to the pointRadius symbolizer property to be used when your graphic has different sizes in the X and Y direction.
graphicOpacity Number Opacity of an external graphic(range 0-1).
graphicXOffset, graphicYOffset Number Pixel offset along the positive x axis and y axis for displacing an external graphic.
rotation Number The rotation of a graphic in the clockwise direction about its center point (or any point off center as specified by graphicXOffset and graphicYOffset).
graphicName String Named graphic to use when rendering points. Supported values include circle, square, star, x, cross, and triangle.
label String The text for an optional label. For browsers that use the canvas renderer, this requires either fillText or mozDrawText to be available.
display String Symbolizers will have no effect if display is set to "none". All other values have no effect.
Last updated November 23, 2021.
Contents