Black screen when using MapboxMap widget

[B3K4682]

When I try to display a Mapbox map using the MapWidget from mapbox_maps_flutter, it shows only a black screen. I followed the installation steps correctly.

Platform:

• Android
• iOS

Flutter version: 3.27.1
Mapbox plugin version: 2.7.0
Device: iPhone 16
OS Version: iOS 18.4

Code Snippet:

class _SearchMapState extends NyState<SearchMap> {
  MapboxMap? mapboxMap;

  // MapBox camera setttings
  CameraOptions camera = CameraOptions(
    center: Point(
        coordinates: Position(
      44.82813153527211,
      41.683475464916256,
    )),
    zoom: 10,
    bearing: 0,
    pitch: 0,
  );

  _onMapCreated(MapboxMap mapboxMap) async {
    this.mapboxMap = mapboxMap;

    await mapboxMap.location
        .updateSettings(LocationComponentSettings(enabled: true));
  }

  _SearchMapState() {
    stateName = SearchMap.state;
  }

  @override
  get init => () async {
};


  @override
  Widget view(BuildContext context) {
    return MapWidget(
      cameraOptions: camera,
      onMapCreated: _onMapCreated,
    );
  }
}

Screenshot:

[OgabekDev]

My problem also.

[konoplitskyi]

Me too, everything was fine on ios 18.2 👀

[maios]

Hi, does this happen on simulators only or also physical devices?
There is a known issue with iOS Simulators running iOS 18.4 that affects network requests, including the requests to load our map.

[mkhitarngs]

Me too, sometimes i see black screen on real device

Flutter version: 3.24.5
Mapbox plugin version: 2.5.0
Device: iPhone 12 Pro
OS Version: iOS 17.4.1

[maios]

Hi @mkhitarngs, your issue maybe relates to other issues of our map, could you please share how you setup the map? are you using offline features?

[mkhitarngs]

Hi @maios, here is example of setup, no i'm not offline features

class _MapState extends State<Map> {

  @override
  Widget build(BuildContext context) {

    return MapWidget(
      cameraOptions: CameraOptions(
        center: Point(
          coordinates: Position(
            44.82813153527211,
            41.683475464916256,
          ),
        ),
        zoom: 10.0,
      ),
      styleUri: 'mapbox://styles/mystyle/dcmqwct0t12qo24sbwe94gnrb',
      onMapCreated: _mapCreated,
      onTapListener: _mapTapped,
      onMapLoadedListener: _mapLoadled,
    );
  }


  void _mapCreated(MapboxMap c) async {
    await c.compass.updateSettings(CompassSettings(enabled: false));
    await c.scaleBar.updateSettings(ScaleBarSettings(enabled: false));
    await c.location
        .updateSettings(LocationComponentSettings(enabled: true, showAccuracyRing: false));

    await c.setBounds(CameraBoundsOptions(minZoom: 5.0, maxZoom: 15.0));
  }

  void _mapLoadled(MapLoadedEventData data) async {
    // rendering map points with cluster
  }

  void _mapTapped(MapContentGestureContext event) async {
    // handle click on marker
  }
}

[B3K4682]

Hi, does this happen on simulators only or also physical devices? There is a known issue with iOS Simulators running iOS 18.4 that affects network requests, including the requests to load our map.

Edit: the release version not showing map style was because I didn't pass token in the build define (As I figured it out), but I think the iOS 18.4 will still have the issue, even it fixed itself somehow when I restarted the app.

Hello @maios , I’ve tested this on a real devices running iOS 18.2.1 and 18.3.2, and the screen still appears black (screenshot attached below). the issue seems to have resolved itself on the simulator, though I’m not sure why. it still persists on actual devices, including older versions of iOS.

[aniketcme]

My problem also.