How to style a Map view in SwiftUI?

Question

How do you style a Map view in SwiftUI?

Here is an example screenshot of a default map view in SwiftUI.

I would like to style it like this with just black and white and then the detail for the buildings between streets would just be flat and all the street colors would be white. (This is just a quick Photoshop edit)

Is this possible to do in MapKit? I've seen references to using MKTileOverlay to use your own image tile to style the map, but these posts are several years old. Is this the current approach to styling a Map or is there something more modern in iOS 16?

score 3 · Answer 1 · answered Feb 21 '23 at 10:20

You can get something close to this using an .overlay, and varying the .blendMode. Three examples shown below:

struct ContentView: View {
    
    @State private var rect = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.5, longitude: 0), latitudinalMeters: 5000, longitudinalMeters: 5000)
    
    var body: some View {
        VStack {
            Map(coordinateRegion: $rect)
                .overlay {
                    Rectangle()
                        .fill(.gray)
                        .blendMode(.color)
                }
            Map(coordinateRegion: $rect)
                .overlay {
                    Rectangle()
                        .fill(.black)
                        .blendMode(.hue)
                }
            Map(coordinateRegion: $rect)
                .overlay {
                    Rectangle()
                        .fill(.black)
                        .blendMode(.saturation)
                }
        }
    }
}

If this isn't quite right you could try combining multiple overlays with different .blendModes to achieve the desired effect. For example:

Map(coordinateRegion: $rect)
    .overlay {
        ZStack {
            Rectangle()
                .fill(.gray)
                .blendMode(.colorBurn)
            
            Rectangle()
                .fill(.black)
                .blendMode(.hue)
        }
    }

gives more contrast

How to style a Map view in SwiftUI?

1 Answers1