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.68.0/maps/maps.css'>
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.68.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",
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.68.0/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, 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/5.x/5.68.0/maps/maps.css'>
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.68.0/maps/maps-web.min.js"></script>
Services:
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.68.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/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