UIVisualEffectView with mask layer - ios

Question

I am trying to blur a MKMapView while also displaying a circle mask above it. To better visualize what I mean with this you can find an image of my current state attached:
This shows nearly what I want but the background (the map) should be blurred which is not the case in this picture. I tried to work with UIVisualEffectView, but it seems I am doing something wrong there. Here is what I tried:
func createOverlay(at: CGPoint) {
var blur: UIView!
blur = UIVisualEffectView (effect: UIBlurEffect (style: UIBlurEffectStyle.dark))
blur.frame = self.mapView.frame
blur.isUserInteractionEnabled = false
self.mapView.addSubview(blur)
let circleSize: CGFloat = 200
let path = UIBezierPath (
roundedRect: blur.frame,
cornerRadius: 0)
let circle = UIBezierPath (
roundedRect: CGRect (origin: CGPoint(x:at.x - circleSize/2, y: at.y-circleSize/2),
size: CGSize (width: circleSize, height: circleSize)), cornerRadius: circleSize/2)
path.append(circle)
path.usesEvenOddFillRule = true
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
maskLayer.fillRule = kCAFillRuleEvenOdd
let borderLayer = CAShapeLayer()
borderLayer.path = circle.cgPath
borderLayer.strokeColor = UIColor.white.cgColor
borderLayer.lineWidth = 10
blur.layer.addSublayer(borderLayer)
blur.layer.mask = maskLayer
}
To summarize here is my question:
How do I have to change my code in order to blur the mapview aswell as show the cirlce mask above it ?
EDIT
Just found out that the blur of the mapview works if I remove the code to add the circle mask... Maybe this is of any interest in order to solve this problem.

Answer 1

Ive now found a solution after digging around for a bit. Im assuming you're using Xcode 8 as the layer.mask has a known bug where you cannot have both a blur, and a mask on the same layer.
After messing around with a playground I have fixed the problem, so will try to adapt your code to match my solution. If you use the "mask" property of the blurView instead, then you should have no issues. There has been a bug report made to Apple I believe in regards to the layer.mask not working
This is your current code at the end
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
maskLayer.fillRule = kCAFillRuleEvenOdd
let borderLayer = CAShapeLayer()
borderLayer.path = circle.cgPath
borderLayer.strokeColor = UIColor.white.cgColor
borderLayer.lineWidth = 10
blur.layer.addSublayer(borderLayer)
blur.layer.mask = maskLayer
Instead of this, try using the following:
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
maskLayer.fillRule = kCAFillRuleEvenOdd
let borderLayer = CAShapeLayer()
borderLayer.path = circle.cgPath
borderLayer.strokeColor = UIColor.white.cgColor
borderLayer.fillColor = UIColor.clear.cgColor //Remember this line, it caused me some issues
borderLayer.lineWidth = 10
let maskView = UIView(frame: self.view.frame)
maskView.backgroundColor = UIColor.black
maskView.layer.mask = maskLayer
blur.layer.addSublayer(borderLayer)
blur.mask = maskView
Let me know if you have any issues!

Answer 2

In addition to Jack's solution, if you are on iOS >11 then just set blur.layer.mask to the maskLayer:
if #available(iOS 11.0, *) {
blur.layer.mask = maskLayer
} else {
let maskView = UIView(frame: self.view.frame)
maskView.backgroundColor = UIColor.black
maskView.layer.mask = borderLayer
blur.mask = maskView
}