Aligning Mapbox text SymbolLayer with icon SymbolLayer

Question

I'm presently working on clustering symbols on a Mapbox map using a method similar to this official example. When testing, I have found that the icons and text appear as expected, however the text layer appears to lose its alignment with the icon layer when I interact with, and rotate the map.

I'm making use of the PropertyFactory.iconAnchor and PropertyFactory.iconTranslate properties when creating the SymbolLayer objects. Am I missing a property that is used to ensure these two layers maintain a relative position?

In case it helps, the code that I'm using to create the SymbolLayer objects is as follows:

public List<SymbolLayer> createClusterLevelSymbolLayer(int[] layers) {
    List<SymbolLayer> symbolLayers = new ArrayList<>();

    for (int i = 0; i < layers.length; i++) {
        SymbolLayer symbolLayer = new SymbolLayer("cluster-" + i, "points");
        symbolLayer.setProperties(
                iconImage("circle-15"),
                iconTranslate(new Float[]{1f, 13f}),
                iconSize(1.5f),
                iconAnchor(Property.ICON_ANCHOR_BOTTOM)
        );

        Expression pointCount = toNumber(get("point_count"));
        symbolLayer.setFilter(
                i == 0
                        ? all(has("point_count"),
                        gte(pointCount, literal(layers[i]))
                ) : all(has("point_count"),
                        gt(pointCount, literal(layers[i])),
                        lt(pointCount, literal(layers[i - 1]))
                )
        );
        symbolLayers.add(symbolLayer);
    }

    return symbolLayers;
}

public SymbolLayer createClusterTextLayer() {
    return new SymbolLayer("count", "points").withProperties(
            textField(Expression.toString(get("point_count"))),
            textSize(12f),
            textColor(Color.BLACK),
            textIgnorePlacement(true),
            textAllowOverlap(true),
            textAnchor(Property.TEXT_ANCHOR_BOTTOM)
    );
}

Edit (07/02/2019 @ 10:15am) As per @riastrad's recommendation, please find screenshots of the behaviour that I'm experiencing, below:

(Above) Upon booting into the app, the clustered symbol appears just fine, with icon beneath a text layer (aligned well).

(Below) However when gesturing to rotate the map, both icon and text separate until the view/camera position are returned to their starting point

Are you able to update your question with an image or screen capture that demonstrates the loss of alignment between the text and the icon layer? This example has a similar implementation: https://docs.mapbox.com/android/maps/examples/symbol-layer-clustering/ and I'm not seeing any misalignment when I run it on a Pixel 3 (the example is also available on the [Mapbox Demo app](https://play.google.com/store/apps/details?id=com.mapbox.mapboxandroiddemo&hl=en_US)) — riastrad, Feb 06 '19 at 15:34
Not a problem @riastrad, I've since added screenshots illustrating the behaviour as per your request. Funnily enough, I've compared my implementation to [the implementation that you linked](https://docs.mapbox.com/android/maps/examples/symbol-layer-clustering/) and I can't seem to see anything amiss (I hope it's not something obvious that I'm missing!). — Tom Larcher, Feb 06 '19 at 23:17

score 3 · Accepted Answer · answered Feb 11 '19 at 20:12

3

I believe this is happening because you are setting a value for icon-translate for your icon SymbolLayer.

Per the linked documentation, this represents the:

Distance that the icon's anchor is moved from its original placement.

So essentially you are anchoring both your text & icon to the bottom, but at the same time you are shifting your icon over by Float[]{1f, 13f}.

The solution should be to either set the same values for your text-translate or remove it from your icon SymbolLayer altogether.

answered Feb 11 '19 at 20:12

riastrad

1,624
10
22

1

For context, the `iconTranlate` property is used in the example you linked to in order to visually "center" the text value within the triangle image. – riastrad Feb 11 '19 at 20:15
I think you're spot on @riastrad, however the issue that I'm experiencing now that I've removed the `iconTranslate` property is that the text `SymbolLayer` is aligned to the bottom of the icon (they do seem to move in unison though!). Is there a correct method for visually centering the text `SymbolLayer` on the icon `SymbolLayer` without creating creating the alignment issue again? – Tom Larcher Feb 11 '19 at 23:03
1

Nice - glad we've nearly got it. Is there a specific reason you feel like you need to be using an anchor? The default behavior is to center both elements based on the `lat/lon` in your data – riastrad Feb 13 '19 at 16:27
1

trust me to over-complicate things! Removing both the `iconAnchor` and `textAnchor` from my layer creator methods worked perfectly. Thank you so much for your ongoing assistance with this - you hit the nail on the head with your responses, thanks again. – Tom Larcher Feb 13 '19 at 23:36

Aligning Mapbox text SymbolLayer with icon SymbolLayer

1 Answers1