React-mapbox-gl: Is it possible to change the layer's paint attribute while rendering circles on a map?

[ev0065]

Hello! I want to draw differently colored circles on a map using Layer's paint attribute and a Feature. Essentially, my code currently returns a feature to a layer, allowing a circle to be drawn at the specified coordinates. My problem with that implementation is that I cannot change the Layer's paint attribute while still drawing circles. Therefore, this led me to try the following code which results in no circles drawn on the map:

<Layer id="layer1" type="circle">
     {array.map((element, i) => {
          return (
               <Layer id="second" type="circle" paint={{boolOperator ? 'blue' : 'green'}}
                    <Feature coordinates={[0,0]} />
              </Layer>
          )
     })}
</Layer>

Is it possible to pass a Layer to another Layer, which then draws the circle on the map given the bottom Layer's paint attribute? The code above is meant to change the circle's color if the boolOperator is either true or false, which changes per circle.

I appreciate any help! Thanks

[mklopets]

I'm not quite following... Why is the outermost Layer needed? Also, the snippet you posted sets identical layer ids in the map. Ids should be unique.

[mklopets]

For changing paint or layout based on some properties of features, look up "functions" in the mapbox-gl docs

[ev0065]

@mklopets Let me clarify, since I was honestly shooting in the dark with the two layers idea. My goal is that with each element in the array, they contain a boolOperator which is either true or false. If the boolOperator is true, the circles will be painted in blue. If boolOperator is false, the circles will be painted in green.

Generally speaking, that code looks like this:

<Layer id="drawCircles" type="circle" paint={{element.boolOperator ? 'blue' : 'green'}}
     {array.map((element, i) => {
          return (
              <Feature coordinates={[0,0]} />
          )
     })}
</Layer>

My problem is, even if I pass the element's boolOperator to a state and call this.state.boolOperator in the Layer paint attribute, I receive an error. This led me to try the two layers idea, which evidently did not work. Does this clarify my intentions and problem?

EDIT: I played with my code and it led me to change my question (I will also change the issue title). So with the code above, it is basically the same except for the ternary operator and count. It now reads as:

// in global variables: count = 0;
<Layer id="drawCircles" type="circle" 
paint={{this.state.array[count].boolOperator ? 'blue' : 'green'}}

     {this.state.array.map((element, i) => {
          count = i + 1;
          return (
              <Feature coordinates={[0,0]} />
          )
     })}

</Layer>

I am not running into any errors, but the layer's paint variable is not updating with different boolOperator values. I suppose that my new question is: Is it possible to change the layer's paint attribute while rendering circles on a map?

[mklopets]

This example should help: https://docs.mapbox.com/mapbox-gl-js/example/data-driven-lines/

As mentioned before, mapbox's functions should do the trick for you. I'm not near a computer so I can't personally write the working code right now.

Your last code snippet won't work because the paint property in your code is only evaluated once, when count is 0.

[ev0065]

@mklopets Thanks for the example, I understand now that layer is only evaluated once and its attributes cannot be changed. I also understand that I need to use the properties attribute for Feature.

So in my code, I removed Layer's paint attribute and added properties={{'color': 'blue'}} (also tested with a hex code instead of 'blue') to Feature just to test if it appears with a different color. Currently, it does not work if I use the properties attribute in my previous sentence. Would you mind telling me if that's correct or pointing me in the right direction? Thanks!

[mklopets]

The property name can be arbitrary. "Color" will work. You need to specify the layer's paint to use that named property.

'circle-color': ['get', 'xyz'] (in the layer's paint options) should read the xyz property of the feature and use it for painting its corresponding circle (if I remember the syntax correctly by heart)

[ev0065]

@mklopets That works, thank you very much! I appreciate all your help with this issue.