Developer

Migrate from Google Maps to TomTom

For Android

For iOS

Overview

This tutorial covers some basic use cases to help you switch from Google's APIs to TomTom's as quickly as possible. It begins with the basic environment setup along with use cases accompanied by code examples. At the very bottom of the page is a recommended reading list to allow you to build on the foundations provided by this tutorial.

Prerequisites

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

Displaying a map

The following code example displays a minimal HTML structure containing the JavaScript code to initialize and display a TomTom map:

1<!DOCTYPE html>
2<html class="use-all-space">
3  <head>
4    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
5    <meta charset="UTF-8" />
6    <title>My Map</title>
7    <meta
8      name="viewport"
9      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
10    />
11    <!-- Replace version in the URL with desired library version -->
12    <link
13      rel="stylesheet"
14      type="text/css"
15      href="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/<version>/maps/maps.css"
16    />
17  </head>
18  <body>
19    <div id="map" class="map" style="width:100%; height:100vh"></div>
20    <!-- Replace version in the URL with desired library version -->
21    <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/<version>/maps/maps-web.min.js"></script>
22    <script>
23      tt.setProductInfo("<your-product-name>", "<your-product-version>")
24      tt.map({
25        key: "<your-tomtom-API-Key>",
26        container: "map",
27      })
28    </script>
29  </body>
30</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.

Run a HTTP server

Navigate to the directory containing your file using a terminal.

For example:

~$ cd sdk-tutorial/
~sdk-tutorial$

Install a light-weight HTTP server (you might need to run this command with admin/root privileges):

npm install --global http-server

Then simply run the following command:

http-server

Note that npm comes bundled with Node.js, so please make sure you have it installed on your machine.

So now it is time to see the results!

Open a browser and type this URL in the address bar: http://localhost:8080/index.html. You should be able to see a map! If not, use developer mode (press F12 on Windows or Linux or ⌘ + ⌥ + I on Mac) to check for console errors.

Initializing a map

The following code initializes a map using a defined center point and zoom level.

Google

1var map = new google.maps.Map(document.getElementById("map"), {
2  center: { lat: 37.769167, lng: -122.478468 },
3  zoom: 15,
4})

TomTom

1var map = tt.map({
2  key: "<your-tomtom-API-key>",
3  container: "map",
4  center: [-122.478468, 37.769167],
5  zoom: 15,
6})

These two code blocks have some similarities:

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

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

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 there are traffic jams.
  • Traffic incidents indicates specific traffic problems such as closed roads, rain, ice on the road, or accidents.

The following code displays both types of traffic data:

1map.on("load", function () {
2  map.showTrafficFlow()
3  map.showTrafficIncidents()
4})
1map.on("load", function (): void {
2  map.showTrafficFlow()
3  map.showTrafficIncidents()
4})

You can also set traffic visibility when initiating a map object:

1var map = tt.map({
2  key: "${api.key.maps}",
3  container: "map",
4  stylesVisibility: {
5    trafficIncidents: true,
6    trafficFlow: true,
7  },
8})

Displaying a marker

Google

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

TomTom

var marker = new tt.Marker().setLngLat([-122.492544, 37.768454]).addTo(map)

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

Google

1var infowindow = new google.maps.InfoWindow({
2  content: "my marker",
3})
4marker.addListener("click", function () {
5  infowindow.open(map, marker)
6})

TomTom

marker.setPopup(new tt.Popup().setHTML("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 call it routing (Routing API).

Google

1var directionsService = new google.maps.DirectionsService()
2var directionsDisplay = new google.maps.DirectionsRenderer()
3directionsDisplay.setMap(map)
4var request = {
5  origin: new google.maps.LatLng(37.768014, -122.510601),
6  destination: new google.maps.LatLng(37.769167, -122.478468),
7  travelMode: "DRIVING",
8}
9directionsService.route(request, function (response, status) {
10  if (status == "OK") {
11    directionsDisplay.setDirections(response)
12  }
13})

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

TomTom

Add the services library in your HTML.

<!-- Replace version in the URL with desired library version -->
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/<version>/services/services-web.min.js"></script>

And the code:

1tt.services
2  .calculateRoute({
3    key: "YOUR_API_KEY",
4    locations: "-122.510601,37.768014:-122.478468,37.769167",
5  })
6  .then(function (response) {
7    var geojson = response.toGeoJson()
8    map.addLayer({
9      id: "route",
10      type: "line",
11      source: {
12        type: "geojson",
13        data: geojson,
14      },
15      paint: {
16        "line-color": "#00d7ff",
17        "line-width": 8,
18      },
19    })
20    var bounds = new tt.LngLatBounds()
21    geojson.features[0].geometry.coordinates.forEach(function (point) {
22      bounds.extend(tt.LngLat.convert(point))
23    })
24    map.fitBounds(bounds, { padding: 20 })
25  })
1tt.services
2  .calculateRoute({
3    key: "YOUR_API_KEY",
4    locations: "-122.510601,37.768014:-122.478468,37.769167",
5  })
6  .then(function (response: tt.CalculateRouteResponse) {
7    var geojson = response.toGeoJson()
8    map.addLayer({
9      id: "route",
10      type: "line",
11      source: {
12        type: "geojson",
13        data: geojson,
14      },
15      paint: {
16        "line-color": "#00d7ff",
17        "line-width": 8,
18      },
19    })
20    var bounds = new tt.LngLatBounds()
21    geojson.features[0].geometry.coordinates.forEach(function (
22      point: tt.LngLatLike
23    ) {
24      bounds.extend(tt.LngLat.convert(point))
25    })
26    map.fitBounds(bounds, { padding: 20 })
27  })

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 SDK For Web Documentation - Calculate Route for complete details of routing parameters and filters.

Call the routing service by executing the tt.services.calculateRoute() 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:

new tt.Marker().setLngLat([-122.478468, 37.769167]).addTo(map)
new tt.Marker().setLngLat([-122.510601, 37.768014]).addTo(map)

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

Searching

Searching for places is very similar in both SDKs. We need to provide a query, and then work on the Response provided by the service.

Google

1var request = {
2  query: "Golden Gate Golf Course San Francisco",
3  fields: ["name", "geometry"],
4}
5service = new google.maps.places.PlacesService(map)
6service.findPlaceFromQuery(request, function (results, status) {
7  if (status === google.maps.places.PlacesServiceStatus.OK) {
8    for (var i = 0; i < results.length; i++) {
9      new google.maps.Marker({
10        map: map,
11        position: results[i].geometry.location,
12      })
13    }
14  }
15})

TomTom

1tt.services
2  .fuzzySearch({
3    key: "YOUR_API_KEY",
4    query: "Golden Gate Golf Course San Francisco",
5  })
6  .then(function (response) {
7    for (var i = 0; i < response.results.length; i++) {
8      new tt.Marker().setLngLat(response.results[i].position).addTo(map)
9    }
10  })
1tt.services.fuzzySearch({
2    key: 'YOUR_API_KEY',
3    query: 'Golden Gate Golf Course San Francisco'
4})
5.then(function(response: tt.SearchResponse) {
6    for (var i = 0; i < response.results.length; i++) {
7        new tt.Marker().setLngLat(response.results[i].position as tt.LngLatLike).addTo(map);
8    }
9});

You can find the full HTML file on Github.

Summary

Using this tutorial, you converted an application 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 routes. Pretty cool, right?

In order to use typescript code examples, you need to set up a project by using the TypeScript Annotations tutorial.

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