Developer

Maps SDK for Web v5 Downloads (Deprecated)

Deprecation notice

Version 5 of the Web SDK is deprecated.

  • The Web SDK v5 will be withdrawn following a 12 month deprecation period.

  • Please see:

    TomTom's Deprecation Policy

    .

  • We advise and recommend that you use the new Web SDK v6.

  • To see documentation for the new version 6 of the Web SDK, please visit the

    Web SDK v6

    documentation.

Overview

We provide two libraries which you can use:

  • Maps library - download if you need map the visualization library.
  • Services library - download if you need a JavaScript wrapper over our services and you do not need maps. It can be used in Node.js or Web.

Besides the libraries, you can also download the offline version of the documentation, examples, and plugins.

Pre-requisites

Maps and services libraries support most of the modern browsers like Google Chrome (64+), Mozilla Firefox (60+), Safari (11+), Edge (41+) and Internet Explorer (11+), however depending on the browser version and used hardware, certain features or future improvements may not be available. Especially in case of Maps library which is based on WebGL technology, you may want to manually assure support by visiting Check browser support example.
We recommend to always use the newest version of a browser for the best experience.

Basic usage

We provide separate builds for browser, module bundlers (e.g. Webpack) and in case of Services library - Node.js. In the next sections we describe how to include and use libraries depending the on environment.

Browser via script tag

This is the easiest way to get started is to use CDN (Content Delivery Network), you can just copy and paste following snippet to display a map on your web page.

When using build dedicated for the browser, Maps and Services libraries are wrapped into "tt" namespace which is attached to the browser "window" object. If you downloaded zip package and you want to use Maps or Services like this, please make sure you copied "maps**-web**.min.js" or "services**-web**.min.js" (mind the "-web" suffix").

1<html>
2  <head>
3    <link
4      rel="stylesheet"
5      type="text/css"
6      href="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.69.1/maps/maps.css"
7    />
8    <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.69.1/maps/maps-web.min.js"></script>
9  </head>
10  <body style="width: 100% height: 100%; margin: 0; padding: 0;">
11    <div id="map" style="width: 100%; height: 100%;"></div>
12    <script>
13      var map = tt.map({
14        key: "<your maps api key>",
15        container: "map",
16        style: "tomtom://vector/1/basic-main",
17      })
18    </script>
19  </body>
20</html>
1<html>
2<head>
3    <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.69.1/services/services-web.min.js"></script>
4    <script>
5        tt.services.copyrights({
6            key: "<your api key>"
7        })
8            .go()
9            .then(function (results) {
10                console.log('Copyrights', results);
11            })
12            .catch(function (reason) {
13                console.log('Copyrights', reason);
14            })
15    </script>
16</head>
17<body>
18</html>

Browser using import statement and module bundlers

If you are using NPM and a module bundler like Webpack, you can import our libraries like shown in the code snippets below. Import statement loads by default UMD (Universal Module Definition) build. This is dedicated for client side browser environment.

1import tt from '@tomtom-international/web-sdk-maps';
2

3var map = tt.map({
4    key: '<your maps api key>',
5    container: 'map'
6    style: 'tomtom://vector/1/basic-main'
7});
1import tt from '@tomtom-international/web-sdk-services';
2

3tt.services.copyrights({
4    key: '<your api key>'
5})
6    .go();
7    .then(function (results) {
8        console.log('Copyrights', results);
9    })
10    .catch(function (reason) {
11        console.log('Copyrights', reason);
12    });

Node.JS

You can use Services library in the Node.js. Only pre-requisition is to import dedicated build. Take a look at the following snippet to get started.

1const tt = require("@tomtom-international/web-sdk-services/dist/services-node.min.js")
2

3tt.services
4  .copyrights({
5    key: "<your api key>",
6  })
7  .go()
8  .then(function (results) {
9    console.log("Copyrights", results)
10  })
11  .catch(function (reason) {
12    console.log("Copyrights", reason)
13  })

NPM, CDN and zip packages

NPM

You can use 'npm' to install our libraries:

npm i @tomtom-international/web-sdk-maps@version5
npm i @tomtom-international/web-sdk-services@version5

Please mind "version5" tag. Using npm install without specifying version or tag will download latest SDK version (6.x), which may not be what you wanted.

CDN

You can include the necessary files in your web pages from our CDN (Content Delivery Network), if you don't want to download and host the libraries yourself.

Maps:

1<link
2  rel="stylesheet"
3  type="text/css"
4  href="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.69.1/maps/maps.css"
5/>
6<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.69.1/maps/maps-web.min.js"></script>

Services:

<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.69.1/services/services-web.min.js"></script>

You can use our CDN with older versions, just replace the version in the URLs.

ZIP files

Plugins

Searchbox

NPM

npm i @tomtom-international/web-sdk-plugin-searchbox

CDN

1<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/2.24.2/SearchBox-web.js"></script>
2<link
3  rel="stylesheet"
4  type="text/css"
5  href="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/2.24.2/SearchBox.css"
6/>

Deprecated, older versions

You can use our CDN with older versions, just replace the version in the URLs.

  • 2.24.0
  • 2.23.1
  • 2.22.1
  • 2.2.0
  • 2.1.0
  • 2.0.0
  • 1.0.8
  • 1.0.7
  • 1.0.6
  • 1.0.5
  • 1.0.4
Pan controls

Pan Controls

NPM

npm i @tomtom-international/web-sdk-plugin-pancontrols

CDN

1<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/PanControls/1.0.12/PanControls-web.js"></script>
2<link
3  rel="stylesheet"
4  type="text/css"
5  href="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/PanControls/1.0.12/PanControls.css"
6/>

Older versions

You can use our CDN with older versions, just replace the version in the URLs.

  • 1.0.11
  • 1.0.10
  • 1.0.9
  • 1.0.8
  • 1.0.7
  • 1.0.6
  • 1.0.5
Zoom controls

Zoom Controls

NPM

npm i @tomtom-international/web-sdk-plugin-zoomcontrols

CDN

1<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/ZoomControls/1.0.11/ZoomControls-web.js"></script>
2<link
3  rel="stylesheet"
4  type="text/css"
5  href="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/ZoomControls/1.0.11/ZoomControls.css"
6/>

Deprecated, older versions

You can use our CDN with older versions, just replace the version in the URLs.

  • 1.0.10
  • 1.0.9
  • 1.0.8
  • 1.0.7
  • 1.0.6
  • 1.0.5
Minimap

Minimap

NPM

npm i @tomtom-international/web-sdk-plugin-minimap

CDN

1<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/Minimap/1.0.5/Minimap-web.js"></script>
2<link
3  rel="stylesheet"
4  type="text/css"
5  href="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/Minimap/1.0.5/Minimap.css"
6/>

Deprecated, older versions

You can use our CDN with older versions, just replace the version in the URLs.

  • 1.0.4
  • 1.0.3
  • 1.0.2
  • 1.0.1
  • 1.0.0

Deprecated Versions

Deprecated, older versions of libraries, examples, and documentation (ZIP packages)

Version: 5.69.0

Version: 5.68.0

Version: 5.65.0

Version: 5.64.0

Version: 5.63.0

Version: 5.60.0

Version: 5.59.1

Version: 5.59.0

Version: 5.58.0

Version: 5.57.0

Version: 5.56.0

Version: 5.55.0

Version: 5.53.0

Version: 5.52.0

Version: 5.51.0

Version: 5.49.1

Version: 5.48.1

Version: 5.47.0

Version: 5.45.0

Version: 5.44.0

Version: 5.43.3

Version: 5.42.0

Version: 5.41.0

Version: 5.40.1

Version: 5.39.0

Version: 5.38.0

Version: 5.37.2

Version: 5.36.1

Version: 5.35.0

Version: 5.34.4

Version: 5.27.0

Version: 5.26.2

Version: 5.22.0

Version: 5.21.4

Version 5.20.4

Github

Here you can find our github repository with examples of Maps SDK for Web usage:

Examples on github