Developer

Migrate from version 5 - the Services library

Overview of the tutorial

This tutorial covers basic use cases to help you switch our services. For example, switching the Routing API or Search API services from version 5 of the Maps SDK for Web to our new version. We will use code examples to explain the main differences between the SDKs.

You can check how to migrate map displaying here: Migrate from version 5 - the Maps library

Prerequisites

To start using the latest version of the TomTom Maps SDK for Web you need the following:

  • The Services library
    The Maps SDK for Web can be used in three ways:
  • API Key - If you don't have an API Key visit the How to get a TomTom API Key site and create one.
  • Add the following to the <head> element of your HTML document: 
    <!-- 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>
    Maps and services use the same namespace and will automatically attach themselves to the tt object. Services will be accessible using tt.services.

Displaying a route/directions

Here we have the code to display a route from point A to point B on the map.

Version 5 of the Maps SDK for Web

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

Latest version of the Maps SDK for Web

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  })

Performing a fuzzy search

Version 5 of the Maps SDK for Web

1tt.services
2  .fuzzySearch({
3    key: "<your-api-key>",
4    query: "pizza",
5  })
6  .go()
7  .then(function (result) {
8    console.log(result)
9  })

Latest version of the Maps SDK for Web

1tt.services
2  .fuzzySearch({
3    key: "<your-api-key>",
4    query: "pizza",
5  })
6  .then(function (result) {
7    console.log(result)
8  })

As you can see the only difference here is that we no longer call the service by using .go() method. We do this by directly calling a service function.

Differences in APIs

Here is a summary of the most important updates in the services library: