Mapbox: How to correct Line overlapping over a Symbol

Question

I'm using the SymbolManager to display two symbols on the map. Here is an example:

The dark symbol is because of the fact that I'm testing the project on the Emulator, but the Line goes under the symbol, as it should be. The problem comes with the other symbol (finish flag). After I'm ready with the drawing of the line, the following code block is called:

symbolManager = new SymbolManager(mapView,mMapboxMap,style);

symbolManager.setIconAllowOverlap(true);
symbolManager.setIconIgnorePlacement(true);

SymbolOptions symbolOptionsFinishFlag = new SymbolOptions()
              .withIconImage(IMAGE_FINISH_FLAG)
              .withIconSize(2.0f)
              .withLatLng(newLatLngs.get(newLatLngs.size()-1));

symbolManager.create(symbolOptionsFinishFlag);

LatLngBounds.Builder builder = new LatLngBounds.Builder();
builder.includes(newLatLngs);
LatLngBounds bounds = builder.build();

final CameraUpdate cu = new CameraUpdateFactory().newLatLngBounds(bounds,300);
mMapboxMap.easeCamera(cu,5000);

I checked some examples in the Mapbox site and it seems to be correct. However, the Symbol is under the Line, how can I bring on top of it?

Answer 1

Although SymbolManagers can be useful means for providing an abstraction over the methods needed to add symbols to a map, you may get some more flexibility by working with native SymbolLayers directly. This example shows how to add symbol layer icons to a map, and this example shows how to specify layer ordering when new layers are added. So, by adding two symbol layers for your start and finish icons, and a line layer for the line between them, you could use style.addLayerBelow(finishFlagLayer, "name_of_line_layer").

Answer 2

If you are using a LineLayer, when adding it to the map use style.addLayerBelow(lineLayer, symbolManager.layerId)

Answer 3

This answer is about how to do this in Mapbox SDK v9. All AnnotationManager subclasses have a constructor which allows you to mention which layerId this should be below.

For example, in LineManager, we have this constructor

LineManager(MapView mapView, MapboxMap mapboxMap, Style style, java.lang.String belowLayerId)

Another method which will be needed here is the getLayerId method in the AnnotationManager class which returns the id used by a certain layer.

getLayerId

public java.lang.String getLayerId()

Returns a layer ID that annotations created by this manager are laid out on. This reference can be used together with Style#addLayerAbove(Layer, String) or Style#addLayerBelow(Layer, String) to improve other layers positioning in relation to this manager.

Returns:
underlying layer's ID

So say there are 3 elements on the map, a circle, a line and a symbol and we need to show the circle at the bottom, then the line above and finally the symbol at the top most.

So we will create our AnnotationManagers in this way -

val symbolManager = SymbolManager(mapView, map, map.style!!)
val lineManager = LineManager(mapView, map, map.style!!, symbolManager.layerId)
val fillManager = FillManager(mapView, map, map.style!!, lineManager.layerId)

What we're doing here is that while creating the lineManager object, we pass the layerId of the symbolManager which ensures that the Lines created using LineManager are always below the Symbols created using the SymbolManager. And the same for FillManager being below the lineManager object.