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.

OptionTypeDescription
fillBooleanSet to false if no fill is desired.
fillColorStringThis 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.
fillOpacityNumberThis 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.
strokeBooleanSet to false if no stroke is desired.
strokeColorStringThis 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.
strokeOpacityNumberThis 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.
strokeWidthNumberThis 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.
strokeLinecapStringOptions 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.
strokeDashstyleStringStroke 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.
pointRadiusNumberThe radius of a point in pixel.
pointerEventsStringOnly used by the SVG Renderer. Default is visiblePainted.
cursorbooleanCursor used when mouse is over the feature. Default is "" which inherits from parent elements.
externalGraphicStringUrl to an external graphic that will be used for rendering points.
graphicWidth,graphicHeightNumberThese 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.
graphicOpacityNumberOpacity of an external graphic(range 0-1).
graphicXOffset, graphicYOffsetNumberPixel offset along the positive x axis and y axis for displacing an external graphic.
rotationNumberThe rotation of a graphic in the clockwise direction about its center point (or any point off center as specified by graphicXOffset and graphicYOffset).
graphicNameStringNamed graphic to use when rendering points. Supported values include circle, square, star, x, cross, and triangle.
labelStringThe text for an optional label. For browsers that use the canvas renderer, this requires either fillText or mozDrawText to be available.
displayStringSymbolizers will have no effect if display is set to "none". All other values have no effect.
Last updated November 5, 2019.