Style rules reference

Learn about the structure of style configuration.

The style configuration is a JSON object that defines the visual appearance of map features. It consists of two main sections: assets and styles.

📘
Note
Style rules are currently supported for HERE Map Attributes API v8 features only. Support for additional services is planned. Check this page for updates on expanded applicability.

assets

The top-level assets key defines a collection of icon assets. Each asset has a unique identifier, a URL to its image file, and, optionally, a URL to its JSON atlas file. For an asset without an atlas, its identifier can be used to reference the asset in style rules that use techniques capable of rendering icons.

📘
Note
To avoid naming conflicts with built-in icons, use a unique prefix for custom icon identifiers. You can also look up existing built-in icon identifiers in the assets property of the style configurations used by other vector layers, i.e. H.map.render.harp.Style#getConfig().assets.

{
  "assets": {
    "icon-id": {
      "url": string,
      "atlas": string | undefined
    }
  }
}

url

The url property specifies the URL of the icon asset's image file, which can be either a single icon image or an image atlas.
Supported image formats are PNG, JPEG, and SVG.

atlas

{
  "assets": {
    "my-icon-atlas": {
      "url": "/PATH/TO/my-icon-atlas.png",
      "atlas": "/PATH/TO/my-icon-atlas.json"
    }
  }
}

The atlas property specifies the URL to the JSON atlas file for the icon asset. This file contains metadata about the individual icons within the image file. If an asset does not have an atlas, you can omit this property or set to undefined.

Format the atlas file in the following way:

{
  "icon1-name": {
    "x": number,
    "y": number,
    "width": number,
    "height": number
  },
  "icon2-name": {
    "x": number,
    "y": number,
    "width": number,
    "height": number
  },
  // ...
  "iconN-name": {
    "x": number,
    "y": number,
    "width": number,
    "height": number
  }
}

The identifiers defined in the atlas file can be used to reference the icon in style rules that use techniques capable of rendering icons

styles

The top-level key styles represents a list of style rules.

Each style rule specifies which features to style (when), how to render them (technique), and the rendering parameters to apply (attr).

{
  "styles": [
    {
      "when": boolean,
      "technique": string,
      "attr": { }
    }
  ]
}

📘
Note
Style rules inside styles can be arranged in any order.

when

Specifies the kind of objects to which this style rule applies.

Type: boolean
Default Value: true

"when": ["==", ["get", "kind"], "park"]

technique

Every style rule must specify a technique. The technique defines how the object's geometry is transformed into a renderable object and how it is rendered.

"technique": string

In addition to the technique name, the rule can also provide a set of technique attribute values under the attr key.

{
  "styles": [
    {
      "technique": "polygon",
      "attr": {
        "color": "yellow"
      }
    }
  ]
}

The previous example has a technique set to polygon and a single technique attribute color.

For a complete list of available techniques and their attributes, see Style techniques reference.

attr

The set of technique attribute values, provided under the attr key of a style rule. The valid attribute names, their types, and their defaults depend on the technique used. For more information, see the Style techniques reference.

"attr": { }

Next steps

Explore the following documents when customizing map style: