MKOverlayRenderer stretches image

Question

I would like to place an image in a map overlay which will scale along with the map. Using the code below, the image appears in the map view but it is stretched to fit the view. How can I keep the original aspect ratio of the image inside the overlay?

MapOverlay.swift

import UIKit
import MapKit

class MapOverlay: NSObject, MKOverlay {

    var coordinate: CLLocationCoordinate2D
    var boundingMapRect: MKMapRect

    init(coord: CLLocationCoordinate2D, rect: MKMapRect) {
        self.coordinate = coord
        self.boundingMapRect = rect
    }
}

MapOverlayView.swift

import UIKit
import MapKit

class MapOverlayView: MKOverlayRenderer {

    var overlayImage: UIImage

    init(overlay: MKOverlay, overlayImage:UIImage) {
        self.overlayImage = overlayImage
        super.init(overlay: overlay)
    }

    override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext) {
        let mapImage = overlayImage.cgImage
        let mapRect = rect(for: overlay.boundingMapRect)
        context.scaleBy(x: 1.0, y: -1.0)
        context.translateBy(x: 0.0, y: -mapRect.size.height)
        context.draw(mapImage!, in: mapRect)
    }
}

ViewController.swift

import UIKit
import MapKit

class ViewController: UIViewController {

    @IBOutlet weak var mapview: MKMapView!

    override func viewDidLoad() {
        super.viewDidLoad()
        mapview.delegate = self

        let location = CLLocationCoordinate2D(latitude: 47.6062, longitude: -122.3320)
        let span = MKCoordinateSpanMake(2.0, 2.0)
        let region = MKCoordinateRegion(center: location, span: span)
        mapview.setRegion(region, animated: true)

        let rec = mapview.visibleMapRect
        let overlay = MapOverlay(coord: location, rect: rec)
        mapview.add(overlay)
    }

}

extension ViewController: MKMapViewDelegate {

    func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {

        if overlay is MapOverlay {
            let logo = UIImage(named: "swift")
            let overlayView = MapOverlayView(overlay: overlay, overlayImage: logo)
            return overlayView
        } else {
            return MKPolylineRenderer()
        }
    }
}

Answer 1

In your ViewController.swift, in viewDidLoad(),

let rec = mapview.visibleMapRect

Change this, rec should be exactly same size of the image used.

            let location = //Give your location here in CLLocationCoordinate2D
            //1. Show direction Using Overlays
            let span = MKCoordinateSpanMake(1.0, 1.0)
            let region = MKCoordinateRegion(center: location, span: span)
            let mapRect: MKMapRect = helperClass.MKMapRectForCoordinateRegion(region: region)
            let overlay = MapOverlay(identifier: title, coord: location, rect: mapRect)
            mapView.add(overlay)

The function to get MKMapRect

func MKMapRectForCoordinateRegion(region:MKCoordinateRegion) -> MKMapRect {
        let topLeft = CLLocationCoordinate2D(latitude: region.center.latitude + (region.span.latitudeDelta/2), longitude: region.center.longitude - (region.span.longitudeDelta/2))
        let bottomRight = CLLocationCoordinate2D(latitude: region.center.latitude - (region.span.latitudeDelta/2), longitude: region.center.longitude + (region.span.longitudeDelta/2))

        let a = MKMapPointForCoordinate(topLeft)
        let b = MKMapPointForCoordinate(bottomRight)

        return MKMapRect(origin: MKMapPoint(x:min(a.x,b.x), y:min(a.y,b.y)), size: MKMapSize(width: abs(a.x-b.x), height: abs(a.y-b.y)))
    }

The sample project can be found in this link