Maps SDK for JavaScript

https://docs.tomtom.com/maps-sdk-js
Admin
Maps SDK for JavaScript is a JavaScript/TypeScript library that integrates TomTom map display and...
Tokens:687,812
Snippets:6,190
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### get example

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/classes/map.StylingFoundationsModule.html

Shows how to retrieve the styling foundations module for a map, applying initial knob settings. Returns a promise that resolves once the map style is loaded and settings are applied.

```javascript
const styling = await StylingFoundationsModule.get(map, { 'labels.sizeFactor': 1.2 });
```

--------------------------------

### Install SDK with pnpm (automatic peer dependencies)

Source: https://docs.tomtom.com/maps-sdk-js/introduction/project-setup

Enable automatic peer dependency installation in pnpm and then install the SDK.

```bash
# Enable automatic peer dependency installation (one-time setup)
echo "auto-install-peers=true" >> .npmrc

# Now install the SDK - peer dependencies install automatically
pnpm install @tomtom-org/maps-sdk
```

--------------------------------

### Manual peer dependency installation with pnpm

Source: https://docs.tomtom.com/maps-sdk-js/introduction/project-setup

Install the SDK and manually install required peer dependencies when not using automatic installation.

```bash
# Install the SDK
pnpm install @tomtom-org/maps-sdk

# Manually install required peer dependencies
pnpm install @turf/turf culori lodash-es maplibre-gl zod
```

--------------------------------

### Install SDK with npm or Yarn (automatic peer dependencies)

Source: https://docs.tomtom.com/maps-sdk-js/introduction/project-setup

Install the SDK using npm or Yarn, which automatically install peer dependencies.

```bash
npm install @tomtom-org/maps-sdk
# or
yarn add @tomtom-org/maps-sdk
```

--------------------------------

### Complete configuration example

Source: https://docs.tomtom.com/maps-sdk-js/introduction/project-setup

Configure API key, language, and display units for distance and time labels.

```javascript
TomTomConfig.instance.put({
    apiKey: process.env.TOMTOM_API_KEY,
    language: 'en-GB',
    displayUnits: {
        distance: {
            type: 'metric',
            kilometers: 'km',
            meters: 'm'
        },
        time: {
            hours: 'h',
            minutes: 'min'
        }
    }
});
```

--------------------------------

### WaypointDisplayProps stopDisplayIndex property examples

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/map.WaypointDisplayProps.html

Shows example values for the stopDisplayIndex property. Stops are numbered starting from 1, and the property is undefined for start and finish waypoints.

```typescript
stopDisplayIndex: 1  // First intermediate stop  
stopDisplayIndex: 2  // Second intermediate stop  
stopDisplayIndex: undefined  // Start or finish waypoint
```

--------------------------------

### WaypointDisplayProps usage example for start, stop, and finish waypoints

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/map.WaypointDisplayProps.html

Shows example WaypointDisplayProps objects for start, middle, and finish waypoints, illustrating how the properties are used together.

```typescript
// Start waypoint  
const start: WaypointDisplayProps = {  
  id: 'waypoint-0',  
  iconID: 'waypoint-start',  
  index: 0,  
  indexType: 'start',  
  title: 'Amsterdam Central Station'  
};  
  
// Intermediate stop  
const stop: WaypointDisplayProps = {  
  id: 'waypoint-1',  
  iconID: 'waypoint-stop',  
  index: 1,  
  indexType: 'middle',  
  stopDisplayIndex: 1,  
  title: 'Schiphol Airport'  
};  
  
// Destination  
const finish: WaypointDisplayProps = {  
  id: 'waypoint-2',  
  iconID: 'waypoint-finish',  
  index: 2,  
  indexType: 'finish',  
  title: 'Rotterdam Central Station'  
};
```

--------------------------------

### Route fly-over playground: index.ts setup and imports

Source: https://docs.tomtom.com/maps-sdk-js/examples/route-flyover-playground

Initializes the TomTom map with an API key and language, defines constants for the route and depth-of-field effect, and starts an async IIFE that queries the origin input element. The code is the opening portion of the index.ts example file.

```typescript
import type { Place, Route } from '@tomtom-org/maps-sdk/core';
import { bboxFromGeoJSON, formatDistance, formatDuration, TomTomConfig } from '@tomtom-org/maps-sdk/core';
import {
RoutingModule,
StylingFoundationsModule,
setKnob,
TerrainModule,
TomTomMap,
terrainKnobCatalogue,
} from '@tomtom-org/maps-sdk/map';
import type { RouteType } from '@tomtom-org/maps-sdk/services';
import { calculateRoute, createLatestRequest, geocodeOne } from '@tomtom-org/maps-sdk/services';
import type { FlyoverAim, FlyoverProgress, FlyoverZoom } from '@tomtom-org/maps-sdk-plugin-flyover';
import { anchorForPitch, RouteFlyover } from '@tomtom-org/maps-sdk-plugin-flyover';
import { MapEffects } from '@tomtom-org/maps-sdk-plugin-map-effects';
import './style.css';
import { API_KEY } from './config';
import { initPlaceSearchBox } from './placeSearchBox';
import { initTogglePanel } from './togglePanel';
  

// (Set your own API key when working in your own environment)
TomTomConfig.instance.put({ apiKey: API_KEY, language: 'en-GB' });
  

// The Grand St Bernard pass: two valley towns 80 km apart, with 2,400 metres of climb in between.
const INITIAL_ORIGIN = 'Martigny, Switzerland';
const INITIAL_DESTINATION = 'Aosta, Italy';
  

// `formatDuration` reports nothing under half a minute, which the readout still has to fill.
const durationLabel = (seconds: number) => formatDuration(seconds) ?? '0 min';
  

// A shallow field: a thin band around the marker stays sharp, the tarmac rushing past and the ridges
// beyond it soften hard, and lights out of focus open into discs.
const DEPTH_OF_FIELD = { 'depthOfField.intensity': 20, 'depthOfField.band': 0.08, 'depthOfField.bokeh': 1 } as const;
  

(async () => {
const originInput = document.querySelector('#ui-origin') as HTMLInputElement;
```

--------------------------------

### Example of show usage

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/map.PutEventStateOptions.html

Shows how to use show: true for immediate rendering and show: false for batch operations.

```plaintext
// Update and render immediately  
show: true  
  
// Update without rendering (for batch operations)  
show: false
```

--------------------------------

### WaypointDisplayProps index property examples

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/map.WaypointDisplayProps.html

Shows example values for the index property, which is a zero-based index of the waypoint in the complete waypoints array, including start, all stops, and finish.

```typescript
index: 0  // First waypoint (start)  
index: 1  // Second waypoint (first stop or finish)  
index: 2  // Third waypoint
```

--------------------------------

### getShown example

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/classes/map.ReachableRangesModule.html

Gets the currently shown polygons and labels, then logs the number of polygons.

```javascript
const shown = module.getShown();  
console.log(`Polygons: ${shown.geometry.features.length}`);
```

--------------------------------

### Initialize SDK with API key

Source: https://docs.tomtom.com/maps-sdk-js/guides/services/routing/quickstart

Configures the SDK with your API key. Replace 'YOUR_API_KEY' with your actual key.

```javascript
import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { calculateRoute } from '@tomtom-org/maps-sdk/services';


TomTomConfig.instance.put({
    apiKey: 'YOUR_API_KEY'
});
```

--------------------------------

### Install fly-over plugin dependencies

Source: https://docs.tomtom.com/maps-sdk-js/guides/plugins/flyover

Install the Maps SDK, MapLibre GL, and the fly-over plugin.

```bash
npm install @tomtom-org/maps-sdk maplibre-gl @tomtom-org/maps-sdk-plugin-flyover
```

--------------------------------

### getLayerIds example

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/classes/map.BaseMapModule.html

Gets the layer ids for a given base-map layer group, e.g., 'buildings3D'.

```javascript
baseMap.getLayerIds('buildings3D'); // ['3D - Building', …]
Copy
```

--------------------------------

### TrafficAreaAnalyticsModule Class

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/classes/map.TrafficAreaAnalyticsModule.html

Class documentation for TrafficAreaAnalyticsModule, including quick start example and list of accessors and methods.

```APIDOC
## Class TrafficAreaAnalyticsModule

### Description
Traffic Area Analytics visualization module. Renders area-analytics data on the map in one of five modes: hexgrid-3d, hexgrid-2d, square-3d, square-2d, or heatmap. The actual region boundary is always rendered alongside the analytics cells.

### Quick Start
```javascript
import { TrafficAreaAnalyticsModule } from '@tomtom-org/maps-sdk/map';
import { trafficAreaAnalytics } from '@tomtom-org/maps-sdk/services';

const module = await TrafficAreaAnalyticsModule.create(map, {
  displayMode: 'hexgrid-3d',
  activeMetric: 'congestionLevel',
});
const analytics = await trafficAreaAnalytics({ ... });
await module.show(analytics);
```

### Hierarchy
- AbstractDataOwnedMapModule<AreaAnalyticsSourcesWithLayers, TrafficAreaAnalyticsModuleConfig>
  - TrafficAreaAnalyticsModule

### Accessors
- events
- sourceAndLayerIDs

### Methods
- applyConfig
- cleanEventState
- cleanEventStates
- clear
- getConfig
- getEventStates
- getShown
- isVisible
- putEventState
- resetConfig
- setColorStops
- setFilters
- setHeight
- setPalette
- setVisible
- show
- updateConfig
- waitUntilModuleReady
- create
```

--------------------------------

### Install main TomTom Maps SDK package

Source: https://docs.tomtom.com/maps-sdk-js/introduction/project-setup

Install the core @tomtom-org/maps-sdk package.

```bash
npm install @tomtom-org/maps-sdk
```

--------------------------------

### getEventStates example

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/classes/map.ReachableRangesModule.html

Retrieves event state ids by state, e.g., to get the clicked feature or check if a feature is hovered.

```javascript
// Keep a list in sync with the selected feature  
const { click: [selectedID] = [] } = module.getEventStates();  
  
// Is this feature hovered?  
const hovered = module.getEventStates().hover?.includes(feature.id) ?? false;
```

--------------------------------

### Get POI category codes with getPOICategoryCodes and use in discoverPlaces

Source: https://docs.tomtom.com/maps-sdk-js/guides/services/places/poi-categories

Shows how to get only POI category codes, optionally filtered by keyword, and pass them directly to discoverPlaces. The example uses a geoBias position and expects codes like ['RESTAURANT', 'RESTAURANT_AREA'].

```javascript
import { getPOICategoryCodes } from '@tomtom-org/maps-sdk/services';

// All codes
const all = await getPOICategoryCodes();

// Codes matching a keyword, best match first
const restaurantCodes = await getPOICategoryCodes({ filters: ['restaurant'] });
// e.g. ['RESTAURANT', 'RESTAURANT_AREA']

// Pass directly to search
const results = await discoverPlaces({
    filters: { poiCategories: restaurantCodes },
    geoBias: { position: [4.9041, 52.3676] },
});
```

--------------------------------

### Basic setup with TomTomConfig

Source: https://docs.tomtom.com/maps-sdk-js/guides/services/places/quickstart

Imports the required modules and configures the API key using TomTomConfig.instance.put(). Replace 'YOUR_API_KEY' with your actual key.

```typescript
import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { discoverPlaces, geocode, reverseGeocode } from '@tomtom-org/maps-sdk/services';

TomTomConfig.instance.put({
    apiKey: 'YOUR_API_KEY'
});
```

--------------------------------

### WaypointIconConfig example

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/map.WaypointIconConfig.html

Example configuration for waypoint icons, setting a white outline for all pins, a green fill for the start pin, a custom flag image for the finish pin, and mapping stops with a 'poiCategory' to use the map's charging station icon.

```typescript
const icon: WaypointIconConfig = {  
  style: { outlineColor: '#FFFFFF' },  
  start: { style: { fillColor: '#1B7A43' } },  
  finish: { image: { image: '/flag.svg', pixelRatio: 2 } },  
  // Stops that are charging stations look like the map's charging stations:  
  mapping: { to: 'poiCategory', fn: (waypoint) => waypoint.properties.poi?.categories?.[0] },  
};
```

--------------------------------

### Heading values example

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/services.GenericVehicleState.html

Shows valid heading values in degrees, starting from true North and continuing clockwise. Allowed values are 0-359.

```typescript
heading: 0    // Facing north  
heading: 90   // Facing east  
heading: 180  // Facing south  
heading: 270  // Facing west  
heading: 45   // Facing northeast
```

--------------------------------

### Example of mode usage

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/map.PutEventStateOptions.html

Shows how to use mode: 'put' for exclusive selection and mode: 'add' for multiple selection.

```plaintext
// Exclusive selection (only one can be clicked at a time)  
mode: 'put'  
  
// Multiple selection (keep existing selections)  
mode: 'add'
```

--------------------------------

### Install Map Theme plugin

Source: https://docs.tomtom.com/maps-sdk-js/guides/plugins/map-theme

Installs the Maps SDK, MapLibre GL, and the Map Theme plugin. The Maps SDK and culori are peer dependencies.

```bash
npm install @tomtom-org/maps-sdk maplibre-gl @tomtom-org/maps-sdk-plugin-map-theme
```

--------------------------------

### getRouteProgressForSection usage example

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/functions/core.getRouteProgressForSection.html

Use when you have a route and a section object and need to log the section's start distance, end distance, length, and travel time. The result may be undefined if either index cannot be interpolated, so the example checks the result before accessing its properties.

```javascript
const section = route.properties.sections.countries[0];  
const result = getRouteProgressForSection(route, section);  
if (result) {  
  console.log(`Section starts ${result.start.distanceInMeters} m from route origin`);  
  console.log(`Section ends   ${result.end.distanceInMeters} m from route origin`);  
  console.log(`Section length ${result.delta.distanceInMeters} m`);  
  console.log(`Section takes  ${result.delta.travelTimeInSeconds} s`);  
}
```

--------------------------------

### ArrivalSide example: 'curb'

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/services.ArrivalSide.html

Shows how to set the arrival side to 'curb' for a route stop.

```typescript
const arrivalSide: ArrivalSide = 'curb';
```

--------------------------------

### GeometryLineConfig example

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/map.GeometryLineConfig.html

Shows two ways to define a GeometryLineConfig: with static values and with data-driven MapLibre expressions. The first uses a hex color, width, and opacity; the second uses expressions like ['get', 'borderColor'] and ['case', ['get', 'selected'], 4, 2].

```typescript
// Curated fields  
const line: GeometryLineConfig = { color: '#333333', width: 2, opacity: 0.8 };  
  
// Data-driven border  
const line: GeometryLineConfig = {  
  color: ['get', 'borderColor'],  
  width: ['case', ['get', 'selected'], 4, 2],  
};
```

--------------------------------

### Initialize map and show triangle grid

Source: https://docs.tomtom.com/maps-sdk-js/examples/feature-event-states

Sets up the map and the CustomGeoJSONModule with triangle layers, then shows the triangle grid. Requires an API key in './config' and the imported helper modules.

```TypeScript
import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { CustomGeoJSONModule, TomTomMap } from '@tomtom-org/maps-sdk/map';
import './style.css';
import { API_KEY } from './config';
import { triangleLayers } from './layers';
import { paintLegend } from './legend';
import { initTimingSliders } from './timings';
import { triangleGrid } from './triangles';
  

// (Set your own API key when working in your own environment)
TomTomConfig.instance.put({ apiKey: API_KEY, language: 'en-GB' });
  

const center: [number, number] = [4.8952, 52.3702];
const columns = 13;
const rows = 5;
  

const map = new TomTomMap({
mapLibre: {
container: 'sdk-map',
center,
zoom: 14,
// The arrow keys move the clicked triangle instead of the map
keyboard: false,
},
});
  

paintLegend();
initTimingSliders(map);
  

(async () => {
const triangles = await CustomGeoJSONModule.create(map, {
sources: { triangles: { layers: triangleLayers } },
});
  

await triangles.show(triangleGrid(center, columns, rows, 450), 'triangles');
  

```

--------------------------------

### Example: Creating TrafficIncidentDetailsByPolygonParams

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/services.TrafficIncidentDetailsByPolygonParams.html

Shows how to construct a TrafficIncidentDetailsByPolygonParams object using geocodeOne and geometryData to get a polygon for a place. The polygon is passed as the result of geometryData.

```typescript
const place = await geocodeOne('Amsterdam');  
const params: TrafficIncidentDetailsByPolygonParams = {  
  polygon: await geometryData({ geometries: [place] })  
};
```

--------------------------------

### Configure Landmarks3D options

Source: https://docs.tomtom.com/maps-sdk-js/guides/plugins/landmarks-3d

Initialize the plugin with configuration options: displayMode, visible, and minZoom.

```javascript
const landmarks = new Landmarks3D(map, {
  displayMode: 'inherited',
  visible: true,
  minZoom: 10,
});
```

--------------------------------

### Invoke the tomtom-maps-sdk-js skill with a topic

Source: https://docs.tomtom.com/maps-sdk-js/introduction/ai

Invokes the installed skill with a topic to load SDK-specific knowledge into the coding agent. Examples include map-setup, routing, and traffic.

```text
/tomtom-maps-sdk-js map-setup
/tomtom-maps-sdk-js routing
/tomtom-maps-sdk-js traffic
```

--------------------------------

### TrafficIncidentDetailsByIdsParams example

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/services.TrafficIncidentDetailsByIdsParams.html

Shows how to construct TrafficIncidentDetailsByIdsParams for fetching incidents by IDs. The HTTP method is chosen automatically: GET for up to 5 IDs, POST for more (maximum 100).

```typescript
// Up to 5 IDs — sent as GET  
const params: TrafficIncidentDetailsByIdsParams = {  
  ids: ['incident-id-1', 'incident-id-2']  
};  
  
// More than 5 IDs — sent as POST automatically  
const params: TrafficIncidentDetailsByIdsParams = {  
  ids: manyIds  
};
```

--------------------------------

### Create PlacesModule with entryPoints configuration

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/map.PlaceEntryPointsConfig.html

Configures entry points to show for clicked places with a minimum zoom of 16, and adds a click event listener to log the place title.

```javascript
const places = await PlacesModule.create(map, {  
  entryPoints: { showFor: 'clicked', minZoom: 16 }  
});  
// The handler is what makes places clickable, and so what lets them reach the `click` state.  
places.events.on('click', (feature) => console.log(feature.properties.title));
```

--------------------------------

### Example guidance

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/services.CalculateRouteParams.html

Example of requesting turn-by-turn guidance instructions with type 'coded'.

```typescript
guidance: { type: 'coded' }
```

--------------------------------

### Install the tomtom-maps-sdk-js skill with npx

Source: https://docs.tomtom.com/maps-sdk-js/guides/ai-coding

Run this command once in your project root to install the tomtom-maps-sdk-js skill. It writes the skill files into .claude/skills/ (or the equivalent directory for your agent). Commit the result so the whole team benefits.

```bash
npx skills add tomtom-international/maps-sdk-js --skill tomtom-maps-sdk-js
```

--------------------------------

### Filter baseMapKnobCatalogue for group toggles

Source: https://docs.tomtom.com/maps-sdk-js/guides/map/base-map

Imports baseMapKnobCatalogue from '@tomtom-org/maps-sdk/map' and filters entries whose id starts with 'groups.' to get layer group visibility toggles. The result is an array of objects with id, kind, and description.

```javascript
import { baseMapKnobCatalogue } from '@tomtom-org/maps-sdk/map';

const groupToggles = baseMapKnobCatalogue.filter(({ id }) => id.startsWith('groups.'));
// [{ id: 'groups.land.visible', kind: 'toggle', description: 'The `land` layer group: …' }, …]
```

--------------------------------

### Fetch traffic incident details with geocodeOne and trafficIncidentDetails

Source: https://docs.tomtom.com/maps-sdk-js/examples/nodejs-traffic-incident-details

Server-side NodeJS example that geocodes a city name and retrieves current traffic incidents within its bounding box. Uses geocodeOne to get a single feature, passes it directly as bbox to trafficIncidentDetails, and filters by timeValidityFilter ['present'] to get live incidents. Prints the number of incidents and each incident's properties as formatted JSON.

```javascript
import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { geocodeOne, trafficIncidentDetails } from '@tomtom-org/maps-sdk/services';
import { API_KEY } from './config';
  

TomTomConfig.instance.put({ apiKey: API_KEY });
  

(async () => {
const place = await geocodeOne('Amsterdam');
  

const result = await trafficIncidentDetails({
bbox: place,
timeValidityFilter: ['present'],
});
  

console.log(`Found ${result.features.length} incident(s)\n`);
  

for (const incident of result.features) {
console.log(JSON.stringify(incident.properties, null, 4));
}
})();
  
```

--------------------------------

### ChargingPaymentOption example with Direct and Subscription methods

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/types/core.ChargingPaymentOption.html

Shows two example configurations: one for credit card payment with specific brands (Visa, Mastercard, American Express) and one for subscription-based payment with charging network brands (ChargePoint, EVgo). The type definition is also shown.

```typescript
// Credit card payment with specific brands  
const paymentOption: ChargingPaymentOption = {  
  method: 'Direct',  
  brands: ['Visa', 'Mastercard', 'American Express']  
};  
  
// Subscription-based payment  
const subscriptionOption: ChargingPaymentOption = {  
  method: 'Subscription',  
  brands: ['ChargePoint', 'EVgo']  
};
```

```typescript
type ChargingPaymentOption = {  
brands?: string[];  
method: PaymentMethod;  
}
```

--------------------------------

### index.ts: Setup map, route, and along-route search

Source: https://docs.tomtom.com/maps-sdk-js/examples/along-route-search-playground

Imports SDK modules, configures API key, geocodes waypoints, creates a map with fitted bounds, calculates and shows a route, and sets up the search panel. The search switches to along-route mode when a route is passed.

```TypeScript
import { BBox, bboxFromGeoJSON, TomTomConfig, type Waypoint } from '@tomtom-org/maps-sdk/core';
import { calculateFittingBBox, PlacesModule, RoutingModule, TomTomMap } from '@tomtom-org/maps-sdk/map';
import { calculateRoute, createLatestRequest, discoverPlaces, geocodeOne } from '@tomtom-org/maps-sdk/services';
import './style.css';
import { API_KEY } from './config';
import { SearchPanelParams, setupPanel } from './panel';
import { initTogglePanel } from './togglePanel';
  

// (Set your own API key when working in your own environment)
TomTomConfig.instance.put({ apiKey: API_KEY, language: 'en-US' });
  

(async () => {
const waypoints: Waypoint[] = await Promise.all(['Half Moon Bay', 'Santa Cruz'].map(geocodeOne));
const waypointsBBox = bboxFromGeoJSON(waypoints) as BBox;
  

const map = new TomTomMap({
mapLibre: {
container: 'sdk-map',
bounds: waypointsBBox,
},
});
  

map.mapLibreMap.fitBounds(
calculateFittingBBox({
map,
toContainedBBox: waypointsBBox,
surroundingElements: ['.ui-customPanel'],
paddingPX: 40,
}) as BBox,
);
  

const routingModule = await RoutingModule.create(map);
await routingModule.showWaypoints(waypoints);
const routes = await calculateRoute({ locations: waypoints });
await routingModule.showRoutes(routes);
  

```

--------------------------------

### Access source and layer IDs with sourceAndLayerIDs

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/classes/map.GeometriesModule.html

Use the sourceAndLayerIDs accessor to get MapLibre source and layer IDs for direct manipulation. The example logs the IDs and uses them to set layer visibility via the MapLibre API.

```javascript
const ids = myModule.sourceAndLayerIDs;  
console.log(ids);  
// {  
//   mySource: {  
//     sourceID: 'my-source-id',  
//     layerIDs: ['layer-1', 'layer-2']  
//   }  
// }  
  
// Use with MapLibre API  
const map = myModule.mapLibreMap;  
ids.mySource.layerIDs.forEach(layerId => {  
  map.setLayoutProperty(layerId, 'visibility', 'visible');  
});
Copy

```

--------------------------------

### Install the new SDK with npm

Source: https://docs.tomtom.com/maps-sdk-js/guides/migration/v6-to-new-sdk

Removes the legacy V6 packages and installs the new SDK. Peer dependencies are installed automatically. Existing TomTom API keys continue to work with the new SDK.

```bash
# Remove legacy packages
npm uninstall @tomtom-international/web-sdk-maps @tomtom-international/web-sdk-services

# Install new SDK (peer dependencies installed automatically)
npm install @tomtom-org/maps-sdk
```

--------------------------------

### Create and show TrafficAreaAnalyticsModule

Source: https://docs.tomtom.com/maps-sdk-js/api-reference/classes/map.TrafficAreaAnalyticsModule.html

Quick start example for creating a TrafficAreaAnalyticsModule instance and showing analytics data. Imports the module and service, creates the module with a display mode and active metric, fetches analytics data, and displays it on the map.

```javascript
import { TrafficAreaAnalyticsModule } from '@tomtom-org/maps-sdk/map';  
import { trafficAreaAnalytics } from '@tomtom-org/maps-sdk/services';  
  
const module = await TrafficAreaAnalyticsModule.create(map, {  
  displayMode: 'hexgrid-3d',  
  activeMetric: 'congestionLevel',  
});  
const analytics = await trafficAreaAnalytics({ ... });  
await module.show(analytics);
```

--------------------------------

### Install Agent Toolkit and AI SDK packages

Source: https://docs.tomtom.com/maps-sdk-js/guides/plugins/agent-toolkit/overview

Install the plugin and the AI SDK packages. The plugin requires @tomtom-org/maps-sdk as a peer dependency. Choose the appropriate AI provider package (e.g., @ai-sdk/openai, @ai-sdk/anthropic, @ai-sdk/azure).

```bash
npm install @tomtom-org/maps-sdk-plugin-agent-toolkit
npm install ai @ai-sdk/react @ai-sdk/openai   # or @ai-sdk/anthropic, @ai-sdk/azure, etc.

```
Tokens:
Raw