#mapkit

The MapType can be used to show the map as a standard type, but also as a satellite or hybrid type. Unfortunately the MapType property is not availlable in the MapView in SwiftUi at this time. Therefore the MapType from the MapKit framework in UIKit can be used. In this tutorial a region of New York is displayed with a segmented control to change the map type. This tutorial is built for iOS14 and Xcode 12, which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUIMapTypeTutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbos and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Add the MapViewUIKit struct

import SwiftUI import MapKit struct MapViewUIKit: UIViewRepresentable { // 1. let region: MKCoordinateRegion let mapType : MKMapType // 2. func makeUIView(context: Context) -> MKMapView { let mapView = MKMapView() mapView.setRegion(region, animated: false) mapView.mapType = mapType return mapView } // 3. func updateUIView(_ mapView: MKMapView, context: Context) { mapView.mapType = mapType } }

These properties will be used when the Map View is displayed inside the ContentView

The makeUiView method creates a MKMapView object with the defined region and mapType

When the mapType is changed in the Content View, the Map is updated with the new mapType.

Change the code inside the ContentView struct to

struct ContentView: View { // 1 @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 40.61900, longitude: -74.14053) , span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)) // 2 @State private var mapType: MKMapType = .standard var body: some View { ZStack { // 3 MapViewUIKit(region: region, mapType: mapType) .edgesIgnoringSafeArea(.all) VStack { Spacer() // 4 Picker("", selection: $mapType) { Text("Standard").tag(MKMapType.standard) Text("Satellite").tag(MKMapType.satellite) Text("Hybrid").tag(MKMapType.hybrid) } .pickerStyle(SegmentedPickerStyle()) .offset(y: -40) .font(.largeTitle) } } } }

The region State property is declared with the region of a part of the city New York

The mapType State propery is declared with the standard view type.

The MapViewUiKit object is called with the New York region and standard maptype

A Picker with type SegmentPickerStyle containing the different map types is displayed. When a segment is selected the mapType property value updates which will redraw the map with thus new type.

Go to the Preview and select Live View. Change the segments in the Picker to update the map type.

In SwiftUI different annotation type can be displayed in a map view. Map pins, map markers and custom map annotations. In this tutorial some places of interest of the city of London will be displayed with the different annotation types. This tutorial is built for iOS14 and Xcode 12, which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUIMapAnnotationtutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbos and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Import the MapKit framework at the top of the file

import MapKit

Insert the Place Struct which will hold the coordinate values of the different locations.

import MapKit struct Place: Identifiable { let id = UUID() let name: String let latitude: Double let longitude: Double var coordinate: CLLocationCoordinate2D { CLLocationCoordinate2D(latitude: latitude, longitude: longitude) } }

Change the ContentView struct to

struct ContentView: View { // 1. let places = [ Place(name: "British Museum", latitude: 51.519581, longitude: -0.127002), Place(name: "Tower of London", latitude: 51.508052, longitude: -0.076035), Place(name: "Big Ben", latitude: 51.500710, longitude: -0.124617) ] // 2. @State var region = MKCoordinateRegion( center: CLLocationCoordinate2D(latitude: 51.514134, longitude: -0.104236), span: MKCoordinateSpan(latitudeDelta: 0.075, longitudeDelta: 0.075)) var body: some View { // 3. Map(coordinateRegion: $region, annotationItems: places) { place in // Insert an annotation type here } .ignoresSafeArea(.all) } }

a places array is declared containing 3 places of interest in londen with the corresponding coordinates.

a region State property is declared containing a region of the city of london.

A Map view is displayed of the predefined region locations and size. The map contains the places with the annotation.

Unfortunately in the current version of SwiftUI only one type of annotation can be displayed inside a map view. First, insert the following line inside the Map view closure to display the MapPin annotation type.

MapPin(coordinate: place.coordinate)

The preview displays the map pin annotations.

Change the line to display the Mapmarker annotation type.

MapMarker(coordinate: place.coordinate)

The Preview now display the map marker annotations.

Change the line with the following code block to display the MapAnnotation type.

MapAnnotation(coordinate: place.coordinate, anchorPoint: CGPoint(x: 0.5, y: 0.5)) { Circle() .strokeBorder(Color.red, lineWidth: 10) .frame(width: 44, height: 44) }

The Preview displays each location with the annotation with a circle with a red outline color.

In SwiftUI a Map view can be displayed showing a map inside the main view. Using Map view, the portion of the map that is displayed on the screen is referred to as the region. The region is defined by a center location and a span of the surrounding area to be displayed. In this tutorial we will display a portion of the city London. This tutorial is built for iOS 14 with Xcode 12 which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select the Single View App template, and then click Next. Enter SwiftUIMapKitTutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbox and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Import the MapKit framework.

import MapKit

change the ContentView to

struct ContentView: View { @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.50007773, longitude: -0.1246402) , span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)) var body: some View { Map(coordinateRegion: $region) .edgesIgnoringSafeArea(.all) } }

The latitude and longitude of the city of London is defined using the CLLocationCoordinate2d struct. The span value is made relative small, so a big portion of London is visible. The MKCoordinateRegion method defines the visible region. With the Map view the assigned region is displayed.

Go to the preview Window and select the Live Preview button. The Preview will look like this.

At the time of writing MapKit can only be used with SwiftUI by using the UIViewRepresentable protocol. Using Map Kit, the portion of the map that is displayed on the screen is referred to as the region. The region is defined by a center location and a span of the surrounding area to be displayed. Inside the Map View an annotation could be created, indication a Point of Interest. In this tutorial we will display a portion of the city London and we will add an annotation of the Big Ben. SwiftUI requires Xcode 11 and MacOS Catalina, which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select the Single View App template, and then click Next. Enter SwiftUIMapKitTutorial as the Product Name, select the Use SwiftUI checkbox, and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Import the MapKit framework.

import MapKit

Add the MapView struct.

struct MapView: UIViewRepresentable { // 1. func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView { MKMapView(frame: .zero) } // 2. func updateUIView(_ uiView: MKMapView, context: UIViewRepresentableContext<MapView>) { // 3. let location = CLLocationCoordinate2D(latitude: 51.50007773, longitude: -0.1246402) // 4. let span = MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05) let region = MKCoordinateRegion(center: location, span: span) uiView.setRegion(region, animated: true) // 5. let annotation = MKPointAnnotation() annotation.coordinate = location annotation.title = "Big Ben" annotation.subtitle = "London" uiView.addAnnotation(annotation) } }

The makeUIView(context:) method is creates an empty Map View.

The updateUI(context:) method updated the Map View

The latitude and longitude of the city of London is assigned to location constant using the CLLocationCoordinate2d struct

The span value is made relative small, so a big portion of London is visible. The MKCoordinateRegion method defines the visible region, it is set with the setRegion method.

An annotation is created at the current coordinates with the MKPointAnnotation class. The annotation is added to the Map View with the addAnnotation method.

Change the code inside the ContentView struct to

struct ContentView: View { var body: some View { NavigationView { MapView() .navigationBarTitle(Text("Map View")) } } }

The Map View is displayed inside a Navigation View. Go to the preview Window and select the Live Preview button. The Preview will look like this.

Apple Maps provides the ability to "flyover" major cities and landmarks. This feature enables the user to interactively pan, zoom and rotate around locations in the Maps app. In this tutorial flyover mode is enabled above the Capitol in Washington. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSFlyOverMapKitTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Storyboard and drag a Map View to the main view. Next, drag two buttons below the Map View and give them a title of resp. "Left" and "Right". The Storyboard should look like this.

Select the Resolve Auto Layout Issues button and select Reset to Suggested Constraints.

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the Map view to the ViewController class and create the following Outlet.

Ctrl and drag from the left Button to the ViewController class and create the following Action.

Ctrl and drag from the right Button to the ViewController class and create the following Action

Go to the ViewController class and import the MapKit framework

import MapKit

Add the following properties.

let distance: CLLocationDistance = 800 let pitch: CGFloat = 400 let heading = 45.0 var camera: MKMapCamera?

The view from which the flyover is represented to the user is controlled by assigning an MKMapCamera object to the Map View.  The MKMapCamera object is configured with the distance. pitch and heading of the camera.

Implement the viewDidLoad method

override func viewDidLoad() { super.viewDidLoad() mapView.mapType = .satelliteFlyover // coordinates of Capitol let coordinate = CLLocationCoordinate2DMake(38.889819, -77.009066) camera = MKMapCamera(lookingAtCenter: coordinate, fromDistance: distance, pitch: pitch, heading: heading) mapView.camera = camera! }

The mapType property is set to sattelliteFlyovr type. The camera object is created with the coordinates of the Capital building.

Implement the rotateLeft action method

@IBAction func rotateLeft(_ sender: Any) { UIView.animate(withDuration: 1.0, animations: { self.camera!.heading -= 10 self.mapView.camera = self.camera! }) }

This will rotate the heading to 10 degrees to the left.

Implement the rotateRight action method

@IBAction func rotateRight(_ sender: Any) { UIView.animate(withDuration: 1.0, animations: { self.camera!.heading += 10 self.mapView.camera = self.camera! }) }

This will rotate the heading to 10 degrees to the left.

Build and Run the projectand use the button rotate the camera view.

Using Map Kit, the portion of the map that is displayed on the screen is referred to as the region. The region is defined by a center location and  a span of the surrounding area to be displayed. Inside the Map View an annotation could be created, indication a Point of Interest. In this tutorial we will display  a portion of the city London and we will add an annotation of the Big Ben. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSMapKitTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the storyboard. Drag a MapKit View  to the main View. Give the MapKit View the same size as the main View. Select the MapKit View and go to the Pin button from the Auto Layout button on the bottom-right of the Storyboard and fill in the following values. Select Add 4 Constraints.

The Storyboard should look like this.

Select the Assistant Editor and make sure the ViewController.swift file is visible. Ctrl-drag or right-click-drag from the Map view to inside the ViewController class and create the following Outlet.

Go to the ViewController.swift file and import the MapKit framework at the top of the file

import MapKit

Change the viewDidLoad method in 

override func viewDidLoad() { super.viewDidLoad() // 1 let location = CLLocationCoordinate2D(latitude: 51.50007773, longitude: -0.1246402) // 2 let span = MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05) let region = MKCoordinateRegion(center: location, span: span) mapView.setRegion(region, animated: true) //3 let annotation = MKPointAnnotation() annotation.coordinate = location annotation.title = "Big Ben" annotation.subtitle = "London" mapView.addAnnotation(annotation) }

The latitude and longitude of the city of London is assigned to location constant using the CLLocationCoordinate2d struct

The span value is made relative small, so a big portion of London is visible. The MKCoordinateRegion method defines the visible region, it is set with the setRegion method.

An annotation is created at the current coordinates with the MKPointAnnotation class. The annotation is added to the Map View with the addAnnotation method.

Build and Run the project, The city of London, including the annotation will be diplayed.

In MapKit the MKLocalSearchRequest object type can be used toprovide a search query. The response can then be manipulated. In this tutorial a search for Hotels and Musea in the city of Amsterdam wil be made. The results of the search will be displayed on the map using annotations. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOS12SearchMapKitTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Project Settings and select the Capabilities tab. Turn the Maps Capabilities on to link the MapKit framework to the project.

Go to the Storyboard and drag a MapKit View to the main view. Select the MapKit View and go to the Size Inspector, enter the following values. 

Also drag a Segmented Control to the main View and place it below the MapKit View. Double-click to change the predefined titles into "Hotel" and "Museum".  Go to the Editor menu and choose Resolve Auto Layout Issues -> Add Missing Constraints.

The Storyboard should like this.

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the Map View to the ViewController class and create the following Outlet.

Ctrl and drag from the Segmented Control to the ViewController class and create the following Outlet.

Finally, Ctrl and drag from the Segmented Control to the ViewController class and create the following Action.

Go to the ViewController.swift file and at the top of the file import the MapKit framework.

import MapKit

Change the class declaration to make the ViewController adopt the MPMapViewDelegate protocol.

class ViewController: UIViewController, MKMapViewDelegate {

Add the following property constants the ViewController class.

let initialLocation = CLLocation(latitude: 52.3740300, longitude: 4.8896900) let searchRadius: CLLocationDistance = 2000

These are the coordinates of the center of Amsterdam with a search radius of 2000 metres. Change the viewDidLoad method to

override func viewDidLoad() { super.viewDidLoad() mapView.delegate = self let coordinateRegion = MKCoordinateRegion.init(center: initialLocation.coordinate, latitudinalMeters: searchRadius * 2.0, longitudinalMeters: searchRadius * 2.0) mapView.setRegion(coordinateRegion, animated: true) }

The coordinateRegion variable is created from the initial loaction, with a latitiude and longitude twice the value of the searchRadius. Build and Run the project to see the visible Region.

To search inside a Map View a new searchInMap() method is created.

func searchInMap() { // 1 let request = MKLocalSearch.Request() request.naturalLanguageQuery = segmentedControl.titleForSegment(at: segmentedControl.selectedSegmentIndex) // 2 let span = MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1) request.region = MKCoordinateRegion(center: initialLocation.coordinate, span: span) // 3 let search = MKLocalSearch(request: request) search.start(completionHandler: {(response, error) in for item in response!.mapItems { self.addPinToMapView(title: item.name, latitude: item.placemark.location!.coordinate.latitude, longitude: item.placemark.location!.coordinate.longitude) } }) }

 a MKLocalSearchRequest object is created, which can be used to specify search parameters. The search query equals to the title of the currently selected index of the segmented control.

The region on which the search will be applied is defined.

a MKLocalSearch object initiates a search operation and will deliver the results back into an array of MKMapItems. This will contain the name, latitude and longitude of the current POI. 

Xcode will give an error of a non-existent appPintoMapView method, this will be implemented shortly. Add the following line to the end of the viewDidLoad method to call the searchinMap method

searchInMap()

Add the addPinToMapView method

func addPinToMapView(title: String?, latitude: CLLocationDegrees, longitude: CLLocationDegrees) { if let title = title { let location = CLLocationCoordinate2D(latitude: latitude, longitude: longitude) let annotation = MKPointAnnotation() annotation.coordinate = location annotation.title = title mapView.addAnnotation(annotation) } }

This will add the pin including the annotation to the map. In the current state the pins will be displayed even if we change the value in the segmented control. Change the searchOnValueChanged method.

@IBAction func searchOnValueChanged(sender: AnyObject) { mapView.removeAnnotations(mapView.annotations) searchInMap() }

The currently displayed annotations will be removed, and the new annotations will be displayed. Build and Run the project view the pins including the annotations.

Apple Maps provides the ability to "flyover" major cities and landmarks. This feature enables the user to interactively pan, zoom and rotate around locations in the Maps app. In this tutorial flyover mode is enabled above the Capitol in Washington. This tutorial is made with Xcode 9 and built for iOS 11.

Open Xcode and create a new Single View App.

For product name, use IOS11FlyOVerMapKitTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Storyboard and drag a Map View to the main view. Next, drag two buttons below the Map View and give them a title of resp. "Left" and "Right". The Storyboard should look like this.

Select the Map View and select the Auto Layout "Add New Constraints" button. Pin the Map View to the top, left and right and select "Add 3 Constraints".

Repeat this step for the two buttons and pin them to the left and bottom and to the right and bottom.

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the Map view to the ViewController class and create the following Outlet.

Ctrl and drag from the left Button to the ViewController class and create the following Action.

Ctrl and drag from the right Button to the ViewController class and create the following Action

Go to the ViewController class and add the following properties.

let distance: CLLocationDistance = 800 let pitch: CGFloat = 400 let heading = 45.0 var camera: MKMapCamera?

The view from which the flyover is represented to the user is controlled by assigning an MKMapCamera object to the Map View.  The MKMapCamera object is configured with the distance. pitch and heading of the camera.

Implement the viewDidLoad method

override func viewDidLoad() { super.viewDidLoad() mapView.mapType = .satelliteFlyover // coordinates of Capitol let coordinate = CLLocationCoordinate2DMake(38.889819, -77.009066) camera = MKMapCamera(lookingAtCenter: coordinate, fromDistance: distance, pitch: pitch, heading: heading) mapView.camera = camera! }

The mapType property is set to sattelliteFlyovr type. The camera object is created with the coordinates of the Capital building.

Implement the rotateLeft method

@IBAction func rotateLeft(_ sender: Any) { UIView.animate(withDuration: 1.0, animations: { self.camera!.heading -= 10 self.mapView.camera = self.camera! }) }

This will rotate the heading to 10 degrees to the left.

Implement the rotateRight method

@IBAction func rotateRight(_ sender: Any) { UIView.animate(withDuration: 1.0, animations: { self.camera!.heading += 10 self.mapView.camera = self.camera! }) }

This will rotate the heading to 10 degrees to the left.

Build and Run the projectand use the button rotate the camera view.