MapZoomPanBehavior class Null safety

Enables zooming and panning in MapShapeLayer and MapTileLayer.

Zooming and panning will start working when the new instance of MapZoomPanBehavior is set to MapShapeLayer.zoomPanBehavior or MapTileLayer.zoomPanBehavior. However, if you need to restrict pinch zooming or double tap zooming or panning for any specific requirements, you can set the enablePinching, enableDoubleTapZooming, and enablePanning properties to false respectively.

The focalLatLng is the focal point of the map layer based on which zooming happens.

The default zoomLevel value is 1 which will show the whole map in the viewport for MapShapeLayer and the available bounds for the MapTileLayer based on the focalLatLng (Please check the documentation of MapTileLayer to know more details about how zoomLevel works in it).

You can also get the current zoom level and focal position of the map layer using the zoomLevel and focalLatLng after the interaction.

The minimum and maximum zooming levels can be restricted using the minZoomLevel and maxZoomLevel properties respectively. The default values of minZoomLevel and maxZoomLevel are 0 and 15 respectively. However, for MapTileLayer, the maxZoomLevel may slightly vary depends on the providers. Check the respective official website of the map tile providers to know about the maximum zoom level it supports.

By default, there is a toolbar for the zooming operations for the web platform. However, you can change its visibility using the MapZoomPanBehavior.showToolbar property.

MapZoomPanBehavior objects are expected to be long-lived, not recreated with each build.

The procedure and the behavior are similar for both the MapShapeLayer and MapTileLayer.

late MapZoomPanBehavior _zoomPanBehavior;
late MapShapeSource _mapSource;

void initState() {
  _mapSource = MapShapeSource.asset(
    shapeDataField: 'continent',
  _zoomPanBehavior = MapZoomPanBehavior()
    ..zoomLevel = 4
    ..focalLatLng = MapLatLng(19.0759837, 72.8776559)
    ..toolbarSettings = MapToolbarSettings();

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Zoom pan'),
    body: SfMaps(
      layers: [
          source: _mapSource,
          zoomPanBehavior: _zoomPanBehavior,


MapZoomPanBehavior({double zoomLevel = kDefaultMinZoomLevel, MapLatLng? focalLatLng, MapLatLngBounds? latLngBounds, double minZoomLevel = kDefaultMinZoomLevel, double maxZoomLevel = kDefaultMaxZoomLevel, bool enablePinching = true, bool enablePanning = true, bool enableDoubleTapZooming = false, bool showToolbar = true, MapToolbarSettings toolbarSettings = const MapToolbarSettings()})
Creates a new MapZoomPanBehavior.


enableDoubleTapZooming bool
Enables double tap across the map layer. [...]
read / write
enablePanning bool
Enables panning across the map layer. [...]
read / write
enablePinching bool
Option to enable pinch zooming support. [...]
read / write
focalLatLng MapLatLng?
The focalLatLng is the focal point of the map layer based on which zooming happens. [...]
read / write
hashCode int
The hash code for this object. [...]
read-only, inherited
latLngBounds MapLatLngBounds?
Specifies the current latlng bounds of the maps. The maps zoom level and focalLatLng get updated based on the given bounds. [...]
read / write
maxZoomLevel double
Maximum zoom level of the map layer. [...]
read / write
minZoomLevel double
Minimum zoom level of the map layer. [...]
read / write
renderBox RenderBox
Render box of the internal widget which handles the MapZoomPanBehavior. [...]
read-only, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
showToolbar bool
Shows zooming toolbar in the web platform. [...]
read / write
toolbarSettings MapToolbarSettings
Provides options for customizing the appearance of the toolbar in the web platform.
read / write
zoomLevel double
Current zoom level of the map layer. [...]
read / write


debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
handleEvent(PointerEvent event) → void
Override this method to handle pointer events that hit this render box.
@mustCallSuper, inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
onPanning(MapPanDetails details) → void
Called whenever panning is happening. [...]
onZooming(MapZoomDetails details) → void
Called whenever zooming is happening. [...]
paint(PaintingContext context, Offset offset) → void
Paints this render box into the given context at the given offset.
reset() → void
When this method is called, the map will be reset to the MapZoomPanBehavior.minZoomLevel.
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
toString({DiagnosticLevel minLevel =}) String
A string representation of this object. [...]
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants. [...]
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object. [...]
toStringShort() String
A brief description of this object, usually just the runtimeType and the hashCode. [...]


operator ==(Object other) bool
The equality operator. [...]