Flutter_map pan boundaries depending on zoom level

Question

I'm having a problem with flutter_map. I have my own offline set of tiles (4 zoom levels) and I use Crs.Simple() as crs. But I face a problem with grey area displayed while tapping and zooming when map "ends", as described here: https://github.com/fleaflet/flutter_map/issues/177.

It has to do with nePanBoundary and swPanBoundary that don't change depending on zoom level.

If anyone had the same issue and succeeded in solving it, can you please share your solution? Thanks!

```

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:latlong/latlong.dart';


class Map_Widget extends StatefulWidget {
  final String campus;
  final String building;
  final int floor;
  const Map_Widget ({ Key key, this.campus, this.building, this.floor }): super(key: key);
  @override
  _Map_WidgetState createState() => _Map_WidgetState();
}

class _Map_WidgetState extends State<Map_Widget> {

  
  @override
  Widget build(BuildContext context) {
    return FlutterMap(
        options: MapOptions(
          minZoom: 1,
          maxZoom: 4,
          zoom:1,
          crs: CrsSimple(),         
          swPanBoundary: LatLng(-1,0), //Here is the issue
          nePanBoundary: LatLng(0,1),  //Here is the issue
          center: LatLng(-0.5, 0.5),
        ),
        layers: [
          MarkerLayerOptions(
            markers: [
              Marker(
                width: 20.0,
                height: 20.0,
                point: new LatLng(-0.5, 0.5),
                builder: (context) =>
                    Container(
                      child: FlutterLogo(),
                    ),
              ),
            ],
          ),
        ],
        children: <Widget>[
          TileLayerWidget(options: TileLayerOptions (
                tileProvider: AssetTileProvider(),
                urlTemplate: 'assets/maps/${widget.campus}/${widget.building}/${widget.floor}/{z}/{x}/{y}.png',
          )),
          MarkerLayerWidget(options: MarkerLayerOptions(
            markers: [
              Marker(
              width: 20.0,
              height: 20.0,
              point: LatLng(0, 0),
              builder: (context) =>
              Container(
                child: FlutterLogo(),
                ),
              ),
              Marker(
                width: 20.0,
                height: 20.0,
                point: LatLng(-0.8, 0.75),
                builder: (context) =>
                    Container(
                      child: FlutterLogo(),
                    ),
              ),           

            ],
          )),
        ],
    );
  }
}

Answer 1

In the center property you have lat, lng of your dot.

on the property

swPanBoundary you place coordinates of a point to the left of the center and in nePanBoundary you place coordinates of a point to the right or backwards

your map will be limited between these points.

MapOptions( center: LatLng(56.704173, 11.543808), minZoom: 12.0, maxZoom: 14.0, zoom: 13.0, swPanBoundary: LatLng(56.6877, 11.5089), nePanBoundary: LatLng(56.7378, 11.6644), )