How to draw a polygon using Apple Map by MKPolygon

Question

I'm creating a polygon with the help of the below coordinates. Polygon appears fine on the map but I'm wondering about the shape of the polygon. In the below code, I've written to draw a polygon.

let points1 = CLLocationCoordinate2DMake(24.63743783432579,77.323397508938)
let points12 = CLLocationCoordinate2DMake(24.65085603700094,77.316960207723)

let points13 = CLLocationCoordinate2DMake(24.64453717929222,77.309578768996)
let points14 = CLLocationCoordinate2DMake(24.64640946676303,77.336872926149)

coordinates.append(points1)
coordinates.append(points12)
coordinates.append(points13)
coordinates.append(points14)
print(coordinates.count)
let polygon = MKPolygon(coordinates: &coordinates, count: coordinates.count)
polygon.title = "33"
polygon.subtitle = ""
mapView.addOverlay(polygon)

I've written the below code using delegate method to render the polygon.

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    let identifier = "Annotation"
    var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier)
    if annotationView == nil {
        annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: identifier)
        annotationView!.image =  some_image
        annotationView!.canShowCallout = true
    }
    else {
        annotationView!.annotation = annotation
        annotationView!.image = some_image
    }
    return annotationView
}

I've attached two images here which is showing the final result on UI and it is not expected.

Actual Image

Expected:

Am I missing something here in map property?

Rob · Accepted Answer · 2021-06-04T15:44:52.530

2

You are getting that shape because of the order of the coordinates.

For example, you've given us four coordinates (though your map has five) in this order:

let coordinates = [
    CLLocationCoordinate2DMake(24.63743783432579,77.323397508938),
    CLLocationCoordinate2DMake(24.65085603700094,77.316960207723),
    CLLocationCoordinate2DMake(24.64453717929222,77.309578768996),
    CLLocationCoordinate2DMake(24.64640946676303,77.336872926149)
]

Let's show that overlay (and label the coordinates):

If you fix the order of the coordinates ...

let coordinates = [
    CLLocationCoordinate2DMake(24.63743783432579,77.323397508938),
    CLLocationCoordinate2DMake(24.64453717929222,77.309578768996),
    CLLocationCoordinate2DMake(24.65085603700094,77.316960207723),
    CLLocationCoordinate2DMake(24.64640946676303,77.336872926149)
]

Then you get a polygon like you were expecting:

Now, in your image, you have five coordinates, but the issue is the same, that the coordinates are in the incorrect order (and because the polygon intersects itself, it applies the default fill rule that cuts out the center). But fix the order of the coordinates such that they stroke the perimeter of the polygon and the problem will be resolved.

edited Jun 04 '21 at 15:44

answered Jun 04 '21 at 15:11

Rob

415,655
72
787
1,044

Thanks, your solution almost save my day, but i have one query here. How will i know that coordinate array is not in order. Any key value should i expect from API or locally i can do the same? – sandeep tomar Jun 04 '21 at 17:07
1

I don’t know of any API that will do that for you. But one approach is to calculate the angles of each coordinate from some central point (e.g. your central annotation? the geometric mean?) and then sort the coordinate by their respective angles. See https://community.esri.com/t5/geoprocessing-questions/how-to-order-point-of-polygon-clockwise/td-p/65277. – Rob Jun 04 '21 at 18:38
1

In the interest of full disclosure, if your polygon is not convex, this clockwise sorting algorithm, while efficient and simple, might not be ideal. At that point, it probably becomes the classical (and computationally more complex) [traveling salesman problem](https://en.m.wikipedia.org/wiki/Travelling_salesman_problem). – Rob Jun 04 '21 at 18:56
Ok thanks, above solution will work exactly what i want. – sandeep tomar Jun 05 '21 at 02:47

How to draw a polygon using Apple Map by MKPolygon

1 Answers1