iOS: Map View
The component that allows an embeddable map interface to be displayed in iOS applications is called MapView. That is comparable to the one offered by the Maps apps. It is an example of the MKMapView class, which has the UIView class as a parent class.
class MKMapView : UIView
As seen in the following image, we must look for the MKMapView in the object library and drag the result to the storyboard in order to display the map view in the iOS application.
On the other hand, the simulator will display the output seen in the following image if we add the map view to the interface, provide the auto-layout rules for the map view, and execute the application.
Since MKMapView is already included in iOS MapKit, we must import MapKit in order to use MapView in iOS applications. With the help of the robust MapKit API for iOS devices, we can display locations, routes, shapes, and a wealth of other geographic information. We may zoom in to a specific location, center the map on given coordinates, define the size of the area we want to display, and annotate the map with a custom location by utilizing the properties and methods available in the MapKit. To target a specific area on the map, we can initialize the map view with the region attribute.
A region’s center point, known as its span, is determined by its horizontal and vertical distances. The map’s visibility is defined by a span. For instance, at low zoom levels, choosing a long span yields a huge geographic area.
MapView Example 1: Setting the initial region in the map
We’ll set the map view’s initial region in this example. We must instantiate the CLLocation class in order to build a location object for this purpose. The following syntax can be used to build the location object.
let location = CLLocation(latitude: CLLocationDegrees, longitude: CLLocationDegrees#)
The latitude and longitude of the specific location are the two inputs that this method accepts. Latitude and longitude in Map Kit are instances of the CL Location Degrees 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
We are able to display the artwork at the map’s center thanks to MapKit. We need to make a map annotation in order to display this on the map view. The brief details that are displayed for a specific location on a map are known as annotations. Tiny pins are used on Apple’s map to symbolize annotations.
We will generate the annotation for the map’s center in this example. We need to make a class that complies with the MKAnnotation protocol before we can construct the annotation. The MKAnnotation protocol is followed by the ArtWork.swift class and added to the Map in the ViewController.swift code.
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 following table lists the attributes that are declared in the MKMapView class.
| 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. |
