[BUG] Slow loading and SocketExceptions for map tiles #1831
Comments
CvisionTeam
added
bug
|
Hi @CvisionTeam, thanks for the report. Can you try using the cancellable tile provider and checking whether the issue persists? |
|
Hi @JaffaKetchup, How can I do that, can you please provide an example? |
|
Please see https://docs.fleaflet.dev/layers/tile-layer/tile-providers#cancellablenetworktileprovider. Just install and swap out the provider. |
|
Thank you for the update, but the problem persists even after I set the |
|
@yezouagh Sorry, I'm a little confused, are you related to the @CvisionTeam, who reported this issue initially? You look to be not using Google Maps, as in the initial post, in which case I would ask you check the speed of your tile server though a different library/on another site. |
|
Hey @JaffaKetchup, this is my personal GitHub, the @CvisionTeam is my work GitHub account. Yes, I'm also using Google Maps, I have a button for switching between different tile providers. I/flutter ( 5059): DioException [unknown]: null
I/flutter ( 5059): Error: HttpException: Connection closed before response was received, uri = http://mt1.google.com/vt/lyrs=m&x=498&y=403&z=10&apistyle=s.t%3A17%7Cs.e%3Alg%7Cp.v%3Aoff
I/flutter ( 5059): DioException [unknown]: null
I/flutter ( 5059): Error: HttpException: Connection closed before response was received, uri = http://mt2.google.com/vt/lyrs=m&x=497&y=409&z=10&apistyle=s.t%3A17%7Cs.e%3Alg%7Cp.v%3Aoff
I/flutter ( 5059): DioException [unknown]: null
I/flutter ( 5059): Error: HttpException: Connection closed before response was received, uri = http://mt3.google.com/vt/lyrs=m&x=500&y=403&z=10&apistyle=s.t%3A17%7Cs.e%3Alg%7Cp.v%3Aoff
I/flutter ( 5059): DioException [unknown]: null
I/flutter ( 5059): Error: HttpException: Connection closed before response was received, uri = http://mt0.google.com/vt/lyrs=m&x=500&y=400&z=10&apistyle=s.t%3A17%7Cs.e%3Alg%7Cp.v%3Aoff
I/flutter ( 5059): DioException [unknown]: nullbelow are the screenshots of Google Maps tiles. |
|
Random comment. Why are the Google Maps URLs http not https? |
|
I didn't pay attention to that, I've always been using it like that, I don't this is the problem, because the other map tiles use HTTPS, and yet the problem arises. |
|
I find two things difficult to understand:
Please provide either the code for the complete flutter_map widget with all layers and the MapOptions. A video showcasing the behaviour would be helpful too, the screenshots are hard to follow along and make conclusions on. |
|
It could also be worth testing on the 'master' branch. #1742 was designed to fixed a similar issue, but is not available in a release yet, AFAIK. |
|
Hello everyone, I had the same problem too. Before: class MapWidget extends StatefulWidget {
const MapWidget({super.key});
@override
State<MapWidget> createState() => _MapWidgetState();
}
class _MapWidgetState extends State<MapWidget> {
List<Polygon> polygons = [];
List<Polyline> polylines = [];
List<Marker> markers = [];
@override
Widget build(BuildContext context) {
final bloc = geoDataCubit;
return BlocListener<GeoDataCubit, GeoDataState>(
listener: (context, state) {
if (state is GeoDataLoaded) {
polygons = state.polygons;
polylines = state.polylines;
markers = state.markers;
}
setState(() {});
},
child: FlutterMap(
mapController: bloc.mapController,
options: MapOptions(
initialCenter: const LatLng(40.246973, 64.3),
initialZoom: bloc.zoomLavel,
cameraConstraint: CameraConstraint.contain(
bounds: LatLngBounds(
const LatLng(-90, -180),
const LatLng(90, 180),
),
),
interactionOptions: const InteractionOptions(
flags: InteractiveFlag.all & ~InteractiveFlag.rotate,
),
onMapEvent: (MapEvent event) {
bloc.onMapMoved(event.camera.zoom);
},
),
children: [
TileLayer(
urlTemplate: 'https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}',
userAgentPackageName: 'uz.ekon.mobile',
),
PolylineLayer(polylines: polylines),
PolygonLayer(polygons: polygons),
MarkerLayer(markers: markers),
],
),
);
}
}After: class MapWidget extends StatefulWidget {
const MapWidget({super.key});
@override
State<MapWidget> createState() => _MapWidgetState();
}
class _MapWidgetState extends State<MapWidget> {
List<Polygon> polygons = [];
List<Polyline> polylines = [];
List<Marker> markers = [];
final tileLayer = TileLayer(
urlTemplate: 'https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}',
userAgentPackageName: 'uz.ekon.mobile',
);
@override
Widget build(BuildContext context) {
final bloc = geoDataCubit;
return BlocListener<GeoDataCubit, GeoDataState>(
listener: (context, state) {
if (state is GeoDataLoaded) {
polygons = state.polygons;
polylines = state.polylines;
markers = state.markers;
}
setState(() {});
},
child: FlutterMap(
mapController: bloc.mapController,
options: MapOptions(
initialCenter: const LatLng(40.246973, 64.3),
initialZoom: bloc.zoomLavel,
cameraConstraint: CameraConstraint.contain(
bounds: LatLngBounds(
const LatLng(-90, -180),
const LatLng(90, 180),
),
),
interactionOptions: const InteractionOptions(
flags: InteractiveFlag.all & ~InteractiveFlag.rotate,
),
onMapEvent: (MapEvent event) {
bloc.onMapMoved(event.camera.zoom);
},
),
children: [
tileLayer,
PolylineLayer(polylines: polylines),
PolygonLayer(polygons: polygons),
MarkerLayer(markers: markers),
],
),
);
}
}
|
|
|
Hi @palicka, |
thank you, I removed unnecessary animations, added CancellableNetworkTileProvider and it looks better. |
|
If animations were causing the issue, that suggests it could be frequent rebuilding that's the issue. |
|
@JaffaKetchup I thought it's better, but it's still not, I think. Sometimes it feels ok, but when I move the map really fast it's not as smooth as it used to be..Lot's of missing squares. To fix it, I need to move around that area slowly, zoom-in, zoom-out to re-load it. It doesn't matter if I use wifi or 5G, android/iphone/emulator, OSM data or mine, it behaves the same.. Please, have a look at the video and let me know what you think(In this example I was just using fingers to move the map, but in real example I also use animation(from flutter_map example) from one point to another, and it's basically the same, so I didn't attach it here, to keep the code as minimal as possible) (it's built in release mode, not debug) test.movhere is the full code: flutter SDK: 3.19.1 I see lot's of various exceptions in the console (I don't know if it's related just to CancellableNetworkTileProvider): This error is not that frequent, but appears sometimes : |
|
@palicka Can you try moving the |
|
@JaffaKetchup I moved it, and no change. Then I removed CancellableNetworkTileProvider and move TileLayer into a variable as well, as it was mentioned in a comment above, and then it looked much better - only when used in the minimum code example. When I tried it within my real code, it didn't help, but then I found out there are indeed unnecessary rebuilds sometimes (other than before), I need to re-write it and we will see... |
|
OpenStreetMap & MapBox user here. Removing No more errors thrown in the logs: flutter: DioException [connection error]: The connection errored: Dio can't establish a new connection after it was closed. This indicates an error which most likely cannot be solved by the library. |
|
I'm going to close this for now, as there are too many factors here. Occasionally I run into similar slow loading, but I'm not convinced it's flutter_map's fault: on these occasions, I'm trying to do a lot of network requests at once, so maybe something else can't handle it/has to stagger it. If people still experience this, please open a new issue with an MRE using the OpenStreetMap tile server. |
JaffaKetchup
added
invalid
What is the bug?
I am encountering issues with the Flutter
flutter_mapplugin when attempting to load tile images from Google Maps or OpenStreetMaps. Initially, the tile images load very slowly, and eventually, errors such as the following are raised:and
These error started to rise after I updated to Flutter_map 6.1.0, Consequently upgraded the flutter,
I have confirmed that my internet connection is stable, and I have set the necessary network permissions in
AndroidManifest.xmlfor both debug and release modes.Here is my
flutter doctoroutput:I have tested this issue on both real devices (Android, iPhone) and simulators (Android, iPhone), and the problem persists across all platforms.
Here is the relevant part of the build function for the screen:
Here are the relevent dependencies:
Any insights or suggestions on resolving this issue would be greatly appreciated. Thank you in advance for your assistance!
How can we reproduce it?
You can reproduce the error by updating flutter_map to 6.1.0 and flutter to latest release
Do you have a potential solution?
No response
Platforms
all platforms
Severity
Minimum: Allows normal functioning
The text was updated successfully, but these errors were encountered: