Polyline not rendered correctly

[noforeignland]

When displaying a complex polyline it only renders correctly at higher zoom levels. At lower zoom levels, sections of the line fail to render.

Problem occurs using build 2.2.1. on physical iPhone 14 Pro, and Samsung S22. Not tested on other devices.

trim.31238215-C9A5-43FF-907F-183B8019DCB3.MOV

[evil159]

@noforeignland Could you share your layer&source setup?

[noforeignland]

@noforeignland Could you share your layer&source setup?

Yes here you go:

_recordTrackSource = GeoJsonSource(
  id: recordTrackSourceId,
  data: json.encode(GeoJsonUtils.emptyFeatureCollection),
);
await mapboxMap.style.addSource(_recordTrackSource);

await mapboxMap.style.addLayer(LineLayer(
  id: recordTrackLinesLayerId,
  sourceId: recordTrackSourceId,
  filter: ['==', '\$type', 'LineString'],
  lineColor: Colors.red.value,
  lineWidth: 2.5,
));

await mapboxMap.style.addLayer(SymbolLayer(
  id: recordTrackArrowsLayerId,
  sourceId: recordTrackSourceId,
  filter: ['==', '\$type', 'LineString'],
  symbolPlacement: SymbolPlacement.LINE,
  symbolSpacing: 100,
  iconImage: 'nfl_arrow',
  iconSize: 0.5,
));

await mapboxMap.style.addLayer(CircleLayer(
  id: recordTrackPuckLayerId,
  sourceId: recordTrackSourceId,
  filter: ['==', 'terminal', true],
  circleRadius: 5,
  circleColor: Colors.white.value,
  circleStrokeColor: Colors.red.value,
  circleStrokeWidth: 3,
  minZoom: 0,
));

[noforeignland]

@noforeignland Could you share your layer&source setup?

Yes here you go:

_recordTrackSource = GeoJsonSource(
  id: recordTrackSourceId,
  data: json.encode(GeoJsonUtils.emptyFeatureCollection),
);
await mapboxMap.style.addSource(_recordTrackSource);

await mapboxMap.style.addLayer(LineLayer(
  id: recordTrackLinesLayerId,
  sourceId: recordTrackSourceId,
  filter: ['==', '\$type', 'LineString'],
  lineColor: Colors.red.value,
  lineWidth: 2.5,
));

await mapboxMap.style.addLayer(SymbolLayer(
  id: recordTrackArrowsLayerId,
  sourceId: recordTrackSourceId,
  filter: ['==', '\$type', 'LineString'],
  symbolPlacement: SymbolPlacement.LINE,
  symbolSpacing: 100,
  iconImage: 'nfl_arrow',
  iconSize: 0.5,
));

await mapboxMap.style.addLayer(CircleLayer(
  id: recordTrackPuckLayerId,
  sourceId: recordTrackSourceId,
  filter: ['==', 'terminal', true],
  circleRadius: 5,
  circleColor: Colors.white.value,
  circleStrokeColor: Colors.red.value,
  circleStrokeWidth: 3,
  minZoom: 0,
));