Flutter_map: map not fit perfect screen on ios

Created on 2 Oct 2018  路  11Comments  路  Source: fleaflet/flutter_map

Map view not fit flexible tag on ios device < X.

look at grey border.
It work on iphone X.

error

return new Padding(
      padding: new EdgeInsets.all(0.0),
      child: new Column(
        children: [
          new Flexible(
            child: new FlutterMap(
              options: new MapOptions(
                  center: new LatLng(39.213695, 9.121050),
                  interactive: false,
                  minZoom: 12.0,
                  maxZoom: 19.0,
                  zoom: 16.5,
                  onTap: (latLng) {
                    print('tap callback  $latLng');
                  },
                  onPositionChanged: (MapPosition mapPos) {
                    print("pos changed $mapPos");
                  }),
              layers: [
                new TileLayerOptions(
                    offlineMode: false,
                    urlTemplate:
                        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                    //  urlTemplate: "assets/offlinemaps/cagliari/{z}/{x}/{y}.png"),
                    subdomains: ['a', 'b', 'c']),
                new MarkerLayerOptions(markers: markers)
              ],
            ),
          ),
        ],
      ),
    );

Most helpful comment

gotcha. I would vote to re-open this now that this is a reproducible bug

All 11 comments

Can you double check that you are using the latest version? (0.1.4)

I m using 0.1.4

Were you able to figure out what was causing this?

I m investigating,no results for now. Flexible container fit correct all the space (as you see in the pick has gray background). Maps appear to be not in the center.

ok some news... this is related to option.zoom.

this code is working

 options: new MapOptions(
                 ...
                  maxZoom: 17.0,
                  zoom: 14.0,
                  ....
                 maxZoom: 18.0,
                  zoom: 17.0,

this code generate the problem

...
 maxZoom: 17.0,
 zoom: 16.5,
...
maxZoom: 17.0,
zoom: 15.5,
...
maxZoom: 17.0,
zoom: 14.5,

it seems that the problem appear when zoom is not int!!!

gotcha. I would vote to re-open this now that this is a reproducible bug

@gimox Thanks, saved me! zoom and maxZoom must be rounded doubles, with no decimal points.

gotcha. I would vote to re-open this now that this is a reproducible bug

@johnpryan yes, it should be reopened, it still happens as of today, and the zoom property still is a double, and should definitely be a int

mmmh, the gray bars also happen when using fitBounds() probably because it does not round the calculated zoom

@johnpryan this ticket should be reopened, it happens all the time with fitbounds

I have the same issue in Android, and I solved by:
src/layer/tile_layer.dart, Line 194

var tileZoom = _clampZoom(zoom.round().toDouble());

to

var tileZoom = _clampZoom(zoom.floorToDouble());

I want to send PR, but I can't know that this solution works perfectly or not.

Thanks.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jasonleung101 picture jasonleung101  路  3Comments

rktvsiim picture rktvsiim  路  5Comments

thoffart picture thoffart  路  4Comments

JonasVautherin picture JonasVautherin  路  4Comments

johnpryan picture johnpryan  路  4Comments