Skip to content

Instantly share code, notes, and snippets.

@pdarcey
Last active September 21, 2023 03:20
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pdarcey/4076c5ab142fccaf0a4b3badd477e013 to your computer and use it in GitHub Desktop.
Save pdarcey/4076c5ab142fccaf0a4b3badd477e013 to your computer and use it in GitHub Desktop.
All the steps to create and display an overlay on a map
// See comments below
@pdarcey
Copy link
Author

pdarcey commented Mar 20, 2017

Checklist for getting overlays to display on a map

1. Create a class and set it as a MKMapViewDelegate

    class MapViewController: UIViewController, MKMapViewDelegate {  }

2. Add your mapView and hook it up to the new class

    @IBOutlet var mapView: MKMapView!

3. In viewDidLoad, set the mapView's delegate

    mapView.delegate = self

(This can also be done in the Storyboard)

4. In an extension to the base class, add the function func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer { … }

e.g:

    func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
        guard(overlay is MKPolygon) else { return MKOverlayRenderer() }
        
        let renderer = MKPolygonRenderer.init(polygon: overlay as! MKPolygon)
        renderer.lineWidth = 1.0
        renderer.strokeColor = UIColor.blueColor
        renderer.fillColor = UIColor.blueColor.withAlphaComponent(0.4)
        renderer.alpha = 0.9
        
        return renderer
    }

Note: I have used MKPolygons in the example, but different MKOverlays are available:
MKCircle, MKPolyline, MKPolygon, MKTileOverlay and you can subclass it yourself

5. Generate the overlay(s) you wish to display,

e.g:

    func polygonFrom(_ points: NSArray, interiorPolygons: NSArray?) -> MKPolygon {
        var polygonPoints: [CLLocationCoordinate2D] = []
        for point in points {
            let coordinateArray = point as! NSArray
            polygonPoints.append(CLLocationCoordinate2DMake(coordinateArray[1] as! Double, coordinateArray[0]  as! Double))
        }
        
        let result: MKPolygon
        
        if let interior = interiorPolygons as? [MKPolygon] {
            result = MKPolygon(coordinates: polygonPoints, count: points.count, interiorPolygons: interior )
        } else {
            result = MKPolygon(coordinates: polygonPoints, count: points.count)
        }
        
        return result
    }

6. Add the overlay(s) to the mapView

    let overlays = createOverlayFor(region)
    mapView.addOverlays(overlays)

Note: I have used addOverlays in the example, which adds an Array of overlays but you can add individual overlays

7. Build & run!

@matiasortizluna
Copy link

Amazing script! Really helped me understand the way of working of Shapes in Apple Maps! Thanks a lot! 💯

@pdarcey
Copy link
Author

pdarcey commented Apr 27, 2021

Bom dia, @matiasarielol, de nada. Thanks for the feedback. To be honest, I did this for myself, but I'm glad someone else benefitted too.

@rungxanh1995
Copy link

Thank you so much for listing out the steps. I didn't know step 4 had to be implemented to render it 🫡

@pdarcey
Copy link
Author

pdarcey commented Sep 21, 2023

Thanks @rungxanh1995, that's kind of why I wrote this up in the first place. Step 4 is the part where you can customise the overlay to suit yourself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment