mapbox / mapbox/mapbox-maps-flutter

Upgrading past 1.1.0 causes styles source data to flicker

Open
#806 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Dart
Stars
380
Forks
204
PR merge metrics
No merged PRs in 30d

Description

I'm having an issue with my mapbox style after upgrading the SDK to any version past 1.1.0. Layers in my styles.json start to disappear and reappear randomly at various zoom levels after a short time of using the map. It's almost like whole tiles just pop in and out. As soon as I move up to 2.0.0 and beyond, this issue happens (testing on iOS, not sure if this happens on Android too).

I should also mention that I’m using a tile server to serve my tiles, and this behavior doesn’t occur when I test on the web.

Here is my flutter widget as well as the linked styles.json file thats being used.

```
Widget build(BuildContext context) {
return Stack(
children: [
SizedBox(
height: widget.contentHeight,
child: Stack(
children: [
_buildNativeMap(),
if (_isMapInitialized) _buildFloatingButtons(),
],
),
),
]
);
}

Widget _buildNativeMap() {
return MapWidget(
key: const ValueKey("mapWidget"),
cameraOptions: CameraOptions(
center: Point(coordinates: Position(0, 0)).toJson(),
zoom: _currentZoom,
),
styleUri: 'https://glideai-mapbox-tiles.s3.us-east-2.amazonaws.com/styles/glideAI_style.json',
onMapCreated: _onMapCreated,
onTapListener: _onTapListener,
);
}

void _onMapCreated(MapboxMap mapboxMap) async {
this.mapboxMap = mapboxMap;
pointAnnotationManager = await mapboxMap.annotations.createPointAnnotationManager();

// Automatically navigate to location when the map is loaded
Future.delayed(const Duration(seconds: 1), () {
mapboxMap.easeTo(
CameraOptions(
center: Point(coordinates: Position(widget.longitude, widget.latitude)).toJson(),
zoom: 9,
),
MapAnimationOptions(duration: 1000),
);
});

_setupCameraListener();
_setupLocationComponent();
_setupGestureSettings();
_updateOrnamentSettings();
if (widget.isCreateAnnotation) {
_createLocationAnnotation(widget.latitude, widget.longitude);
}

setState(() {
_isMapInitialized = true;
});
}
```

Let me know if there is any more information that I can provide.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the flickering with the linked styles.json, tile server, and iOS SDK versions before and after 1.1.0. Compare behavior while changing zoom and camera position, and determine whether the issue is in the Flutter widget, style source, or native map SDK; done means identifying a reproducible regression and its affected component.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter, ios
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.