Maps SDK for Web

Add plugin to the map.

Adds a style layer to the map's style. A layer defines styling for data from a specified source.

Adds a source to the map's style.

Adds a tier.

Returns a Boolean indicating whether all tiles in the viewport from all sources on the style are loaded.

Changes any combination of center, zoom, bearing, and pitch, with an animated transition between old and new values. The map will retain its current values for any details not specified in options.

Pans and zooms the map to contain its visible area within the specified geographical bounds. This function will also reset the map's bearing to 0 if the bearing is nonzero.

var bounds = [[-10, 52], [10, 55]];
tt.map.fitBounds(bounds, {
 padding: { top: 10, bottom:25, left: 15, right: 5 }
 maxZoom: 12
});

Changes any combination of center, zoom, bearing, and pitch, animating the transition along a curve that evokes flight. The animation seamlessly incorporates zooming and panning to help users maintain their bearings even after traversing a great distance.

Returns a TomTomAttributionControl instance.

Returns the map's current bearing. The bearing is the compass direction that is "up"; for example, a bearing of 90° orients the map so that east is up.

Returns the map's geographical bounds. When the bearing or pitch is non-zero, the visible region is not an axis-aligned rectangle, and the result is the smallest bounds that encompasses the visible region.

Returns the map's <canvas> element.

Returns the HTML element containing the map's <canvas> element. If you want to add non-GL overlays to the map, you should append them to this element. This is the element to which event bindings for map interactivity (such as panning and zooming) are attached. It will receive bubbled events from child elements such as the <canvas>, but not from map controls.

The map's geographical centerpoint.

Returns the map's containing HTML element.

Returns the filter applied to the specified style layer.

This method returns a geopolitical view set.

This method returns a language set.

Returns the layer with the specified ID in the map's style.

Returns the value of a layout property in the specified style layer.

Returns the maximum geographical bounds the map is constrained to, or null if none set.

Returns the map's maximum allowable zoom level.

Returns the map's minimum allowable zoom level.

Returns the value of a paint property in the specified style layer.

Returns the map's current pitch (tilt).

Returns the source with the specified ID in the map's style.

Returns the map's style object which can be used to recreate the map's style.

Returns the map's current zoom level.

Returns true if the map is panning, zooming, rotating, or pitching due to a camera animation or user gesture.

Returns true if the map is rotating due to a camera animation or user gesture.

Returns a Boolean indicating whether the source is loaded.

Returns a Boolean indicating whether the map's style is fully loaded.

Returns true if the map is zooming due to a camera animation or user gesture.

Changes any combination of center, zoom, bearing, and pitch, without an animated transition. The map will retain its current values for any details not specified in options.

Returns a Boolean indicating whether the map is fully loaded. Returns false if the style is not yet fully loaded, or if there has been a change to the sources or style that has not yet fully loaded.

Moves a layer to a different z-position.

Removes an event listener previously added with Map.on.

Adds a listener for events of a specified type.

Adds a listener that will be called only once to a specified event type. The listener will be called the first time the event fires after the listener is registered.

Pans the map to the specified location with an animated transition.

Returns a Point representing pixel coordinates, relative to the map's container that correspond to the specified geographical location.

Clean up and release all internal resources associated with this map. This includes DOM elements, event bindings, Web Workers, and WebGL resources. Use this method when you are done using the map and wish to ensure that it no longer consumes browser resources. Afterwards, you must not call any other methods on the map.

Removes the plugin from the map.

Removes the layer with the given id from the map's style. If no such layer exists, an error event is fired.

Removes a source from the map's style.

Removes a tier.

Resizes the map according to the dimensions of its container element. This method must be called after the map's container is resized by another script or when the map is shown after being initially hidden with CSS.

Rotates the map to the specified bearing with an animated transition. The bearing is the compass direction that is "up"; for example, a bearing of 90° orients the map so that East is up.

var bounds = [[-10, 52], [10, 55]];
tt.map.rotateTo(30, {
 duration: 5000,
 easing: function(t) { return t; }
 offset: [0, 50],
 animate: true
});

Sets the map's bearing (rotation). The bearing is the compass direction that is "up"; for example, a bearing of 90° orients the map so that East is up. Equivalent to jumpTo({bearing: bearing}).

Sets the map's geographical centerpoint. Equivalent to jumpTo({center: center}).

Sets the filter for the specified style layer.

map.setFilter('my-layer', ['==', 'name', 'USA']);

This method sets a geopolitical view for a given map. This setting will only affect map tiles and not other services, e.g., search. Providing an empty string ('') as an input value will unset this option. Supported geopolitical views can be obtained from here.

This method sets a language for a given map. This setting will affect only map tiles and not other services, e.g., search. Providing an empty string ('') as an input value will unset this option. Supported languages can be obtained from the list of: Supported Languages page.

The ID of the layer to which the zoom extent will be applied.

map.setLayerZoomRange('my-layer', 2, 5);

Sets the value of a layout property in the specified style layer.

Sets or clears the map's geographical bounds. Pan and zoom operations are constrained within these bounds. If a pan or zoom is performed that would display regions outside of these bounds, the map will instead display a position and zoom level as close as possible to the operation's request while still remaining within the bounds.

Sets or clears the map's maximum zoom level. If the map's current zoom level is higher than the new maximum, the map will zoom to the new maximum.

Sets or clears the map's minimum zoom level. If the map's current zoom level is lower than the new minimum, the map will zoom to the new minimum.

Sets the value of a paint property in the specified style layer.

Sets the map's pitch (tilt). Equivalent to jumpTo({pitch: pitch}).

Updates the map's style object with a new value. If a style already is set and options.diff is true, this compares the style against the map's current state and only performs the changes necessary to make the map style match the desired state.

Sets the map's zoom level. Equivalent to jumpTo({zoom: zoom}).

Stops any animated transition underway.

Trigger the rendering of a single frame. Use this method with custom layers to repaint the map when the layer changes. Calling this multiple times before the next frame is rendered will still result in only a single frame being rendered.

Returns a LngLat representing geographical coordinates that correspond to the specified pixel coordinates.

Zooms the map to the specified zoom level with an animated transition.