flutter - FlutterMap zooms into white screen

Question

When zooming in on the map, it creates a white screen at the end. Anyone have any idea why?

Happens on both Android and iOS. On emulator/simulator and on physical device in release mode. Happens with all tile services: Google, MapBox & OpenStreetMap.

It does not happen with Google Maps and MapBox packages, but they are both so slow and janks the list view continuously when scrolling on the page where they show.

This gif shows what happens:

Here is a my minimal code example:

Widget build(BuildContext context) {
  return Scaffold(
      body: FlutterMap(
    options: MapOptions(
      center: LatLng(routeLat, routeLong),
      zoom: 17.0,
    ),
    layers: [
      TileLayerOptions(
        urlTemplate:
            mapStringAndKey
      ),
      MarkerLayerOptions(
        markers: [
          Marker(
            width: 150.0,
            height: 100.0,
            point: LatLng(routeLat, routeLong),
            builder: (ctx) => Container(
              child: Column(
                children: [
                  Icon(
                    Icons.location_on,
                    size: 40,
                    color: Colors.blue,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ],
  ));
}

Thank you for any ideas.

Answer 1

It is probably because FlutterMap is trying to load map tiles for an unsupported zoom level. Each time you are zooming, FlutterMap is fetching tiles for the new zoom level. You should define a maxZoom property to stop the user from zooming too much and getting a white screen.

FlutterMap(
   options: MapOptions(
      maxZoom: // your maxZoom value
   ),
   // ...
)