CODEWITHSUNDEEP
mapboxmapbox-gl-js
Mark Boulder
Mark Boulder

Reputation: 14307

Adding opacity to the dots in a Mapbox cluster

In an attempt to improve the user experience for Mapbox clusters on dark maps, is there a way to add different opacities to the dots?

enter image description here

map.addLayer({
  id: 'clusters',
  type: 'circle',
  source: 'counties',
  filter: ['has', 'point_count'],
  paint: {
    'circle-color': [
      'step',
      ['get', 'point_count'],
      '#0000FF',  # Less transparency
      10,
      '#0000FF',  # Little transparency
      50,
      '#0000FF'   # No transparency
    ],
    'circle-radius': [
      'step',
      ['get', 'point_count'],
      10,
      100,
      50,
      1000,
      100
    ]
  }
});

Upvotes: 0

Views: 829

Answers (1)

Anatolii Suhanov
Anatolii Suhanov

Reputation: 2702

You can use circle-opacity:

'circle-color': '#0000FF',
'circle-opacity': [
    'step',
    ['get', 'point_count'],
    0.25,
    10,
    0.5,
    50,
    0.75
],

or rgba

'circle-color': [
    'step',
    ['get', 'point_count'],
    'rgba(0, 0, 255, 0.25)',
    10,
    'rgba(0, 0, 255, 0.5)',
    50,
    'rgba(0, 0, 255, 0.75)',
],

Upvotes: 1

Related Questions