How to Set Particular Area/Region Selected MapView

Question

Hi everyone I am trying to set a particular area of MapView selected like in image

a part of map highlighted and other looks dimmed. I am using MKMapView in my project and I have successfully drawn line on map but I am unable to dim area outside my selected area.

What I do is, allow user to draw line on ImageView and get CLLocationCoordinate2D objects from touch points

Here is my code

@IBAction func btnActionApply(sender: UIButton) {
    viewDraw.hidden = true
    mapView.scrollEnabled = true
    for touches in arrTouches {
        var coordinates = [CLLocationCoordinate2D]()
        for p in touches {
            let c = mapView.convertPoint(p, toCoordinateFromView: mapView)
            coordinates.append(c)
        }
        let polygon = MKPolygon(coordinates: &coordinates, count: touches.count)
        mapView.addOverlay(polygon)
    }

    viewDraw.image = nil
    viewDraw.hidden = true
    mapView.scrollEnabled = true

}

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    if let touch = touches.first {
        startPoint = touch.locationInView(viewDraw)
        lastPoint = touch.locationInView(viewDraw)
        self.touches = [startPoint]
    }
}
override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
    if let touch = touches.first {
        let currentPoint = touch.locationInView(viewDraw)
        self.touches.append(touch.locationInView(mapView))
        drawLineFrom(lastPoint, toPoint: currentPoint)
        lastPoint = currentPoint
    }
    self.view.setNeedsDisplay()
}
override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
    drawLineFrom(lastPoint, toPoint: startPoint)
    self.touches.append(startPoint)
    arrTouches.append(self.touches)
}

func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {

    UIGraphicsBeginImageContextWithOptions(viewDraw.frame.size, false, 0.0)
    let context = UIGraphicsGetCurrentContext()
    viewDraw.image?.drawInRect(CGRect(x: 0, y: 0, width: viewDraw.frame.size.width, height: viewDraw.frame.size.height))
    CGContextMoveToPoint(context, fromPoint.x, fromPoint.y)
    CGContextAddLineToPoint(context, toPoint.x, toPoint.y)
    CGContextSetLineCap(context, CGLineCap.Round)
    CGContextSetLineWidth(context, brushWidth)
    CGContextSetRGBStrokeColor(context, red, green, blue, 1.0)
    CGContextSetBlendMode(context, .Normal)
    // 4
    CGContextStrokePath(context)
    // 5
    viewDraw.image = UIGraphicsGetImageFromCurrentImageContext()
    viewDraw.alpha = opacity
    UIGraphicsEndImageContext()
}
func mapView(mapView: MKMapView, rendererForOverlay overlay: MKOverlay) -> MKOverlayRenderer {
    let lineView = MKPolylineRenderer(overlay: overlay)
    lineView.strokeColor = UIColor.greenColor()
    return lineView

}`

Here is what I get from this code

Please if anyone can help me to get desired results

Answer 1

Fist of all get outer coordinates like

var outerCoordinates = [CLLocationCoordinate2D]()

for i in -90...90 {
     outerCoordinates.append(CLLocationCoordinate2D(latitude: Double(i), longitude: -180))
}
for i in -180...180 {
      outerCoordinates.append(CLLocationCoordinate2D(latitude: 90, longitude: Double(i)))
}
for i in -90...90 {
       outerCoordinates.append(CLLocationCoordinate2D(latitude: Double(i * -1), longitude: 180))
}
for i in -180...180 {
       outerCoordinates.append(CLLocationCoordinate2D(latitude: -90, longitude: Double(i * -1)))
}

Now inner Polygon

var innerPolygons = [MKPolygon]()

Insert all your inner polygons in innerPolygons array i.e.

var coordinates = [CLLocationCoordinate2D]() 

// TODO: add all coordinates for inner polygon

let poly = MKPolygon(coordinates: &coordinates, count: coordinates.count)
innerPolygons.append(poly)

After adding all inner polygons

let polygon = MKPolygon(coordinates: &outerCoordinates, count: outerCoordinates.count, interiorPolygons: innerPolygons)
mapView.add(polygon)