CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-jsmapbox-glmapbox-marker
JoJ
JoJ

Reputation: 163

mapbox-gl js use step ramp for "text-offset"

I'm using in a mapbox gl layer in the layout-block the field text-offset.

layout: { // Working
  'text-field': '{point_count_abbreviated}',
  'text-size': ['step', ['get', 'point_count'], 18, 10, 14, 100, 12],
  'text-offset': [-0.84, 0.23],
}

This is working as expected, but now I want to change the the offset based on a properties. This is working quite well for the 'text-size', but for the text-offset I can't find the right syntax. I've tried the following:

layout: { // NOT working
  'text-field': '{point_count_abbreviated}',
  'text-size': ['step', ['get', 'point_count'], 18, 10, 14, 100, 12],
  'text-offset': [
    // [-0.84, 0.23],
    ['step', ['get', 'point_count'], -0.84, 10, -0.94, 100, -0.99],
    ['step', ['get', 'point_count'], 0.23, 10, 0.25, 100, 0.28],
  ],
},

Maybe mapbox-gl isn't supporting a step ramp at the text-offset at the moment?

Error Message:

Error: layers.cluster-offline.layout.text-offset[0]: number expected, array found

layout: { // NOT working
  'text-field': '{point_count_abbreviated}',
  'text-size': ['step', ['get', 'point_count'], 18, 10, 14, 100, 12],
  'text-offset': [
    // [-0.84, 0.23],
    ['literal', 
       ['step', ['get', 'point_count'], -0.84, 10, -0.94, 100, -0.99], 
       ['step', ['get', 'point_count'], 0.23, 10, 0.25, 100, 0.28]
    ],
  ],
},

Error Message:

Error: layers.cluster-offline.layout.text-offset: array length 2 expected, length 1 found

layout: { // NOT working
  'text-field': '{point_count_abbreviated}',
  'text-size': ['step', ['get', 'point_count'], 18, 10, 14, 100, 12],
  'text-offset': [
    ['literal', ['step', ['get', 'point_count'], -0.84, 10, -0.94, 100, -0.99]], 
    ['literal', ['step', ['get', 'point_count'], 0.23, 10, 0.25, 100, 0.28]],
  ],
},

Error Message:

Error: layers.cluster-offline.layout.text-offset[0]: number expected, array found

Upvotes: 4

Views: 2264

Answers (2)

苏晓峰
苏晓峰

Reputation: 11

In version 1.6.1,I have not tested other versions.

you only need to set an array in properties,

such as "offsetdate": [-1,0],

and then use "text-offset": ['get', 'offsetdate'] to get the data .

Upvotes: 0

MeltedPenguin
MeltedPenguin

Reputation: 797

You need to wrap your text-offset values with a literal type converter:

'text-offset': [
  'step',                         // Expression type (discrete matching)
  ['get', 'point_count'],         // Variable to compare to
  ['literal', [-0.84, 0.23]],     // Default value (if none of the following match)
  10, ['literal', [-0.94, 0.25]], // if point_count === 10: [-0.94, 0.25]
  100, ['literal', [-0.99, 0.28]] // if point_count === 100: [-0.94, 0.28]
]

Stop output values must be literal values (i.e. not functions or expressions)

source

Here, the [-0.84, 0.23] sub-expressions may be ambiguous to Mapbox, so you need to explicitly tell their type.

Upvotes: 2

Related Questions