zoomPanBehavior property

Enables zooming and panning in MapShapeLayer and MapTileLayer.

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

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

The default MapZoomPanBehavior.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 MapZoomPanBehavior.focalLatLng (Please check the documentation of MapTileLayer to know more details about how MapZoomPanBehavior.zoomLevel works in it).

You can also get the current zoom level and focal position of the map after the interaction using the MapZoomPanBehavior.zoomLevel and MapZoomPanBehavior.focalLatLng. These properties can also be set dynamically.

The minimum and maximum zoom levels can be restricted using the MapZoomPanBehavior.minZoomLevel and MapZoomPanBehavior.maxZoomLevel properties respectively. The default values of MapZoomPanBehavior.minZoomLevel and MapZoomPanBehavior.maxZoomLevel are 0 and 15 respectively. However, for MapTileLayer, the MapZoomPanBehavior.maxZoomLevel may slightly vary depending 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 MapShapeSource _mapSource;
 late MapZoomPanBehavior _zoomPanBehavior;

  @override
  void initState() {
    _mapSource = MapShapeSource.asset(
      'assets/world_map.json',
      shapeDataField: 'continent',
    );

    _zoomPanBehavior = MapZoomPanBehavior()
      ..zoomLevel = 4
      ..focalLatLng = MapLatLng(19.0759837, 72.8776559);
    super.initState();
  }

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

Implementation

MapLayer class