Map - I - SwiftUI Blog

This post is the first in a series about using Maps in SwiftUI. In this post, we’ll learn how to:

Create a Map.
Show the user’s position.
Add a circle centered on the user’s position.

Map Creation

First, we need to add values in the info.plist for:

Privacy – Location Always Usage Description
Privacy – Location When In Use Usage Description

Now, let’s take a look at the code:

import SwiftUI
import MapKit

struct ContentView: View {
    @State var position: MapCameraPosition = .region(MKCoordinateRegion(
        center: .init(latitude: 47.499167,longitude: 8.726667),
        span: .init(latitudeDelta: 0.2, longitudeDelta: 0.2)
    ))
    
    var body: some View {
        ZStack{
            Map(position: $position) 
            .ignoresSafeArea(.all)
        }
    }
}

To use the map, we need to import MapKit, then define a position such as MapCameraPosition. The span represents the amount of map to display (think of it as zoom). (I used the coordinates of Winterthur in memory of Niklaus Wirth). The map is displayed in fullscreen mode because it ignores the safe area.

Show User Position

Now, take a look at how to create a map centered on the user’s position:

First, we define a locationManager; it’s necessary to access the user’s position. When the map appears, it will request the user’s permission.

In this case, ‘position’ contains the user’s location (the fallback is a position to use if the map hasn’t resolved the person’s location).

The UserAnnotation displays the person’s current location on the map.

import SwiftUI
import MapKit

struct ContentView: View {
    let locationManager = CLLocationManager()
    @State var position: MapCameraPosition = .userLocation(fallback: .automatic)
    var body: some View {
        ZStack{
            Map(position: $position) {
                UserAnnotation()
             }.ignoresSafeArea(.all)
             .onAppear{self.locationManager.requestWhenInUseAuthorization()
            }
        }
    }
}

Add a circle around the user position

import SwiftUI
import MapKit

struct ContentView: View {
    let locationManager = CLLocationManager()
    @State var distance: CLLocationDistance = 500.0
    @State var defaultLocation: CLLocationCoordinate2D = CLLocationCoordinate2D(latitude: 0.0, longitude: 0.0)

    @State var position: MapCameraPosition = .userLocation(fallback: .automatic)
    
    var body: some View {
        ZStack{
            Map(position: $position) {
                MapCircle(center:  locationManager.location?.coordinate ?? defaultLocation, radius: distance)
                    .foregroundStyle(Color(white: 0.4, opacity: 0.25))
                    .stroke(.orange, lineWidth: 2)
                UserAnnotation()
            }
            .ignoresSafeArea(.all)
            .onAppear{self.locationManager.requestWhenInUseAuthorization()
            }
        }
    }
}

Here we’ve added a distance (in meters) that we use as the radius for the MapCircle. The MapCircle is centered using the coordinates of the user, obtained through the locationManager. In the image, you’ll also see a black circle; that’s Apple Park.

That’s all for this episode.

SwiftUI Blog

Map – I

Map Creation

Show User Position

Add a circle around the user position

Leave a Reply Cancel reply