openstreetmap

[Pieter Bergmans]

Hi...when I zoom into the map, I get the following error. If I wait between zoom clicks, it seems okay. But if I click the zoom button successively or do a pinch zoom, I get this error. Is there a solution for this?

════════ Exception caught by image resource service ════════════════════════════
The following NetworkImageLoadException was thrown resolving an image codec:
HTTP request failed, statusCode: 400, https://tile.openstreetmap.org/20/310429/391536.png
When the exception was thrown, this was the stack
#0      NetworkImage._loadAsync. _network_image_io.dart:135 
Image provider: NetworkImage("https://tile.openstreetmap.org/20/310429/391536.png", scale: 1.0)
Image key: NetworkImage("https://tile.openstreetmap.org/20/310429/391536.png", scale: 1.0)

Here is my code...

class PolylineModel {
  PolylineModel(this.points, this.color, this.width);
  List points = const [];
  final Color color;
  final double width;
}

class MapSyncfusionWidget extends StatefulWidget {
  const MapSyncfusionWidget({
    Key? key,
    required this.center,
    this.markers = const [],
    this.polyline = const [],
    required this.title,
  }) : super(key: key);

  final MapLatLng? center;
  final List markers;
  final List polyline;
  final String title;

  @override
  _MapSyncfusionWidgetState createState() => _MapSyncfusionWidgetState();
}


class _MapSyncfusionWidgetState extends State
    with SingleTickerProviderStateMixin {
  late MapTileLayerController _layerController;
  late MapZoomPanBehavior _zoomPanBehavior;
  late List markers;
  late List polyline;
  late List polylines;
  late AnimationController animationController;
  late Animation animation;
  late MapLatLng center;

  @override
  void initState() {
    print('MapSyncfusionWidgetState, initState');

    _layerController = MapTileLayerController();
    center = const MapLatLng(0, 0);
    polyline = widget.polyline;
    polylines = [
      PolylineModel(
        polyline,
        const Color.fromARGB(255, 4, 155, 248),
        10,
      ),
    ];

    markers = [];

    _zoomPanBehavior = MapZoomPanBehavior(
      enableDoubleTapZooming: true,
      enableMouseWheelZooming: true,
      enablePanning: true,
      enablePinching: true,
      // focalLatLng: const MapLatLng(0, 0),
      // focalLatLng: center,
      zoomLevel: 2,
      minZoomLevel: 2,
      maxZoomLevel: 20,
      showToolbar: true,
    );

    animationController = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    );

    animation = CurvedAnimation(
      parent: animationController,
      curve: Curves.bounceIn,
    );
    animationController.forward(from: 0);


    super.initState();
  }

  @override
  void dispose() {
    _layerController.dispose();
    animationController.dispose();
    super.dispose();
  }

  Future> getInfo() async {
    print('MapSyncfusion, getInfo');
    markers.clear();
    for (int i = 0; i < widget.markers.length; i++) {
      markers.add(widget.markers[i]);
      _layerController.insertMarker(i);
    }

    print('MapSyncfusion, getInfo, length: ${markers.length}');
    return markers;
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.grey,
            width: 0.5,
          ),
          color: Colors.grey.shade200,
        ),
        child: FutureBuilder(
          future: getInfo(),
          builder: (context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return SfMaps(
                layers: [
                  MapTileLayer(
                    controller: _layerController,
                    urlTemplate:
                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                    initialMarkersCount: markers.length,
                    initialZoomLevel: 2,
                    zoomPanBehavior: _zoomPanBehavior,
                    markerBuilder: (BuildContext context, int index) {
                      return MapMarker(
                        latitude: markers[index].latitude,
                        longitude: markers[index].longitude,
                        child: Icon(
                          Icons.circle,
                          color: const Color.fromARGB(255, 237, 52, 39),
                          size: 15.r,
                        ),
                      );
                    },
                    sublayers: [
                      polyline.isEmpty
                          ? MapPolylineLayer(polylines: [].toSet())
                          : MapPolylineLayer(
                              polylines: List.generate(
                                polylines.length,
                                (int index) => MapPolyline(
                                  width: polylines[index].width,
                                  points: polylines[index].points,
                                  color: polylines[index].color,
                                  strokeCap: StrokeCap.round,
                                ),
                              ).toSet(),
                              animation: animation,
                            )
                    ],
                  )
                ],
              );
            }
            return CircularProgressIndicator();
          },
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.miniEndFloat,
      floatingActionButton: Padding(
        padding: EdgeInsets.all(1.r),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            GestureDetector(
              onTap: () {
                print(
                    '_zoomPanBehavior.zoomLevel: ${_zoomPanBehavior.zoomLevel}');
                if (_zoomPanBehavior.zoomLevel <
                    _zoomPanBehavior.maxZoomLevel) {
                  _zoomPanBehavior.zoomLevel = _zoomPanBehavior.zoomLevel + 1;
                }
              },
              child: Container(
                height: 32.r,
                width: 32.r,
                padding: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                    border: Border.all(
                      width: 0.5,
                      color: Colors.grey,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.grey.shade100),
                child: Align(
                  alignment: Alignment.center,
                  child: Icon(
                    CupertinoIcons.zoom_in,
                    color: Colors.black,
                    size: 20.r,
                  ),
                ),
              ),
            ),
            verticalSpaceTiny,
            GestureDetector(
              onTap: () {
                print(
                    '_zoomPanBehavior.zoomLevel: ${_zoomPanBehavior.zoomLevel}');
                if (_zoomPanBehavior.zoomLevel >
                    _zoomPanBehavior.minZoomLevel) {
                  _zoomPanBehavior.zoomLevel = _zoomPanBehavior.zoomLevel - 1;
                }
              },
              child: Container(
                height: 32.r,
                width: 32.r,
                padding: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                    border: Border.all(
                      width: 0.5,
                      color: Colors.grey,
                    ),
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.grey.shade100),
                child: Align(
                  alignment: Alignment.center,
                  child: Icon(
                    CupertinoIcons.zoom_out,
                    color: Colors.black,
                    size: 20.r,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

[Hariharasudhan Kanagaraj]

Hi Pieter,

We have analyzed your query and tried to replicate the mentioned exception by clicking on the zoom button rapidly and also using pinch zooming based on the provided query and code snippet. Unfortunately, we are unable to replicate it. However, we would like to inform you that the mentioned exception might have occurred due to a network issue only, as the data might not be fetched properly while the zoom button is clicked rapidly. From the provided exception stack, we understand that the thrown exception is an HTTP 400 - Bad Request error, which might occur due to an invalid request or lack of required parameters in the input needed. Therefore, we recommend you check the network from your side and ensure that the data is fetched properly. Additionally, check whether you have enabled the internet permission for your application, based on the link below:

https://docs.flutter.dev/data-and-backend/networking.

If you have further queries, please get back to us.

Regards,

Hari Hara Sudhan. K.

[Pieter Bergmans]

Ok. Thanks for your reply.  It might be the way I'm implementing it.  I'll do a little more research on my end and I will ask more questions if I need more of your help.

[Hariharasudhan Kanagaraj]

Hi Pieter,

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.

Regards,

Hari Hara Sudhan. K.