CODEWITHSUNDEEP
iosswiftapple-mapsmkpolygonmkpolygonrenderer
sandeep tomar
sandeep tomar

Reputation: 305

How to draw a polygon using Apple Map by MKPolygon

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

Actual Image from my code

Expected:

Expected result

Am I missing something here in map property?

Upvotes: 1

Views: 2542

Answers (1)

Rob
Rob

Reputation: 437372

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):

enter image description here

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:

enter image description here

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.

Upvotes: 2

Related Questions