CODEWITHSUNDEEP
javascriptopacitymapbox-gl-js
Brian Kalski
Brian Kalski

Reputation: 957

Mapbox GL set opacity of symbol layer

I have a symbol layer displaying text on a mapbox map and I am looking for a way to change the opacity of the text. 

this.map.addLayer({
        "id": "symbols",
        "type": "symbol",
        "source": "source_circleCurrentGpsCircle",
        "layout": {
          "text-font": ["Open Sans Regular"],
          "text-field": '{title}',
          "text-size": {
            stops: [
              [0, 0],
              [22, metersToPixelsAtMaxZoom * 2]
            ],
            base: 2
          }
        },
        "paint": {
          "text-color": "#00FF00"
        }
      });

I tried a few things like the following 

this.map.setPaintProperty('symbols', 'symbol-opacity', .6);

I think I just need the correct property name. Is it possible to set a class for the symbol? I could adjust the opacity easily that way.

Upvotes: 1

Views: 3150

Answers (2)

Jorge Meza
Jorge Meza

Reputation: 11

To change the opacity on a label from a symbol type layer use the text-opacity property. Here's the documentation.

Example:

this.map.setPaintProperty('layer_name', 'text-opacity', .6);

Upvotes: 1

Brian Kalski
Brian Kalski

Reputation: 957

I figured it out. It turns out to be the text-opacity property, not symbol-opacity. Seems obvious now.

Upvotes: 2

Related Questions