How to add blur effect around the circle on the map Mapbox Maplibre GL Native

Question

I have a map with a circle over the user location. Used Mapbox Maplibre GL Native. I want to add the blur around this circle, so inside circle will be no blur, but around all the map will be blured.

I've created a blur effect and added this to the map:

// Create a blur effect view

let blurEffect = UIBlurEffect(style: .light)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = mapView.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
blurEffectView.alpha = 0.5 // Adjust opacity as needed
mapView.addSubview(blurEffectView)

After this added a circle over the user location:

// Create a new circle feature with the updated coordinates
let newCircleFeature = MGLPointFeature()
newCircleFeature.coordinate = currentLocation.coordinate

// Update the circle feature
circleFeature = newCircleFeature

// Update the shape of the circle source
if let existingSource = circleSource {
    existingSource.shape = circleFeature as? MGLShape
} else {
    // Create a new circle source and layer if it doesn't exist
    circleSource = MGLShapeSource(identifier: "circle-source", shape: circleFeature as? MGLShape, options: nil)
    mapView.style?.addSource(circleSource!)

    circleLayer = MGLCircleStyleLayer(identifier: "circle-layer", source: circleSource!)
    circleLayer?.circleColor = NSExpression(forConstantValue: UIColor.clear) // Adjust the color as needed
    circleLayer?.circleOpacity = NSExpression(forConstantValue: 0.5) // Adjust the opacity as needed
    circleLayer?.circleRadius = NSExpression(forConstantValue: 200) // Adjust the radius as needed
    circleLayer?.circleStrokeColor = NSExpression(forConstantValue: UIColor.black) // Adjust the radius as needed
    circleLayer?.circleStrokeWidth = NSExpression(forConstantValue: 4)
                            
    mapView.style?.addLayer(circleLayer!)
}

And also if it possible to make, that when user will move, the circle will move with him and visible area inside circle too.

How to add blur effect around the circle on the map Mapbox Maplibre GL Native

0 Answers0