Migrate from Google Maps to TomTom

Overview

This tutorial covers some very basic use cases to help you switch 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:

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

Prerequisites

To start using the TomTom Maps SDK for Web, you need the following:

An SDK that can be downloaded from here: Downloads. Unzip it and save it in a folder. This tutorial assumes your folder is named ‘sdk’. If you choose another name, remember to change the provided paths to match.

Check out the current file structure

.
└── sdk-tutorial
    └── sdk
        ├── LICENSE.txt
        ├── README.md
        ├── glyphs
        ├── images
        ├── map.css
        ├── mapbox-gl-js
        ├── sprites
        ├── styles
        ├── tomtom.min.js
        └── tomtom.min.js.map

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:

Displaying a map

Below is a minimal HTML structure containing the JS code to initialize and display a TomTom map:

<!DOCTYPE html> 
<html> 
	<head> 
	<title>My map</title> 
        <link rel='stylesheet' type='text/css' href='sdk/map.css'/> 
        <script src='sdk/tomtom.min.js'></script> 
        <style>
          #map {
              height: 500px;
              width: 500px;
          }
        </style>
    </head> 
    <body> 
        <div id='map'></div> 
        <script> 
            tomtom.L.map('map', {key: '<your-api-key>'});
        </script> 
    </body>
</html>

To run this example locally, name it index.html and save it in the sdk-tutorial. Replace ‘<your-api-key>‘ with the API key you obtained as shown in the Prerequisites section.

Check out the current file structure

.
└── sdk-tutorial
    ├── index.html
    └── sdk
        ├── LICENSE.txt
        ├── README.md
        ├── glyphs
        ├── images
        ├── map.css
        ├── mapbox-gl-js
        ├── sprites
        ├── styles
        ├── tomtom.min.js
        └── tomtom.min.js.map

Test your progress so far by opening your index.html file in a browser. You should see a map. If not, use developer mode (press F12) to check for console errors.

Initializing a map

Below is code to initialize a map using a defined center point and zoom level.

Google

var map = new google.maps.Map(document.getElementById('map'), { 
  center: { lat: 37.769167, lng: -122.478468},
  zoom: 15
});

TomTom

var map = tomtom.L.map('map', { 
  key: '<your-api-key>', 
  basePath: 'sdk', 
  center: [37.769167, -122.478468], 
  zoom: 15 
});

The code for both is quite similar:

Both create a variable to refer to later.
Both use ‘center’ and ‘zoom’ as properties.
Both require the ID of an element to contain the map (in this example, 'map').

The TomTom Maps SDK for Web requires a ‘key’ property for your API key and ‘basePath’ with the SDK directory. In addition, the TomTom Maps SDK for Web expresses coordinates as an array rather than an object with properties.

The TomTom Maps SDK for Web is based on Leaflet, one of the most popular open-source JS libraries for displaying maps. This means that you can use Leaflet methods and datatypes in TomTom Maps SDK for Web.

Displaying traffic

The next step is to add a traffic layer to the map.

Google

 var trafficLayer = new google.maps.TrafficLayer();  
 trafficLayer.setMap(map);

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.

The code below displays both types of traffic data:

 var trafficLayer = new tomtom.L.TomTomTrafficLayer(); 
 map.addLayer(trafficLayer); 
 var trafficFlowLayer = new tomtom.L.TomTomTrafficFlowLayer(); 
 map.addLayer(trafficFlowLayer);

This is one of the ways to add a traffic layer dynamically to your map – for example at a user’s request. If you know beforehand that you want to present a map with traffic layer when initializing it, then it might be easier to request traffic layers in the map initialization.

var map = tomtom.L.map('map', { 
  key: '<your-api-key>', 
  basePath: 'sdk', 
  center: [37.769167, -122.478468] 
  zoom: 15,  
  traffic: true, 
  trafficFlow: true 
});

Displaying a marker

Google

var marker = new google.maps.Marker({  
 position: { lat: 37.768454, lng: -122.492544 },
 map: map
});

TomTom

 var marker = tomtom.L.marker([37.768454, -122.492544]).addTo(map);

The next step is to allow your user to interact with the map by clicking on a marker to summon an information popup.

Google

var infowindow = new google.maps.InfoWindow({  
 content: 'my marker'
});
marker.addListener('click', function() { 
 infowindow.open(map, marker);
});

TomTom

 marker.bindPopup('my marker');

Displaying a route/directions

Here’s how to display a route from point A to point B on the map. Google's name for this service is "directions". We just call it routing (Routing API).

Google

var directionsService = new google.maps.DirectionsService(); 
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
var request = {
  origin: new google.maps.LatLng(37.768014, -122.510601),
  destination: new google.maps.LatLng(37.769167,-122.478468),
  travelMode: 'DRIVING'
};
directionsService.route(request, function(response, status) {
  if (status == 'OK') {
     directionsDisplay.setDirections(response);
  }
});

To display a route with Google requires you to define two services: one to ask for a route from A to B and another to render it on the map.

TomTom

The TomTom Maps SDK for Web provides a single method for the entire process.

tomtom.routing() 
  .locations('37.7683909618184,-122.51089453697205:37.769167,-122.478468')
  .go().then(function(routeJson) {
      var route = tomtom.L.geoJson(routeJson, {
          style: {color: '#00d7ff', opacity: 0.6, weight: 6}
      }).addTo(map);
      map.fitBounds(route.getBounds(), {padding: [5, 5]});
  });

The only required parameters for the routing call are the start and end points, separated by a colon. If more colon-separated coordinates are provided, the ones in the middle will be used as intermediate locations (waypoints). By default, the route will be calculated for a car, but this and many other parameters can be changed. See the Maps Web SDK Documentation - Routing for complete details of routing parameters and filters.

Call the routing service by executing .go() function. The result will be returned as GeoJSON containing a 'LineString' feature. This is a (poly)line that can be added to a map, with defined properties like color, opacity, and weight.

Then call 'fitBounds' to center the map on the route.

The code above generates a polyline, but no markers. Developers have a lot of freedom to display the route, but if a start and end marker are required, they can be added in the same way as the "pop-up marker" above:

tomtom.L.marker([37.769167, -122.478468]).addTo(map); 
tomtom.L.marker([37.768014, -122.510601]).addTo(map);

You can find more information about markers, including how to customize them, in the Maps SDK for Web functional examples.

Final result:

You can find full HTML file here: on github.

Summary

Using this tutorial, you should have converted an application from using the Google Maps JavaScript API to using the TomTom Maps SDK for Web. Now you have a map with fresh and accurate traffic information, on which you can easily plan many kinds of route. Pretty cool, right?

Now you're ready to explore more awesome TomTom functionality with some more advanced tutorials and examples: