Map not loading

[chegmarco1989]

What is the bug?

Hello.

I'm using flutter_map: ^8.1.1 like follow:

return StreamBuilder<
                                                                List<Marker>>(
                                                            stream:
                                                                carMarkerStream,
                                                            builder: (context,
                                                                snapshot) {
                                                              return fm
                                                                  .FlutterMap(
                                                                mapController:
                                                                    _fmController,
                                                                options: fm
                                                                    .MapOptions(
                                                                        onMapEvent:
                                                                            (v) async {
                                                                          if (v.source == fm.MapEventSource.nonRotatedSizeChange &&
                                                                              addressList.isEmpty) {
                                                                            _centerLocation =
                                                                                LatLng(v.camera.center.latitude, v.camera.center.longitude);
                                                                            setState(() {});

                                                                            var val =
                                                                                await geoCoding(_centerLocation.latitude, _centerLocation.longitude);
                                                                            if (val !=
                                                                                '') {
                                                                              setState(() {
                                                                                if (addressList.where((element) => element.type == 'pickup').isNotEmpty) {
                                                                                  var add = addressList.firstWhere((element) => element.type == 'pickup');
                                                                                  add.address = val;
                                                                                  add.latlng = LatLng(_centerLocation.latitude, _centerLocation.longitude);
                                                                                } else {
                                                                                  addressList.add(AddressList(id: '1', type: 'pickup', address: val, pickup: true, latlng: LatLng(_centerLocation.latitude, _centerLocation.longitude), name: userDetails['name'], number: userDetails['mobile']));
                                                                                }
                                                                              });

                                                                              _lastCenter = _centerLocation;
                                                                              ischanged = false;
                                                                            }
                                                                          }
                                                                          if (v.source ==
                                                                              fm.MapEventSource.dragEnd) {
                                                                            _centerLocation =
                                                                                LatLng(v.camera.center.latitude, v.camera.center.longitude);
                                                                            setState(() {});
                                                                            if (userDetails['enable_map_location_icon_drag_and_drop_feature'] ==
                                                                                '0') {
                                                                              var val = await geoCoding(_centerLocation.latitude, _centerLocation.longitude);
                                                                              lowerLat = _centerLocation.latitude - (lat * 1.24);
                                                                              lowerLon = _centerLocation.longitude - (lon * 1.24);
                                                                              greaterLat = _centerLocation.latitude + (lat * 1.24);
                                                                              greaterLon = _centerLocation.longitude + (lon * 1.24);
                                                                              lower = geo.encode(lowerLon, lowerLat);
                                                                              higher = geo.encode(greaterLon, greaterLat);

                                                                              fdb = FirebaseDatabase.instance.ref('drivers').orderByChild('g').startAt(lower).endAt(higher);
                                                                              if (val != '') {
                                                                                setState(() {
                                                                                  if (addressList.where((element) => element.type == 'pickup').isNotEmpty) {
                                                                                    var add = addressList.firstWhere((element) => element.type == 'pickup');
                                                                                    add.address = val;
                                                                                    add.latlng = LatLng(_centerLocation.latitude, _centerLocation.longitude);
                                                                                  } else {
                                                                                    addressList.add(AddressList(id: '1', type: 'pickup', address: val, pickup: true, latlng: LatLng(_centerLocation.latitude, _centerLocation.longitude), name: userDetails['name'], number: userDetails['mobile']));
                                                                                  }
                                                                                });

                                                                                _lastCenter = _centerLocation;
                                                                                ischanged = false;
                                                                              }
                                                                            }
                                                                          }
                                                                        },
                                                                        onPositionChanged: (p,
                                                                            l) async {
                                                                          if (l ==
                                                                              false) {
                                                                            if (addressList.isEmpty) {
                                                                              _centerLocation = LatLng(p.center.latitude, p.center.longitude);
                                                                              setState(() {});

                                                                              var val = await geoCoding(_centerLocation.latitude, _centerLocation.longitude);
                                                                              lowerLat = _centerLocation.latitude - (lat * 1.24);
                                                                              if (val != '') {
                                                                                setState(() {
                                                                                  if (addressList.where((element) => element.type == 'pickup').isNotEmpty) {
                                                                                    var add = addressList.firstWhere((element) => element.type == 'pickup');
                                                                                    add.address = val;
                                                                                    add.latlng = LatLng(_centerLocation.latitude, _centerLocation.longitude);
                                                                                  } else {
                                                                                    addressList.add(AddressList(id: '1', type: 'pickup', address: val, pickup: true, latlng: LatLng(_centerLocation.latitude, _centerLocation.longitude), name: userDetails['name'], number: userDetails['mobile']));
                                                                                  }
                                                                                });

                                                                                _lastCenter = _centerLocation;
                                                                                ischanged = false;
                                                                              }
                                                                            }
                                                                          }
                                                                        },
                                                                        // interactiveFlags: ~fm
                                                                        //     .InteractiveFlag
                                                                        //     .doubleTapZoom,
                                                                        initialCenter: fmlt.LatLng(
                                                                            center
                                                                                .latitude,
                                                                            center
                                                                                .longitude),
                                                                        initialZoom:
                                                                            16,
                                                                        onTap: (P,
                                                                            L) {}),
                                                                children: [
                                                                  fm.TileLayer(
                                                                    // minZoom: 10,
                                                                    urlTemplate: (isDarkTheme ==
                                                                            false)
                                                                        ? 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
                                                                        : 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                                                                    // subdomains: ['a', 'b', 'c', 'd'],
                                                                    userAgentPackageName:
                                                                        'com.example.app',
                                                                  ),
                                                                  fm.MarkerLayer(
                                                                    markers: myMarkers
                                                                        .asMap()
                                                                        .map(
                                                                          (k, value) =>
                                                                              MapEntry(
                                                                            k,
                                                                            fm.Marker(
                                                                              alignment: Alignment.topCenter,
                                                                              point: fmlt.LatLng(myMarkers[k].position.latitude, myMarkers[k].position.longitude),
                                                                              width: media.width * 0.7,
                                                                              height: 50,
                                                                              child: RotationTransition(
                                                                                turns: AlwaysStoppedAnimation(myMarkers[k].rotation / 360),
                                                                                child: Image.asset(
                                                                                  (myMarkers[k].markerId.toString().replaceAll('MarkerId(', '').replaceAll(')', '').split('#')[2].toString() == 'taxi')
                                                                                      ? 'assets/images/top-taxi.png'
                                                                                      : (myMarkers[k].markerId.toString().replaceAll('MarkerId(', '').replaceAll(')', '').split('#')[2].toString() == 'truck')
                                                                                          ? 'assets/images/dev.png'
                                                                                          : 'assets/images/bicy.png',
                                                                                ),
                                                                              ),
                                                                            ),
                                                                          ),
                                                                        )
                                                                        .values
                                                                        .toList(),
                                                                  ),
                                                                  const fm
                                                                      .RichAttributionWidget(
                                                                    attributions: [],
                                                                  ), 
                                                                ],
                                                              );
                                                            });

But, as you can see on the Screen Shot below, it is hidden. I try anything I know but it does display at all:

I want to point out that sometimes the map displays very well but other times it hides.

Please, I really need your help.

Do you have a potential solution?

No response

[Artein]

My issue might be similar. After upgrading to 8.1.1 (from 7.0.2) suddenly my map started to be cyan and showing no actual map

8.0.0 doesn't work either. Only rolling back to 7.0.2 works. Flutter 3.29.2

My widget implementation:

class PlaceLocationOverrideMap extends StatefulWidget {
  final LatLong initialCoordinate;
  final Duration applyLocationChangeAnimationDelay;

  const PlaceLocationOverrideMap({super.key, required this.initialCoordinate, required this.applyLocationChangeAnimationDelay});

  @override
  State<StatefulWidget> createState() => _PlaceLocationOverrideMapState();
}

class _PlaceLocationOverrideMapState extends State<PlaceLocationOverrideMap> with AutomaticKeepAliveClientMixin {
  static const mapDefaultZoom = 13.0;
  static const ripplesSizeRatio = 90 / mapDefaultZoom;
  final _mapTilesFileCacheStoreProvider = GetIt.I<MapTilesFileCacheStoreProvider>();
  final _placesLocationProvider = GetIt.I<PlacesLocationProvider>();
  final _analyticsTracker = GetIt.I<AnalyticsTracker>();
  final _eventBus = GetIt.I<EventBus>();
  final MapController _mapController = MapController();
  final _mapCustomCoordinate = ValueNotifier<LatLong?>(null);
  final _isMapPointerUpNotifier = ValueNotifier<bool>(true);
  late final _log = Logger(runtimeType.toString());

  // HACK: we need to refrain once from assigning new _customMapPosition from onPositionChanged after reset
  bool _skipMapPositionChangeOnceDueToCoordinateReset = false;

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();

    if (_placesLocationProvider.hasCoordinateOverride) {
      unawaited(_placesLocationProvider.getCurrentPosition().then((coordinate) => _mapCustomCoordinate.value = coordinate));
    }

    _mapCustomCoordinate.addListener(_onMapCustomCoordinateChanged);
  }

  @override
  void dispose() {
    _mapCustomCoordinate.removeListener(_onMapCustomCoordinateChanged);

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);

    return FlutterMap(
      mapController: _mapController,
      options: MapOptions(
        initialCenter: LatLng(widget.initialCoordinate.latitude, widget.initialCoordinate.longitude),
        initialZoom: mapDefaultZoom,
        minZoom: 0,
        maxZoom: 20,
        onPointerDown: (_, __) => _isMapPointerUpNotifier.value = false,
        onPointerUp: (_, __) => _isMapPointerUpNotifier.value = true,
        onPositionChanged: _onMapPositionChanged,
      ),
      children: [
        TileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          userAgentPackageName: 'com.company.app',
          // OpenStreetMap does not support retina tiles. Fake retina due to x4 tile loaded with additional scaling
          retinaMode: true,
          tileProvider: PlacesCachedTileProvider(store: _mapTilesFileCacheStoreProvider.cacheStore),
          evictErrorTileStrategy: EvictErrorTileStrategy.notVisibleRespectMargin,
          errorTileCallback: (_, __, ___) => const Icon(Icons.error_outline, color: Colors.grey, size: 40),
        ),
        ValueListenableBuilder(
          valueListenable: _isMapPointerUpNotifier,
          builder: (_, isMapPointerUp, __) {
            var ripplesSize = _mapController.camera.zoom * ripplesSizeRatio;
            return LocationRipple(
              animate: isMapPointerUp,
              ripplesNumber: 0,
              ripplesSize: ripplesSize,
              singleRippleDuration: 2.seconds,
              startDelay: widget.applyLocationChangeAnimationDelay,
            );
          },
        ),
        buildFlutterMapRichAttributionWidget(context),
        Align(
          alignment: Alignment.bottomRight,
          child: Padding(
            padding: const EdgeInsets.fromLTRB(0, 0, 4, 48),
            child: SizedBox(
              width: 48,
              height: 48,
              child: ValueListenableBuilder(
                valueListenable: _mapCustomCoordinate,
                builder: (_, mapCustomCoordinate, __) => IconButton(
                  icon: Icon(
                    Icons.my_location,
                    color: mapCustomCoordinate == null ? Colors.black26 : Colors.black54,
                  ),
                  iconSize: 32,
                  onPressed: _onRemoveLocationOverrideButtonPressed,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

  void _onMapPositionChanged(MapCamera position, bool _) {
    if (_skipMapPositionChangeOnceDueToCoordinateReset) {
      _skipMapPositionChangeOnceDueToCoordinateReset = false;
      return;
    }

    var center = position.center;
    _mapCustomCoordinate.value = LatLong(latitude: center.latitude, longitude: center.longitude);
  }

  void _onRemoveLocationOverrideButtonPressed() {
    unawaited(_analyticsTracker.trackButtonClickEvent('ResetMapPosition', _log));
    _eventBus.fire(ButtonClickedSignal());

    unawaited(_resetMapCoordinateToLive());
  }

  Future<void> _resetMapCoordinateToLive() async {
    final livePosition = await _placesLocationProvider.getCurrentPosition(applyOverrideIfExists: false);

    if (livePosition == null) {
      _log.warning('failed resetting map (reason: live position is null)');
      return;
    }

    _skipMapPositionChangeOnceDueToCoordinateReset = true;
    _mapCustomCoordinate.value = null;

    final mapCoordinate = LatLng(livePosition.latitude, livePosition.longitude);
    _mapController.move(mapCoordinate, mapDefaultZoom);
  }

  void _onMapCustomCoordinateChanged() {
    _placesLocationProvider.coordinateOverride = _mapCustomCoordinate.value;
  }
}

[JaffaKetchup]

Hi @Artein, your problem looks potentially different. For the time being, I would try removing the emulation of retina mode: see #2042. If that doesn't fix your issue, please open another one with an MRE.

Hi @chegmarco1989, this looks like a problem outside of flutter_map at first glance, since we wouldn't show a loader like that. It would be great if you could create an MRE to help us! That means no StreamBuilder/FutureBuilder, and hardcoded arguments to the map.

[JaffaKetchup]

Closing as no more information has been supplied and I believe this to not be an issue with FM.