Downloads

Overview

Here you can find information on how to download current and older versions of Tomtom Maps SDK for Web and how to include them on your web page or web app.

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+) and Edge (41+), 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").

Maps
Services


<html>
<head>
    <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.14.0/maps/maps.css'>
    <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.14.0/maps/maps-web.min.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0; padding: 0;">
    <div id="map" style="width: 100%; height: 100%;"></div>
    <script>
        var map = tt.map({
            key: "<your maps api key>",
            container: "map"
        });
   </script>
</body>
</html>


<html>
<head>
    <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.14.0/services/services-web.min.js"></script>
    <script>
        tt.services.copyrights({
            key: "<your api key>"
        })
            .then(function (results) {
                console.log('Copyrights', results);
            })
            .catch(function (reason) {
                console.log('Copyrights', reason);
            })
    </script> 
</head>
<body>
</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.

Maps
Services


import tt from '@tomtom-international/web-sdk-maps';
 
var map = tt.map({
    key: '<your maps api key>',
    container: 'map'
});


import tt from '@tomtom-international/web-sdk-services';
 
tt.services.copyrights({
    key: '<your api key>'
})
.then(function (results) {
    console.log('Copyrights', results);
})
.catch(function (reason) {
    console.log('Copyrights', reason);
});

Or include in your bundle only services what you need from ES modules:


import { copyrights, placeById } from '@tomtom-international/web-sdk-services/esm';

copyrights({
    key: '<your api key>'
}).then(function (results) {
    console.log('Copyrights', results);
}).catch(function (reason) {
    console.log('Copyrights', reason);
});

placeById({  
    key: '<your api key>'
}).then(function(result) {
    console.log('Place by Id', result);
}).catch(function(reason) {
    console.log('Copyrights', reason);
});

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.


const tt = require('@tomtom-international/web-sdk-services/dist/services-node.min.js');
 
tt.services.copyrights({
    key: '<your api key>'
})
    .then(function (results) {
        console.log('Copyrights', results);
    })
    .catch(function (reason) {
        console.log('Copyrights', reason);
    });

TypeScript support

TomTom Maps SDK for Web provides built-in TypeScript annotations support for both Maps and Services libraries.

With typings available the compiler is able to investigate the code and prevent many potential runtime errors.

To get started please check the Use of TypeScript type annotations tutorial.

NPM, CDN and zip packages

NPM

You can use 'npm' to install our libraries:


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

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:

<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.14.0/maps/maps.css'>
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.14.0/maps/maps-web.min.js"></script>

Services:

<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.14.0/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


<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/3.1.11/SearchBox-web.js"></script>
<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/3.1.11/SearchBox.css'>

Pan controls

NPM

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

CDN


<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/PanControls/2.1.6/PanControls-web.js"></script>
<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/PanControls/2.1.6/PanControls.css'>

Zoom controls

NPM

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

CDN


<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/ZoomControls/2.1.6/ZoomControls-web.js"></script>
<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/ZoomControls/2.1.6/ZoomControls.css'>

Minimap

NPM


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

CDN


<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/Minimap/2.1.6/Minimap-web.js"></script>
<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/Minimap/2.1.6/Minimap.css'>

Drawing tools

NPM


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

CDN


<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/DrawingTools/1.1.4/DrawingTools-web.js"></script>
<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/DrawingTools/1.1.4/DrawingTools.css'>

Older Versions

Older versions of libraries, examples, and documentation (ZIP packages)

Version: 6.13.0

Version: 6.12.0

Version: 6.11.0

Version: 6.7.0

Version: 6.6.0

Version: 6.5.0

Version: 6.4.0

Version: 6.1.2.public-preview.24

Version: 6.1.2.public-preview.23

Version: 6.1.2.public-preview.19

Version: 6.1.2.public-preview.18

Version: 6.1.2.public-preview.15

Version: 6.1.2.public-preview.11

Version: 6.1.2.public-preview.9

Version: 6.1.2.public-preview.8

Version: 6.1.2.public-preview.6

Version: 6.1.2.public-preview.5

Version: 6.1.2.public-preview.4

Version: 6.1.2.public-preview.3

Github

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

Examples on github