How to offset MKMapView to put coordinates under specified point - ios

Question

I have two view controllers. One allows the user to enter their own sightings of things:
The other is a UITableViewController that allows them to see their submitted sightings:
What I want is for the user to be able to click on their sighting in the 2nd VC and for it to populate the 1st VC with the relevant details. I have that working for the textFields using :
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let pvc = self.navigationController?.previousViewController() as! SubmitSightingVC
let sighting = sightingsArray[indexPath.row]
pvc.titleTextField.text = sighting["title"] as! String?
pvc.locationTextField.text = sighting["location"] as! String?
pvc.dateTextField.text = sighting["date"] as! String?
pvc.descriptionTextView.text = sighting["sightingDesc"] as! String?
let pinArray = ["1", "2", "3", "4", "5"]
let pinTextArray = ["1text", "2text", "3text", "4text", "5text"]
var pinImageArray = [#imageLiteral(resourceName: "1"), #imageLiteral(resourceName: "2"), #imageLiteral(resourceName: "3"), #imageLiteral(resourceName: "4"), #imageLiteral(resourceName: "5")]
let pinIconString = sighting["pinIcon"] as! String
let index = pinArray.index(of: pinIconString)
pvc.pinImageView.image = pinImageArray[index!]
pvc.pinTextField.text = pinTextArray[index!]
// Bit I'm struggling with:
var coordinates = CLLocationCoordinate2D(latitude: sighting["latitude"] as! Double, longitude: sighting["longitude"] as! Double)
pvc.mapView.centerCoordinate = coordinates
self.navigationController!.popViewController(animated: true)
}
The problem is that because the centre of the map is behind the blurred view it is offset. The pin on the map isn't an actual pin but a UIImage (pinImageView). How can I move the map so that the coordinates are under this pinImage instead of in the centre of the mapView?

Answer 1

As mentioned above you can use the MKMapCamera to position the view of the map or you can also use setVisibleMapRect and add some padding to position the map like this:
self.mapView.setVisibleMapRect(self.mapView.visibleMapRect, edgePadding: UIEdgeInsetsMake(200.0, 0.0, 0.0, 0.0), animated: true)
This will offset the center by 200 screen pixels on the top.

Answer 2

From the excellent #rmp answer, the general idea is
self.map.setVisibleMapRect(self.map.visibleMapRect,
edgePadding: UIEdgeInsets(top: -200, left: 0, bottom: 0, right: 0),
animated: true)
to move it "upwards 200". However, note that the arithmetic is not really correct.
To move a "box upwards" you have to negative inset the top, and positive inset the bottom. The literal above code will sort of stretch and zoom the box (the center would move up, but it would move up a random height less than 200).
So what you have to do is this:
let UP = 170 // move it up 170
let LEFT = 50 // move it left 50
self.map.setVisibleMapRect(self.map.visibleMapRect,
edgePadding: UIEdgeInsets(top: -UP, left: -LEFT, bottom: UP, right: LEFT),
animated: true)
That will work.
Here's a total formula for getting a point on the map, perhaps a town or house coords and
1. nicely centering it, regardless of current camera position, angle, zoom etc, and then
2. move it, let's say upwards, to an exact point on the screen (to allow for an input display or whatever)
let coords = .. the coords of the town, house etc
// for example, if you let someone tap on the map, something like...
let coords = map.convert(g.location(in: map), toCoordinateFrom: map)
// we'll need the W/H of the map on the device:
let W = self.map.bounds.width
let H = self.map.bounds.height
// here's the formula to tidily and safely move/zoom
// to center a coords on the screen
let thatRegion = MKCoordinateRegion(
center: coords,
latitudinalMeters: 5000 * Double((H/W)),
longitudinalMeters: 5000)
MKMapView.animate(withDuration: 2, animations: { [weak self] in
self?.map.region = thatRegion
}, completion: {completed in
print("part 1 done")
// so now the coords is centered. but we want to move it
// so that we can see something else we're adding to the
// screen on top, such as an input display
.. so that's the first part.
Now you want to continue animating the move to nudge it out of the way of your UX:
MKMapView.animate(withDuration: 2, animations: { [weak self] in
guard let self = self else { return }
// in this example, we'll move the point,
// to the top-left of the screen, just below the notch:
let UP = H/2 - 20
let LEFT = W/4
// here's the exact formula for moving
// the center of the map a certain amount UP/LEFT:
self.map.setVisibleMapRect(self.map.visibleMapRect,
edgePadding: UIEdgeInsets(
top: -UP, left: -LEFT, bottom: UP, right: LEFT),
animated: true)
}, completion: {completed in
print("part 2 done")
})
})
That will always do it.
Also, recall that unfortunately MapKit is inherently sloppy. It is, simply, not possible to position a geographic point absolutely in the center of the screen; there's always a little variation. (Say the odd few pixels one way or the other.) It's just how MapKit works. Also, animations (such as the two above) can be thrown off a bit if the texture data is still loading.