Maps SDK for Web

Add plugin to the map.

Add an image to the style. This image can be used in icon-image, background-pattern, fill-pattern, and line-pattern. An Map#error event will be fired if there is not enough space in the sprite to add this image.

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.

Gets the state of a feature. Features are identified by their id attribute, which must be an integer or a string that can be cast to an integer.

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 the source with the specified ID in the map's style.

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 an Array of strings containing the IDs of all images currently available in the map. This includes both images from the style's original sprite and any images that have been added at runtime using map.addImage().

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.

Load an image from an external URL for use with map.addImage(). External domains must support CORS.

Moves a layer to a different z-position.

Removes an event listener previously added with Map.on.

Removes an event listener previously added with Map.on.

Adds a listener for events of a specified type occurring on features in a specified style layer.

Adds a listener for events of a specified type occurring on features in a specified style layer.

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.

Returns an array of GeoJSON Feature objects representing visible features that satisfy the query parameters. The properties value of each returned feature object contains the properties of its source feature. For GeoJSON sources, only string and numeric property values are supported (i.e. null, Array, and Object values are not supported). Each feature includes top-level layer, source, and sourceLayer properties. The layer property is an object representing the style layer to which the feature belongs. Layout and paint properties in this object contain values which are fully evaluated for the given zoom level and feature.

Only features that are currently rendered are included. Some features will not be included, like:

• Features from layers whose visibility property is none;
• Features from layers whose zoom range excludes the current zoom level;
• Symbol features that have been hidden due to text or icon collision.

Features from all other layers are included, including features that may have no visible contribution to the rendered result; for example, because the layer's opacity or color alpha component is set to 0. The topmost rendered feature appears first in the returned array, and subsequent features are sorted by descending z-order. Features that are rendered multiple times (due to wrapping across the antimeridian at low zoom levels) are returned only once (though subject to the following caveat).

Because features come from tiled vector data or GeoJSON data that is converted to tiles internally, feature geometries may be split or duplicated across tile boundaries and, as a result, features may appear multiple times in query results. For example, suppose there is a highway running through the bounding rectangle of a query. The results of the query will be those parts of the highway that lie within the map tiles covering the bounding rectangle, even if the highway extends into other tiles, and the portion of the highway within each map tile will be returned as a separate feature. Similarly, a point feature near a tile boundary may appear in multiple tiles due to tile buffering.

Returns an array of GeoJSON Feature objects . In contrast to map.queryRenderedFeatures(), this function returns all features matching the query parameters, whether or not they are rendered by the current style (i.e. visible). The domain of the query includes all currently-loaded vector tiles and GeoJSON source tiles: this function does not check tiles outside the currently visible viewport.

Because features come from tiled vector data or GeoJSON data that is converted to tiles internally, feature geometries may be split or duplicated across tile boundaries and, as a result, features may appear multiple times in query results. For example, suppose there is a highway running through the bounding rectangle of a query. The results of the query will be those parts of the highway that lie within the map tiles covering the bounding rectangle, even if the highway extends into other tiles, and the portion of the highway within each map tile will be returned as a separate feature. Similarly, a point feature near a tile boundary may appear in multiple tiles due to tile buffering.

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 feature state, setting it back to the default behavior. If only source is specified, removes all states of that source. If target.id is also specified, removes all keys for that feature's state. If key is also specified, removes that key from that feature's state. Features are identified by their id attribute, which must be an integer or a string that can be cast to an integer.

Remove an image from a style. This can be an image from the style's original sprite or any images that have been added at runtime using map.addImage().

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.

Rotates and pitches the map so that north is up (0° bearing) and pitch is 0°, with an animated transition.

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 state of a feature. The state object is merged in with the existing state of the feature. Features are identified by their id attribute, which must be an integer or a string that can be cast to an integer.

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.

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.

Update an existing image in a style. This image can be displayed on the map like any other icon in the style's sprite using the image's ID with icon-image, background-pattern, fill-pattern, or line-pattern.

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