Sorry, you need to enable JavaScript to visit this website.
You are looking at older version of the TomTom Maps SDK for Web (v5). This version is deprecated as of 1st of February 2021. Make sure to use the latest version which can be found here.
V3, V4V5V6
Maps SDK for Web (v5)

Downloads

On this page

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+), 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").


<html>
<head>
    <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.69.1/maps/maps.css'>
    <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.69.1/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",
            style: "tomtom://vector/1/basic-main"
        });
   </script>
</body>
</html>



<html>
<head>
    <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.69.1/services/services-web.min.js"></script>
    <script>
        tt.services.copyrights({
            key: "<your api key>"
        })
            .go()
            .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.


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



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

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:

<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.69.1/maps/maps.css'>
<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


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

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

NPM

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

CDN


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

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

NPM

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

CDN

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

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

NPM


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

CDN


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

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

Older Versions

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