FlutterMap zooms into white screen

user_11865941 0
Viewed 735

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:

enter image description here

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.

fluttermap flutter
2 Answers

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
   ),
   // ...
)
user_99423460

FlutterMap provides a max and min zoom, and that is probably correct, but using MapBox or Google maps just zooms in nicer.

I ended up using the MapBox package https://pub.dev/packages/mapbox_gl in a full screen page where it doesn't affect scrolling as it would in a scrollview, and will be using a static image, or flutter_map in the scrollview to ensure the scrollview is speedy and redirect user from there to the map.

user_118659410
Related