Render a Map as an Image using MapKit

The MapKit framework allows you to create and embed maps in your app. But sometimes, embedding an entire map may be overkill — like if you want display multiple coordinates, as a list of maps in a UITableView. Or if you want the map to be non-interactive.

In such cases, it makes more sense to create a snapshot of a map, and use that in your app.

Introducing MKSnapshotter

MapKit provides you a MKSnapshotter class that you use for the specific purpose of rendering a map as an image.

All the configuration for the snapshotter is defined by MKSnapshotOptions. The configuration includes the region to render, as well as display options like showing buildings & points of interest, image size etc.

To set the region, we need an MKCoordinateRegion. We make one using a set of lat-long coordinates for the centre, and the distance in meters for the breadth (lat) and width (long) of the region to be displayed. Note that you can use other convenience methods to create the MKCoordinateRegion, but this one is the easiest to construct, without needing any complex conversions.

Once the snapshotter is ready, creating the snapshot is a piece of cake. Just use the startWithCompletionHandler function — it will asynchronously generate the snapshot for you.

You can then cache this image somewhere, so that you can display it as needed, without having to (asynchronously) generate it all the time.

The above code generates the following image, BTW: