Mapbox: Location symbol (puck) is shown under the route

Question

Does anybody know how to make the location "puck" in mapbox appear above the route using Mapbox Android API? I have followed examples from Mapbox Demo App, but sadly it still doesn't work as I would like. Here is the demonstration of the problem:

This is how I initialize the map:

mapboxMap.setStyle(style, new Style.OnStyleLoaded() {
    @Override
    public void onStyleLoaded(@NonNull Style style) {
        loadedStyle = style;
        initRouteLayer();
        showActiveRoute();
        initIcons();
        initLocationComponent(style);
        initListeners();

        Log.i(TAG, "++ Repaint complete");
    }
});

Initialization of specified route:

private void initRouteLayer() {
    ROUTE_SOURCE_ID = UUID.randomUUID().toString();
    final String routeLayerId = UUID.randomUUID().toString();

    loadedStyle.addSource(new GeoJsonSource(ROUTE_SOURCE_ID,
            FeatureCollection.fromFeatures(new Feature[]{})));

    LineLayer routeLayer = new LineLayer(routeLayerId, ROUTE_SOURCE_ID);

    // Add the LineLayer to the map. This layer will display the directions route.
    routeLayer.setProperties(
            lineCap(Property.LINE_CAP_ROUND),
            lineJoin(Property.LINE_JOIN_ROUND),
            lineWidth(5f),
            lineColor(FrontendUtils.getColor(getContext(), R.color.activeRoute))
    );

    loadedStyle.addLayer(routeLayer);
}

private void showActiveRoute() {
    Log.d(TAG, "Showing active route (activeroute: " + hasActiveRoute()
            + ", fully loaded: " + isFullyLoaded() + ")");

    if(hasActiveRoute() && isFullyLoaded()) {
        // Retrieve and update the source designated for showing the directions route
        GeoJsonSource source = loadedStyle.getSourceAs(ROUTE_SOURCE_ID);

        if(source != null) {
            source.setGeoJson(routes.get(getActiveRouteIndex()));
        }
    }
}

And this is how location component is being initialized:

private void initLocationComponent(@NonNull Style loadedMapStyle) {
    // Get an instance of the component
    locationComponent = mapboxMap.getLocationComponent();

    LocationComponentOptions customLocationComponentOptions = LocationComponentOptions.builder(getContext())
            .foregroundDrawable(R.drawable.location_puck)
            .build();

    LocationComponentActivationOptions locationComponentActivationOptions =
            LocationComponentActivationOptions.builder(getContext(), loadedMapStyle)
                    .locationComponentOptions(customLocationComponentOptions)
                    .build();

    // Activate with options
    locationComponent.activateLocationComponent(locationComponentActivationOptions);

    // Enable to make component visible
    locationComponent.setLocationComponentEnabled(true);

    // Set the component's render mode
    locationComponent.setRenderMode(RenderMode.NORMAL);
}

There are no other problems with the map, apart from the location symbol being drawn under the route for some reason. I will be very thankful for your help!

Answer 1

The current Mapbox SDK has this function withRouteLineBelowLayerId to ensure the route line stays under the specified layer (LocationComponentConstants.LOCATION_INDICATOR_LAYER in your case).