Mapbox-gl-native: Cannot zoom to display whole world

[h4rrison-james]

In using the following code to instantiate a map view:

    // Set up the map view
    _mapView = [[MGLMapView alloc] initWithFrame:self.frame];
    _mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    _mapView.delegate = self;

    // Add the map view as a subview
    [self addSubview:_mapView];

    // Configure properties
    _mapView.minimumZoomLevel = 0;
    [_mapView resetPosition];

I get the following:

Which is clearly not completely zoomed out, either from a longitude or latitude perspective. Manually zooming will not let me zoom out beyond what is displayed above.

Given a correct aspect ratio, I would expect that a zoomLevel of 0 would show the entire world exactly once (i.e without wrapping).

*_Platform:iOS SDK
*_Mapbox SDK version: 3.1.2

[1ec5]

This was most likely fixed by #4504. Does the issue reproduce in version 3.2.0-beta.3?

[h4rrison-james]

Can confirm no change running 3.2.0-beta.3:

The map is centering correctly on (0, 0), so I don't think #4504 is at fault here...

[1ec5]

What does MGLMapView’s frame look like at this point? Is it possible that self.frame is initially some value other than the window’s bounds? Also, what does the map view’s contentInset property look like?

[h4rrison-james]

Capturing the view hierarchy using the view debugger shows that the frame of MGLMapView is as expected, the visible boundary of the map as shown above.

Setting contentInset to zero using [_mapView setContentInset:UIEdgeInsetsZero]; has no effect on the pictured result above either.

[1ec5]

Given a correct aspect ratio, I would expect that a zoomLevel of 0 would show the entire world exactly once (i.e without wrapping).

Note that in portrait orientation, the map would be constrained by latitude, so you wouldn’t be able to see all longitudes at once. But in landscape orientation, it should definitely be possible to see all latitudes simultaneously.

Capturing the view hierarchy using the view debugger shows that the frame of MGLMapView is as expected, the visible boundary of the map as shown above.

Is the current frame equal to the frame at the time the map view was initialized, though? I’m unable to reproduce the issue in iosapp if I modify it to only occupy the middle third of the screen.

Setting contentInset to zero using [_mapView setContentInset:UIEdgeInsetsZero]; has no effect on the pictured result above either.

Note that the content inset can be overridden if the map view’s superview is a UIViewController whose automaticallyAdjustsScrollViewInsets = YES. (It behaves like UIScrollView in that regard.)

[h4rrison-james]

Note that in portrait orientation, the map would be constrained by latitude, so you wouldn’t be able to see all longitudes at once. But in landscape orientation, it should definitely be possible to see all latitudes simultaneously.

This would surely only apply if the map view is occupying the full bounds of the view. In my case, I have effectively a landscape orientation map in a portrait orientation view, so I expect it should be possible to set the dimensions of the map view such that the entire world can be viewed at once. Further, using a portrait map, it should still be possible to view all latitudes at once, shouldn't it?

Is the current frame equal to the frame at the time the map view was initialized, though? I’m unable to reproduce the issue in iosapp if I modify it to only occupy the middle third of the screen.

I was using a constraint based layout, so at the time of initialisation the frame of the map view was 0. However, switching to manually defining the frame on initialisation, and breaking immediately after, shows the following frame allocation:

<MGLMapView: 0x7fa2a60370c0; frame = (0 0; 375 250); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x7fa2a6041f60>; layer = <CALayer: 0x7fa2a3d40540>>

There is no difference to the map however, I am still unable to zoom out as above.

Note that the content inset can be overridden if the map view’s superview is a UIViewController whose automaticallyAdjustsScrollViewInsets = YES. (It behaves like UIScrollView in that regard.)

Setting this to false manually in the parent view controller does not fix the issue.

[FrankSong93]

How can display whole world? @h4rrison-james

[lilykaiser]

Closing due to ticket age. If this is still a problem, please re-open

[jenshk]

This is still not possible and still an issue. Using the map in portrait mode and setting center to 0,0 and zoom level 0 shows only part of the world map.

[erikvdplas]

Experiencing the same issue. Mapbox mentions that the only projection supported is Web Mercator so the entire map projection would be square. Even when constraining the map to a square, at each side parts of the map are left out at zoom level 0.

[davidpflugpeil]

Are there any news on this?

[georgmay]

Experiencing the same thing here.

[indrek-koue]

Experiencing the same thing on Android also.

[buba447]

Same thing here on iOS. Ive tried many different aspect ratios, manually setting the CoordinateBounds, setting insets. It always produces this:

[buba447]

An update on this. I discovered that it is a problem with the size of the view. Mapbox will display the entire world if the view is larger than (550, 550). When the view is smaller than 550 it will crop the map.

A quick workaround is to set the size of your mapview to a value larger than 550 and then apply a CATransform to the view to scale it. Not ideal but it works.

Mapview set to a square of (375, 375):

The same mapview set to a square of (550, 550)

[buba447]

For those interest heres a UIView subclass that will display the entire world using Mapbox.
Theres some magic numbers in there to get the centering just right for my use case, so feel free to tweak...

class WholeWorldView: UIView {

  let mapView = MGLMapView(frame: .zero, styleURL: MGLStyle.lightStyleURL)

  init() {
    super.init(frame: .zero)

    clipsToBounds = true

    let coordinatBounds = MGLCoordinateBounds(sw: CLLocationCoordinate2D(latitude: -60,
                                                                         longitude: -170),
                                              ne: CLLocationCoordinate2D(latitude: 84,
                                                                         longitude: 195))
    mapView.setVisibleCoordinateBounds(coordinatBounds, animated: false)
    addSubview(mapView)
    heightAnchor.constraint(equalTo: widthAnchor, multiplier: 0.65).isActive = true
  }

  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  override func layoutSubviews() {
    super.layoutSubviews()

    /// The map view must be set to a minimum size of 550 and then scaled down to the bounds of the view.
    /// See here for bug: https://github.com/mapbox/mapbox-gl-native/issues/4583

    let maxDimension = max(bounds.width, bounds.height)
    let mapDimension = max(maxDimension, 550)
    let mapviewBounds = CGRect(x: 0, y: 0, width: mapDimension, height: mapDimension)
    let transform = CGAffineTransform(scaleX: maxDimension / mapDimension, y: maxDimension / mapDimension)
    let transformedBounds = mapviewBounds.applying(transform)
    mapView.bounds = mapviewBounds
    mapView.transform = transform
    mapView.center = CGPoint(x: bounds.center.x, y: transformedBounds.center.y * 0.9)
  }
}

Result:

[stale[bot]]

This issue has been automatically detected as stale because it has not had recent activity and will be archived. Thank you for your contributions.

[julianrex]

Still valid.

[Ali-Shah-Vis]

I can't seem to zoom out on mobile :( It works in Google Dev but as soon as I deploy to android it stops working.

[asheemmamoowala]

This was solved in GL-JS by https://github.com/mapbox/mapbox-gl-js/pull/9028, and may be applicable to Native as well.

[stale[bot]]

This issue has been automatically detected as stale because it has not had recent activity and will be archived. Thank you for your contributions.