Developer

Project set up

Overview

Here you can find information on how get your project set up using the current or 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").

1<html>
2  <head>
3    <link
4      rel="stylesheet"
5      type="text/css"
6      href="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.25.0/maps/maps.css"
7    />
8    <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.25.0/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      })
17    </script>
18  </body>
19</html>
1<html>
2<head>
3    <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.25.0/services/services-web.min.js"></script>
4    <script>
5        tt.services.copyrights({
6            key: "<your api key>"
7        })
8            .then(function (results) {
9                console.log('Copyrights', results);
10            })
11            .catch(function (reason) {
12                console.log('Copyrights', reason);
13            })
14    </script>
15</head>
16<body>
17</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})
1import tt from "@tomtom-international/web-sdk-services"
2

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

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

1import {
2  copyrights,
3  placeById,
4} from "@tomtom-international/web-sdk-services/esm"
5

6copyrights({
7  key: "<your api key>",
8})
9  .then(function (results) {
10    console.log("Copyrights", results)
11  })
12  .catch(function (reason) {
13    console.log("Copyrights", reason)
14  })
15

16placeById({
17  key: "<your api key>",
18})
19  .then(function (result) {
20    console.log("Place by Id", result)
21  })
22  .catch(function (reason) {
23    console.log("Copyrights", reason)
24  })

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  .then(function (results) {
8    console.log("Copyrights", results)
9  })
10  .catch(function (reason) {
11    console.log("Copyrights", reason)
12  })

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:

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

Services:

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

1<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/3.1.12/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/3.1.12/SearchBox.css"
6/>
Pan controls

NPM

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

CDN

1<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/PanControls/2.1.6/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/2.1.6/PanControls.css"
6/>
Zoom controls

NPM

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

CDN

1<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/ZoomControls/2.1.6/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/2.1.6/ZoomControls.css"
6/>
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/2.1.6/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/2.1.6/Minimap.css"
6/>
Drawing tools

NPM

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

CDN

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

Older Versions

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

Version: 6.18.0

Version: 6.17.0

Version: 6.15.0

Version: 6.14.0

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!