CODEWITHSUNDEEP
javascriptmapbox-gl-js
Brian Kalski
Brian Kalski

Reputation: 957

Mapbox setPaintProperty for circle-radius is not updating layer

I have a Mapbox circle layer and I need to change the radius of the circle but the setPaintProperty method doesn't seem to work. The layer displays initially:

map.addLayer({
        "id": "circleCurrentGpsCircle",
        "type": "circle",
        "source": "source_circleCurrentGpsCircle",
        "paint": {
          "circle-radius": {
            stops: [
              [0, 0],
              [22, metersToPixelsAtMaxZoom(gpsAccuracyWidth, currentLatitude)]
            ],
            base: 2
          },
          "circle-color": self.props.senData.gpsCircleShading ? "#FFFF00" : "transparent",
          "circle-opacity": 0.3,
          "circle-stroke-width": 3,
          "circle-stroke-color": "#FFFF00"
        }
      });

I then call the following to change the radius of the circle:

var radiusData = {
        stops: [
          [0, 0],
          [22, metersToPixelsAtMaxZoom(gpsAccuracyWidth, currentLatitude)]
        ],
        base: 2
      };
      this.map.getLayer('circleCurrentGpsCircle').setPaintProperty('circle-radius', radiusData);

The circle doesn't change though. I'm not getting any errors in the console.

Upvotes: 0

Views: 1609

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126747

Normally, one calls setPaintProperty on the map object itself, not on a layer:

this.map.setPaintProperty('circleCurrentGpsCircle', 'circle-radius', radiusData);

I've never noticed the setPaintProperty() method on the returned layer object, but in my brief testing, it doesn't seem to work for me either.

(Actually with a bit of further testing, it seems that values set through that function do get recorded somewhere, and when you later call map.setPaintProperty(), all those values now get displayed. But this doesn't help you - just change the line to what I provided above.)

Upvotes: 2

Related Questions