Zoom MKMapView to fit polyline points

Question

I have an array, allCollections, that holds programmatically-created arrays of CLLocations the user has recorded through my iOS app. Each sub-array in allCollections holds all the location points in a trip taken.

I draw MKPolylines off of the CLLocations in the arrays in allCollections to represent those trips on an MKMapView. My question is this: With the polylines added to the map, how would I go about programmatically zooming and centering the map to display all of them?

Ko

Answer 1

-(void)zoomToPolyLine: (MKMapView*)map polyline: (MKPolyline*)polyline animated: (BOOL)animated
{
    [map setVisibleMapRect:[polyline boundingMapRect] edgePadding:UIEdgeInsetsMake(10.0, 10.0, 10.0, 10.0) animated:animated];
}

Tate

@BradKoch This solution uses boundingMapRect to define a rectangle that encompasses the polyline overlay. It then sets the map zoom area to that rectangle with setVisibleMapRect taking into account the adjustable padding values with edgePadding. I found this solution to be the most helpful, since it solves the problem efficiently with few lines of code and also allows for changes to the map view area through insets. – Granthem

This works for me. But apparently this sets the zoom factor to fill the screen, instead of fit. Can you think of a solution for that – Discussant

Plus one for a solution with insets. – Lido

Good solution +1. Only thing is that Padding needs to be adjusted as per visual needs, that way it will support all the other overlays. – Astir

Answer 2

-(void)zoomToPolyLine: (MKMapView*)map polyLine: (MKPolyline*)polyLine 
animated (BOOL)animated
{
MKPolygon* polygon = 
    [MKPolygon polygonWithPoints:polyLine.points count:polyLine.pointCount];

[map setRegion:MKCoordinateRegionForMapRect([polygon boundingMapRect]) 
     animated:animated];
}

Marybelle

It is not required to create a MKPolygon as MKPolyline already implement boundingMapRect – Endodontist

how are you assigning fence to CLLocation ?? means in goefencing how to you allocate that CLregion instead of circular region??? – Condemn

Answer 3

in swift:

if let first = mapView.overlays.first {
    let rect = mapView.overlays.reduce(first.boundingMapRect, combine: {MKMapRectUnion($0, $1.boundingMapRect)})
    mapView.setVisibleMapRect(rect, edgePadding: UIEdgeInsets(top: 50.0, left: 50.0, bottom: 50.0, right: 50.0), animated: true)
}

this will zoom/pan to fit all overlays with a little buffer

Bjorn

Answer 4

You could loop through all CLLocations recording the max/min coordinates and use that to set a view rect like they do on this question iOS MKMapView zoom to show all markers .

Or you could go through each of your overlays and get their boundingMapRect then use MKMapRectUnion (http://developer.apple.com/library/ios/documentation/MapKit/Reference/MapKitFunctionsReference/Reference/reference.html#//apple_ref/c/func/MKMapRectUnion) to combine them all until you have one MKMapRect that covers them all and use that to set the view.

[mapView setVisibleMapRect:zoomRect animated:YES]

This question shows a simple loop combining the maprects in unions as I suggested: MKMapRect zooms too much

Monied

I owe you a beer for that :) – Guaiacum

MKMapRectUnion link is broken, here's the new page developer.apple.com/documentation/mapkit/1452123-mkmaprectunion – Sandry

Answer 5

Swift 3 version of garafajon excellent code

    if let first = self.mapView.overlays.first {
        let rect = self.mapView.overlays.reduce(first.boundingMapRect, {MKMapRectUnion($0, $1.boundingMapRect)})
        self.mapView.setVisibleMapRect(rect, edgePadding: UIEdgeInsets(top: 50.0, left: 50.0, bottom: 50.0, right: 50.0), animated: true)
    }

Babushka

Swift 5 version: the second line of code from above changes a bit: let rect = self.mapView.overlays.reduce(first.boundingMapRect, {$0.union($1.boundingMapRect)}) } – Ambiguous

Answer 6

Swift 4 / slightly modified version of fundtimer's answer.

 func setVisibleMapArea(polyline: MKPolyline, edgeInsets: UIEdgeInsets, animated: Bool = false) {
    mapView.setVisibleMapRect(polyline.boundingMapRect, edgePadding: edgeInsets, animated: animated)
}

Calling the above using a route's polyline and leaving the default of not animated, and adding small edge insets of 10 all around:

setVisibleMapArea(polyline: route.polyline, edgeInsets: UIEdgeInsetsMake(10.0, 10.0, 10.0, 10.0))

Mariannamarianne

A simple solution - nice! – Complexioned

Answer 7

I have another solution for this problem

private func mapRegion() -> MKCoordinateRegion? {


    let latitudes = self.coordinates.map { location -> Double in

        return location.latitude
    }

    let longitudes = self.coordinates.map { location -> Double in

        return location.longitude
    }

    let maxLat = latitudes.max()!
    let minLat = latitudes.min()!
    let maxLong = longitudes.max()!
    let minLong = longitudes.min()!

    let center = CLLocationCoordinate2D(latitude: (minLat + maxLat) / 2,
                                        longitude: (minLong + maxLong) / 2)
    let span = MKCoordinateSpan(latitudeDelta: (maxLat - minLat) * 1.3,
                                longitudeDelta: (maxLong - minLong) * 1.3)
    return MKCoordinateRegion(center: center, span: span)
}

Where coordinates is Array of CLLocationCoordinate2D

Hope it is helpful to someone

Boyce

Answer 8

@Fundtimer pointed it right way, Only thing is that Padding needs to be adjusted as per visual needs, that way it will support all the other overlays and following is the generic solution for all overlays.

-(void)zoomIntoExistingMapObjectForAnnot:(CustomMapAnnotation *)annot
{
   id overlay = annot.shape;//I have overlay property in custom annotation class.
   [_mapView setVisibleMapRect:[overlay boundingMapRect] edgePadding:UIEdgeInsetsMake(150.0, 150.0, 150.0, 150.0) animated:YES];
}

Astir