Prevent MKPolygon to have knots

Question

I'm developing an app with a map in which the user can draw a polygon area.

My issue is what it's possible drawing polygons with knots (see the image) (I don't know if knot is the right word). I didn't find a simply way preventing the polygon to get knots. For the case of the attached image, I would like the small curl to be removed and even the outline to be smoothed

Do you know a way to make that?

The process of drawing the polygon while the user is touching the screen, does use MKPolyline, MKPolygon and MKOverlay as follows:

- (void)touchesBegan:(UITouch*)touch
{
    CGPoint location = [touch locationInView:self.mapView];
    CLLocationCoordinate2D coordinate = [self.mapView convertPoint:location toCoordinateFromView:self.mapView];
    [self.coordinates addObject:[NSValue valueWithMKCoordinate:coordinate]];
}

- (void)touchesMoved:(UITouch*)touch
{
    CGPoint location = [touch locationInView:self.mapView];
    CLLocationCoordinate2D coordinate = [self.mapView convertPoint:location toCoordinateFromView:self.mapView];
    [self.coordinates addObject:[NSValue valueWithMKCoordinate:coordinate]];
}

- (void)touchesEnded:(UITouch*)touch
{
    CGPoint location = [touch locationInView:self.mapView];
    CLLocationCoordinate2D coordinate = [self.mapView convertPoint:location toCoordinateFromView:self.mapView];
    [self.coordinates addObject:[NSValue valueWithMKCoordinate:coordinate]];
    [self didTouchUpInsideDrawButton:nil];
}

- (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id <MKOverlay>)overlay
{
    MKOverlayPathView *overlayPathView;

    if ([overlay isKindOfClass:[MKPolygon class]])
    {
        // create a polygonView using polygon_overlay object
        overlayPathView = [[MKPolygonView alloc] initWithPolygon:overlay];
        overlayPathView.fillColor   = [UIColor redColor];
        overlayPathView.lineWidth = 1.5;
        return overlayPathView;
    }
    else if ([overlay isKindOfClass:[MKPolyline class]])
    {
        overlayPathView = [[MKPolylineView alloc] initWithPolyline:(MKPolyline *)overlay];
        overlayPathView.fillColor   = [UIColor redColor];
        overlayPathView.lineWidth = 3;
        return overlayPathView;
    }
    return nil;
}

Answer 1

1. MKOverlayPathView was deprecated since iOS 7.0. You'd use MKOverlayRenderer instead of it and also related map delegate method.
2. Try to play with miterLimit property of MKOverlayRenderer.

Example:

-(MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id<MKOverlay>)overlay {
    if ([overlay isKindOfClass:[MKPolygon class]]) {
        MKPolygonRenderer *polygonRenederer = [[MKPolygonRenderer alloc] initWithPolygon:overlay];
        polygonRenederer.fillColor = [UIColor redColor];
        polygonRenederer.lineWidth = 1.5;
        polygonRenederer.miterLimit = 10;
        return polygonRenederer;
    } else if ([overlay isKindOfClass:[MKPolyline class]]) {
        MKPolylineRenderer *lineRenderer = [[MKPolylineRenderer alloc] initWithPolyline:overlay];
        lineRenderer.strokeColor = [UIColor redColor];
        lineRenderer.lineWidth = 3;
        return lineRenderer;
    }
    return nil;
}