Using Mapbox GL JS expressions to set icon-offset

Question

I'm trying to set an icon-offset of [5, -19] only for an icon called "marker_purple", with all other icons having an offset of [0, 0]. My attempts result in no icons being displayed for the given layer. This layer has only point geometry types and has many different icon types.

What I have tried:

"layout": {
  "icon-image": "{icon}",
  "icon-offset": [
    "case",
    ["==", ["get", "icon"], "marker_purple"],
    [5, -19],
    [0, 0]
  ]
}

I also tried the following in case expressions aren't able to return arrays, but still no icons show.

"layout": {
   "icon-image": "{icon}",
   "icon-offset": [
      [
         "case",
         ["==", ["get", "icon"], "marker_purple"],
         5,
         0
      ],
      [
         "case",
         ["==", ["get", "icon"], "marker_purple"],
         -19,
         0
      ]
    ]  
 }

If I specify an offset without an expression, everything works perfectly.

"icon-offset": [10,10]

All icons shift by [10,10]

Is there something that I'm missing to get the expression working properly?

I appreciate you taking the time to read this and for any help you can provide.

phasor555 phasor555 · Accepted Answer · 2019-04-15T16:40:44

"layout": {
  "icon-image": "{icon}",
  "icon-offset": [
    "case",
    ["==", ["get", "icon"], "marker_purple"],
    ["literal", [5, -19]],
    ["literal", [0, 0]]
  ]
}

The "literal" expression operator is required for array values.

Using Mapbox GL JS expressions to set icon-offset

1 Answers