FlutterMap blur text issue

Question

I am working on a Flutter application where we need to show a map within our Flutter app. I've chosen FlutterMap pub.dev package for the same. It works fine, however there's an issue with the performance. The text (for places) displayed in the map are blurry (though still readable) and doesn't look good on high resolution devices.

I've searched through SO and Github for similar problems being faced by fellow Flutter developers. Here are my findings:

• The primary solution to this problem as suggested by many is using retinaMode. I've tried it but now the issue is the text becomes too small (since retinaMode renders 4 tiles in space of 1).

• The second solution I found was regarding trying out a map tile server which supports tiles of size 512*512. This is supported by Mapbox, though due to a restriction I can't use it. Presently I'm using Google maps tile server, and I've tried with OpenStreetMap as well. The blur issue is similar in both.

• I've tried manually setting tile size to 512*512 with retinaMode on but Google tile server/ OpenStreetMap doesn't support that size.

Other alternatives:

• I can either check another map library (Google maps for Flutter) however for our use-case we've already concluded Flutter map provides some better features. Also, I assume the tile server would pose a common issue here as well. So I'm not really sure whether it can be used.

• Another option is to remove any map library altogether and rely on native map experience (Google maps on Android / Apple Maps on iOS). But that defeats the purpose of having a map screen integrated within our app.

Has anyone found a solution to this problem. I'd really appreciate any help, been stuck here for a while now.

Answer 1

TLDR: Keep trying to use retina mode with x512 tiles and tileSize set to 256. Alternatively, use vector tiles if you can.

The correct answer here (whilst remaining in the realm of raster tiles) is to use retina mode. However, as you said, on a non-retina device, it results in the output being really small. Therefore, as you also said, the next best method is to use larger tiles.

You mentioned you couldn't use 512x512 tiles from Mapbox due to a 'restriction'. Would it be possible for you to elaborate what this restriction is? FM does support x512 tiles, both with tileSize set to 256 and 512 dependent on your preference (it doesn't need to match the real size). In fact, if you use 512 tiles and set the size to 256, it might downsize them, which should yield even better resolution.

Unfortunately, there's nothing that FM can do about the resolution. It renders raster tiles, which are already generated on a remote server - there's no text element that FM can paint itself at a higher resolution.
However, as I hinted at, there is a way around this. Using vector tiles allows the device to render each element of the tile at the best resolution it can. FM doesn't natively support vector tiles, but there is a plugin that adds support. See https://docs.fleaflet.dev/explanation/raster-vs-vector-tiles for more info. Of course, there are also tradeoffs with this method.

---

Also, just a quick warning, I think the way you're retrieving raster tiles from the Google Maps Platform is against their ToS, so be wary!