Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to sort different Layers #720

Closed
bboure opened this issue Mar 13, 2020 · 2 comments
Closed

How to sort different Layers #720

bboure opened this issue Mar 13, 2020 · 2 comments

Comments

@bboure
Copy link

@bboure bboure commented Mar 13, 2020

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:

image

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

This comment has been minimized.

Copy link
Contributor

@mfazekas mfazekas commented Mar 22, 2020

@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

This comment has been minimized.

Copy link
Contributor

@mfazekas mfazekas commented Mar 22, 2020

I'm closing as this is not a bug.

@mfazekas mfazekas closed this Mar 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.