Grey screen on zoom

[hiteshgarg002]

The map Is getting greyed out on deeper zoom. Tried using OpenStreetMap tile as well as Mapbox tile. Also tried on other devices, getting same issue.
Tried on different android versions, same issue appears.

• Flutter v2.5.3
• flutter_map v0.14.0

flutter_map_greyed_out_issue_on_zoom.mp4

[JaffaKetchup]

AFAIK This looks like its a limitation of your tile provider. Tile providers can only provide up to a certain zoom level.

[hiteshgarg002]

@JaffaKetchup I have used MapBox tile, and the same tile is working perfectly with mapbox_gl plugin

[JaffaKetchup]

Not sure if I am right then, but the MapBox plugin probably won't be using static tiles, and the zoom limitations only apply to static tiles.

Again, not sure, and I'm probably wrong, but I'm going off that there are not more issues like this on this repo meaning it's working as expected.

[ibrierley]

What's the url you are using, and what zoom is it getting grey on ?

[hiteshgarg002]

What's the url you are using, and what zoom is it getting grey on ?

I am using

https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}

I have tried it with openstreet too, but no luck

It is happening around zoom level 18.5

[JaffaKetchup]

Can you try attaching a map controller and then listening to the map event stream. Then, print out the zoom level (from the event).

Every time you move the map you should see a load of numbers in console. Can you try with both your map sources and post the number before it goes blank?

[JaffaKetchup]

Yeah zoom level 18-19 are the limits for most servers, so you can be sure Open Street Maps won't work at zoom level 18.5 or more. Haven't had much experience with MapBox, but I imagine it's a similar idea.

Try setting the maxNativeZoom to 18 and maxZoom to 22 to scale tiles so the map doesn't go blank.

[hiteshgarg002]

Yeah zoom level 18-19 are the limits for most servers, so you can be sure Open Street Maps won't work at zoom level 18.5 or more. Haven't had much experience with MapBox, but I imagine it's a similar idea.

Try setting the maxNativeZoom to 18 and maxZoom to 22 to scale tiles so the map doesn't go blank.

Yes I could manage it by setting
maxZoom: 18.5
maxNativeZoom: 18.5

[AleksandarSavic95]

@hiteshgarg002 I have the same issue, and also fixed it by setting the maxZoom property 🤷

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[AleksandarSavic95]

Any updates on this?

[ibrierley]

What update are you after ? What is your tile url and what settings like above are you using ?

Normally this happens when the tileprovider doesn't provide the tiles at zoom levels being tried.

[AleksandarSavic95]

What update are you after ? What is your tile url and what settings like above are you using ?

Normally this happens when the tileprovider doesn't provide the tiles at zoom levels being tried.

Well I saw that @hiteshgarg002 said that MapBox was working perfectly with mapbox_gl plugin, and that with flutter_map we have to constrain the maxZoom value.
That's why I thought this is not solved.

[ibrierley]

mapbox_gl is different afaik. I think but it's a while since I checked, if you use Mapboxes own sdk to access it's own tiles, it will allow a higher level of zoom. Maybe that's the issue ?

[AleksandarSavic95]

Thanks for responding, but I'll let go of trying to solve this. 18.5 is completely okay zoom level 🤷

[ayavn]

Hi,
I got this error on version 3.0.0
Can someone help me ?

[ibrierley]

You need to provide more info/code etc.

[arsyadnimbly]

Hi guys, any update on this issue? I'm using version 3.0.0

[JaffaKetchup]

@arsyadnimbly We're going to need more information. I suggest you open a new issue.

[ibrierley]

Not really an update, its normally incorrect settings with your maxZoom being higher than available tiles. What settings do you have for your tile layer with maxZoom/maxNativeZoom and what tileURL ?

[leopard0122]

Hello, I have same problems when I zoom out. Please help me

[ibrierley]

You need to provide more information and some code.

[leopard0122]

FlutterMap(
                  mapController: _mapController,
                  options: MapOptions(
                    onMapReady: () {
                      setState(() {
                        isMapReady = true;
                      });
                    },
                    // bounds: LatLngBounds(
                    //   LatLng(84.547043, -171.3106),
                    //   LatLng(-60.23, 180),
                    // ),
                    // onPointerUp: ((event, point) => setState(() {
                    //       _bikeSelected = false;
                    //     })),
                    center:
                        LatLng(userLocation.latitude, userLocation.longitude),
                    interactiveFlags:
                        InteractiveFlag.pinchZoom | InteractiveFlag.drag,
                    zoom: 16,
                    maxZoom: 18,
                    minZoom: 1,
                    onTap: (tapPosition, point) {
                      setState(() {
                        debugPrint("onTap Location: ${point.toString()}");
                      });
                    },
                    onMapEvent: (p0) {
                      print("here-------------");
                      print(p0.zoom);
                    },
                  ),
                  children: [
                    TileLayer(
                      urlTemplate: AppConstants.urlTemplate,
                      userAgentPackageName: 'dev.fleaflet.flutter_map.example',
                    ),
                    PolylineLayer(
                      polylineCulling: true,
                      polylines: [
                        Polyline(
                            points: points,
                            strokeWidth: 4,
                            color: ColorConstants.cPrimaryBtnColor,
                            isDotted: true),
                      ],
                    ),
                    MarkerLayer(
                      markers: markers,
                    ),
                    MarkerLayer(
                      markers: <Marker>[userLocationMarker],
                    ),
                    if (_bikeSelected && isMapReady && statusMarker != null)
                      MarkerLayer(markers: <Marker>[statusMarker!])
                  ],

This is my code. I use static tiles

[ibrierley]

Ok, can you add a bit more info...does the map display at first and then it goes grey when you zoom ? (in which case to which level?), or is it grey from the start ? What is the tile URL ?

[leopard0122]

Thank you for replying
Yes, map display at first. and then when user zoom, part of map show grey screen

[leopard0122]

please let me know your contact info. I will show you recording video

[leopard0122]

[ibrierley]

What does AppConstants.urlTemplate contain ? (hide any keys)

[leopard0122]

'https://api.mapbox.com/styles/v1/${AppConstants.username}/${AppConstants.mapBoxStyleId}/tiles/256/{z}/{x}/{y}@2x?access_token=${AppConstants.mapBoxAccessToken}';

[ibrierley]

Was that grey area filled on first display, but went grey on zoom ? If not, it may just be map positioning, but I'm assuming that isn't the case, in which case you may need to create a minimal example for others to test.

I'd probably start with using one of the examples in the examples folder and slowly add bits in until it highlights the problem you have, and then post that example

[leopard0122]

yes, I don't have grey part of screen. but when I zoom in and out map, I can show grey screen, In my opinion, map loading speed is very slow. right?

[ibrierley]

Map loading should be pretty fast normally, but naturally it may depend on device, network connection etc.

Other thing I would do for testing only, is try it with the template url 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' hardcoded