Migrate from Google Maps to TomTom

Overview

This tutorial covers some very basic use cases to help you switch your iOS app from Google's APIs to TomTom's as quickly as possible. It starts with basic environment setup, then dives into the code. At the very bottom of the page is a recommended reading list to allow you to build on the foundations provided by this tutorial. The application is written in Objective-C language. If you are interested in Swift language, please check the Time to leave tutorial.

This tutorial covers:

Getting a free API key and creating a local setup for the TomTom Maps SDK for iOS.
Initializing and displaying a map.
Adding a traffic layer on top of the map.
Adding a marker.
Displaying a route.

Prerequisites

Before you start writing code, prepare your environment:

Ensure that Xcode and iOS simulator are installed.
Ensure that CocoaPods is installed on your system. The TomTom Maps SDK for iOS is delivered as a CocoaPods pod.
Create a new Single View App project in Objective-C language with a deployment target of ** 9.1** or higher. After the project has been successfully created, close it and create an empty Podfile by executing a 'pod init' command inside the project folder.
Open the Podfile and paste the following lines inside a 'target' section:

For TomTom:
```
1pod 'TomTomOnlineSDKMaps'
2pod 'TomTomOnlineSDKRouting'
3pod 'TomTomOnlineSDKMapsUIExtensions'
```
For Google:
```
pod 'GoogleMaps'
```

Save and close the Podfile.
Execute the command 'pod install'. Cocoapods will install all of the required dependencies.
Open a *.xcworkspace file in Xcode.
If you don't have an API key visit a How to get a TomTom API key site and create one.

You can find more details on iOS project setup on our blog article: Getting Started with the TomTom Maps SDK for iOS: Project Setup.

Initializing a map

Compare how map is initialized using TomTom and Google APIs:

Google

To display a map using Google Maps Android API, you need to perform few steps:

Inside AppDelegate.m import the 'GoogleMaps' module and provide a Google API key (this example uses a Clang semantic import):
```
1#import "AppDelegate.h"
2@import GoogleMaps
3@interface AppDelegate ()
4@end
5@implementation AppDelegate
6- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
7    [GMSServices provideAPIKey:@"YOUR_KEY_GOES_HERE"];
8    return YES; }
```
Import the GoogleSDK.h header in the ViewController.m file.
```
#import <GoogleMaps/GoogleMaps.h>
```
Initialize a GMSMapView object inside the 'viewDidLoad' method. Assign it to our ViewController view.
```
1CLLocationCoordinate2D amsterdamCoordinates = CLLocationCoordinate2DMake(52.377271, 4.909466);
2GMSCameraPosition *camera = [GMSCameraPosition cameraWithTarget:amsterdamCoordinates zoom:10];
3GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
4self.view = mapView;
```

TomTom

To display a map in TomTom Maps SDK for iOS:

Import the appropriate header inside the ViewController.h file:
```
#import <TomTomOnlineSDKMaps/TomTomOnlineSDKMaps.h>
```
Create an NSString constant for the API key inside the ViewController.m file and paste your newly created key inside the placeholder.
```
1#import "ViewController.h"
2
3static NSString *const API_KEY = @"YOUR_API_KEY"
```
Add a TTMapView property inside the ViewController.m file. Create the TTMapStyleDefaultConfiguration and TTMapConfiguration objects and use them to initialize the map by instantiating the TTMapView object and switching the ViewController view to the TTMapView view.
```
1@interface ViewController ()
2@property TTMapView* mapView;
3@end
4
5@implementation ViewController
6- (void)viewDidLoad {
7    [super viewDidLoad];
8    TTMapStyleDefaultConfiguration *style = [[TTMapStyleDefaultConfiguration alloc] init];
9    TTMapConfiguration *config = [[[[[TTMapConfigurationBuilder alloc]
10           withMapKey:API_KEY]
11          withTrafficKey:API_KEY]
12      withMapStyleConfiguration:style] build];
13    self.mapView = [[TTMapView alloc] initWithFrame:self.view.frame mapConfiguration:config];
14    CLLocationCoordinate2D amsterdamCoords = CLLocationCoordinate2DMake(52.377271, 4.909466);
15    [self.mapView centerOnCoordinate:amsterdamCoords withZoom:11];
16    self.view = self.mapView;
17}
```

Displaying a marker

Displaying a marker is similar in both SDKs.

Google

Create a GMSMarker object and assign the current map to it:

1GMSMarker *marker = [[GMSMarker alloc] init];
2marker.position = amsterdamCoordinates;
3marker.map = mapView;

TomTom

Use a TTAnnotation object to display a marker:

TTAnnotation *annotation = [TTAnnotation annotationWithCoordinate:amsterdamCoords];
[self.mapView.annotationManager addAnnotation:annotation];

Displaying traffic

Showing traffic is also similar in both SDKs.

Google

Use 'setTrafficEnabled' to show traffic on the map:

[mapView setTrafficEnabled:YES];

TomTom

TomTom provides two kinds of traffic information:

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 much slower than free flow, meaning that there are traffic jams.
Traffic incidents indicates specific traffic problems such as closed roads, rain, ice on the road, or accidents.

You can show traffic incidents, traffic flow, or both:

self.mapView.trafficIncidentsOn = YES;
self.mapView.trafficFlowOn = YES;

Displaying a route/directions

Google

Displaying a route in Google SDK is not straightforward. It boils down to interacting with the Directions API, gathering a list of route positions, then drawing polylines from that list directly onto the map. This is too verbose and complex to show in this tutorial.

TomTom

Import the 'TomTomOnlineSDKRouting.h' header in ViewController.h:
```
#import <TomTomOnlineSDKRouting/TomTomOnlineSDKRouting.h>
```
Update ViewController.h so that it conforms to the TTRouteResponseDelegate protocol.
```
1@interface ViewController : UIViewController <TTRouteResponseDelegate>
2    - (void)route:(TTRoute *)route completedWithResult:(TTRouteResult *)result;
3    - (void)route:(TTRoute *)route completedWithResponseError:(TTResponseError *)responseError;
4@end
```
Create and initialize TTRoute and TTRouteQuery objects inside the viewDidLoad method in _ ViewController.m_.
```
1CLLocationCoordinate2D routeStart = CLLocationCoordinate2DMake(52.376368, 4.908113);
2CLLocationCoordinate2D routeStop = CLLocationCoordinate2DMake(52.372281, 4.846595);
3TTRouteQuery *routeQuery = [[TTRouteQueryBuilder createWithDest:routeStop andOrig:routeStart] build];
4TTRoute *route = [[TTRoute alloc] init];
5route.delegate = self;
6[self.mapView onMapReadyCompletion:^{
7    [route planRouteWithQuery:routeQuery];
8}];
```
The code above builds a TTRouteQuery object from two route points. It then initializes a TTRoute object, sets a delegate to the ViewController instance which allows the 'completedWithResult' method to be called. Inside onMapReadyCompletion block it sends the 'planRouteWithQuery' message to a newly created route object with routeQuery as a parameter.
Finally, provide an implementation for the 'completedWithResult' method inside of the _ ViewController.m_ file:
```
1- (void)route:(TTRoute *)route completedWithResult:(TTRouteResult *)result {
2    for(TTFullRoute *fullRoute in result.routes) {
3        TTMapRoute *mapRoute = [TTMapRoute routeWithCoordinatesData:fullRoute
4                                           withRouteStyle:TTMapRouteStyle.defaultActiveStyle
5                                           imageStart:TTMapRoute.defaultImageDeparture
6                                           imageEnd:TTMapRoute.defaultImageDestination]
7        [self.mapView.routeManager addRoute:mapRoute];
8        [self.mapView.routeManager showAllRoutesOverview];
9    }}
```
The above method provides a TTRouteResult object containing TTFullRoute objects. It then loops through the TTFullRoute collection. For each TTFullRoute object, it creates a new TTMapRoute instance and adds it to the MapView.

You can find full source code here: on github.

Summary

Using this tutorial, you should have converted an iOS application from using Google Maps APIs to TomTom's. Now you have a map with fresh and accurate traffic information, on which you can easily plan many kinds of route. Not bad!