Maps API for JavaScript Developer's Guide

Custom Styles

The style element provides an easy way to extend the embedded style and reuse it across different layers. The custom style can have style properties pre-set and individual layers can use overrides. The following example demonstrates how to extend the lines embedded style and create a dashed-line custom style. In the styles section, it defines the name of the custom style (dashed-lines), the name of the default style from which it was inherited (the base section), and the draw section that describes how geometries with the given style are rendered (and in which all properties of the base style can be used).
Table 1.
Style The map after applying custom "dashed-lines" style
sources:
  omv:
    type: OMV
    max_zoom: 17
    min_display_zoom: 1
styles:
  dashed-lines:
    base: lines
    draw:
      dash: [2, 2]
      color: [0.055, 0.604, 0.914, 1.00]
layers:
  water_areas:
    data: {source: omv, layer: water}
    draw:
      dashed-lines:
        order: 1
        width: 5px
  roads:
    data: {source: omv, layer: roads}
    draw:
      dashed-lines:
        order: 2
        width: 1px
        color: red

style

The following list provides a description of the properties and values that form the configuration style section.
  • Style name - is a unique string that that identifies the custom style. The string is a key in the style section and the value is the style definition. In the following example two custom styles are defined with the names red_line and green_polygon.
    
    styles:
      red_line:
        base: lines
        draw:
          color: red
      green_polygon:
        base: polygons
        draw:
          color: green
          
  • base - string, optional. The property defines the name of the style from which the custom style is inherited from. The possible values can be the names of embedded styles (points, lines etc.), or other custom styles. In the following snippet, the red_line style inherits the width from the thick_line custom style.
    
    styles:
      thick_line:
        base: lines
        draw:
          width: 4px
      red_line:
        base: thick_line
        draw:
          color: red
          
  • draw - optional. A block level element that contains the drawing parameters of the given style. The applicable parameters depend on the style that is used as the base or mix. For more information, see the Default Styles chapter.
  • mix - [...string], optional. The property is used to create a mix of several custom styles. In the following example, the new custom style is defined using properties from the thick_line and red_line styles.
    
    styles:
      thick_line:
        base: lines
        draw:
          width: 4px
      red_line:
        base: thick_line
        draw:
          color: red
      thick_red_line:
        mix: [red_line, thick_line]