MapView

The MapView is the object that can display an embeddable map interface in the iOS applications. It is similar to the one that is provided by the Maps applications. It is an instance of the MKMapView class, which inherits the UIView class.

To display the map view in the iOS application, we need to search for the MKMapView in the object library and drag the result to the storyboard, as shown in the following image.

However, if we add the map view to the interface, define the auto-layout rules for the map view and run the application, the simulator will display the output shown in the following image.

To use the MapView in the iOS applications, we must import the MapKit since MKMapView exists in iOS MapKit. MapKit is a powerful API for the iOS devices using which we can display the locations, show routes, shapes, and a lot more geographical content. By using the properties and methods present in the MapKit, we can zoom in to a particular location, center the map on the specified coordinates, specify the size of the area we want to display and annotate the map with the custom location. We can initialize the map view with the region property to specify a particular region of the map.

A region is the center point defined by horizontal and vertical distance referred to as span. A span defines the visibility of the map. For example, specifying the large span results into the wide geographical area at the low zoom level.

MapView Example 1: Setting the initial region in the map

In this example, we will set the initial region of the map view. For this purpose, we need to create a location object by instantiating the CLLocation class. The location object can be created using the following syntax.

let location = CLLocation(latitude: CLLocationDegrees, 	longitude: CLLocationDegrees#)

This method accepts two arguments that are the latitude and longitude of the particular location. In MapKit, we latitude and longitude are the instance of CLLocationDegrees class.

ViewController.swift

import UIKit
import MapKit


class ViewController: UIViewController {


    @IBOutlet weak var mapView: MKMapView!
    
    let location = CLLocation(latitude: 28.613939, longitude: 77.209023)
    
    let region_radious = 10000
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        centreMap(location: location)
        
    }
    
    func centreMap(location: CLLocation){
        let region = MKCoordinateRegion(center: location.coordinate,latitudinalMeters: CLLocationDistance(region_radious), longitudinalMeters: CLLocationDistance(region_radious))
        mapView.setRegion(region, animated: true)
        
    }
}

Output

Showing ArtWork on the Map

MapKit facilitates us to show the artwork for the center location of the map. To show this on the map view, we must create a map annotation. Map annotations are defined as the small pieces of information that are shown for a particular location. The annotations on Apple?s map are represented by small pins.

In this example, we will create the annotation for the center location of the map. To create the annotation, we must create a class that conforms to the MKAnnotation protocol. The ArtWork.swift class conforms to the MKAnnotation protocol, which is then added to Map in ViewController.swift class.

ArtWork.swift

import Foundation
import MapKit


class ArtWork : NSObject, MKAnnotation {
    var coordinate: CLLocationCoordinate2D
    
    
    var title : String?
    var subtitle: String?
    
    public init (coordinate: CLLocationCoordinate2D, title: String, subtitle: String){
        self.coordinate = coordinate
        self.title = title
        self.subtitle = subtitle
    }
}

ViewController.swift

import Foundation
import MapKit


class ArtWork : NSObject, MKAnnotation {
    var coordinate: CLLocationCoordinate2D
    
    
    var title : String?
    var subtitle: String?
    
    public init (coordinate: CLLocationCoordinate2D, title: String, subtitle: String){
        self.coordinate = coordinate
        self.title = title
        self.subtitle = subtitle
    }
}

Output

MKMapView Properties

The properties defined in the MKMapView class are given in the following table.

SN	Property	Description
1	var delegate: MKMapViewDelegate?	It is the receiver's delegate of type MKMapViewDelegate Protocol.
2	var mapType: MKMapType	It is the type of data displayed by the map view.
3	var isZoomEnabled: Bool	It is a boolean type value that indicates whether the zoom is enabled for the map view or not.
4	var isScrollEnabled: Bool	It is a boolean type value that indicates whether the scroll is enabled for the map view or not.
5	var isPitchEnabled: Bool	It is a boolean type value that indicates whether the pitch information of the map camera is used or not.
6	var isRotateEnabled: Bool	It is a boolean type value that indicates whether the map camera's heading information is used or not.
7	var region: MKCoordinateRegion	It is the initial region displayed by the map.
8	var centerCoordinate: CLLocationCoordinate2D	The coordinate to be displayed by the map center.
9	var visibleMapRect: MKMapRect	It is the area currently displayed by the map view.
10	var cameraBoundary: MKMapView.CameraBoundary?	It represents the boundary of the area within which the center of the mapview must remain.
11	var cameraZoomRange: MKMapView.CameraZoomRange!	It represents the zoom range of the map camera.
12	var camera: MKMapCamera	It represents the camera used for determining the appearance of the map.
13	var pointOfInterestFilter: MKPointOfInterestFilter?	It represents the filter used to determine the point of the interest shown on the map.
14	var showsBuildings: Bool	It is the boolean value representing whether to display the building's information.
15	var showsCompass: Bool	It is the boolean value indicating whether the map displays the compass control.
16	var showsZoomControls: Bool	It is a boolean value indicating whether the map displays the zoom control.
17	var showsScale: Bool	It is a boolean value indicating whether the map displays the scale information.
18	var showsTraffic: Bool	It is a boolean value that indicates whether to display the traffic information.
19	var showsUserLocation: Bool	It is a boolean value that indicates whether the map should try to display the user?s location.
20	var isUserLocationVisible: Bool	It is a boolean value that indicates whether the current location of the user is displayed on the map view.
21	var userLocation: MKUserLocation	It represents the user's current location.
22	var userTrackingMode: MKUserTrackingMode	It represents the mode used to track the user's current location.
23	var annotations: [MKAnnotation]	It is the array of the annotations for the different map center locations.
24	var annotationVisibleRect: CGRect	It represents the visible rectangle where annotation views are currently being displayed.
25	var selectedAnnotations: [MKAnnotation]	It represents the annotations that are currently being selected.
28	var overlays: [MKOverlay]	It represents the overlay objects currently associated with the map view.