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?

Answer 1

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.