Map quickstart

This guide will help you set up your project and visualize your first TomTom map in just a few minutes. You'll learn the minimal steps needed to install the SDK, configure your API key, and display an interactive map on your webpage.

Prerequisites and Setup

Before getting started, ensure you have the following requirements:

1. Node.js and npm/pnpm installed for package management (Node.js 22+ recommended)
2. TomTom API key from the TomTom Developer Portal
3. Modern browser with WebGL support for optimal map rendering performance

Installing Dependencies

Follow the complete Project setup guide for detailed installation instructions, or use this quick setup:

# npm or Yarn - automatic peer dependency installation
npm install @tomtom-org/maps-sdk

# pnpm - enable auto-install-peers for easiest setup
echo "auto-install-peers=true" >> .npmrc
pnpm install @tomtom-org/maps-sdk

Peer dependencies (installed automatically with above commands):

• maplibre-gl (v5) - Map rendering engine
• lodash-es (v4) - Utility functions
• zod (v4) - Schema validation
• turf (v7) - Geospatial analysis

Basic HTML Setup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TomTom Map Application</title>
    <style>
        #map { width: 100%; height: 400px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="module" src="./index.ts"></script>
</body>
</html>

Creating Your First Map

Here's a complete example that demonstrates all the essential concepts for creating a TomTom map with various configuration options:

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

// Configure global SDK settings
TomTomConfig.instance.put({
    apiKey: 'YOUR_API_KEY_HERE',
});

const map = new TomTomMap({
    mapLibre: {
        container: 'map'
    }
});

Next Step

Now that you have a basic map running, learn about TomTom Maps configuration and usage patterns in our comprehensive TomTom Maps Introduction guide.