2

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.

Wesley Barnes
  • 554
  • 4
  • 18
  • I have added a maxZoom: 18, property, seems to stop it from going to the white screen. Not as close/clear as Google maps for Satellite view closeups, but it's ok. – Wesley Barnes Jan 21 '21 at 19:22

3 Answers3

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
   ),
   // ...
)
Guillaume Roux
  • 6,352
  • 1
  • 13
  • 38
0

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.

Wesley Barnes
  • 554
  • 4
  • 18
0

The way to go is to use maxNativeZoom, so if you set maxNativeZoom: 18 it will just "overzoom" if you zoom further than 18.

Try this out:

FlutterMap(
  options: MapOptions(
     maxNativeZoom: // your zoom level
  ),
  // ...
)