About Maps SDK for JavaScript

The map above is the default map example, and this is its code:

1
import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
2
import { TomTomMap } from '@tomtom-org/maps-sdk/map';
3

4
TomTomConfig.instance.put({ apiKey: 'YOUR_API_KEY', language: 'en-GB' });
5

6
new TomTomMap({
7
    mapLibre: {
8
        container: 'map',
9
        center: [4.8156, 52.4414],
10
        zoom: 8,
11
    },
12
});

container is the id of the page element the map fills, so give that element a height.

Quickstart

1. Get your TomTom API key:

• Sign up or log in at my.tomtom.com.

• Create an API key by following these instructions.

2. Install the SDK:

1
# npm and Yarn install the peer dependencies for you
2
npm install @tomtom-org/maps-sdk
3

4
# pnpm does not, unless you ask it to
5
echo "auto-install-peers=true" >> .npmrc && pnpm add @tomtom-org/maps-sdk

3. Start building:

• Follow the Map quickstart to display your first map.
• Or follow the Services quickstart to call search, geocoding or routing.
• Or start from a runnable app in the examples gallery.
• Using an AI coding agent? Install the tomtom-maps-sdk-js skill first.

Project setup has the requirements, peer dependencies and framework setups.

For AI agents, project setup and the quickstarts are also published as Markdown: project setup, and the map, services and core quickstarts.

Overview

Maps SDK for JavaScript is a JavaScript/TypeScript library for building applications with TomTom maps and location APIs.

It’s built on MapLibre GL JS and GeoJSON, so TomTom maps and services work together out of the box. The MapLibre map stays fully exposed, and its API and plugin ecosystem work alongside the SDK.

Key features

• Interactive maps: TomTom styles on MapLibre, with modules for places, routes, traffic and your own data
• Location services: search, geocoding, routing, reachable ranges and traffic
• GeoJSON throughout: a service result goes straight into a map module
• TypeScript: complete type definitions ship with the package
• Tree-shakable: your bundle carries only what you import

Bundles

How the SDK works shows how the three fit together.

Next steps

• Project setup
• How the SDK works
• API reference, every exported symbol with its signature and types