About Maps SDK for JavaScript

We have released some capabilities in the Maps SDK under Public Preview to collect feedback from the community. While our goal is to keep the design of the interface stable, breaking changes will occur, particularly in the earlier versions. The versions will follow a 0.MAJOR.MINOR pattern for the time being. Keep an eye on our release CHANGELOG.md files.

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

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

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

new TomTomMap({
    mapLibre: {
        container: 'map',
        center: [4.8156, 52.4414],
        zoom: 8,
    },
});

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.

Before you ship, decide where this key will live. Anyone who opens the page can read a key you use from the browser, but not one you use from Node.js. Where your API key runs covers both cases.

2. Install the SDK:

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

# pnpm does not, unless you ask it to
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