How to sort different Layers

[bboure]

Hi,

I am trying to display circles with numbers/symbols in them on a a map.
My first approach was to use PointAnnotation, but I understand that it is less performant (and apparently deprecated?).

So my second approach was to use CircleLayer (for the circle) and SymbolLayer (for the text).
This works great, until they overlap:

How can I sort layers properly in order to show texts on top of the circles?

Or what would be the alternative?

The number of obviously dynamic (comes from the Geojson properties).
The stroke of the circle is also dynamic.

I read somewhere that SymbolLayer accepts a View as a child, what is not clear is how I can pass variables to that view from the GeoJson.

Thanks!

Edit:

Here is the code I used for the above effect:

        <MapboxGL.ShapeSource shape={features}>
          <MapboxGL.CircleLayer
            id="circle"
            style={{
              circleColor: 'white',
              circleStrokeWidth: 2,
              circleStrokeColor: color,
              circleRadius: 12,
            }}
          />
          <MapboxGL.SymbolLayer
            id="symbol"
            aboveLayerID="circle"
            style={{
              textAllowOverlap: true,
              textField: ['get', 'position'],
              textPitchAlignment: 'map',
            }}
          ></MapboxGL.SymbolLayer>
        </MapboxGL.ShapeSource>

[mfazekas]

@bboure Currently it's not possible to solve this across layers. You can define rendering order within a layer using symbol-sort-key.
mapbox/mapbox-gl-js#7016

I'd suggest using just a symbol layer, circle should be an icon. And then you can have a text over it. With 8.0 you have to option to generate icons on the fly using Images#onImageMissing.

SymbolLayer does not accept view as a child.

[mfazekas]

I'm closing as this is not a bug.