How to overlay an image on a IOS map using swift

Question

I am trying to find out how to overlay an image on a IOS map using SWIFT. I have created the following code that overlays a green circle on a map using map kit. I want to replace the green circle with the rectangular image tOver.png 500,500 I am new to iOS development and to swift. So far I can not find a swift example or good resource.

//
//  ViewController.swift
//  mapoverlaytest
//

import UIKit
import MapKit


class ViewController: UIViewController,MKMapViewDelegate {
    @IBOutlet weak var mapView: MKMapView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.mapView.delegate = self;
        let location = CLLocationCoordinate2D(
            latitude: 51.50007773,
            longitude: -0.1246402
        )

        let span = MKCoordinateSpanMake(0.05, 0.05)
        let region = MKCoordinateRegion(center: location, span: span)

        mapView.setRegion(region, animated: true)

        let annotation = MKPointAnnotation()
        annotation.setCoordinate(location)
        annotation.title = "Big Ben"
        annotation.subtitle = "London"



        var overlay = MKCircle (centerCoordinate: location, radius: 500)

        mapView.addOverlay(overlay)

        mapView.addAnnotation(annotation)

    }

    func mapView(
        mapView: MKMapView!, rendererForOverlay
        overlay: MKOverlay!) -> MKOverlayRenderer! {
            if (overlay.isKindOfClass(MKCircle))
            {
                var circleRenderer = MKCircleRenderer(overlay: overlay)
                circleRenderer.strokeColor = UIColor.greenColor()
                circleRenderer.fillColor = UIColor(
                    red: 0,
                    green: 1.0,
                    blue: 0,
                    alpha: 0.5)

                return circleRenderer
            }
            return nil
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

score 4 · Answer 1 · answered Feb 18 '15 at 23:35

As Totem explained, it would be simpler to use an image annotation instead of an overlay if that works for your purposes. It may not work depending on what you want to use this image for, however. The main difference between map overlays and map annotations, is annotations stay the same size when you zoom the map (like a pin), and overlays change with the size of the map (like marking a building). If you want your image to zoom with the map, it gets a little more complicated.

You will want to create a new MKOverlayRenderer subclass to draw your image. You have to draw the image into the image context yourself by subclassing the drawMapRect(mapRect, zoomScale, inContext) function. After you make this subclass, you can just substitute in your custom subclass in place of the MKCircleRenderer, and you should be good to go.

There is a very good write up on Raywenderlich.com, which you should definitely check out. It should walk you through everything you need to know.

score 0 · Answer 2 · answered Nov 26 '14 at 23:22

Instead of rendererForOverlay, you should implement

func mapView(mapView: MKMapView!, viewForAnnotation annotation: MKAnnotation!) -> MKAnnotationView!

Inside there, build your MKAnnotationView and set its image property before returning it out. Check out https://developer.apple.com/LIBRARY/ios/documentation/MapKit/Reference/MKAnnotationView_Class/index.html for more info on the MKAnnotationView class.

How to overlay an image on a IOS map using swift

2 Answers2