Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: VectorTileLayer

require(["esri/layers/VectorTileLayer"], function(VectorTileLayer) { /* code goes here */ });

Description

(Added at v3.15)

A VectorTileLayer renders cached tiles of data. It is similar to a WebTiledLayer in that it renders cached data; however, a WebTiledLayer renders as a series of images, not vector data.

Unlike image caches, vector tiles contain data for rendering the tile information. Because the data in VectorTileLayer is vector, it is stored in individual layers containing geometry, attributes, and styles. Styling information is stored separately from the tile geometry and attributes, and more than one style can be defined. This means that one set of vector tiles may be styled numerous ways without having to generate a new cache for each style. This saves space and speeds up the process for creating new map styles.

Styles may contain multiple options for rendering the same type of feature. In a street layer, for example, major highways might have three symbology options. Styles can also be changed on the client without having to make a request for a new tile from the server. This enables maps to be dynamic on the client while still taking advantage of cached vector data.

For more information about vector tile layers see the Vector tile layer topic in the ArcGIS Online Help and the Vector Basemaps group in ArcGIS Online.

Known Limitations:

  • Vector tile layers can be displayed in Internet Explorer 11 and higher and most other current versions of desktop browsers, including Chrome, Firefox, and Safari.
  • Vector tile layers have the best performance on machines with newer hardware.
  • In some cases, labels along vector tile boundaries may collide with labels from the neighboring tile.
  • VectorTileLayer printing requires ArcGIS Server 10.5.1 or later. Using ArcGIS Server 10.5.1, the PrintTask will create a client-side image for the VectorTileLayer in the printout. For printing secure VectorTileLayers with ArcGIS Server 10.5.1 or 10.6.0, the PrintTask will also create a client-side image for the VectorTileLayer in the printout. This has some limitations related to large size printing quality and a dependency on browser window height/width ratio.

Samples

Search for samples that use this class.

Class hierarchy

esri/layers/Layer
|_esri/layers/VectorTileLayer

Constructors

NameSummary
new VectorTileLayer(url, options?)Create a new VectorTileLayer object.

Properties

NameTypeSummary
attributionDataUrlStringThe URL, when available, where the layer's attribution data is stored.
classNameStringclass attribute of the layer's node.
credentialCredentialProvides credential information for the layer such as userid and token if the layer represents a resource that is secured with token-based authentication.
currentStyleInfoObjectThe current style information of the VectorTileLayer.
fullExtentExtentThe full extent of the layer.
hasAttributionDataBooleanWhen true, the layer has attribution data.
idStringID assigned to the layer.
initialExtentExtentThe initial extent of the layer.
loadErrorErrorSet if the layer failed to load.
loadedBooleanWhen the layer is loaded, the value becomes "true", and layer properties can be accessed.
maxScaleNumberMaximum visible scale for the layer.
minScaleNumberMinimum visible scale for the layer.
nameStringName of the vector tile layer.
opacityNumberOpacity or transparency of layer.
showAttributionBooleanWhen true, the layer's attribution is displayed on the map.
spatialReferenceSpatialReferenceThe spatial reference of the layer.
suspendedBooleanWhen true, the layer is suspended.
tileInfoTileInfoContains information about the tiling scheme for the layer.
urlStringThe URL to the vector tile service or style JSON that will be used to draw the layer.
visibleBooleanVisibility of the layer.
visibleAtMapScaleBooleanWhen true, the layer is visible at the current map scale.

Methods

NameReturn typeSummary
attr(name, value)LayerAdds a new attribute or changes the value of an existing attribute on the layer's node.
getAttributionData()DeferredAsynchrously returns custom data for the layer when available.
getMap()MapReturns reference to the map control the layer is added to.
getNode()HTMLElementReturns the layer's DOM node.
getStyle()ObjectReturns an object that contains the current style information for the layer.
hide()NoneSets the visibility of the layer to "false".
isVisibleAtScale(scale)BooleanReturns true if the layer is visible at the given scale.
resume()NoneResumes layer drawing.
setMaxScale(scale)NoneSet the maximum scale for the layer.
setMinScale(scale)NoneSet the minimum scale for the layer.
setOpacity(opacity)NoneSets the opacity of the layer.
setScaleRange(minScale, maxScale)NoneSet the scale range for the layer.
setStyle(styleUrl)NoneChanges the style properties used to render the layers.
setVisibility(isVisible)NoneSets the visibility of the layer.
show()NoneSets the visibility of the layer to "true".
suspend()NoneSuspends layer drawing.

Events

[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.

Events

NameEvent ObjectSummary
error
{
  error: <Error>
}
Fires when there is a problem retrieving a layer.
load
{
  layer: <Layer>
}
Fires after layer properties for the layer are successfully populated.
opacity-change
{
  opacity: <Number>
}
Fires when the layer opacity has been changed, and returns an object with the opacity value.
resumeFires when a layer resumes drawing.
scale-range-changeFires when a layer's minScale and/or maxScale is changed.
scale-visibility-changeFires when a layer's scale visibility changes.
style-change
{
  style: <Object>
}
Fires when the style is changed on the layer.
suspendFires when a layer suspends drawing.
update-end
{
  error: <Error>
}
Fires when the layer has finished updating its content.
update-startFires when the layer begins to update its content.
visibility-change
{
  visible: <Boolean>
}
Fires when the layer visibility has been changed, and returns an object with a Boolean visible property containing the new visibility value of the layer.
Constructor Details

new VectorTileLayer(url, options?)

Create a new VectorTileLayer object.
Parameters:
<String | Object> url Required The URL to the vector tile service or style JSON that will be used to draw the layer. If specifying a URL to a style JSON object, the tiles are fetched from the tile servers specified in the style object.

For documentation and examples of using objects to define the style of the layer, see the Mapbox style documentation.
<Object> options Optional Optional parameters. See options list.
options properties:
<Number[]> displayLevels Optional Lists which levels of the layer to draw.
<Number> maxScale Optional Maximum visible scale for the layer.
<Number> minScale Optional Minimum visible scale for the layer.
<Number> opacity Optional Initial opacity or transparency of layer. Values range from 0.0 to 1.0, where 0.0 is 100% transparent and 1.0 has no transparency. The default value is 1.0.
<Boolean> visible Optional Visibility of the layer.
Sample:
require([
  "esri/layers/VectorTileLayer", ... 
], function(VectorTileLayer, ... ) {
  // URL to a vector tile service
  var vectorTileLayer = new VectorTileLayer("https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer");
  ...
});
require([
  "esri/layers/VectorTileLayer", ... 
], function(VectorTileLayer, ... ) {
  // URL to a style JSON object
  var vectorTileLayer = new VectorTileLayer("https://www.arcgis.com/sharing/rest/content/items/4cf7e1fb9f254dcda9c8fbadb15cf0f8/resources/styles/root.json");
  ...
});
Property Details

<String> attributionDataUrl

The URL, when available, where the layer's attribution data is stored. (Added at v3.1)

<String> className

class attribute of the layer's node. (Added at v3.7)

<Credential> credential

Provides credential information for the layer such as userid and token if the layer represents a resource that is secured with token-based authentication. This value is available after the layer has been loaded i.e. layer.loaded is true. (Added at v2.5)

<Object> currentStyleInfo

The current style information of the VectorTileLayer. See the object specification below. (Added at v3.25)
Object Specifications:
<currentStyleInfo>
<String> glyphsUrl Required Absolute template URL for font sets included in a style.
<Object> layerDefinition Required Vector tile service information.
<String> serviceUrl Required Absolute URL for a vector tile service.
<String> spriteUrl Required Asbolute URL for sprites included in a style.
<Object> style Required Style JSON object for vector tiles. Style object includes version of the style specification, sprite and glyphs properties.
<String> styleUrl Required Absolute URL for vector tile service style.

<Extent> fullExtent

The full extent of the layer. By default, this is worldwide.

<Boolean> hasAttributionData

When true, the layer has attribution data. Use the getAttributionData method to retrieve this data as JSON. (Added at v3.1)
Known values: true | false
Default value: false

<String> id

ID assigned to the layer. If not assigned, esri.Map assigns value. By default, the ID of the layer is "layer" followed by a number. The ID can be user defined only in the layer constructor.
Sample:
  • Setting the layer ID in the layer constructor.
    require([
      "esri/layers/ArcGISDynamicMapServiceLayer", ... 
    ], function(ArcGISDynamicMapServiceLayer, ... ) {
      var population = new ArcGISDynamicMapServiceLayer("http://myserver/arcgis/rest/population/MapServer/Layers", {id:"population"});
      ...
    });
    
  • Setting the layer ID after a layer is initialized.
    population.id = "population";
    
  • Retrieving the layer ID.
    function getMapLayers() {
      for (var j=0, jl=map.layerIds.length; j<jl; j++) {
        var currentLayer = map.getLayer(map.layerIds[j]);
        alert("id: " + currentLayer.id);
      }
    }
    

<Extent> initialExtent

The initial extent of the layer. By default, the extent is worldwide.

<Error> loadError

Set if the layer failed to load. (Added at v3.9)

<Boolean> loaded

When the layer is loaded, the value becomes "true", and layer properties can be accessed. The onLoad event is also fired.
Known values: true | false

<Number> maxScale

Maximum visible scale for the layer. If the map is zoomed in beyond this scale, the layer will not be visible. A value of 0 means the layer does not have a maximum scale. (Added at v3.1)
Default value: 0

<Number> minScale

Minimum visible scale for the layer. If the map is zoomed out beyond this scale, the layer will not be visible. A value of 0 means the layer does not have a visible scale. (Added at v3.1)
Default value: 0

<String> name

Name of the vector tile layer.
Sample:
vtLayer.name = "Topo vector tiles";

<Number> opacity

Opacity or transparency of layer. Values range from 0.0 to 1.0, where 0.0 is 100% transparent and 1.0 has no transparency.
Known values: 0.0 - 1.0
Default value: 1.0

<Boolean> showAttribution

When true, the layer's attribution is displayed on the map. (Added at v3.1)
Known values: true | false
Default value: true

<SpatialReference> spatialReference

The spatial reference of the layer.

<Boolean> suspended

When true, the layer is suspended. A layer is considered to be suspended when one of the following is true:
  • The layer is hidden.
  • The layer is not visible at the current map scale.
  • The layer is explicitly suspended by calling the Layer.suspend method.
(Added at v3.1)
Known values: true | false

<TileInfo> tileInfo

Contains information about the tiling scheme for the layer.

<String> url

The URL to the vector tile service or style JSON that will be used to draw the layer.
Sample:
require([
  "esri/layers/VectorTileLayer", ... 
], function(VectorTileLayer, ... ) {
  // URL to a vector tile service
  var vectorTileLayer = new VectorTileLayer("https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer");
  ...
});
require([
  "esri/layers/VectorTileLayer", ... 
], function(VectorTileLayer, ... ) {
  // URL to a style JSON object
  var vectorTileLayer = new VectorTileLayer("https://www.arcgis.com/sharing/rest/content/items/4cf7e1fb9f254dcda9c8fbadb15cf0f8/resources/styles/root.json");
  ...
});
require([
  "esri/layers/VectorTileLayer", ... 
], function(VectorTileLayer, ... ) {
  VectorTileLayer.ACCESS_TOKEN = "<access token>";
  var vectorTileLayer = new VectorTileLayer("mapbox://styles/mapbox/streets-v8");
  ...
});

<Boolean> visible

Visibility of the layer.
Known values: true | false
Default value: true

<Boolean> visibleAtMapScale

When true, the layer is visible at the current map scale. (Added at v3.1)
Known values: true | false
Method Details

attr(name, value)

Adds a new attribute or changes the value of an existing attribute on the layer's node. Removes the attribute if the value is null or undefined. (Added at v3.7)
Return type: Layer
Parameters:
<String> name Required The name of the attribute.
<String> value Required The value of the attribute. Set this value as null to remove the attribute.

getAttributionData()

Asynchrously returns custom data for the layer when available. (Added at v3.1)
Return type: Deferred

getMap()

Returns reference to the map control the layer is added to. Returns null or undefined if it is not added to a map. (Added at v3.7)
Return type: Map

getNode()

Returns the layer's DOM node. (Added at v3.7)
Return type: HTMLElement

getStyle()

Returns an object that contains the current style information for the layer. This object can be used as the argument to create a new layer.
Return type: Object

hide()

Sets the visibility of the layer to "false". The layer is not removed, but it is hidden from view.

isVisibleAtScale(scale)

Returns true if the layer is visible at the given scale. (Added at v3.1)
Return type: Boolean
Parameters:
<Number> scale Required The scale at which to check if the layer is visible.

resume()

Resumes layer drawing. (Added at v3.1)

setMaxScale(scale)

Set the maximum scale for the layer. (Added at v3.1)
Parameters:
<Number> scale Required The maximum scale at which the layer is visible.

setMinScale(scale)

Set the minimum scale for the layer. (Added at v3.1)
Parameters:
<Number> scale Required The minimum scale at which the layer is visible.

setOpacity(opacity)

Sets the opacity of the layer. Values range from 0.0 to 1.0, where 0.0 is 100% transparent and 1.0 has no transparency.
Parameters:
<Number> opacity Required Value from 0 to 1, where 0 is 100% transparent and 1 has no transparency. The default value is 1.
Sample:

layer.setOpacity(0.5);

setScaleRange(minScale, maxScale)

Set the scale range for the layer. If minScale and maxScale are set to 0 then the layer will be visible at all scales. (Added at v3.1)
Parameters:
<Number> minScale Required The minimum scale at which the layer is visible.
<Number> maxScale Required The maximum scale at which the layer is visible.

setStyle(styleUrl)

Changes the style properties used to render the layers. It is the equivalent of changing the entire CSS style sheet for a web page. It takes either a style object or a url to a style resource. When loading a style, it is the developer's responsibility to make sure that any relative urls in the style resolve correctly.
Parameters:
<String | Object> styleUrl Required A url to a JSON file containing the stylesheet information to render the layer. You may also pass an object containing the stylesheet information identical to the JSON file.
Sample:
require([
  "esri/layers/VectorTileLayer", ... 
], function(VectorTileLayer, ... ) {
  var vectorTileLayer = new VectorTileLayer("https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap/VectorTileServer");
  vectorTileLayer.setStyle("http://www.arcgis.com/sharing/rest/content/items/5ad3948260a147a993ef4865e3fad476/resources/styles/root.json");
  ...
});

setVisibility(isVisible)

Sets the visibility of the layer. When true, the layer is visible.
Parameters:
<Boolean> isVisible Required Set the visibility of the layer.

show()

Sets the visibility of the layer to "true".

suspend()

Suspends layer drawing. (Added at v3.1)
Event Details
[ On Style Events | Connect Style Event ]

error

Fires when there is a problem retrieving a layer. Should be used in favor of onError. (Added at v3.5)
Event Object Properties:
<Error> error ArcGIS Server error message returned in a JavaScript error object.

load

Fires after layer properties for the layer are successfully populated. This event must be successful before the layer can be added to the map. Should be used in favor of onLoad. (Added at v3.5)
Event Object Properties:
<Layer> layer The loaded layer.

opacity-change

Fires when the layer opacity has been changed, and returns an object with the opacity value. Should be used in favor of onOpacityChange. (Added at v3.5)
Event Object Properties:
<Number> opacity Fires when the layer opacity (transparency) changes. A number property named opacity that indicates the new opacity. Values range from 0.0 to 1.0, where 0.0 is 100% transparent and 1.0 has no transparency.

resume

Fires when a layer resumes drawing. Should be used in favor of onResume. (Added at v3.5)

scale-range-change

Fires when a layer's minScale and/or maxScale is changed. Should be used in favor of onScaleRangeChange. (Added at v3.5)

scale-visibility-change

Fires when a layer's scale visibility changes. The scale visibility changes when a layer is initially visible and becomes invisible because the map scale does not intersect the layer's scale range or vice versa. Should be used in favor of onScaleVisibilityChange. (Added at v3.5)

style-change

Fires when the style is changed on the layer.
Event Object Properties:
<Object> style The style object of the service with fully qualified URLs for glyphs and sprite.
Sample:
require([
  "esri/layers/VectorTileLayer", ... 
], function(VectorTileLayer, ... ) {
  var vectorTileLayer = new VectorTileLayer("https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap/VectorTileServer");
  vectorTileLayer.on("style-change", function(event){
    console.log("Event: ", event);
  });
  ...
});

suspend

Fires when a layer suspends drawing. Should be used in favor of onSuspend. (Added at v3.5)

update-end

Fires when the layer has finished updating its content. This event is always preceded by update-start. (Added at v3.21)
Event Object Properties:
<Error> error Optional argument. The error object is available when an error occurs during the update.

update-start

Fires when the layer begins to update its content. (Added at v3.21)

visibility-change

Fires when the layer visibility has been changed, and returns an object with a Boolean visible property containing the new visibility value of the layer. Should be used in favor of onVisibilityChange. (Added at v3.5)
Event Object Properties:
<Boolean> visible Fires when the layer visibility changes. A boolean property named visible indicates whether or not the layer is visible after visibility changed.
Show Modal