MKMapKit draggable annotation and drawing polygons - ios

Question

I am currently trying to allow the user to add pins to the map which will then draw a polygon connecting those pins. However I want to extend it to allow the user to be able to drag the pins and the polygons will be updated accordingly. MKMapView draws the polygon from the array of coordinates according to their arrangement in the array (if I am not mistaken). The problem I am facing now is how do I update the polygons after the user repositioned the pins.
var touchCoordinatesWithOrder: [(coordinate: CLLocationCoordinate2D, order: Int)] = []
var counter = 0
func addLongPressGesture() {
let longPressRecogniser = UILongPressGestureRecognizer(target: self, action: #selector(handleLongPress))
longPressRecogniser.minimumPressDuration = 1.0
mapView.addGestureRecognizer(longPressRecogniser)
}
func handleLongPress(gestureRecognizer: UIGestureRecognizer) {
if gestureRecognizer.state != .Began {
return
}
let touchPoint = gestureRecognizer.locationInView(self.mapView)
let touchMapCoordinate = mapView.convertPoint(touchPoint, toCoordinateFromView: mapView)
let annotation = MKPointAnnotation()
annotation.coordinate = touchMapCoordinate
mapView.addAnnotation(annotation)
touchCoordinatesWithOrder.append((coordinate: touchMapCoordinate, order: counter))
counter += 1
}
#IBAction func drawAction(sender: AnyObject) {
if touchCoordinatesWithOrder.count <= 2 {
print("Not enough coordinates")
return
}
var coords = [CLLocationCoordinate2D]()
for i in 0..<touchCoordinatesWithOrder.count {
coords.append(touchCoordinatesWithOrder[i].coordinate)
}
let polygon = MKPolygon(coordinates: &coords, count: coords.count)
mapView.addOverlay(polygon)
counter = 0
}
func mapView(mapView: MKMapView, annotationView view: MKAnnotationView, didChangeDragState newState: MKAnnotationViewDragState, fromOldState oldState: MKAnnotationViewDragState) {
// if the user repositioned pin number2 then how to I update my array?
}
func mapView(mapView: MKMapView, rendererForOverlay overlay: MKOverlay) -> MKOverlayRenderer {
if overlay is MKPolygon {
let polygonView = MKPolygonRenderer(overlay: overlay)
polygonView.strokeColor = UIColor.blackColor()
polygonView.lineWidth = 0.5
return polygonView
}
return MKPolylineRenderer()
}

Answer 1

To make the pins draggable, you need to set draggable = true on the MKAnnotationView. Implement the viewForAnnotation and dequeue or create the annotation, then set draggable = true. Ensure that the MKMapView delegate is set otherwise none of the delegate methods will be called.
You may also find it easier to store the annotations in an array, rather than just storing the coordinates. The map view retains a reference to the annotations in the array, so when the point is moved in the map, the annotation is automatically updated.
Your question did not say whether you need to draw a path around the points, or through the points. If you want to draw an overlay which surrounds the points, then you also need to calculate the convex hull for the coordinates. The code example does this, although it's easily removed.
Example:
class MapAnnotationsOverlayViewController: UIViewController, MKMapViewDelegate {
#IBOutlet var mapView: MKMapView!
// Array of annotations - modified when the points are changed.
var annotations = [MKPointAnnotation]()
// Current polygon displayed in the overlay.
var polygon: MKPolygon?
override func viewDidLoad() {
super.viewDidLoad()
mapView.delegate = self
addLongPressGesture()
}
func addLongPressGesture() {
let longPressRecogniser = UILongPressGestureRecognizer(target: self, action: #selector(handleLongPress))
longPressRecogniser.minimumPressDuration = 0.25
mapView.addGestureRecognizer(longPressRecogniser)
}
func handleLongPress(gestureRecognizer: UIGestureRecognizer) {
guard gestureRecognizer.state == .Began else {
return
}
let touchPoint = gestureRecognizer.locationInView(self.mapView)
let touchMapCoordinate = mapView.convertPoint(touchPoint, toCoordinateFromView: mapView)
let annotation = MKPointAnnotation()
// The annotation must have a title in order for it to be selectable.
// Without a title the annotation is not selectable, and therefore not draggable.
annotation.title = "Point \(annotations.count)"
annotation.coordinate = touchMapCoordinate
mapView.addAnnotation(annotation)
// Add the new annotation to the list.
annotations.append(annotation)
// Redraw the overlay.
updateOverlay()
}
#IBAction func drawAction(sender: AnyObject) {
updateOverlay()
}
func mapView(mapView: MKMapView, viewForAnnotation annotation: MKAnnotation) -> MKAnnotationView? {
var view = mapView.dequeueReusableAnnotationViewWithIdentifier("pin")
if let view = view {
view.annotation = annotation
}
else {
view = MKPinAnnotationView(annotation: annotation, reuseIdentifier: "pin")
// Allow the pin to be repositioned.
view?.draggable = true
}
return view
}
func mapView(mapView: MKMapView, annotationView view: MKAnnotationView, didChangeDragState newState: MKAnnotationViewDragState, fromOldState oldState: MKAnnotationViewDragState) {
// The map view retains a reference to the same annotations in the array.
// The annotation in the array is automatically updated when the pin is moved.
updateOverlay()
}
func updateOverlay() {
// Remove existing overlay.
if let polygon = self.polygon {
mapView.removeOverlay(polygon)
}
self.polygon = nil
if annotations.count < 3 {
print("Not enough coordinates")
return
}
// Create coordinates for new overlay.
let coordinates = annotations.map({ $0.coordinate })
// Sort the coordinates to create a path surrounding the points.
// Remove this if you only want to draw lines between the points.
var hull = sortConvex(coordinates)
let polygon = MKPolygon(coordinates: &hull, count: hull.count)
mapView.addOverlay(polygon)
self.polygon = polygon
}
func mapView(mapView: MKMapView, rendererForOverlay overlay: MKOverlay) -> MKOverlayRenderer {
if overlay is MKPolygon {
let polygonView = MKPolygonRenderer(overlay: overlay)
polygonView.strokeColor = UIColor.blackColor()
polygonView.lineWidth = 0.5
return polygonView
}
return MKPolylineRenderer()
}
}
Here is the convex hull sorting algorithm (adapted from this Gist on GitHub).
func sortConvex(input: [CLLocationCoordinate2D]) -> [CLLocationCoordinate2D] {
// X = longitude
// Y = latitude
// 2D cross product of OA and OB vectors, i.e. z-component of their 3D cross product.
// Returns a positive value, if OAB makes a counter-clockwise turn,
// negative for clockwise turn, and zero if the points are collinear.
func cross(P: CLLocationCoordinate2D, _ A: CLLocationCoordinate2D, _ B: CLLocationCoordinate2D) -> Double {
let part1 = (A.longitude - P.longitude) * (B.latitude - P.latitude)
let part2 = (A.latitude - P.latitude) * (B.longitude - P.longitude)
return part1 - part2;
}
// Sort points lexicographically
let points = input.sort() {
$0.longitude == $1.longitude ? $0.latitude < $1.latitude : $0.longitude < $1.longitude
}
// Build the lower hull
var lower: [CLLocationCoordinate2D] = []
for p in points {
while lower.count >= 2 && cross(lower[lower.count-2], lower[lower.count-1], p) <= 0 {
lower.removeLast()
}
lower.append(p)
}
// Build upper hull
var upper: [CLLocationCoordinate2D] = []
for p in points.reverse() {
while upper.count >= 2 && cross(upper[upper.count-2], upper[upper.count-1], p) <= 0 {
upper.removeLast()
}
upper.append(p)
}
// Last point of upper list is omitted because it is repeated at the
// beginning of the lower list.
upper.removeLast()
// Concatenation of the lower and upper hulls gives the convex hull.
return (upper + lower)
}
This is how it would look with the convex hull sorting (path drawn around points):
This is how it looks without sorting (path drawn from point to point in sequence):

Answer 2

Thank #Luke.
I update Luke's sortConvex function,
so make it compiled successfully by Swift 5.
func sortConvex(input: [CLLocationCoordinate2D]) -> [CLLocationCoordinate2D] {
// X = longitude
// Y = latitude
// 2D cross product of OA and OB vectors, i.e. z-component of their 3D cross product.
// Returns a positive value, if OAB makes a counter-clockwise turn,
// negative for clockwise turn, and zero if the points are collinear.
func cross(P: CLLocationCoordinate2D, _ A: CLLocationCoordinate2D, _ B: CLLocationCoordinate2D) -> Double {
let part1 = (A.longitude - P.longitude) * (B.latitude - P.latitude)
let part2 = (A.latitude - P.latitude) * (B.longitude - P.longitude)
return part1 - part2;
}
// Sort points lexicographically
let points: [CLLocationCoordinate2D] = input.sorted { a, b in
a.longitude < b.longitude || a.longitude == b.longitude && a.longitude < b.longitude
}
// Build the lower hull
var lower: [CLLocationCoordinate2D] = []
for p in points {
while lower.count >= 2 {
let a = lower[lower.count - 2]
let b = lower[lower.count - 1]
if cross(P: p, a, b) > 0 { break }
lower.removeLast()
}
lower.append(p)
}
// Build upper hull
var upper: [CLLocationCoordinate2D] = []
for p in points.lazy.reversed() {
while upper.count >= 2 {
let a = upper[upper.count - 2]
let b = upper[upper.count - 1]
if cross(P: p, a, b) > 0 { break }
upper.removeLast()
}
upper.append(p)
}
// Last point of upper list is omitted because it is repeated at the
// beginning of the lower list.
upper.removeLast()
// Concatenation of the lower and upper hulls gives the convex hull.
return (upper + lower)
}