Start and End Point Icons Overlapped by Trace Path in Mapbox

[shihanjun19]

I'm encountering an issue in my Mapbox implementation where the icons representing the start and end points of a movement trace are being overlapped by the trace path line. I'm looking for a way to ensure that these point icons are rendered above the trace line. Below is the relevant code snippet from my application:

/// Displays the start icon of the movement trace
void showStartLocation() async {
  final tracePositions = this.tracePositions;
  final ByteData bytes = await rootBundle.load('assets/images/icon_marker_start.png');
  final Uint8List imageData = bytes.buffer.asUint8List();
  Point start = Point(coordinates: tracePositions.first);
  final annotation = await pointAnnotationManager.addAnnotation(imageData, start);
}

/// Displays the end icon of the movement trace
void showEndLocation() async {
  final tracePositions = this.tracePositions;
  final ByteData bytes = await rootBundle.load('assets/images/icon_marker_end.png');
  final Uint8List imageData = bytes.buffer.asUint8List();
  Point end = Point(coordinates: tracePositions.last);
  final annotation = await pointAnnotationManager.addAnnotation(imageData, end);
}

/// Draws the movement trace path
void drawTraceLocationPath(List<Position> polyline) async {
  final mapboxMap = this.mapboxMap;
  final line = LineString(coordinates: polyline);

  mapboxMap.style.styleSourceExists("source").then((exists) async {
    if (exists) {
      // If source exists - just update it
      final source = await mapboxMap.style.getSource("source");
      (source as GeoJsonSource).updateGeoJSON(json.encode(line));
    } else {
      await mapboxMap.style.addSource(GeoJsonSource(id: "source", data: json.encode(line), lineMetrics: true));
      await mapboxMap.style.addLayer(LineLayer(
        id: 'layer',
        sourceId: 'source',
        lineCap: LineCap.ROUND,
        lineJoin: LineJoin.ROUND,
        lineBlur: 1.0,
        lineTrimOffset: [0.0, 0.0],
        lineWidth: 10,
      ));
    }

    final lineGradient = jsonEncode([
      'interpolate',
      ['linear'],
      ['line-progress'],
      ...MapUtils.getMapboxLineGradient(widget.tracePoints!)
    ]);

    // Draw layer with gradient
    mapboxMap.style.setStyleLayerProperty('layer', 'line-gradient', lineGradient);
  });
}

The issue is that the line representing the movement trace is rendering on top of the start and end point icons, making them less visible or entirely obscured. I need the start and end icons to always appear on top of the trace line for better visibility. Is there a specific setting or method in Mapbox that allows for controlling the z-index or layer order of these elements?

Any guidance or suggestions would be greatly appreciated. Thank you!