Problem with Sfmap in flutter when zoom in and zoom out

396 Views Asked by At

I'm having problems with sfmaps, what happens is that when I zoom in and zoom out if I scroll the screen while the map is loading, the map gets out of control and jumps to a distant location. I have tried many things but I have not been able to solve this error. Does anyone have any idea what is going on and how I can fix it?

I even tried to use onWillZoom to deactivate the panning, wait for the map to finish loading and reactivate the panning but still the error continues, this is my code:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_maps/maps.dart';

void main() {
  return runApp(MapsApp());
}

/// This widget will be the root of application.
class MapsApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Maps Demo',
      home: MyHomePage(),
    );
  }
}

/// This widget is the home page of the application.
class MyHomePage extends StatefulWidget {
  /// Initialize the instance of the [MyHomePage] class.
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  _MyHomePageState();

  bool _onZoom = false;

  late MapTileLayerController _mapController;
  late MapZoomPanBehavior _zoomPanBehavior;
  @override



  void recurrentPanningControl() async{
    if ( _onZoom ){
      print('Esperando reconstrucción del mapa');
    await Future.delayed(const Duration(seconds: 2));
    _zoomPanBehavior.enablePanning = true;
    _onZoom = false;
    setState(() {});
    recurrentPanningControl();

    } else{
      print('Ejecutando');
      await Future.delayed(const Duration(milliseconds: 100));
      recurrentPanningControl();
    }
    
  }


  @override
  void initState() {
    super.initState();


    _mapController = MapTileLayerController();
    _zoomPanBehavior = MapZoomPanBehavior(
      //enablePanning: false,
      //enablePinching: false,
      zoomLevel: 13,
      minZoomLevel: 3,
      maxZoomLevel: 19,
      focalLatLng: const MapLatLng(6.263208604725203, -75.57770846194757),
      enableDoubleTapZooming: true,
      toolbarSettings: const MapToolbarSettings(direction: Axis.vertical)
    );   

    Future.delayed(const Duration(seconds: 0), () async {
      recurrentPanningControl();
    });
    
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        height: double.infinity,
        width: double.infinity,
        child: Center(
          child: SfMaps(
            layers: <MapLayer>[
              MapTileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          zoomPanBehavior: _zoomPanBehavior,
          controller: _mapController,
          tooltipSettings: const MapTooltipSettings(color: Colors.transparent),
          onWillZoom: (MapZoomDetails map){
            _zoomPanBehavior.enablePanning = false;
            _onZoom = true;
            return true;
          },
        ),
            ],
          ),
        ),
      ),
    );
  }
}

/// Collection of Australia state code data.
1

There are 1 best solutions below

0
Lokesh Palani On

The reported issue regarding While panning during the fling zooming animation, the tile layer jumps to a distant location has been fixed and rolled out in our SP release. Therefore, we kindly request that you upgrade the syncfusion_flutter_maps package to the latest version below to avoid this issue.

Version: https://pub.dev/packages/syncfusion_flutter_maps/versions/21.2.3