Maps SDK for Web

Class L.TomTomVectorLayer

Tile layer for Leaflet that use the Maps API - Vector from TomTom.

The current vector renderer implementation is based on the Mapbox GL JS library.

The recommended way to use vector maps is by using the "source" option of L.Map which will create an instance of this class and immediately attach it to the newly created map instance.


L.TomTomVectorLayer([options], [options.vector.key] API key that can be obtained from [TomTom's developer portal], [options.language] Language to be used for map labels. Should be one of supported IETF language tags described [here])

Name Description Required Type/Values Default
options It accepts all the options that Leaflet's TileLayer allows. The additional options, which are TomTom specific, are described below. No Object None The base map style to use No "main" | "night" "main"
options.layer The base map's layer to use No "basic" | "hybrid" | "labels" "basic"
options.vector Options specific for vector layer No Object None
options.vector.renderer Mapbox GL JS Map options as described in the Mapbox API Docs No Object None
options.vector.fallback Defines the action when the browser doesn't have support for WebGL (needed by the vector layer). The possible values are: - "error" will throw a javascript Error informing about the problem. - "raster" will automatically switch to the raster layer. No "error" | "raster" "error"
[options.vector.key] API key that can be obtained from [TomTom's developer portal] ( When the key is passed on the map's initialization, it is set globally for all the services. It can be overwritten with the tomtom.key() method globally or per service with tomtom.<service_name>.key() functions. It is also possible to pass a specific key while working with instances of the services. Yes String None
[options.language] Language to be used for map labels. Should be one of supported IETF language tags described [here] ( When data in specified language is not available for a specific label, default language is used. Yes String None
// Vector layer instance with factory vector styles
var vectorLayer = new L.TomTomVectorLayer({
  vector: {
    key: "<Your API key>"


name: String

Default: "vector"

Name of vector layer. It can be used to differentiate layers.


getStyle( ): Object

Returns the vector style object currently applied to the vector layer.


A object with the current style or undefined if no style was applied yet.


Sets the style for the vector layer.

It expects an object formatted in compliance with the Mapbox style specification.

Name Description Required Type/Values Default
style object which will be applied to vectorLayer Yes Object None


All the class events are keys of the Events static member.

To learn more about how to listen events please refer to this documentation.

MAP_ERROR : String

Fired when an error occurs during the initialization of the vector layer.


Fired immediately after the style was fully loaded.