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 Android 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. Install Android Studio. During installation, make sure that the component "Android Virtual Device" is selected.
  2. If possible, start a new project (minimum SDK API 19 – Android 4.4 “KitKat”) with an Empty activity. You can use your own project as long as it meets the minimum Android SDK API level requirement
  3. Update the Source Compatibility and Target Compatibility to 1.8 in the Project Structure dialog (click File > Project Structure).
  4. Add the TomTom repository to your project's gradle.build file:
    allprojects {
        repositories {
            google()
            jcenter()
            maven {
                url "https://maven.tomtom.com:8443/nexus/content/repositories/releases/"
            }
        }
    }
    
    
  5. Create and add an API key to AndroidManifest.xml:

    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:

    Copy and paste the API key to your AndroidManifest.xml inside the <application> tag:

    <meta-data android:name="OnlineMaps.Key" android:value="<YOUR_KEY_GOES_HERE>" />
    <meta-data android:name="OnlineTraffic.Key" android:value="<YOUR_KEY_GOES_HERE>" />
    <meta-data android:name="OnlineSearch.Key" android:value="<YOUR_KEY_GOES_HERE>" />
    <meta-data android:name="OnlineRouting.Key" android:value="<YOUR_KEY_GOES_HERE>" />
    

Initializing a map

Compare how the map is initialized using the Google and TomTom tools:

Google

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

  1. Add dependencies to your module's gradle.build file:
    implementation 'com.google.android.gms:play-services-maps:15.0.0' 
    
  2. Add a map fragment to the main activity:
    <fragment 
    android:id="@+id/mapFragment" 
    android:name="com.google.android.gms.maps.SupportMapFragment" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"/>
    
  3. Add a Google Android API key inside the application section of the manifest.xml file:
    <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_GOOGLE_KEY_GOES_HERE"/> 
    

TomTom

To do the same thing in the TomTom Maps SDK for Android:

  1. Add dependencies to your module's gradle.build file:
    api("com.tomtom.online:sdk-maps:2.250")
    
  2. Add a map fragment to the main activity layout:
    <fragment 
    android:id="@+id/mapFragment"
    android:name="com.tomtom.online.sdk.map.MapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
    

Displaying a marker

The next step is to allow your user to interact with the map (for instance, displaying or moving a marker).

Google

  1. Implement the OnMapReadyCallback interface in your MainActivity class and override the onMapReady method.:

    @Override
    public void onMapReady(GoogleMap googleMap) {
        this.map = googleMap;
    
        LatLng amsterdam = new LatLng(52.37, 4.90);
        googleMap.addMarker(new MarkerOptions().position(amsterdam).title("Amsterdam"));
        googleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(amsterdam, 8));
    }
    
  2. Inside the MainActivity onCreate method, get the appropriate map fragment instance and set a callback object on MainActivity so that the onMapReady method is called:
    SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
        .findFragmentById(R.id.mapFragment);
    mapFragment.getMapAsync(this);
    

TomTom

  • Define field map in MainActivity:
        private TomtomMap map;
        
  • As with Google, you need to implement an OnMapReadyCallback interface in your MainActivity class and override the onMapReady method:
    @Override
    public void onMapReady(@NonNull TomtomMap tomtomMap) {
        this.map = tomtomMap;
    
        LatLng amsterdam = new LatLng(52.37, 4.90);
        SimpleMarkerBalloon balloon = new SimpleMarkerBalloon("Amsterdam");
        tomtomMap.addMarker(new MarkerBuilder(amsterdam).markerBalloon(balloon));
        tomtomMap.centerOn(CameraPosition.builder(amsterdam).zoom(7).build());
    }
    
  • Inside the MainActivity onCreate method, get the map fragment instance and set a callback object on MainActivity so that the onMapReady method is called:
    MapFragment mapFragment = (MapFragment) getSupportFragmentManager()
        .findFragmentById(R.id.mapFragment);
    mapFragment.getAsyncMap(this); 
    

Displaying traffic

Create two simple buttons to work with traffic on the map. One enables the traffic layer, and the other disables it.

Google

In Google there is only one method responsible for traffic visualization:

googleMap.setTrafficEnabled(true);

The method displays only traffic flow tiles.

TomTom

TomTom provides two services that offer 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.

Create the buttons to handle traffic visualization and call the turnOnRasterTrafficIncidents and turnOnRasterTrafficFlowTiles methods on the map UiSettings object, choosing whether to display traffic flow tiles, traffic incident tiles, both, or none.

Button btnTrafficOn = findViewById(R.id.btnTrafficOn);
btnTrafficOn.setOnClickListener(new View.OnClickListener() { 
    @Override
    public void onClick(View v) {
        map.getUiSettings().turnOnRasterTrafficIncidents();
        map.getUiSettings().turnOnRasterTrafficFlowTiles();
    } 
});
Button btnTrafficOff = findViewById(R.id.btnTrafficOff);
btnTrafficOff.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        map.getUiSettings().turnOffTraffic();
    } 
});

Displaying a route/directions

The next step is to add a third button that shows a route.

Google

Displaying a route in Google Maps SDK for Android 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

TomTom Routing API allows the app to calculate a route between two points, add waypoints, and draw the route on the map with one call. To enable Routing API inside your application:

  1. Add a dependency to the module's gradle.build file:
    api("com.tomtom.online:sdk-routing:2.250")
    
  2. Now add a button for displaying the route to the main activity layout XML file:
    <Button 
    android:id="@+id/btnRouteShow" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp" 
    android:text="Route SHOW" app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />
    
  3. Finally, add a proper handler for our new button:

    Planning a route requires at least two location points (e.g.: Amsterdam and Hague). Create an instance of the RoutingApi object by calling OnlineRoutingApi.create method. Then construct a route query using the selected location points. There are other options that allow the app to plot different kinds of routes (fastest, shortest, etc).

  4. The planRoute returns an observable RouteResult object. You can get FullRoute objects from the RouteResult.getRoutes() method, create a new RouteBuilder object from each of them, and add them to your map.
    Button btnRouteShow = findViewById(R.id.btnRouteShow);
    btnRouteShow.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            LatLng amsterdam = new LatLng(52.37, 4.90);
            LatLng hague = new LatLng(52.07, 4.30);
            RoutingApi routingApi = OnlineRoutingApi.create(getApplicationContext());
            RouteQuery routeQuery = new RouteQueryBuilder(amsterdam, hague).withRouteType(RouteType.FASTEST);
            routingApi.planRoute(routeQuery)
                .subscribeOn(Schedulers.newThread())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(routeResult -> {
                    for (FullRoute fullRoute : routeResult.getRoutes()) {
                        RouteBuilder routeBuilder = new RouteBuilder(
                            fullRoute.getCoordinates()).isActive(true);
                        map.addRoute(routeBuilder);
                    }
                });
        }
    });

You can find full source code here: on github.

Summary

Using this tutorial, you should have converted an Android 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. Great!
Now you're ready to explore more awesome TomTom functionality with some more advanced tutorials and examples: