SDK iOS

Installation Guide for VietMap Map iOS SDK

Table of Contents

1. Create Navigation project with Xcode
2. Import Library
3. Events
4. Build Project

Install iOS SDK Map

1. Create Navigation project with Xcode

Create a project with Swift and Storyboard. Open Xcode, select File > New > Project.

Ensure the project runs successfully. If successful, you will see the layout as shown below.

2. Import Library

Environment Settings

Install Homebrew Check brew

$ brew --version

If Homebrew is not installed, you will see:

$ zsh: command not found: brew

If Homebrew is not installed, use the following command:

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install pods

$ brew install cocoapods

Import libraries with Podfile 1. Go to Terminal and switch to your local project:

cd NavigationSample

2. Once you are inside the project folder, type the command below to create/initialize your POD files:

pod init

3. Open the Podfile and write with code below:

pod 'VietMap', '~> 1.2.2'

4. Then install library

pod install --repo-update

5. Double click on the Xcode workspace to open the project

3. Events.

• regionIsChangingWith: Method called when the displayed region of the map view is changing.
• didChange: Method called when the user tracking mode on the map view changes.
• mapViewDidFinishLoadingMap: Method called when the map on the map view has finished loading and displaying.
• mapViewDidStopLocatingUser: Method called when the MGLMapView stops locating the user's position.
• mapViewWillStartLoadingMap: Method called when the MGLMapView begins loading map data.
• mapViewWillStartLocatingUser: Method called when the MGLMapView starts locating the user's position.
• mapViewWillStartRenderingMap: Method called when the MGLMapView starts rendering the map.
• mapViewWillStartRenderingFrame: Method called when the MGLMapView starts rendering a frame of the map.
• didFinishLoading: Method called when the MGLMapView finishes loading data and interface for the map.
• didSelect: Method called when an annotation on the map is selected.
• didDeselect: Method called when an annotation on the map is no longer selected.
• didSingleTapAt: Method called when the user performs a single tap on the map.
• regionDidChangeAnimated: Method called when the displayed region of the map changes, including when the user moves, zooms, or rotates the map.
• regionWillChangeAnimated: Method called before the displayed region of the map is about to change.
• mapViewDidFailLoadingMap: Method called when loading the map fails with a specific error.
• didUpdate: MGLUserLocation: Method called when the user's location information is updated on the map.
• mapViewDidFinishRenderingMap: Method called when the map rendering process is completed.
• mapViewDidBecomeIdle: Method called when the map has finished its activities and becomes idle.
• didFailToLocateUserWithError: Method called when locating the user on the map encounters an error.
• tapOnCalloutFor: Method called when the user taps on the callout of an annotation on the map.
• mapViewDidFinishRenderingFrame: Method called after a frame of the map has been finished rendering on the screen.
• shapeAnnotationIsEnabled: This method allows you to control the activation of shape annotations on the map. Returns true or false to specify whether the shape annotation is enabled.
• didAdd: MGLAnnotationView: Method called after new MGLAnnotationViews are added.
• didSelect: MGLAnnotationView: Method called when an MGLAnnotationView on the map is selected.
• didDeselect: MGLAnnotationView: Method called when an MGLAnnotationView on the map is no longer selected.
• alphaForShapeAnnotation: This method allows you to specify the alpha value (opacity) for an MGLShape on the map. The alpha value is a number from 0.0 to 1.0, with 0.0 being completely transparent and 1.0 being opaque.
• viewFor: MGLAnnotation: This method is used to provide a custom MGLAnnotationView for a specific MGLAnnotation on the map.
• imageFor: MGLAnnotation: This method is used to provide a custom MGLAnnotationImage for a specific MGLAnnotation on the map.
• annotationCanShowCallout: This method is used to determine whether an MGLAnnotation can show a callout. To determine whether a specific MGLAnnotation can show a callout, return true or false.
• calloutViewFor: This method is used to create and customize the callout view interface for a specific MGLAnnotation.
• strokeColorForShapeAnnotation: This method is used to provide the stroke color for a specific MGLShape (such as MGLPolyline or MGLPolygon) on the map.
• fillColorForPolygonAnnotation: This method is used to provide the fill color for a specific MGLPolygon on the map.
• leftCalloutAccessoryViewFor: This method is used to provide a UIView as the left supplementary element of the callout for a specific MGLAnnotation.
• lineWidthForPolylineAnnotation: This method is used to provide the line width of the polyline for a specific MGLPolyline.
• rightCalloutAccessoryViewFor: This method is used to provide a UIView as the right supplementary interface of the callout for a specific MGLAnnotation.
• calloutAccessoryControlTapped: This method is called when the user taps on the supplementary interface elements (accessory control) in the callout for a specific MGLAnnotation.
• shouldChangeFrom: This method is called when the camera state of the map is about to change, allowing you to check and decide whether the change should be made.
• mapViewUserLocationAnchorPoint: This method allows you to determine the anchor point of the user location icon on the map.
• didFailToLoadImage: This method is called when an image with the provided name cannot be loaded.
• shouldRemoveStyleImage: This method is called when an image in the style is being used and there is a request to remove it.
• didChangeLocationManagerAuthorization: This method is called when the user's location access permission changes in the app.
• styleForDefaultUserLocationAnnotationView: This method is used to customize the interface of the default user location annotation on the map.

4. Build Project.

Requires device location access permission.

<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Get user location</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>Get user location</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Get user location</string>
<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
    <string>location</string>
</array>

Sample Code

import UIKit
import VietMap

class ViewController: UIViewController {
    var mapView: MGLMapView!
    var coordinates: [CLLocationCoordinate2D] = []
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        if #available(iOS 10.0, *) {
            UNUserNotificationCenter.current().requestAuthorization(options: [.badge, .alert, .sound]) { _,_ in
                DispatchQueue.main.async {
                    CLLocationManager().requestWhenInUseAuthorization()
                }
            }
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        startMapView()
        drawPolygon()
    }


    func startMapView() {
        mapView = MGLMapView(frame: view.bounds, styleURL: URL(string: "https://maps.vietmap.vn/api/maps/light/styles.json?apikey=YOUR_API_KEY_HERE"))
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.delegate = self
        mapView.userTrackingMode = .follow

        let singleTap = UILongPressGestureRecognizer(target: self, action: #selector(didLongPress(tap:)))
        mapView.gestureRecognizers?.filter({ $0 is UILongPressGestureRecognizer }).forEach(singleTap.require(toFail:))
        mapView.addGestureRecognizer(singleTap)
        view.addSubview(mapView)
    }

    func drawPolyline() {
        let polyline = MGLPolyline(coordinates: coordinates, count: UInt(coordinates.count))
        mapView.addAnnotation(polyline)
    }

    func drawPolygon() {
        let coordinates = [
            CLLocationCoordinate2D(latitude: 10.745863, longitude: 106.655122),
            CLLocationCoordinate2D(latitude: 10.753557, longitude: 106.649735),
            CLLocationCoordinate2D(latitude: 10.765662, longitude: 106.681285),
            CLLocationCoordinate2D(latitude: 10.750961, longitude: 106.683948)
        ]
        let polygon = MGLPolygon(coordinates: coordinates, count: UInt(coordinates.count))
        mapView.addAnnotation(polygon)
    }

    // MARK: Gesture Recognizer Handlers
    @objc func didLongPress(tap: UILongPressGestureRecognizer) {
        guard let mapView = mapView else { return }
        if (coordinates.isEmpty) {
            coordinates.append((mapView.userLocation?.location?.coordinate)!)
        }
        let point = mapView.convert(tap.location(in: mapView), toCoordinateFrom: mapView)
        let annotation = MGLPointAnnotation()
        annotation.coordinate = point
        annotation.title = "Point Here"
        coordinates.append(point)
        mapView.addAnnotation(annotation)
        drawPolyline()
    }
}

extension ViewController: MGLMapViewDelegate {
    func mapView(_ mapView: MGLMapView, imageFor annotation: MGLAnnotation) -> MGLAnnotationImage? {
        let image = UIImage(systemName: "car")!
        image.withTintColor(UIColor.red)
        let annotationImage = MGLAnnotationImage(image: image, reuseIdentifier: "customAnnotation")

        return annotationImage
    }

    func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
        return true
    }

    func mapView(_ mapView: MGLMapView, leftCalloutAccessoryViewFor annotation: MGLAnnotation) -> UIView? {
        let imageView = UIImageView(image: UIImage(named: "leftAccessoryImage"))
        return imageView
    }

    func mapView(_ mapView: MGLMapView, rightCalloutAccessoryViewFor annotation: MGLAnnotation) -> UIView? {
        let button = UIButton(type: .detailDisclosure)
        return button
    }

    func mapView(_ mapView: MGLMapView, fillColorForPolygonAnnotation annotation: MGLPolygon) -> UIColor {
        return UIColor.red.withAlphaComponent(0.5)
    }
}