Migrate from Google

VERSION 0.54.0
PUBLIC PREVIEW

Overview

This tutorial covers some fundamental use cases to help you switch your iOS app from Google’s SDK to TomTom’s SDK as quickly and efficiently as possible. It starts with the basic environment setup, then goes directly into the code.

Project setup

  1. Configure the project as described in the project setup guide.

  2. import the necessary frameworks using the following instructions, based on your preferred package manager. This tutorial uses the TomTomSDKMapDisplay and TomTomSDKRoutePlannerOnline modules.

    Swift Package Manager
    1. Open your App’s target and navigate to General > Frameworks, Libraries, and Embedded Content.
    2. Add the following TomTomSDK libraries from the provided code snippet. Once the project is set up, import the mentioned frameworks into your code.
    1import TomTomSDKCommon
    2import TomTomSDKMapDisplay
    3import TomTomSDKRoute
    4import TomTomSDKRoutePlanner
    5import TomTomSDKRoutePlannerOnline
    6import TomTomSDKRoutingCommon

     

    CocoaPods
    1. Add the following modules to your project’s Podfile:
      1TOMTOM_SDK_VERSION = '0.54.0'
      2
      3target 'YourAppTarget' do
      4 use_frameworks!
      5 pod 'TomTomSDKMapDisplay', TOMTOM_SDK_VERSION
      6 pod 'TomTomSDKRoutePlannerOnline', TOMTOM_SDK_VERSION
      7end
    2. Install the dependencies by executing the following commands in the project directory:
      pod repo-art update tomtom-sdk-cocoapods
      pod install --repo-update
    3. Import the following frameworks:
      1import TomTomSDKCommon
      2import TomTomSDKMapDisplay
      3import TomTomSDKRoute
      4import TomTomSDKRoutePlanner
      5import TomTomSDKRoutePlannerOnline
      6import TomTomSDKRoutingCommon
  3. Create a class with the TomTom API keys. These will be used later in the application.

    1private enum Keys {
    2 static let tomtomApiKey = "YOUR_TOMTOM_API_KEY"
    3}

Displaying a map

Google

To display the map using the Google Maps SDK for iOS, you need to perform these steps:

  1. Set the Google API before performing any request.
    GMSServices.provideAPIKey("GOOGLE_API_KEY")
  2. Initialize the GMSMapView with the chosen specification.
    mapView = GMSMapView(frame: view.frame)
  3. Add the initialized GMSMapView to the parent view.
    view.addSubview(mapView)

TomTom SDK

To display the map using the TomTom SDK for iOS:

  1. Set the valid TomTom API key.
    MapsDisplayService.apiKey = Keys.tomtomApiKey
  2. Initialize the MapView. It is used to display a map in the view hierarchy.
    let mapView = MapView(frame: view.frame)
  3. Add the initialized MapView to the parent view.
    view.addSubview(mapView)
  4. Most actions on the map are performed using the TomTomMap object. It can be accessed only when the map is fully initialized. You can learn more about it in the Adding a map guide.
    1mapView.onMapReadyCallback = { map in
    2 self.map = map
    3}
center

Displaying a marker

The next step is to allow your user to interact with the map. For instance, displaying a marker at the location where the user does a long click.

Google

  1. In the Google SDK you need to set GMSMapViewDelegate to the GMSMapView.delegate property to observe gesture events on the map.
    mapView.delegate = self
  2. In our case, the long press action is observed and the following method is triggered.
    1func mapView(_: GMSMapView, didLongPressAt coordinate: CLLocationCoordinate2D) {
    2 displayMarker(at: coordinate)
    3}
  3. To display a marker at the chosen coordinates create the GMSMarker object. It defines the marker configuration. To add the marker to the map, assign the GMSMapView to the marker’s property.
    1private func displayMarker(at coordinate: CLLocationCoordinate2D) {
    2 let marker = GMSMarker(position: coordinate)
    3 marker.map = mapView
    4}

TomTom SDK

  1. To observe gesture events performed on the map, set the MapDelegate to the TomTomMap object.
    map.delegate = self
  2. In this example the long click action is observed. To do it you need to override the following method of the MapDelegate. You can learn more by reading Events and gestures.
    1func map(_ map: TomTomMap, onInteraction interaction: MapInteraction) {
    2 switch interaction {
    3 case let .longPressed(coordinate):
    4 displayMarker(at: coordinate)
    5 default:
    6 break
    7 }
    8}
  3. To display a marker at the chosen coordinates you must create MarkerOptions. It is used to configure the appearance of the marker. Then add the MarkerOptions object to the TomTomMap. If this operation fails, the exception is thrown. Learn more about working with markers in the Markers guide.
    1private func displayMarker(at coordinate: CLLocationCoordinate2D) {
    2 let markerOptions = MarkerOptions(coordinate: coordinate, pinImage: UIImage(named: "marker_pin_image")!)
    3 _ = try? map.addMarker(options: markerOptions)
    4}
center

Displaying traffic

Google

Google has only one method for traffic visualization. That method can only display traffic flow tiles. To show the traffic layer:

mapView.isTrafficEnabled = true

To hide the traffic layer:

mapView.isTrafficEnabled = false

TomTom SDK

The TomTom SDK provides two kinds of traffic information, traffic flow and traffic incidents.

  • Traffic flow shows the difference between current and free-flow speed. Green indicates that the speeds are the same, meaning there are no traffic jams. Red indicates that traffic is slower than free-flow, meaning that there are traffic jams.
    map.showTraffic()
    map.hideTraffic()
  • Traffic incidents shows specific traffic problems such as closed roads, rain, ice on the road, or accidents.
    map.showTrafficIncidents()
    map.hideTrafficIncidents()
center

Displaying a route/directions

Google

Displaying a route in the Google Maps SDK for iOS is not straightforward. It boils down to interacting with the Directions API, gathering a list of route positions, then drawing a polyline from that list directly onto the map. The instructions are not discussed in this tutorial. If you are interested in getting more detailed migration steps, Contact us.

TomTom SDK

The TomTom Routing API allows the app to easily calculate a route between two points, add waypoints, and specify other route properties. The requested Route can then be simply drawn on the map. Detailed information about routing in the TomTom SDK can be found in the Routing module documentation. A good place to start is the Quickstart guide.

  1. In the current TomTom SDKs the entry point to the routing service is the OnlineRoutePlanner class. Prepare a property to hold its instance.
    private var routePlanner: OnlineRoutePlanner!
  2. Before accessing the Online RoutePlanner you must initialize the OnlineRoutePlanner object with a TomTom API key.
    routePlanner = OnlineRoutePlanner(apiKey: Keys.tomtomApiKey)
  3. Build and perform the route request. The request requires departure and destination coordinates. You can also provide additional parameters. Add them all using the RoutePlanningOptions struct and then use the object to perform the routing request. As with the SDK, routing results are returned in the provided closure. You can read more about routing in the Planning a route guide.
    1let itinerary = Itinerary(origin: departure, destination: destination)
    2let routingOptions: RoutePlanningOptions
    3do {
    4 routingOptions = try RoutePlanningOptions(
    5 itinerary: itinerary,
    6 costModel: CostModel(routeType: .fast),
    7 vehicle: Car()
    8 )
    9} catch {
    10 print("Invalid planning options: \(error.localizedDescription)")
    11 return
    12}
    13
    14routePlanner.planRoute(options: routingOptions, onRouteReady: nil, completion: { result in
    15 switch result {
    16 case let .success(routingResponse):
    17 self.handleRoutingResponse(routingResponse)
    18 case let .failure(error):
    19 print("API error: \(error.localizedDescription)")
    20 }
    21})
  4. Use the result of the call to draw a route on the map. To do this, get the route that you want to draw from the RoutePlanningResponse. Use the Route to build a RouteOptions object. This is also the place to specify visual properties for the route. Then add the RouteOptions to the TomTomMap. NOTE: If adding a route to the map failed an error is thrown.

When you display all of the routes, you can also specify the padding from the edges of the map. You can read more about adding a route to the map in the Routes guide.

+

1guard let route = routingResponse.routes?.first else { return }
2var routeOptions = RouteOptions(coordinates: route.geometry)
3routeOptions.color = .red
4_ = try? map.addRoute(routeOptions)
5map.zoomToRoutes(padding: 50)

Showing user location

To access user location you must configure the following purpose strings in the Xcode build setting or in Info.plist: NSLocationWhenInUseUsageDescription, NSLocationAlwaysAndWhenInUseUsageDescription, or NSLocationAlwaysUsageDescription. The correct key must be included or authorization requests immediately fail and the map is unable to get the user’s location.

To get appropriate permissions, you must send authorization request by calling requestWhenInUseAuthorization() or requestAlwaysAuthorization() on the CLLocationManager instance respectively. Complete instructions to request location permissions on iOS can be found at Requesting authorization for location services.

Google

To show user location on the map in Google Maps SDK for iOS you must enable location on GMSMapView.

mapView.isMyLocationEnabled = true

To show the location button set the following property.

mapView.settings.myLocationButton = true

TomTom SDK

To show the user location on the map, change the TomTomMap.locationIndicatorType to either LocationIndicator.userLocation(scale:) or LocationIndicator.navigationChevron(scale:). By default, the CLLocationManager is used as the source of location updates. However, you can also provide your own source. Learn more about user location in the Showing the user’s location guide.

map.locationIndicatorType = .userLocation

By default the center button is hidden, so to show it you need to change its visibility using MapView.

mapView.currentLocationButtonVisibilityPolicy = .visible
center