Sorry, you need to enable JavaScript to visit this website.

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.

This tutorial covers:

Prerequisites

Before you start writing code, prepare your environment:

  1. Ensure that Xcode and iOS simulator are installed.
  2. Ensure that CocoaPods is installed on your system. The TomTom Maps SDK for iOS is delivered as a CocoaPods pod.
  3. Create a new Single View App project 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.
  4. Open the Podfile and paste the following lines inside a 'target' section:
    • For TomTom:
        pod 'TomTomOnlineSDKMaps' 
        pod 'TomTomOnlineSDKRouting'
        pod 'TomTomOnlineSDKMapsUIExtensions'
      
    • For Google:
        pod 'GoogleMaps'
      
  5. Save and close the Podfile.
  6. Execute the command 'pod install'. Cocoapods will install all of the required dependencies.
  7. Open a *.xcworkspace file in Xcode.
  8. Obtain an API Key

    Create your API Key now

    To create a new API key you need to first register on the portal. Once you are logged in there are only two steps remaining:

    Create a new application in your Dashboard:

    Choose all the APIs:

    All set up. You can now click on your newly created app and copy your API key:

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:

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

TomTom

To display a map in TomTom Maps SDK for iOS:

  1. Provide TomTom API key inside the Info.plist file.
    <key>OnlineMap.Key</key> 
    <string>YOUR_KEY_GOES_HERE</string> 
    <key>OnlineTraffic.Key</key> 
    <string>YOUR_KEY_GOES_HERE</string> 
    <key>OnlineRouting.Key</key> 
    <string>YOUR_KEY_GOES_HERE</string> 
    
  2. Import the appropriate header inside the ViewController.h file:
    #import <TomTomOnlineSDKMaps/TomTomOnlineSDKMaps.h>
    
  3. Add a TTMapView property inside the ViewController.m file. Initialize the map by instantiating a TTMapView object and switching the ViewController view to the TTMapView view
    @interface ViewController () 
    @property TTMapView* mapView; 
    @end 
    @implementation ViewController 
    - (void)viewDidLoad { 
        [super viewDidLoad]; 
        self.mapView = [[TTMapView alloc] initWithFrame:self.view.frame]; 
        CLLocationCoordinate2D amsterdamCoords = CLLocationCoordinate2DMake(52.377271, 4.909466); 
        [self.mapView centerOnCoordinate:amsterdamCoords withZoom:11]; 
        self.view = self.mapView; 
    }

Displaying a marker

Displaying a marker is similar in both SDKs.

Google

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

GMSMarker *marker = [[GMSMarker alloc] init]; 
marker.position = amsterdamCoordinates;
marker.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.trafficIncidentsStyle = TTTrafficIncidentsStyleRaster; 
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

  1. Import the 'TomTomOnlineSDKRouting.h' header in ViewController.h:
    #import <TomTomOnlineSDKRouting/TomTomOnlineSDKRouting.h> 
    
  2. Update ViewController.h so that it conforms to the TTRouteResponseDelegate protocol.
    @interface ViewController : UIViewController <TTRouteResponseDelegate>
    - (void)route:(TTRoute *)route completedWithResult:(TTRouteResult *)result; 
    - (void)route:(TTRoute *)route completedWithResponseError:(TTResponseError *)responseError; 
    @end 
    
  3. Create and initialize TTRoute and TTRouteQuery objects inside the viewDidLoad method in ViewController.m.

    CLLocationCoordinate2D routeStart = CLLocationCoordinate2DMake(52.376368, 4.908113); 
    CLLocationCoordinate2D routeStop = CLLocationCoordinate2DMake(52.372281, 4.846595);     
    TTRouteQuery *routeQuery = [[TTRouteQueryBuilder createWithDest:routeStop andOrig:routeStart] build]; 
    TTRoute *route = [[TTRoute alloc] init]; 
    route.delegate = self;
    [self.mapView onMapReadyCompletion:^{ 
        [route planRouteWithQuery:routeQuery];
    }]; 
    
    

    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.

  4. Finally, provide an implementation for the 'completedWithResult' method inside of the ViewController.m file:

    - (void)route:(TTRoute *)route completedWithResult:(TTRouteResult *)result { 
        for(TTFullRoute *fullRoute in result.routes) { 
            TTMapRoute *mapRoute = [TTMapRoute routeWithCoordinatesData:fullRoute];
            [self.mapView.routeManager addRoute:mapRoute]; 
            mapRoute.active = YES;    }} 
    

    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!
Now you're ready to explore more awesome TomTom functionality with some more advanced tutorials and examples: