Adding custom overlay in map view

Question

i'm new to iOS and my goal is to add custom overlay in map view using Swift 3 and MapKit. I've followed this Add inverted circle overlay to map view. Here is the code:

import UIKit
import MapKit

class MyMapOverlayRenderer: MKOverlayRenderer {

let diameter: Double
let fillColor: UIColor

init(overlay: MKOverlay, diameter: Double, fillColor: UIColor) {

    self.diameter = diameter
    self.fillColor = fillColor
    super.init(overlay: overlay)

}

override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext) {

    let path = UIBezierPath(rect: CGRect(x: mapRect.origin.x, y: mapRect.origin.y, width: mapRect.size.width, height: mapRect.size.height))
    path.usesEvenOddFillRule = true
    let radiusInMapPoints = diameter * MKMapPointsPerMeterAtLatitude(self.overlay.coordinate.latitude)
    let radiusSquared = MKMapSize(width: radiusInMapPoints, height: radiusInMapPoints)
    let regionOrigin = MKMapPointForCoordinate(self.overlay.coordinate)
    var regionRect = MKMapRect(origin: regionOrigin, size: radiusSquared)
    regionRect = MKMapRectOffset(regionRect, -radiusInMapPoints / 2, -radiusInMapPoints / 2)
    regionRect = MKMapRectIntersection(regionRect, MKMapRectWorld)

    let cornerRadius = CGFloat(regionRect.size.width / Double(2))

    let excludePath = UIBezierPath(roundedRect: CGRect(x: regionRect.origin.x, y: regionRect.origin.y, width: regionRect.size.width, height: regionRect.size.height), cornerRadius: cornerRadius)
    path.append(excludePath)


    context.setFillColor(fillColor.cgColor)
    context.addPath(path.cgPath)
    context.fillPath()

}
}

Eventually the overlay is shown without exclude path (a circle), any suggestions?

score 0 · Accepted Answer · answered Oct 17 '16 at 09:27

Solved it, just added reversing():

path.append(excludePath.reversing())

Full function code:

override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext) {

    let path = UIBezierPath(rect: CGRect(x: mapRect.origin.x, y: mapRect.origin.y, width: mapRect.size.width, height: mapRect.size.height))
    path.usesEvenOddFillRule = true
    let radiusInMapPoints = diameter * MKMapPointsPerMeterAtLatitude(MKMapPointsPerMeterAtLatitude(overlay.coordinate.latitude))

    let radiusSquared = MKMapSize(width: radiusInMapPoints, height: radiusInMapPoints)

    let regionOrigin = MKMapPointForCoordinate(overlay.coordinate)

    var regionRect = MKMapRect(origin: regionOrigin, size: radiusSquared)

    regionRect = MKMapRectOffset(regionRect, -radiusInMapPoints / 2, -radiusInMapPoints / 2)
    regionRect = MKMapRectIntersection(regionRect, MKMapRectWorld)

    let midX = ( regionOrigin.x + regionRect.origin.x) / 2
    let midY = ( regionOrigin.y + regionRect.origin.y) / 2

    let cornerRadius = CGFloat(regionRect.size.width / Double(2))
    let excludePath = UIBezierPath(roundedRect: CGRect(x: midX, y: midY, width: regionRect.size.width / 2, height: regionRect.size.height / 2), cornerRadius: cornerRadius)

    path.append(excludePath.reversing())

    context.setFillColor(fillColor.cgColor)
    context.addPath(path.cgPath)
    context.fillPath()

}

Adding custom overlay in map view

1 Answers1