Adds an IControl to the map, calling control.onAdd(this).

addControl(control: IControl, position: string?): Map

Parameters

Returns

Example

  
    // Add zoom and rotation controls to the map.
map.addControl(new TrimbleMaps.NavigationControl());
    
  

Removes the control from the map.

removeControl(control: IControl): Map

Parameters

Returns

Example

  
    // Define a new navigation control.
var navigation = new TrimbleMaps.NavigationControl();
// Add zoom and rotation controls to the map.
map.addControl(navigation);
// Remove zoom and rotation controls from the map.
map.removeControl(navigation);
    
  

Resizes the map according to the dimensions of its container element.

Checks if the map container size changed and updates the map if it has changed. This method must be called after the map's container is resized programmatically or when the map is shown after being initially hidden with CSS.

resize(eventData: Object?): Map

Parameters

Returns

Example

  
    // Resize the map when the map container is shown
// after being initially hidden with CSS.
var mapDiv = document.getElementById('map');
if (mapDiv.style.visibility === true) map.resize();
    
  

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.

getBounds(): LngLatBounds

Returns

Example

  
    var bounds = map.getBounds();
    
  

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

getMaxBounds(): (LngLatBounds | null)

Returns

Example

  
    var maxBounds = map.getMaxBounds();
    
  

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 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.

setMaxBounds(bounds: (LngLatBoundsLike | null | undefined)): Map

Parameters

Returns

Example

  
    // Define bounds that conform to the `LngLatBoundsLike` object.
var bounds = [
  [-74.04728, 40.68392], // [west, south]
  [-73.91058, 40.87764]  // [east, north]
];
// Set the map's max bounds.
map.setMaxBounds(bounds);
    
  

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.

It is not always possible to zoom out and reach the set minZoom. Other factors such as map height may restrict zooming. For example, if the map is 512px tall it will not be possible to zoom below zoom 0 no matter what the minZoom is set to.

setMinZoom(minZoom: (number | null | undefined)): Map

Parameters

Returns

Example

  
    map.setMinZoom(12.25);
    
  

Returns the map's minimum allowable zoom level.

getMinZoom(): number

Returns

Example

  
    var minZoom = map.getMinZoom();
    
  

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.

setMaxZoom(maxZoom: (number | null | undefined)): Map

Parameters

Returns

Example

  
    map.setMaxZoom(18.75);
    
  

Returns the map's maximum allowable zoom level.

getMaxZoom(): number

Returns

Example

  
    var maxZoom = map.getMaxZoom();
    
  

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

setMinPitch(minPitch: (number | null | undefined)): Map

Parameters

Returns

Returns the map's minimum allowable pitch.

getMinPitch(): number

Returns

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

setMaxPitch(maxPitch: (number | null | undefined)): Map

Parameters

Returns

Returns the map's maximum allowable pitch.

getMaxPitch(): number

Returns

Returns the state of renderWorldCopies. If true, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to false:

• When the map is zoomed out far enough that a single representation of the world does not fill the map's entire container, there will be blank space beyond 180 and -180 degrees longitude.
• Features that cross 180 and -180 degrees longitude will be cut in two (with one portion on the right edge of the map and the other on the left edge of the map) at every zoom level.

getRenderWorldCopies(): boolean

Returns

Example

  
    var worldCopiesRendered = map.getRenderWorldCopies();
    
  

Sets the state of renderWorldCopies.

setRenderWorldCopies(renderWorldCopies: boolean): Map

Parameters

Returns

Example

  
    map.setRenderWorldCopies(true);
    
  

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

project(lnglat: LngLatLike): Point

Parameters

Returns

Example

  
    var coordinate = [-122.420679, 37.772537];
var point = map.project(coordinate);
    
  

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

unproject(point: PointLike): LngLat

Parameters

Returns

Example

  
    map.on('click', function(e) {
  // When the map is clicked, get the geographic coordinate.
  var coordinate = map.unproject(e.point);
});
    
  

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

isMoving(): boolean

Returns

Example

  
    var isMoving = map.isMoving();
    
  

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

isZooming(): boolean

Returns

Example

  
    var isZooming = map.isZooming();
    
  

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

isRotating(): boolean

Returns

Example

  
    map.isRotating();
    
  

Adds a listener for events of a specified type, optionally limited to features in a specified style layer.

on(type: string, layerId: string, listener: Function): Map

Parameters

Returns

Adds a listener that will be called only once to a specified event type.

once(type: string, listener: Function): Map

Parameters

Returns

Adds a listener that will be called only once to a specified event type occurring on features in a specified style layer.

once(type: string, layerId: string, listener: Function): Map

Parameters

Returns

Removes an event listener previously added with Map#on.

off(type: string, listener: Function): Map

Parameters

Returns

Removes an event listener for layer-specific events previously added with Map#on.

off(type: string, layerId: string, listener: Function): Map

Parameters

Returns

Returns an array of GeoJSON Feature objects representing visible features that satisfy the query parameters.

queryRenderedFeatures(geometry: (PointLike | Array<PointLike>)?, options: Object?): Array<Object>

Parameters

Returns

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 a top-level layer property whose value 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.

Example

  
    // Find all features at a point
var features = map.queryRenderedFeatures(
  [20, 35],
  { layers: ['my-layer-name'] }
);
    
  

  
    // Find all features within a static bounding box
var features = map.queryRenderedFeatures(
  [[10, 20], [30, 50]],
  { layers: ['my-layer-name'] }
);
    
  

  
    // Find all features within a bounding box around a point
var width = 10;
var height = 20;
var features = map.queryRenderedFeatures([
  [point.x - width / 2, point.y - height / 2],
  [point.x + width / 2, point.y + height / 2]
], { layers: ['my-layer-name'] });
    
  

  
    // Query all rendered features from a single layer
var features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });
    
  

Returns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.

querySourceFeatures(sourceId: string, parameters: Object?): Array<Object>

Parameters

Returns

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.

Example

  
    // Find all features in one source layer in a vector source
var features = map.querySourceFeatures('your-source-id', {
  sourceLayer: 'your-source-layer'
});
    
  

Updates the map's style object with a new value.

If a style is already set when this is used and options.diff is set to true, the map renderer will attempt to compare the given style against the map's current state and perform only the changes necessary to make the map style match the desired state. Changes in sprites (images used for icons and patterns) and glyphs (fonts for label text) cannot be diffed. If the sprites or fonts used in the current style and the given style are different in any way, the map renderer will force a full update, removing the current style and building the given one from scratch.

setStyle(style: (Object | string | Common.Style), options: Object?): Map

Parameters

Returns

Example

  
    map.setStyle(TrimbleMaps.Common.Style.TRANSPORTATION);
    
  

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

getStyle(): Object

Returns

Example

  
    var styleJson = map.getStyle();
    
  

Returns the map's style name.

getStyleName(): string

Returns

Set the map's region using TrimbleMaps.Common.Region enumeration.

setRegion(region: Common.Region): Map

Parameters

Returns

Returns the map's region.

getRegion(): Common.Region

Returns

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

isStyleLoaded(): boolean

Returns

Example

  
    var styleLoadStatus = map.isStyleLoaded();
    
  

Adds a source to the map's style.

addSource(id: string, source: Object): Map

Parameters

Returns

Returns a Boolean indicating whether the source is loaded. Returns true if the source with the given ID in the map's style has no outstanding network requests, otherwise false.

isSourceLoaded(id: string): boolean

Parameters

Returns

Example

  
    var sourceLoaded = map.isSourceLoaded('bathymetry-data');
    
  

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

areTilesLoaded(): boolean

Returns

Example

  
    var tilesLoaded = map.areTilesLoaded();
    
  

Removes a source from the map's style.

removeSource(id: string): Map

Parameters

Returns

Example

  
    map.removeSource('bathymetry-data');
    
  

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

This method is often used to update a source using the instance members for the relevant source type as defined in Sources. For example, setting the data for a GeoJSON source or updating the url and coordinates of an image source.

getSource(id: string): Object?

Parameters

Returns

Add an image to the 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]. A Map.event:error event will be fired if there is not enough space in the sprite to add this image.

addImage(id: string, image: (HTMLImageElement | ImageBitmap | ImageData | {width: number, height: number, data: (Uint8Array | Uint8ClampedArray)} | StyleImageInterface), options: $Shape<StyleImageMetadata>)

Parameters

Example

  
    // If the style's sprite does not already contain an image with ID 'cat',
// add the image 'cat-icon.png' to the style's sprite with the ID 'cat'.
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', function(error, image) {
   if (error) throw error;
   if (!map.hasImage('cat')) map.addImage('cat', image);
});
// Add a stretchable image that can be used with `icon-text-fit`
// In this example, the image is 600px wide by 400px high.
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/8/89/Black_and_White_Boxed_%28bordered%29.png', function(error, image) {
   if (error) throw error;
   if (!map.hasImage('border-image')) {
     map.addImage('border-image', image, {
         content: [16, 16, 300, 384], // place text over left half of image, avoiding the 16px border
         stretchX: [[16, 584]], // stretch everything horizontally except the 16px border
         stretchY: [[16, 384]], // stretch everything vertically except the 16px border
     });
   }
});
    
  

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].

updateImage(id: string, image: (HTMLImageElement | ImageBitmap | ImageData | {width: number, height: number, data: (Uint8Array | Uint8ClampedArray)} | StyleImageInterface))

Parameters

Example

  
    // If an image with the ID 'cat' already exists in the style's sprite,
// replace that image with a new image, 'other-cat-icon.png'.
if (map.hasImage('cat')) map.updateImage('cat', './other-cat-icon.png');
    
  

Check whether or not an image with a specific ID exists in the style. This checks both images in the style's original [sprite] and any images that have been added at runtime using Map#addImage.

hasImage(id: string): boolean

Parameters

Returns

Example

  
    // Check if an image with the ID 'cat' exists in
// the style's sprite.
var catIconExists = map.hasImage('cat');
    
  

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.

removeImage(id: string)

Parameters

Example

  
    // If an image with the ID 'cat' exists in
// the style's sprite, remove it.
if (map.hasImage('cat')) map.removeImage('cat');
    
  

Load an image from an external URL to be used with Map#addImage. External domains must support CORS.

loadImage(url: string, callback: Function)

Parameters

Example

  
    // Load an image from an external URL.
map.loadImage('http://placekitten.com/50/50', function(error, image) {
  if (error) throw error;
  // Add the loaded image to the style's sprite with the ID 'kitten'.
  map.addImage('kitten', image);
});
    
  

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.

listImages(): Array<string>

Returns

Example

  
    var allImages = map.listImages();
    
  

Adds a [Mapbox style layer]( to the map's style.

A layer defines how data from a specified source will be styled. Read more about layer types and available paint and layout properties in the [Mapbox Style Specification].

addLayer(layer: (Object | CustomLayerInterface), beforeId: string?): Map

Parameters

Returns

Moves a layer to a different z-position.

moveLayer(id: string, beforeId: string?): Map

Parameters

Returns

Example

  
    // Move a layer with ID 'polygon' before the layer with ID 'country-label'. The `polygon` layer will appear beneath the `country-label` layer on the map.
map.moveLayer('polygon', 'country-label');
    
  

Removes the layer with the given ID from the map's style.

If no such layer exists, an error event is fired.

removeLayer(id: string)

Parameters

Example

  
    // If a layer with ID 'state-data' exists, remove it.
if (map.getLayer('state-data')) map.removeLayer('state-data');
    
  

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

getLayer(id: string): Object?

Parameters

Returns

Example

  
    var stateDataLayer = map.getLayer('state-data');
    
  

setTrafficVisibility(isVisible: boolean): Map

Parameters

Returns

Example

  
    map.setTrafficVisibility(true);
    
  

isTrafficVisible(): boolean

Returns

toggleTrafficVisibility(): Map

Returns

setWeatherRadarVisibility(isVisible: boolean): Map

Parameters

Returns

Example

  
    map.setWeatherRadarVisibility(true);
    
  

isWeatherRadarVisible(): boolean

Returns

toggleWeatherRadarVisibility(): Map

Returns

setWeatherCloudVisibility(isVisible: boolean): Map

Parameters

Returns

Example

  
    map.setWeatherCloudVisibility(true);
    
  

isWeatherCloudVisible(): boolean

Returns

toggleWeatherCloudVisibility(): Map

Returns

setWeatherAlertVisibility(isVisible: boolean): Map

Parameters

Returns

Example

  
    map.setWeatherAlertVisibility(true);
    
  

isWeatherAlertVisible(): boolean

Returns

toggleWeatherAlertVisibility(): Map

Returns

setRoadSurfaceVisibility(isVisible: boolean): Map

Parameters

Returns

Example

  
    map.setRoadSurfaceVisibility(true);
    
  

isRoadSurfaceVisible(): boolean

Returns

toggleRoadSurfaceVisibility(): Map

Returns

setPOIVisibility(isVisible: boolean): Map

Parameters

Returns

Example

  
    map.setPOIVisibility(true);
    
  

isPOIVisible(): boolean

Returns

togglePOIVisibility(): Map

Returns

Sets the visibility of the 3D building layer.

set3dBuildingVisibility(isVisible: boolean): Map

Parameters

Returns

Example

  
    map.set3dBuildingVisibility(true);
    
  

Returns true if the 3D building layer is visible.

is3dBuildingVisible(): boolean

Returns

Toggles the visibility of the 3D building layer.

toggle3dBuildingVisibility(): Map

Returns

Sets the visibility of the Places layer.

setPlacesVisibility(isVisible: boolean): Map

Parameters

Returns

Example

  
    map.setPlacesVisibility(true);
    
  

Returns true if the places layer is visible.

isPlacesVisible(): boolean

Returns

Toggles the visibility of the places layer.

togglePlacesVisibility(): Map

Returns

Sets the visibility of the Custom road

setCustomRoadVisibility(isVisible: boolean): Map

Parameters

Returns

Example

  
    map.setCustomRoadVisibility(true);
    
  

Returns true if the Custom road layer is visible.

isCustomRoadVisible(): boolean

Returns

Toggles the visibility of the Custom road layer.

toggleCustomRoadVisibility(): Map

Returns

Sets the language on map

setLanguage(language: string)

Parameters

Sets the filter for the specified style layer.

Filters control which features a style layer renders from its source. Any feature for which the filter expression evaluates to true will be rendered on the map. Those that are false will be hidden.

Use setFilter to show a subset of your source data.

To clear the filter, pass null or undefined as the second parameter.

setFilter(layerId: string, filter: (Array | null | undefined), options: Object?): Map

Parameters

Returns

Example

  
    // display only features with the 'name' property 'USA'
map.setFilter('my-layer', ['==', ['get', 'name'], 'USA']);
    
  

  
    // display only features with five or more 'available-spots'
map.setFilter('bike-docks', ['>=', ['get', 'available-spots'], 5]);
    
  

  
    // remove the filter for the 'bike-docks' style layer
map.setFilter('bike-docks', null);
    
  

Sets the zoom extent for the specified style layer. The zoom extent includes the [minimum zoom level] and [maximum zoom level]) at which the layer will be rendered.

Note: For style layers using vector sources, style layers cannot be rendered at zoom levels lower than the minimum zoom level of the source layer because the data does not exist at those zoom levels. If the minimum zoom level of the source layer is higher than the minimum zoom level defined in the style layer, the style layer will not be rendered at all zoom levels in the zoom range.

setLayerZoomRange(layerId: string, minzoom: number, maxzoom: number): Map

Parameters

Returns

Example

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

Returns the filter applied to the specified style layer.

getFilter(layerId: string): Array

Parameters

Returns

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

setPaintProperty(layerId: string, name: string, value: any, options: Object?): Map

Parameters

Returns

Example

  
    map.setPaintProperty('my-layer', 'fill-color', '#faafee');
    
  

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

getPaintProperty(layerId: string, name: string): any

Parameters

Returns

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

setLayoutProperty(layerId: string, name: string, value: any, options: Object?): Map

Parameters

Returns

Example

  
    map.setLayoutProperty('my-layer', 'visibility', 'none');
    
  

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

getLayoutProperty(layerId: string, name: string): any

Parameters

Returns

Sets the any combination of light values.

setLight(light: LightSpecification, options: Object?): Map

Parameters

Returns

Example

  
    var layerVisibility = map.getLayoutProperty('my-layer', 'visibility');
    
  

Returns the value of the light object.

getLight(): Object

Returns

Sets the state of a feature. A feature's state is a set of user-defined key-value pairs that are assigned to a feature at runtime. When using this method, the state object is merged with any existing key-value pairs in the feature's state. Features are identified by their feature.id attribute, which can be any number or string.

This method can only be used with sources that have a feature.id attribute. The feature.id attribute can be defined in three ways:

• For vector or GeoJSON sources, including an id attribute in the original data file.
• For vector or GeoJSON sources, using the [promoteId] option at the time the source is defined.
• For GeoJSON sources, using the [generateId] option to auto-assign an id based on the feature's index in the source data. If you change feature data using map.getSource('some id').setData(..), you may need to re-apply state taking into account updated id values.

Note: You can use the [feature-state expression] to access the values in a feature's state object for the purposes of styling.

setFeatureState(feature: Object, state: Object)

Parameters

Example

  
    // When the mouse moves over the `my-layer` layer, update
// the feature state for the feature under the mouse
map.on('mousemove', 'my-layer', function(e) {
  if (e.features.length > 0) {
    map.setFeatureState({
      source: 'my-source',
      sourceLayer: 'my-source-layer',
      id: e.features[0].id,
    }, {
      hover: true
    });
  }
});
    
  

Removes the state of a feature, setting it back to the default behavior. If only a target.source is specified, it will remove the state for all features from that source. If target.id is also specified, it will remove all keys for that feature's state. If key is also specified, it removes only that key from that feature's state. Features are identified by their feature.id attribute, which can be any number or string.

removeFeatureState(target: Object, key: string)

Parameters

Example

  
    // Reset the entire state object for all features
// in the `my-source` source
map.removeFeatureState({
  source: 'my-source'
});
    
  

  
    // When the mouse leaves the `my-layer` layer,
// reset the entire state object for the
// feature under the mouse
map.on('mouseleave', 'my-layer', function(e) {
  map.removeFeatureState({
    source: 'my-source',
    sourceLayer: 'my-source-layer',
    id: e.features[0].id
  });
});
    
  

  
    // When the mouse leaves the `my-layer` layer,
// reset only the `hover` key-value pair in the
// state for the feature under the mouse
map.on('mouseleave', 'my-layer', function(e) {
  map.removeFeatureState({
    source: 'my-source',
    sourceLayer: 'my-source-layer',
    id: e.features[0].id
  }, 'hover');
});
    
  

Gets the state of a feature. A feature's state is a set of user-defined key-value pairs that are assigned to a feature at runtime. Features are identified by their feature.id attribute, which can be any number or string.

Note: To access the values in a feature's state object for the purposes of styling the feature, use the [feature-state expression].

getFeatureState(feature: Object): Object

Parameters

Returns

Example

  
    // When the mouse moves over the `my-layer` layer,
// get the feature state for the feature under the mouse
map.on('mousemove', 'my-layer', function(e) {
  if (e.features.length > 0) {
    map.getFeatureState({
      source: 'my-source',
      sourceLayer: 'my-source-layer'
      id: e.features[0].id
    });
  }
});
    
  

Returns the map's containing HTML element.

getContainer(): HTMLElement

Returns

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.

getCanvasContainer(): HTMLElement

Returns

Returns the map's <canvas> element.

getCanvas(): HTMLCanvasElement

Returns

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.

loaded(): boolean

Returns

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.

remove()

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.

triggerRepaint()

Example

  
    map.triggerRepaint();
    
  

Gets and sets a Boolean indicating whether the map will render an outline around each tile and the tile ID. These tile boundaries are useful for debugging.

The uncompressed file size of the first vector source is drawn in the top left corner of each tile, next to the tile ID.

showTileBoundaries

Type: boolean

Example

  
    map.showTileBoundaries = true;
    
  

Gets and sets a Boolean indicating whether the map will visualize the padding offsets.

showPadding

Type: boolean

Gets and sets a Boolean indicating whether the map will render boxes around all symbols in the data source, revealing which symbols were rendered or which were hidden due to collisions. This information is useful for debugging.

showCollisionBoxes

Type: boolean

Gets and sets a Boolean indicating whether the map will continuously repaint. This information is useful for analyzing performance.

repaint

Type: boolean

The version of map JS in use as specified in package.json, CHANGELOG.md, and the GitHub release.

version

Type: string

Returns the map's geographical centerpoint.

getCenter(): LngLat

Returns

Example

  
    // return a LngLat object such as {lng: 0, lat: 0}
var center = map.getCenter();
// access longitude and latitude values directly
var {longitude, latitude} = map.getCenter();
    
  

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

setCenter(center: LngLatLike, eventData: Object?): Map

Parameters

Returns

Example

  
    map.setCenter([-74, 38]);
    
  

Pans the map by the specified offset.

panBy(offset: PointLike, options: AnimationOptions?, eventData: Object?): Map

Parameters

Returns

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

panTo(lnglat: LngLatLike, options: AnimationOptions?, eventData: Object?): Map

Parameters

Returns

Example

  
    map.panTo([-74, 38]);
    
  

  
    // Specify that the panTo animation should last 5000 milliseconds.
map.panTo([-74, 38], {duration: 5000});
    
  

Returns the map's current zoom level.

getZoom(): number

Returns

Example

  
    map.getZoom();
    
  

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

setZoom(zoom: number, eventData: Object?): Map

Parameters

Returns

Example

  
    // Zoom to the zoom level 5 without an animated transition
map.setZoom(5);
    
  

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

zoomTo(zoom: number, options: AnimationOptions?, eventData: Object?): Map

Parameters

Returns

Example

  
    // Zoom to the zoom level 5 without an animated transition
map.zoomTo(5);
// Zoom to the zoom level 8 with an animated transition
map.zoomTo(8, {
  duration: 2000,
  offset: [100, 50]
});
    
  

Increases the map's zoom level by 1.

zoomIn(options: AnimationOptions?, eventData: Object?): Map

Parameters

Returns

Example

  
    // zoom the map in one level with a custom animation duration
map.zoomIn({duration: 1000});
    
  

Decreases the map's zoom level by 1.

zoomOut(options: AnimationOptions?, eventData: Object?): Map

Parameters

Returns

Example

  
    // zoom the map out one level with a custom animation offset
map.zoomOut({offset: [80, 60]});
    
  

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.

getBearing(): number

Returns

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}).

setBearing(bearing: number, eventData: Object?): Map

Parameters

Returns

Example

  
    // rotate the map to 90 degrees
map.setBearing(90);
    
  

Returns the current padding applied around the map viewport.

getPadding(): PaddingOptions

Returns

Sets the padding in pixels around the viewport.

Equivalent to jumpTo({padding: padding}).

setPadding(padding: PaddingOptions, eventData: Object?): Map

Parameters

Returns

Example

  
    // Sets a left padding of 300px, and a top padding of 50px
map.setPadding({ left: 300, top: 50 });
    
  

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.

rotateTo(bearing: number, options: AnimationOptions?, eventData: Object?): Map

Parameters

Returns

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

resetNorth(options: AnimationOptions?, eventData: Object?): Map

Parameters

Returns

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

resetNorthPitch(options: AnimationOptions?, eventData: Object?): Map

Parameters

Returns

Snaps the map so that north is up (0° bearing), if the current bearing is close enough to it (i.e. within the bearingSnap threshold).

snapToNorth(options: AnimationOptions?, eventData: Object?): Map

Parameters

Returns

Returns the map's current pitch (tilt).

getPitch(): number

Returns

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

setPitch(pitch: number, eventData: Object?): Map

Parameters

Returns

cameraForBounds(bounds: LngLatBoundsLike, options: CameraOptions?): (CameraOptions | void)

Parameters

Returns

Example

  
    var bbox = [[-79, 43], [-73, 45]];
var newCameraTransform = map.cameraForBounds(bbox, {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});
    
  

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 bearing is nonzero.

fitBounds(bounds: LngLatBoundsLike, options: Object?, eventData: Object?): Map

Parameters

Returns

Example

  
    var bbox = [[-79, 43], [-73, 45]];
map.fitBounds(bbox, {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});
    
  

Pans, rotates and zooms the map to to fit the box made by points p0 and p1 once the map is rotated to the specified bearing. To zoom without rotating, pass in the current map bearing.

fitScreenCoordinates(p0: PointLike, p1: PointLike, bearing: number, options: any?, eventData: Object?): Map

Parameters

Returns

Example

  
    var p0 = [220, 400];
var p1 = [500, 900];
map.fitScreenCoordinates(p0, p1, map.getBearing(), {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});
    
  

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.

jumpTo(options: CameraOptions, eventData: Object?): Map

Parameters

Returns

Example

  
    // jump to coordinates at current zoom
map.jumpTo({center: [0, 0]});
// jump with zoom, pitch, and bearing options
map.jumpTo({
  center: [0, 0],
  zoom: 8,
  pitch: 45,
  bearing: 90
});
    
  

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

Note: The transition will happen instantly if the user has enabled the reduced motion accesibility feature enabled in their operating system, unless options includes essential: true.

easeTo(options: any, eventData: Object?): Map

Parameters

Returns

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 the user maintain her bearings even after traversing a great distance.

Note: The animation will be skipped, and this will behave equivalently to jumpTo if the user has the reduced motion accesibility feature enabled in their operating system, unless 'options' includes essential: true.

flyTo(options: Object, eventData: Object?): Map

Parameters

Returns

Example

  
    // fly with default options to null island
map.flyTo({center: [0, 0], zoom: 9});
// using flyTo options
map.flyTo({
  center: [0, 0],
  zoom: 9,
  speed: 0.2,
  curve: 1,
  easing(t) {
    return t;
  }
});
    
  

Stops any animated transition underway.

stop(): Map

Returns

Fired immediately after the map has been resized.

resize

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// immediately after the map has been resized.
map.on('resize', function() {
  console.log('A resize event occurred.');
});
    
  

Fired immediately after the map has been removed with Map.event:remove.

remove

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// just after the map is removed.
map.on('remove', function() {
  console.log('A remove event occurred.');
});
    
  

Fired when weather alert event name is changed.

weatheralert.eventname

Type: Object

Properties

weatheralert.eventname

Fired when layer is removed.

content.remove

Type: Object

Properties

content.remove

Fired when layer visibility changes.

content.visibility

Type: Object

Properties

content.visibility

Fired when change content layer filters.

content.filter

Type: Object

Properties

content.filter

Fired when a pointing device (usually a mouse) is pressed within the map.

Note: This event is compatible with the optional layerId parameter. If layerId is included as the second argument in Map#on, the event listener will fire only when the the cursor is pressed while inside a visible portion of the specifed layer.

mousedown

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener
map.on('mousedown', function() {
  console.log('A mousedown event has occurred.');
});
    
  

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener for a specific layer
map.on('mousedown', 'poi-label', function() {
  console.log('A mousedown event has occurred on a visible portion of the poi-label layer.');
});
    
  

Fired when a pointing device (usually a mouse) is released within the map.

Note: This event is compatible with the optional layerId parameter. If layerId is included as the second argument in Map#on, the event listener will fire only when the the cursor is released while inside a visible portion of the specifed layer.

mouseup

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener
map.on('mouseup', function() {
  console.log('A mouseup event has occurred.');
});
    
  

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener for a specific layer
map.on('mouseup', 'poi-label', function() {
  console.log('A mouseup event has occurred on a visible portion of the poi-label layer.');
});
    
  

Fired when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements.

Note: This event is compatible with the optional layerId parameter. If layerId is included as the second argument in Map#on, the event listener will fire only when the the cursor is moved inside a visible portion of the specifed layer.

mouseover

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener
map.on('mouseover', function() {
  console.log('A mouseover event has occurred.');
});
    
  

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener for a specific layer
map.on('mouseover', 'poi-label', function() {
  console.log('A mouseover event has occurred on a visible portion of the poi-label layer.');
});
    
  

Fired when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map.

Note: This event is compatible with the optional layerId parameter. If layerId is included as the second argument in Map#on, the event listener will fire only when the the cursor is inside a visible portion of the specified layer.

mousemove

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener
map.on('mousemove', function() {
  console.log('A mousemove event has occurred.');
});
    
  

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener for a specific layer
map.on('mousemove', 'poi-label', function() {
  console.log('A mousemove event has occurred on a visible portion of the poi-label layer.');
});
    
  

Fired when a pointing device (usually a mouse) is pressed and released at the same point on the map.

Note: This event is compatible with the optional layerId parameter. If layerId is included as the second argument in Map#on, the event listener will fire only when the point that is pressed and released contains a visible portion of the specifed layer.

click

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener
map.on('click', function(e) {
  console.log('A click event has occurred at ' + e.lngLat);
});
    
  

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener for a specific layer
map.on('click', 'poi-label', function(e) {
  console.log('A click event has occurred on a visible portion of the poi-label layer at ' + e.lngLat);
});
    
  

Fired when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.

Note: This event is compatible with the optional layerId parameter. If layerId is included as the second argument in Map#on, the event listener will fire only when the point that is clicked twice contains a visible portion of the specified layer.

dblclick

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener
map.on('dblclick', function(e) {
  console.log('A dblclick event has occurred at ' + e.lngLat);
});
    
  

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener for a specific layer
map.on('dblclick', 'poi-label', function(e) {
  console.log('A dblclick event has occurred on a visible portion of the poi-label layer at ' + e.lngLat);
});
    
  

Fired when a pointing device (usually a mouse) enters a visible portion of a specified layer from outside that layer or outside the map canvas.

Important: This event can only be listened for when Map#on includes three arguments, where the second argument specifies the desired layer.

mouseenter

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener
map.on('mouseenter', 'water', function() {
  console.log('A mouseenter event occurred on a visible portion of the water layer.');
});
    
  

Fired when a pointing device (usually a mouse) leaves a visible portion of a specified layer, or leaves the map canvas.

Important: This event can only be listened for when Map#on includes three arguements, where the second argument specifies the desired layer.

mouseleave

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when the pointing device leaves
// a visible portion of the specified layer.
map.on('mouseleave', 'water', function() {
  console.log('A mouseleave event occurred.');
});
    
  

Fired when a point device (usually a mouse) leaves the map's canvas.

mouseout

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when the pointing device leave's
// the map's canvas.
map.on('mouseout', function() {
  console.log('A mouseout event occurred.');
});
    
  

Fired when the right button of the mouse is clicked or the context menu key is pressed within the map.

contextmenu

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when the right mouse button is
// pressed within the map.
map.on('contextmenu', function() {
  console.log('A contextmenu event occurred.');
});
    
  

Fired when a wheel event occurs within the map.

wheel

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when a wheel event occurs within the map.
map.on('wheel', function() {
  console.log('A wheel event occurred.');
});
    
  

Fired when a touchstart event occurs within the map.

touchstart

Properties

Fired when a touchend event occurs within the map.

touchend

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when a touchstart event occurs within the map.
map.on('touchstart', function() {
  console.log('A touchstart event occurred.');
});
    
  

Fired when a touchmove event occurs within the map.

touchmove

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when a touchmove event occurs within the map.
map.on('touchmove', function() {
  console.log('A touchmove event occurred.');
});
    
  

Fired when a touchcancel event occurs within the map.

touchcancel

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when a touchcancel event occurs within the map.
map.on('touchcancel', function() {
  console.log('A touchcancel event occurred.');
});
    
  

Fired just before the map begins a transition from one view to another, as the result of either user interaction or methods such as Map#jumpTo.

movestart

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// just before the map begins a transition
// from one view to another.
map.on('movestart', function() {
  console.log('A movestart` event occurred.');
});
    
  

Fired repeatedly during an animated transition from one view to another, as the result of either user interaction or methods such as Map#flyTo.

move

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// repeatedly during an animated transition.
map.on('move', function() {
  console.log('A move event occurred.');
});
    
  

Fired just after the map completes a transition from one view to another, as the result of either user interaction or methods such as Map#jumpTo.

moveend

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// just after the map completes a transition.
map.on('moveend', function() {
  console.log('A moveend event occurred.');
});
    
  

Fired when a "drag to pan" interaction starts. See DragPanHandler.

dragstart

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when a "drag to pan" interaction starts.
map.on('dragstart', function() {
  console.log('A dragstart event occurred.');
});
    
  

Fired repeatedly during a "drag to pan" interaction. See DragPanHandler.

drag

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// repeatedly  during a "drag to pan" interaction.
map.on('drag', function() {
  console.log('A drag event occurred.');
});
    
  

Fired when a "drag to pan" interaction ends. See DragPanHandler.

dragend

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when a "drag to pan" interaction ends.
map.on('dragend', function() {
  console.log('A dragend event occurred.');
});
    
  

Fired just before the map begins a transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo.

zoomstart

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// just before a zoom transition starts.
map.on('zoomstart', function() {
  console.log('A zoomstart event occurred.');
});
    
  

Fired repeatedly during an animated transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo.

zoom

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// repeatedly during a zoom transition.
map.on('zoom', function() {
  console.log('A zoom event occurred.');
});
    
  

Fired just after the map completes a transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo.

zoomend

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// just after a zoom transition finishes.
map.on('zoomend', function() {
  console.log('A zoomend event occurred.');
});
    
  

Fired when a "drag to rotate" interaction starts. See DragRotateHandler.

rotatestart

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// just before a "drag to rotate" interaction starts.
map.on('rotatestart', function() {
  console.log('A rotatestart event occurred.');
});
    
  

Fired repeatedly during a "drag to rotate" interaction. See DragRotateHandler.

rotate

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// repeatedly during "drag to rotate" interaction.
map.on('rotate', function() {
  console.log('A rotate event occurred.');
});
    
  

Fired when a "drag to rotate" interaction ends. See DragRotateHandler.

rotateend

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// just after a "drag to rotate" interaction ends.
map.on('rotateend', function() {
  console.log('A rotateend event occurred.');
});
    
  

Fired whenever the map's pitch (tilt) begins a change as the result of either user interaction or methods such as Map#flyTo .

pitchstart

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// just before a pitch (tilt) transition starts.
map.on('pitchstart', function() {
  console.log('A pitchstart event occurred.');
});
    
  

Fired repeatedly during the map's pitch (tilt) animation between one state and another as the result of either user interaction or methods such as Map#flyTo.

pitch

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// repeatedly during a pitch (tilt) transition.
map.on('pitch', function() {
  console.log('A pitch event occurred.');
});
    
  

Fired immediately after the map's pitch (tilt) finishes changing as the result of either user interaction or methods such as Map#flyTo.

pitchend

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// just after a pitch (tilt) transition ends.
map.on('pitchend', function() {
  console.log('A pitchend event occurred.');
});
    
  

Fired when a "box zoom" interaction starts. See BoxZoomHandler.

boxzoomstart

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// just before a "box zoom" interaction starts.
map.on('boxzoomstart', function() {
  console.log('A boxzoomstart event occurred.');
});
    
  

Fired when a "box zoom" interaction ends. See BoxZoomHandler.

boxzoomend

Type: Object

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// just after a "box zoom" interaction ends.
map.on('boxzoomend', function() {
  console.log('A boxzoomend event occurred.');
});
    
  

Fired when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold. See BoxZoomHandler.

boxzoomcancel

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// the user cancels a "box zoom" interaction.
map.on('boxzoomcancel', function() {
  console.log('A boxzoomcancel event occurred.');
});
    
  

Fired when the WebGL context is lost.

webglcontextlost

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when the WebGL context is lost.
map.on('webglcontextlost', function() {
  console.log('A webglcontextlost event occurred.');
});
    
  

Fired when the WebGL context is restored.

webglcontextrestored

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when the WebGL context is restored.
map.on('webglcontextrestored', function() {
  console.log('A webglcontextrestored event occurred.');
});
    
  

Fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.

load

Type: Object

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when the map has finished loading.
map.on('load', function() {
  console.log('A load event occurred.');
});
    
  

Fired whenever the map is drawn to the screen, as the result of

• a change to the map's position, zoom, pitch, or bearing
• a change to the map's style
• a change to a GeoJSON source
• the loading of a vector tile, GeoJSON file, glyph, or sprite

render

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// whenever the map is drawn to the screen.
map.on('render', function() {
  console.log('A render event occurred.');
});
    
  

Fired after the last frame rendered before the map enters an "idle" state:

• No camera transitions are in progress
• All currently requested tiles have loaded
• All fade/transition animations have completed

idle

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// just before the map enters an "idle" state.
map.on('idle', function() {
  console.log('A idle event occurred.');
});
    
  

Fired when an error occurs. This is GL JS's primary error reporting mechanism. We use an event instead of throw to better accommodate asyncronous operations. If no listeners are bound to the error event, the error will be printed to the console.

error

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when an error occurs.
map.on('error', function() {
  console.log('A error event occurred.');
});
    
  

Fired when any map data loads or changes. See MapDataEvent for more information.

data

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when map data loads or changes.
map.on('data', function() {
  console.log('A data event occurred.');
});
    
  

Fired when the map's style loads or changes. See MapDataEvent for more information.

styledata

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when the map's style loads or changes.
map.on('styledata', function() {
  console.log('A styledata event occurred.');
});
    
  

Fired when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See MapDataEvent for more information.

sourcedata

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when one of the map's sources loads or changes.
map.on('sourcedata', function() {
  console.log('A sourcedata event occurred.');
});
    
  

Fired when any map data (style, source, tile, etc) begins loading or changing asyncronously. All dataloading events are followed by a data or error event. See MapDataEvent for more information.

dataloading

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// when any map data begins loading
// or changing asynchronously.
map.on('dataloading', function() {
  console.log('A dataloading event occurred.');
});
    
  

Fired when the map's style begins loading or changing asyncronously. All styledataloading events are followed by a styledata or error event. See MapDataEvent for more information.

styledataloading

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// map's style begins loading or
// changing asyncronously.
map.on('styledataloading', function() {
  console.log('A styledataloading event occurred.');
});
    
  

Fired when one of the map's sources begins loading or changing asyncronously. All sourcedataloading events are followed by a sourcedata or error event. See MapDataEvent for more information.

sourcedataloading

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// map's sources begin loading or
// changing asyncronously.
map.on('sourcedataloading', function() {
  console.log('A sourcedataloading event occurred.');
});
    
  

Fired when an icon or pattern needed by the style is missing. The missing image can be added with Map#addImage within this event listener callback to prevent the image from being skipped. This event can be used to dynamically generate icons and patterns.

styleimagemissing

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
// Set an event listener that fires
// an icon or pattern is missing.
map.on('styleimagemissing', function() {
  console.log('A styleimagemissing event occurred.');
});
    
  

Fired when the map style is changing.

stylechanging

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
map.on('stylechanging', function(evt) {
  console.log(`Changing from style ${evt.previousStyleName} to ${evt.styleName}`);
});
    
  

Fired when the map style has changed.

stylechange

Properties

Example

  
    // Initialize the map
var map = new TrimbleMaps.Map({ // map options });
map.on('stylechange', function(evt) {
  console.log(`The map style has changed to ${evt.styleName}`);
});
    
  

customroadloading

Fired when a custom road layer is loading.

customroadloading

Type: Object

Properties

Example

  
    myMap.on('customroadloading', function(e) {
  // your code goes here.
});
    
  

customroad

Fired when a custom road layer is loaded.

customroad

Type: Object

Properties

trafficcameraloading

Fired when a traffic camera layer is loading.

trafficcameraloading

Type: Object

Properties

Example

  
    myMap.on('trafficcameraloading', function(e) {
  // your code goes here.
});
    
  

trafficcamera

Fired when a traffic camera layer is loaded.

trafficcamera

Type: Object

Properties

trafficincidentloading

Fired when a traffic incident layer is loading.

trafficincidentloading

Type: Object

Properties

Example

  
    myMap.on('trafficincidentloading', function(e) {
  // your code goes here.
});
    
  

trafficincident

Fired when a traffic incident layer is loaded.

trafficincident

Type: Object

Properties

truckrestrictionloading

Fired when a truck restriction layer is loading.

truckrestrictionloading

Type: Object

Properties

Example

  
    myMap.on('truckrestrictionloading', function(e) {
  // your code goes here.
});
    
  

truckrestriction

Fired when a truck restriction layer is loaded.

truckrestriction

Type: Object

Properties

weatherradarloading

Fired when a weather radar layer is loading.

weatherradarloading

Type: Object

Properties

Example

  
    myMap.on('weatherradarloading', function(e) {
  // your code goes here.
});
    
  

weatherradar

Fired when a weather radar layer is loaded.

weatherradar

Type: Object

Properties

weathercloudloading

Fired when a weather cloud layer is loading.

weathercloudloading

Type: Object

Properties

Example

  
    myMap.on('weathercloudloading', function(e) {
  // your code goes here.
});
    
  

weathercloud

Fired when a weather cloud layer is loaded.

weathercloud

Type: Object

Properties

weatheralertloading

Fired when a weather alert layer is loading.

weatheralertloading

Type: Object

Properties

Example

  
    myMap.on('weatheralertloading', function(e) {
  // your code goes here.
});
    
  

weatheralert

Fired when a weather alert layer is loaded.

weatheralert

Type: Object

Properties

trafficloading

Fired when a traffic incident layer is loading.

trafficloading

Type: Object

Properties

Example

  
    myMap.on('trafficloading', function(e) {
  // your code goes here.
});
    
  

traffic

Fired when a traffic layer is loaded.

traffic

Type: Object

Properties

roadsurfaceloading

Fired when a road surface layer is loading.

roadsurfaceloading

Type: Object

Properties

Example

  
    myMap.on('roadsurfaceloading', function(e) {
  // your code goes here.
});
    
  

roadsurface

Fired when a road surface layer is loaded.

roadsurface

Type: Object

Properties

pointsofinterestloading

Fired when a points of interest layer is loading.

pointsofinterestloading

Type: Object

Properties

Example

  
    myMap.on('pointsofinterestloading', function(e) {
  // your code goes here.
});
    
  

pointsofinterest

Fired when a points of interest layer is loaded.

pointsofinterest

Type: Object

Properties

Fired when layer visibility changes.

visibility

Type: Object

Properties

Optional method called when the layer has been added to the Map with Map#addLayer. This gives the layer a chance to initialize gl resources and register event listeners.

onAdd(map: Map, gl: WebGLRenderingContext)

Parameters

Optional method called when the layer has been removed from the Map with Map#removeLayer. This gives the layer a chance to clean up gl resources and event listeners.

onRemove(map: Map, gl: WebGLRenderingContext)

Parameters

Optional method called during a render frame to allow a layer to prepare resources or render into a texture.

The layer cannot make any assumptions about the current GL state and must bind a framebuffer before rendering.

prerender(gl: WebGLRenderingContext, matrix: Array<number>)

Parameters

Called during a render frame allowing the layer to draw into the GL context.

The layer can assume blending and depth state is set to allow the layer to properly blend and clip other layers. The layer cannot make any other assumptions about the current GL state.

If the layer needs to render to a texture, it should implement the prerender method to do this and only use the render method for drawing directly into the main framebuffer.

The blend function is set to gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA). This expects colors to be provided in premultiplied alpha form where the r, g and b values are already multiplied by the a value. If you are unable to provide colors in premultiplied form you may want to change the blend function to gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA).

render(gl: WebGLRenderingContext, matrix: Array<number>)

Parameters

Enumeration for map style values.

Style

Parameters