Custom map style in MapKit

Question

I am looking for a way to implement a custom map style in iOS 7, just like you can do with Google Maps. I have found some posts saying that this is not possible with MapKit, but they are all posted a while back. To clarify, by style I am talking about custom colors and preferably also fonts. Example of custom Google Map style below.

_{(source: servendesign.com)}

I would really prefer using MapKit for performance reasons, but if it is not supported I am open to using other frameworks as well. The ones that I have seen are MapBox and Cloudmade, and of course the Google Maps SDK.

Is there a way of doing it with MapKit? If not, what is the best way to go?

Answer 1

MKMapView also offers the possibility to use custom tile overlays. Openstreetmap has a great list of tile servers you could use to get a custom map. Of course there is always the possibility to create your own tile overlay set. The process is described in the Openstreetmap wiki here.

A possible implementation in Swift could look like this:

1. Import MapKit

import MapKit

2. Add overlays to map

let overlayPath = self.mapViewModel.overlayURL
let overlay = MKTileOverlay(URLTemplate: overlayPath)
overlay.canReplaceMapContent = true
self.mapView.addOverlay(overlay)

3. Conform to MKMapViewDelegate

class ViewController: UIViewController, MKMapViewDelegate { ... }

4. Implement delegate method to use the correct renderer to display the tiles

func mapView(mapView: MKMapView, rendererForOverlay overlay: MKOverlay) -> MKOverlayRenderer {
    guard let tileOverlay = overlay as? MKTileOverlay else {
        return MKOverlayRenderer(overlay: overlay)
    }
    return MKTileOverlayRenderer(tileOverlay: tileOverlay)
}

In the above example overlayURL is taken from the tile server list found on openstreetmap: OpenstreetMap Tile Servers.

For example if you would like to use the stamen map (which has a watercolor style) your url would look like:

let overlayURL = "http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg"

If you are searching for a dark-mode map you probably go best with Carto Dark: http://a.basemaps.cartocdn.com/dark_all/${z}/${x}/${y}.png.

See that the above URLs has no SSL support (HTTP). Therefore you will need to allow insecure HTTP requests to this specific URL by adding the App Transport Security Settings in your Info.plist. For further information have a look at this link.