Maps SDK for Web

Class L.Map

extends L.Map (Leaflet's)

This module extends the Leaflet library in order to display a TomTom map.

For a full reference of the Leaflet map API check the official Leaflet's documentation.

We are using leaflet's version 1.3.0.

If you want to use vector source in the map the basePath must be specified. Keep this in mind when you switch from raster to vector source, for example when opening our examples in CodePen, otherwise the map will not render properly.

Example of how to create a basic map instance:

<style type="text/css">
  html, body {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
 }
 #map {
     width: 100%;
     height: 100%;
 }
</style>

<div id="map"></div>

<script>
  var mapInstance = new L.Map("map", {key: "<Your API key>"});
</script>

Constructor

L.Map(id, [options])

Parameters
Name Description Required Type/Values Default
id The div element or its id in which the map will be initialized. Yes HTMLElement | String None
options It accepts all the options that Leaflet's Map class allows. The additional options, which are TomTom specific, are described below. No Object None
options.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. No String None
options.style The base map style to be used. No "main" | "night" "main"
options.layer The base map's layer to be used. No "basic" | "hybrid" | "labels" "basic"
options.geopolView Define the geopolitical view for the new map instance. No "Unified" | "IN" None
options.traffic Allows to easily add the L.TomTomTrafficLayer and L.TomTomTrafficIncidentsLayer layers to the map. A value of this parameter can be set to an options object as described in the traffic layer documentation. If traffic layers are added with this option, a mechanism for periodic refresh of the traffic data is provided (using a proper traffic model id handling). If you pass source parameter set to vector, L.TomTomVectorTrafficIncidentsLayer will be added as a source for incident tiles instead of raster one. No Boolean | Object None
noRefresh Disables periodic updates of traffic layers. No Boolean None
refresh The traffic incidents information changes and needs to be updated periodically. By default, it is refreshed every 30 seconds. This parameter's value represents the time in milliseconds between each update interval. The value must be 0 or greater. No Number 30000
options.trafficFlow Allows to add L.TomTomTrafficFlowLayer to the map. A value of this parameter can be set to the options object as described in the traffic flow layer documentation. If you specify source set to vector as one of the parameters it will add L.TomTomVectorTrafficFlowLayer instead. No Boolean | Object None
options.vectorTrafficFlow Allows to add L.TomTomVectorTrafficFlowLayer to the map. A value of this parameter can be set to the options object as described in the traffic flow layer documentation. No Boolean | Object None
options.noLabelsOnTop If a traffic or traffic flow layer is overlayed on the map, then by default, the labels layer is added on top of these layers. It prevents labels from being covered by the traffic tubes or traffic flow. With this option, it is possible to disable this behaviour. No Boolean false
options.source Sets the initial source and determines which tiles types will be displayed (raster, vector). If an array is given first item is used as a default source and next items are initialized but not displayed. If MapboxGL JS dependency is not met vector layer will not initialize. No String | String[] "raster"
options.glyphsUrl Glyphs are fonts in PBF required to display labels on vector maps. The Url must contain the {fontstack} and {range} tokens. The SDK distributable already contains the glyphs required by the default vector styles - you just need to provide a path to them on your server. Example of a URL format for this property: 
"http://yourdomain/glyphs/{fontstack}/{range}.pbf"
No String None
options.basePath Base path for sdk. It will be used in relative paths - it is especially important for maps with vector sources. E.g if you set this option to "/myPath", default urls for styles will be set to /myPath/styles/basic_main.json. This property is used only if you do not provide custom mapping for given url mapping. No String '/sdk'
options.styleUrlMapping Overrides the default URLs for vector style files. The default value is as follows: 
{
  main: {
     basic: '/sdk/styles/basic_main.json',
     hybrid: '/sdk/styles/hybrid_main.json',
     labels: '/sdk/styles/labels_main.json'
  },
  night: {
     basic: '/sdk/styles/basic_night.json',
     hybrid: '/sdk/styles/hybrid_night.json',
     labels: '/sdk/styles/labels_night.json'
  }
}
No Object None
options.spriteUrl Set the base URL for the sprite image and metadata. The extensions .png, .json and scale factor will be appended at the end of URL automatically. The sprite URL is required to display icons like road shields on vector maps. Example of a URL format for this property: 
"http://yourdomain/sprite/sprite"
No String None
options.zoomControl Show a zoom control at the top left corner of the map. No Boolean true
options.panControl Enable the pan controls at the top left corner of the map. No Boolean false
options.zoomsliderControl Shows a vertical slider to control the zoom level. It is recommended to disable the default zoom control option (zoomControl=false) when you use this feature. No Boolean false
options.worldCopyJump No Boolean true
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. No String None

Methods

getBaseLayers( ): Object

Returns

Returns base layers initialized on map

getGeopolViewService( ): GeopolViewService

Returns the GeopolViewService instance which is bound to the map instance. Please note that if you change the geopolitical view of the global L.GeopolViewService instance this one will be updated too but not way around.

getLocaleService( ): LocaleService

Returns localeService which is bound to this map instance. Please note that if you change value in globalLocaleService this one will be updated too, but not other way around.

Returns

getStaticMapUrl( ): String

Returns an URL string to obtain an static image version of the current map's viewport.

This method uses the StaticMapImage class to generate an URL to get static image based on the configuration of the current map's instance.

Returns

An URL string to the image

getUnitService( ): UnitService

Returns unitService which is bound to this map instance. Please note that if you change the unit of the global UnitService instance this one will be updated too, but not way around.

Returns

setMapSource(source)

Method allows to change a source data for currently shown map. It should be one of sources provided at creation as a property 'options.source'

Parameters
Name Description Required Type/Values Default
source Yes "raster" | "vector" None

updateLayersOptions(options)

Updates options added currently to map (including inactive base layers). Only the update of the options style and layer are supported.

Also allows to update refresh rate option of traffic layers.

Parameters
Name Description Required Type/Values Default
options Options to be updated Yes Object None
options.style The new base map style to use. By default, the current style is used (i.e. no update of this property). No "main" | "night" None
options.layer The new base map layer to use. By default, the current layer is used (i.e. no update of this property). No "basic" | "hybrid" | "labels" None
options.traffic Options used to change refresh rate. Please note that minimal refresh rate is 30000 ms, if you provide lower value it will be defaulted to 30000 ms. Yes Object | Boolean None
options.trafficFlow Options used to change refresh rate. Please note that minimal refresh rate is 30000 ms, if you provide lower value it will be defaulted to 30000 ms. Yes Object None

Events

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

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

ATTRIBUTION_LOAD_END : String

Fired when attribution was fully loaded. Loaded attribution is passed as event data.