How to zoom and pan programmatically in Flutter Maps?

In Syncfusion® Flutter Maps, you can programmatically change the zoom level and center position by following the below steps.

Step 1: Initialize the MapZoomPanBehavior in the initState() method.

late MapZoomPanBehavior _mapZoomPanBehavior;
 
 @override
 void initState() {
   super.initState();
   _mapZoomPanBehavior = MapZoomPanBehavior();
 }

Step 2: Add a MapTileLayer to the list of layers in SfMaps. In the MapTileLayer.urlTemplate property, the URL of the OSM tiles provider must be set. Assign the initialized MapZoomPanBehavior to the MapTileLayer.zoomPanBehavior property.

Step 3: Set the new zoom level to the MapZoomPanBehavior.zoomLevel property and center position to the MapZoomPanBehavior.focalLatLng property in dynamic interactions like button press.

@override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Column(
       children: [
         Expanded(
           child: MapTileLayer(
             urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
             zoomPanBehavior: _mapZoomPanBehavior,
           ),
         ),
         ElevatedButton(
           onPressed: () {
             _mapZoomPanBehavior
               ..focalLatLng = const MapLatLng(-19.49, 132.55)
               ..zoomLevel = 4;
           },
           child: const Text('Northern Territory, Australia'),
         )
       ],
     ),
   );
}

Thus, using the Syncfusion® Flutter Maps, we have programmatically adjusted the zoom and pan.

Output

Check the below links for more features in Syncfusion® Flutter Maps,

• https://www.syncfusion.com/flutter-widgets/flutter-maps
• https://help.syncfusion.com/flutter/maps/overview
• https://pub.dev/packages/syncfusion_flutter_maps

Live samples,

• https://flutter.syncfusion.com/#/maps/tile-layer/osm
• https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples
• https://apps.apple.com/us/app/syncfusion-flutter-ui-widgets/id1475231341

Conclusion

I hope you enjoyed learning about how to zoom and pan programmatically in Flutter Maps.

You can refer to our Flutter Maps ​feature tourpage to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter Maps​ example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.