MKMapView visible region padding

Question

Dera colleagues,

I'm struggle to implement visible region with native MKMapView. I need to have an exactly the same feature as Google Map SDK Visible Region.

Basically it means to have a sort of padding in the bottom to following code:

let span = MKCoordinateSpan(latitudeDelta: 0.8, longitudeDelta: 0.8)
let reg = MKCoordinateRegion(center: someMyCoordinate, span: span)
mapView.setRegion(reg, animated: true)

It needs to be like this: once I've add some padding in UIView coordinates, it should shift Map center and adjust zoom to make Coordinate Region fully visible, take into account the padding.

Probably my description Is a bit messy, but if you take a look on this video it becomes absolutely clear.

Thank you in advance!

Montez

The view/text shouldn't overlay your mapView, Is that your question? – Sedgewinn

Yes. UIView should. And the heigh of this view should be applied as padding. – Montez

Answer 1

If you print your visible region you will see that the span will be padded since it needs to fit the view. The center coordinate will still be in the center of the view. I'm not sure what you want to do but I guess it can be archived with

setVisibleMapRect:edgePadding:animated:

You need to have the region converted to a MKMapRect. See Convert MKCoordinateRegion to MKMapRect on how to do that

Indehiscent

Answer 2

If you need a padding from the bottom of 100 in swift you could simply write:

mapView.layoutMargins = UIEdgeInsets(top: 10, right: 10, bottom: 100, left: 10)

Then you can check this centering the map on some annotations like this:

mapView.showAnnotations(mapView.annotations, animated: true)

Algeria

You Sir, saved my day. – Resent

Perfect! Thank you, trying to move annotations with a custom sliding panel was not working with any of the other suggested solutions but this is exactly what I needed. – Cyclamen

Answer 3

Thanks to approach suggested above, complete solution is following.

import Foundation
import MapKit
extension MKCoordinateRegion{
    var mapRect:MKMapRect {
        get{
            let a = MKMapPointForCoordinate(CLLocationCoordinate2DMake(
                   self.center.latitude + self.span.latitudeDelta / 2,
                   self.center.longitude - self.span.longitudeDelta / 2))

            let b = MKMapPointForCoordinate(CLLocationCoordinate2DMake(
                    self.center.latitude - self.span.latitudeDelta / 2,
                    self.center.longitude + self.span.longitudeDelta / 2))

            return MKMapRectMake(min(a.x,b.x), min(a.y,b.y), abs(a.x-b.x), abs(a.y-b.y))
        }
    }
}

extension MKMapView {
    func setVisibleRegion(mapRegion: MKCoordinateRegion, edgePadding insets: UIEdgeInsets, animated animate: Bool) {
        self.setVisibleMapRect(mapRegion.mapRect, edgePadding: insets , animated: animate)
    }
}

Now you can just use setVisibleRegion func.

Montez

Answer 4

The reason behind googles padding is to get googles buttons and copyright out of the way so you can provide your own user interface on the edges of the map. (As shown in the Google Maps Video)

Starting with iOS 11, Apple solves the same problem not with padding but with giving you control where to place the controls with new classes. Those are

MKScaleView
MKCompassButton
MKUserTrackingButton

Place them anywhere on the map or even outside the map. They are fully integrated with MKMapView.

The only control that Apple has forgotten, is the legal link in the left bottom corner (at least for ltr languages). So this link is always in the way of our design, at least with iOS 11.

Maybe you really want padding, then go with the other answers. But if you want control over placing Apples controls and can afford not to support iOS versions prior to iOS 11, then use the new classes.

Skidmore

Answer 5

you need to some logically coordinate set like below and set region ,then you can set zoom level same as Google map .

MKCoordinateRegion region;

CLLocationDegrees maxLat = -90;
CLLocationDegrees maxLon = -180;
CLLocationDegrees minLat = 90;
CLLocationDegrees minLon = 180;

float currentLatitude ;

float currentLongitude ;

if(currentLatitude > maxLat)

maxLat = currentLatitude;

if(currentLatitude < minLat)

minLat = currentLatitude;

if(currentLongitude > maxLon)

maxLon = currentLongitude;

if(currentLongitude < minLon)

minLon = currentLongitude;

region.center.latitude = (maxLat + minLat) / 2;

region.center.longitude = (maxLon + minLon) / 2;

region.span.latitudeDelta = maxLat - minLat;

region.span.longitudeDelta = maxLon - minLon;

[myMapview setRegion:region animated:YES];

[myMapview setCenterCoordinate:theCoordinate zoomLevel:13 animated:YES];

Rupture