Add blur effect on a Mapbox

Question

I want to add blur effect in mapbox.when first time load map that time only display current location in map other map is blue.see screenshot

when i move the userlocation to another location than other location is clear on the map.also display annotation in specific location see screenshot

help me how can implement this

here i will some implement code

- (CGPoint)convertLatLongCoord:(CGPoint)latLong {
    CGSize screenSize = [UIScreen mainScreen].applicationFrame.size];
    CGFloat SCALE = MIN(screenSize.width, screenSize.height) / (2.0 * EARTH_RADIUS);
    CGFloat OFFSET = MIN(screenSize.width, screenSize.height) / 2.0;
    CGFloat x = EARTH_RADIUS * cos(latLong.x) * cos(latLong.y) * SCALE + OFFSET;
    CGFloat y = EARTH_RADIUS * cos(latLong.x) * sin(latLong.y) * SCALE + OFFSET;

    return CGPointMake(x, y);
}

-(void)locationManager:(CLLocationManager *)manager didUpdateLocations:(NSArray<CLLocation *> *)locations
{
    NSLog(@"data=%f",self.mapview.userLocation.coordinate.latitude);
    CLLocation *currentLoc=[locations objectAtIndex:0];
    _coordinate=currentLoc.coordinate;
CGPoint latLong = {_coordinate.latitude, _coordinate.longitude};
    oldcord = [self convertLatLongCoord:latLong];
    NSLog(@"Cartesian Coordinate: (%f, %f)",oldcord.x, oldcord.y);

}

in this code i will get perfect view pixel point of UserLocation coordinate.after i want to clear blur in view using CGPoint but i can not get it.i think i will create array of CGPoint and than clear using line to blur of view but i can not got it pls suggest me.

i also use this lib but i can not get idea to much https://github.com/DenHeadless/Shapes

Answer 1

as per Logic I have added in my comment here I have made a sample for you download it here, check the result below

The sample contains following logic.

1. Using iOS Map, added a Custom UIView above the Map the class for the UIView is DrawView which actually handles all the drawing and erasing part.
2. We are having CLLocationManager of course to determine user's movement.

3. As soon as CLLocationManager start giving locations, we convert the coordinates with respect of MapView pin location using following code

   CGPoint pt=[self.map convertCoordinate:location.coordinate toPointToView:self.view];
   

   and we pass the CGPoint which is the converted value for the UIView to clear the area in drawing as

   [self.drawView eraseAtPoint:pt];
   

4. When CGPoint from user's coordinate is passed to the DrawView eraseAtPoint function we erase an area of defined radius, and it clears out the area as wanted.

5. I have added a sample directions.gpx file to simulate GPS location, the sample GIF shows the movement.

Note: Link for the project will expire after 14 March,2017, so keep it downloaded, in any case if you want the sample again ping in comment. Feel free to do modifications as you need.

Update:

Adding capability to erase area in circles instead of squares, just replace the drawRect function in DrawView with the code below

- (void)drawRect:(CGRect)rect {    

    // Drawing code
    UIColor *backgroundColor=[UIColor colorWithRed:0.85 green:0.85 blue:0.85 alpha:1.0f];//Grey

    [backgroundColor setFill];
    UIRectFill(rect);

    if(!self.initialLoad){//If the view has been loaded from next time we will try to clear area where required..

        // clear the background in the given rectangles
        for (NSValue *holeRectValue in _rectArray) {
            CGContextRef context = UIGraphicsGetCurrentContext();

            CGRect holeRect = [holeRectValue CGRectValue];

            [[UIColor clearColor] setFill];

            CGRect holeRectIntersection = CGRectIntersection( holeRect, rect );

            CGContextSetFillColorWithColor( context, [UIColor clearColor].CGColor );
            CGContextSetBlendMode(context, kCGBlendModeClear);

            CGContextFillEllipseInRect( context, holeRectIntersection );

        }
    }

    self.initialLoad=NO;
}

Cheers.