Appearances

Search Style Specification

The appearances layer property defines sets of appearance objects used to quickly change the visual styling of a layer based on a condition. Each appearance object can specify a set of paint and layout property values, allowing for dynamic styling of layers based on application state or user interactions.

{
  "id": "some-layer",
  "type": "symbol",
  ...
  "appearances": [
    {
      "name": "selected",
      "condition": ["feature-state", "select"],
      "properties": {
        "icon-image": ["image", "poi", {"params": {"fill": "red"}}],
        "icon-size": 1.3
      }
    },
    {
      "name": "highlighted",
      "condition": ["feature-state", "highlighted"],
      "properties": {
        "icon-rotate": 90
      }
    }
  ]
}

Paint and Layout properties compatible with appearances

icon-image

Optional resolvedImage . paletteWorks with appearances.

Name of image in sprite to use for drawing an image background.

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.10.0	>= 2.0.1	>= 2.0.0
data-driven styling	>= 0.35.0	>= 5.1.0	>= 3.6.0

icon-offset

Optional array of numbers . Defaults to [0,0]. Requires icon-image. Supports smooth-rampinterpolateexpressions. paletteWorks with appearances.

Offset distance of icon from its anchor. Positive values indicate right and down, while negative values indicate left and up. Each component is multiplied by the value of icon-size to obtain the final offset in pixels. When combined with icon-rotate the offset will be as if the rotated direction was up.

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.10.0	>= 2.0.1	>= 2.0.0
data-driven styling	>= 0.29.0	>= 5.0.0	>= 3.5.0

icon-rotate

Optional number . Units in degrees. Defaults to 0. Requires icon-image. Supports smooth-rampinterpolateexpressions. paletteWorks with appearances.

Rotates the icon clockwise.

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.10.0	>= 2.0.1	>= 2.0.0
data-driven styling	>= 0.21.0	>= 5.0.0	>= 3.5.0

icon-size

Optional number greater than or equal to 0. Units in factor of the original icon size. Defaults to 1. Requires icon-image. Supports smooth-rampinterpolateexpressions. paletteWorks with appearances.

Scales the original size of the icon by the provided factor. The new pixel size of the image will be the original pixel size multiplied by icon-size. 1 is the original size; 3 triples the size of the image.

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.10.0	>= 2.0.1	>= 2.0.0
data-driven styling	>= 0.35.0	>= 5.1.0	>= 3.6.0

text-offset

Optional array of numbers . Units in ems. Defaults to [0,0]. Requires text-field. Disabled by text-radial-offset. Supports smooth-rampinterpolateexpressions. paletteWorks with appearances.

Offset distance of text from its anchor. Positive values indicate right and down, while negative values indicate left and up. If used with text-variable-anchor, input values will be taken as absolute values. Offsets along the x- and y-axis will be applied automatically based on the anchor position.

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.10.0	>= 2.0.1	>= 2.0.0
data-driven styling	>= 0.35.0	>= 5.1.0	>= 3.6.0

text-rotate

Optional number . Units in degrees. Defaults to 0. Requires text-field. Supports smooth-rampinterpolateexpressions. paletteWorks with appearances.

Rotates the text clockwise.

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.10.0	>= 2.0.1	>= 2.0.0
data-driven styling	>= 0.35.0	>= 5.1.0	>= 3.6.0

text-size

Optional number greater than or equal to 0. Units in pixels. Defaults to 16. Requires text-field. Supports smooth-rampinterpolateexpressions. paletteWorks with appearances.

Font size.

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.10.0	>= 2.0.1	>= 2.0.0
data-driven styling	>= 0.35.0	>= 5.1.0	>= 3.6.0

Was this page helpful?