Map flickers or turns black when zooming/panning

[kalucky0]

trafficstars

When using Mapbox Maps for Flutter the map exhibits flickering or turns completely black during zoom and pan gestures. The issue occurs both in debug and release mode on Android devices and emulators.

• Flutter: 3.22.3 (stable)
• Mapbox Maps Flutter: 2.2.0

flutter doctor

[√] Flutter (Channel stable, 3.22.3, on Microsoft Windows [Version 10.0.22631.3880], locale en-US)
    • Flutter version 3.22.3 on channel stable at D:\Flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b0850beeb2 (6 weeks ago), 2024-07-16 21:43:41 -0700
    • Engine revision 235db911ba
    • Dart version 3.4.4
    • DevTools version 2.34.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\kaluc\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Users\kaluc\AppData\Local\Programs\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0--11572160)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • CHROME_EXECUTABLE = C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.11.1)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.11.35219.272
    • Windows 10 SDK version 10.0.22621.0

[√] Android Studio (version 2023.3)
    • Android Studio at C:\Users\kaluc\AppData\Local\Programs\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.10+0--11572160)

[√] IntelliJ IDEA Ultimate Edition (version 2024.2)
    • IntelliJ at C:\Users\kaluc\AppData\Local\Programs\IntelliJ IDEA Ultimate
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] VS Code (version 1.92.2)
    • VS Code at C:\Users\kaluc\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.94.0

[√] Connected device (4 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 14 (API 34) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.22631.3880]
    • Chrome (web)                 • chrome        • web-javascript • unknown
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 128.0.2739.42

[√] Network resources
    • All expected network resources are available.

• No issues found!

Code: https://gist.github.com/kalucky0/16424470b37c4a8a3c68ce130ee37fc7

Screenshots

Video

https://github.com/user-attachments/assets/cf9d7afe-e7c1-4c1d-9fd7-0c9e792403e6

[hafidzaini]

get this problem too

[maios]

Hi, does this happen also on iOS simulators/devices?

[kalucky0]

I wasn't able to reproduce the issue on iOS so I don't think so

[alejandrogiubel]

Any update on this?

[hafidzaini]

waiting for this too

[Stackustack]

Same problem 😢 spotted on Android 10 (Samsung Galaxy S9)

[GabrielSamojlo]

bumping - I have the same problem

[Magzhan1990]

Same problem spotted on Android 10 (Huawei P40 lite)

[50ways2sayhard]

I've encountered the same issue, but it seems to resolve when I reduce the number of layers from over 200 to around 100.

[josiahtmorgan]

I'm experiencing the same issue, only when running the app on Android. It runs fine on an iOS device.

I've tested it with a minimal Flutter project that only adds mapbox_maps_flutter: ^2.3.0 to the dependancies.

Flutter stable 3.24.3.

[lucianokapluk]

I only had this issue on a physical Android device, and I resolved it by adding a different map style:

MapWidget(
  styleUri: MapboxStyles.MAPBOX_STREETS,
  ...
)

It seems there’s a problem with the MapStyle.STANDARD.

[tthirietdev]

I have the same issue which is pretty annoying because you can't just use the defaults settings to develop quickly your app using a Map. (Which is why I chose MapBox at the first place, because of their flutter package.)

Disabling road labels with the following command resolved it for me at the moment (with the cost of not showing road label to Android users)

mapboxMap?.style.setStyleImportConfigProperty("basemap", "showRoadLabels", false);

I've encountered the same issue, but it seems to resolve when I reduce the number of layers from over 200 to around 100.

How do you make that ?

I only had this issue on a physical Android device, and I resolved it by adding a different map style:

MapWidget(
  styleUri: MapboxStyles.MAPBOX_STREETS,
  ...
)

It seems there’s a problem with the MapStyle.STANDARD.

It works for me too, but I couldn’t manage to change the map style to dark mode. It seems that the following command doesn't work for this map:

mapboxMap?.style.setStyleImportConfigProperty("basemap", "lightPreset", "night");

Do we know if this issue is for all Android users or only on old phone ?

Phone used in the video: Samsung XCover 4s (Android 11)

https://github.com/user-attachments/assets/006ca3be-551d-48db-b7fa-2baec5367682

[50ways2sayhard]

How do you make that ?

@tthirietdev I've just forked a style from the latest official outdoor template, which has fewer layers and better organization compared to the old one (from 200+ to 140+).

[tthirietdev]

I have recently updated the mapbox_maps_flutter package from 2.3.0 to 2.4.1 and it seems that I don't have the issue of the map flickering anymore.

[bamibestelt]

The same flickering issue is happening to my Samsung A51. I'm using mapbox_maps_flutter: ^2.2.1.