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

Migrate from previous versions - the Maps library

Overview of the tutorial

This tutorial covers some basic use cases to help you switch from our previous versions of Maps SDK for Web to the latest one as quickly as possible. We will use code examples to explain the main differences between the SDKs.

If you are just interested in migrating services you can refer to the migration tutorial for services.

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

  • The Maps library
    The Maps SDK for Web can be used in three ways:

    • Downloaded from NPM: https://www.npmjs.com/package/@tomtom-international/web-sdk-maps
    • With a CDN: https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/<version>/maps/maps-web.min.js - NOTE: include the latest version in the URL.
    • Downloaded from here: Downloads.

    In this tutorial, we are using CDN as an example.

  • API Key

    Get your API Key now

    To create a new API Key you need to first register on the
    portal. Once you are logged in there is only one step remaining:

    Go to your Dashboard:

    My dashboard

    You can now click on your app - My first app and copy your API Key:

    My API Key

Displaying a map

      <!DOCTYPE html>
      <html class='use-all-space'>
      <head>
          <meta http-equiv='X-UA-Compatible' content='IE=Edge' />
          <meta charset='UTF-8'>
          <title>My Map</title>
          <meta name='viewport'
                content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'/>
          <!-- Replace version in the URL with desired library version -->
          <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/<version>/maps/maps.css'/>
          <style>
             #map {
                 width: 100vw;
                 height: 100vh;
             }
          </style>
      </head>
      <body>
          <div id='map' class='map'></div>
          <!-- Replace version in the URL with desired library version -->
          <script src='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/<version>/maps/maps-web.min.js'></script>
          <script>
          tt.setProductInfo('<your-product-name>', '<your-product-version>');
          tt.map({
                  key: '<your-tomtom-API-Key>',
                  container: 'map',
                  style: 'tomtom://vector/1/basic-main'
              });
          </script>
      </body>
      </html>

To run this example locally, save the preceding code in a HTML file. Replace ‘<your-api-key>‘ with the API Key you obtained as shown in the Prerequisites section.

Also replace the basePath with the location of the SDK, assuming that you have saved it next to the file above, the basePath will be './sdk'.

To see the result simply open your HTML file in a browser. If there is any problem you can check the log in developer tools.

Initializing a map

The following code initializes a map using a defined center point and zoom level. In this section we compare the difference between both SDKs.

Previous versions of the Maps SDK for Web

      var map = tomtom.map('map', {
          key: '<your-api-key>',
          basePath: '<your-tomtom-sdk-base-path>',
          source: 'vector',
          center: [52.379189, 4.899431],
          zoom: 12
      });

Latest version of Maps SDK for Web

    var map = tt.map({
            key: '<your-tomtom-API-key>',
            container: 'map',
            style: 'tomtom://vector/1/basic-main',
            center: [4.899431, 52.379189],
            zoom: 12
        });

The code for both is similar:

  • Both map methods return a reference to the map.
  • Both use ‘center’ and ‘zoom’ as properties.

Both require the ID of an element to render the map (in this example 'map'), but now you have to pass it in a 'container' property.

Note that the tomtom namespace was changed to tt in the new SDK.

The new versions of our SDK use the longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON. You will have to change the order of those in all of the parts of your application where the coordinates are passed as an array.

Differences in APIs

Here is an overview of some of the most important updates within our top-level namespace.

Common factory functions renamed

Some of the common functions changed. Here are some examples:

Previous versions Current version
tomtom.key(key, [value]) You need to pass the API Key directly to the service.

              tt.map({key: API-KEY, ...});
tomtom.localeService() You need to pass the language directly to the service. For the map, you can also change the language after initialization by doing:

              map.setLanguage('en');

You are here