Map kinda blurry when using tiles from Google Street

[brizaldi]

So, i'm using custom tile from Google Street

TileLayerOptions(
  urlTemplate: 'http://mt{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
  subdomains: ['0','1','2','3'],
  tileProvider: NonCachingNetworkTileProvider(),
),

but, the displayed map is kinda blurry

here is the example from the official google_maps_flutter library:

and then here is from the leaflet library

[maRci002]

PR #585 maybe helps, just set retinaMode to true on TileLayerOptions.

Here is the minimalistic code (I think you use lower resolution device however it should also work), this code changes retinaMode in real time so I have to play a bit with zoom / maxZoom.

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

import '../widgets/drawer.dart';

class HomePage extends StatefulWidget {
  static const String route = '/';
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool retina = false;
  MapController mapController;

  @override
  void initState() {
    super.initState();
    mapController = MapController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: buildDrawer(context, HomePage.route),
      floatingActionButton: FloatingActionButton(
          child: Text('Retina $retina', textAlign: TextAlign.center),
          onPressed: () {
            setState(() {
              if (retina) {
                // we'll disable retina mode
                mapController.move(
                    mapController.center, mapController.zoom + 1);
              } else {
                // we'll enable retina mode
                mapController.move(
                    mapController.center, mapController.zoom - 1);
              }

              retina = !retina;
            });
          }),
      body: FlutterMap(
        mapController: mapController,
        options: MapOptions(
          center: LatLng(1.354416, 103.853667),
          zoom: 13.0,
          maxZoom: retina ? 18.0 - 1.0 : 18.0,
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: 'http://mt{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
            subdomains: ['0', '1', '2', '3'],
            tileProvider: NonCachingNetworkTileProvider(),
            retinaMode: retina,
          ),
        ],
      ),
    );
  }
}

Result:

[hahazheng]

            retinaMode: retina,

Can't find this parameter, retinaMode: retina, why

[maRci002]

Becuase only PR #585 has those modifications, but you can use it if you clone this repo, or you can change flutter_map dependency in your pubspec.yaml and then run flutter pub upgrade

  flutter_map:
    git:
      url: git://github.com/johnpryan/flutter_map.git
      ref: b41932100ba8af15326560384d6667b4bd087c35

[maRci002]

Solved, see #613 (comment)

[cedvdb]

@maRci002 the result in your image is still kind of blurry. The example app too. Is that to be expected with raster tiles ?