Flutter_map: Map quality is poor

[A1Gard]

I used flutter map and openstreet map, but the map quality is to low. I used other services, but the problem still not solved.

FlutterMap(
  mapController: _mapcontroller,
  options: MapOptions(
    onTap: (ps) {
     // di some thing
    },
    center: LatLng(_pos.latitude, _pos.longitude),
    zoom: 15.0,
    maxZoom: 18,
  ),
  layers: [
    TileLayerOptions(
        tileProvider: NetworkTileProvider(),
//                    urlTemplate: 'http://tile.memomaps.de/tilegen/{z}/{x}/{y}.png',
        urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
//                    urlTemplate: 'https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}',
        subdomains: ['a', 'b', 'c']),
    MarkerLayerOptions(
      markers: markers,
    )
  ],
),

Look at result the Curved lines!!!
Any idea to improve map quality ?

[farzady]

I have same problem too, And I use the latest version.

[moovida]

Hi @A1Gard , @farzady , is it possible that this occurs because you are zooming between the zoomlevels for which the tiles are defined (think of the zoomlevel you push when you have buttons against when pinching with the fingers). I think the interpolation methods used for the intermediate levels are simple chosen for speed and not for proper antialiasing.

It would be nice to have control over that (if it is that), since also image layers suffer from lower quality than the original. Had no time to investigate yet, though.

[ibrierley]

It will certainly be sharper if only having a zoom level that's an integer, and I guess something you can control. The other thing that springs to mind is retina displays, maybe see https://github.com/johnpryan/flutter_map/pull/585

[mat8854]

Maybe someone can also try this modified version with FilterQuality set to FilterQuality.high in the RawImage in tile_layer.dart:

  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: widget.tile.opacity,
      child: (widget.tile.loadError && widget.errorImage != null)
          ? Image(
              image: widget.errorImage,
              fit: BoxFit.fill,
            )
          : RawImage(
              image: widget.tile.imageInfo?.image,
              filterQuality: FilterQuality.high,
              fit: BoxFit.fill,
            ),
    );
  }

I can see no effect on my device (?).

[A1Gard]

@moovida Thanks bro. I'm sure, it depends on zoom between the zoom levels, Cuz when the map rendered by 18.0 zoom, the problem exist .

@ibrierley the pull request blocked. :(
@ibrierley and @mat8854 thanks for your kindness, there is no official solution? If not. How can I use library with your solutions without use the main package.

[ibrierley]

I think you can still link to a pull request in your pubspec.yaml if needed, but it's a while since I tried that, so I may be out of touch a bit.

[mat8854]

You can reference open PRs from your pubspec like said here

Where ref is the id of the latest commit.

[szybki8562]

use
retinaMode: true

[pinzon]

@szybki8562 where do you set that option? There is no mention of the retinaMode in the documentation.

EDIT: Nevermind, I found it. It's at the TileLayerOptions.
it fixed the problem for me.

[szybki8562]

layers: [ new TileLayerOptions( urlTemplate: 'https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png', maxZoom: 22.0, subdomains: ['a', 'b', 'c'], tileProvider: CachedNetworkTileProvider(), retinaMode: true), MarkerLayerOptions( markers: widget.markers, ), ],

flutter_map: ^0.10.1

[mat8854]

use
retinaMode: true

@szybki8562 I tried it today. It still looks worse than other map implementations (osmdroid for example).

[szybki8562]

@mat8854 You can change tileLayer
http://leaflet-extras.github.io/leaflet-providers/preview/index.html

[mat8854]

@szybki8562 I think both osmdroid and flutter_map use Mapnik as default source.

[szybki8562]

This is how it looks on my device

[A1Gard]

I found the problem and fix it with retinaMode.

The code:

FlutterMap(
  mapController: _mapcontroller,
  options: MapOptions(
    onTap: (ps) {
     // di some thing
    },
    center: LatLng(_pos.latitude, _pos.longitude),
    zoom: 17,
    maxZoom: 21,
  ),
  layers: [
    TileLayerOptions(
        tileProvider: NetworkTileProvider(),
                urlTemplate: 'http://mt{s}.google.com/vt/lyrs=m@221097413,parking,traffic,lyrs=m&x={x}&y={y}&z={z}',
                subdomains: ['0', '1', '2', '3'],
                retinaMode: true,
                maxZoom: 22,
),
    MarkerLayerOptions(
      markers: markers,
    )
  ],
),

Note 1: opensteet support only until 19 zoom level, so google map is better for retinaMode
Note 2: we have to maxZoom we should use by this pattern to best result.

Thank for all helps, Spatially @mat8854