Skip to content

VectorTileLayer

Class

This class allows you to load and display ArcGIS vector tile layers in a MapLibre map.

The VectorTileLayer class provides functionality for:

  • Loading and displaying vector tile layers from ArcGIS Online item IDs or feature service URLs.
  • Adding sources and layers to a MapLibre map.
  • Managing vector tile layer styles.
  • Managing vector tile layer visibility and opacity.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
import { VectorTileLayer } from '@esri/maplibre-arcgis';

// Add a vector tile layer from an ArcGIS item ID
const vectorLayer = await maplibreArcGIS.VectorTileLayer.fromPortalItem('e0b5e1aa287845d78b1dabd3223ebed1');
vectorLayer.addSourcesAndLayersTo(map);

// Add a vector tile layer from an ArcGIS vector tile service URL
const vectorLayer2 = await maplibreArcGIS.VectorTileLayer.fromUrl('https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_parcels_VTL/VectorTileServer');
vectorLayer2.addSourcesAndLayersTo(map);
Inheritance: VectorTileLayerHostedLayer

Constructors

constructor

Class Constructor
VectorTileLayer(optionsIVectorTileLayerOptions): VectorTileLayer

Creates a new VectorTileLayer instance. You must provide either an ArcGIS item ID or a vector tile service URL. If both are provided, the item ID will be used and the URL ignored.

Use dark colors for code blocksCopy
1
2
3
4
import { VectorTileLayer } from '@esri/maplibre-arcgis';
const vectorLayer = new VectorTileLayer({url: 'https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_parcels_VTL/VectorTileServer', authentication: "YOUR_ACCESS_TOKEN"});
await vectorLayer.initialize();
vectorLayer.addSourcesAndLayersTo(map);

Creating layers using the constructor directly is not recommended. Use the VectorTileLayer.fromUrl and VectorTileLayer.fromPortalItem static methods instead.

Parameters
ParameterTypeNotes
optionsIVectorTileLayerOptions

Configuration options for the vector tile layer. You must provide either an ArcGIS item ID or a vector tile service URL. If both are provided, the item ID will be used and the URL ignored.

Returns 
VectorTileLayer

Properties

Hide inherited properties
PropertyTypeNotes
styleStyleSpecification

Style specification.

token
inherited
string

An ArcGIS access token is required for accessing secure data layers. To get a token, go to the Security and Authentication Guide.

style

Class Property
style: StyleSpecification

Style specification.

token

inheritedinherited
Class Property
token: string

An ArcGIS access token is required for accessing secure data layers. To get a token, go to the Security and Authentication Guide.

Inherited from HostedLayer.token

Accessors

Hide inherited accessors
AccessorReturns
layer()
inherited
Readonly<LayerSpecification>
layers()
inherited
readonlyLayerSpecification[]
source()
inherited
Readonly<SupportedSourceSpecification>
sourceId()
inherited
string
sources()
inherited
Readonly<{}>

layer

inheritedinherited
Class Accessor
layer(): Readonly<LayerSpecification>

Retrieves the layer for the hosted layer.

Returns 
Readonly<LayerSpecification>
Inherited from HostedLayer.layer

layers

inheritedinherited
Class Accessor
layers(): readonlyLayerSpecification[]

Retrieves the layers for the hosted layer.

Returns 
readonlyLayerSpecification[]
Inherited from HostedLayer.layers

source

inheritedinherited
Class Accessor
source(): Readonly<SupportedSourceSpecification>

Retrieves the source for the hosted layer.

Returns 
Readonly<SupportedSourceSpecification>
Inherited from HostedLayer.source

sourceId

inheritedinherited
Class Accessor
sourceId(): string

Retrieves the source ID for the hosted layer.

Returns 
string
Inherited from HostedLayer.sourceId

sources

inheritedinherited
Class Accessor
sources(): Readonly<{}>

Retrieves the sources for the hosted layer.

Returns 
Readonly<{}>
Inherited from HostedLayer.sources

Methods

Hide inherited methods
MethodReturnsNotes
_cleanStyle(style)void
_loadItemInfo()Promise<IItemInfo>

Retrieves information from the portal about item attribution and associated service URLs

_loadServiceInfo()Promise<IVectorTileServiceInfo>

Retrieves information from the data service about data attribution, associated item IDs, and more.

_loadStyleFromItemId()Promise<StyleSpecification>
_loadStyleFromServiceUrl()Promise<StyleSpecification>
addLayersTo(map)
inherited
HostedLayer

Add layers to a maplibre map.

addSourcesAndLayersTo(map)
inherited
HostedLayer

Convenience method that adds all associated Maplibre sources and data layers to a map.

addSourcesTo(map)
inherited
HostedLayer
copyLayer(layerId)
inherited
LayerSpecification

Returns a mutable copy of the specified layer

copySource(sourceId)
inherited
SupportedSourceSpecification

Returns a mutable copy of the specified source.

initialize()Promise<VectorTileLayer>

Initializes the layer with data from ArcGIS. Called to instantiate a class.

setAttribution(sourceId, attribution)
inherited
void

Sets the data attribution of the specified source

setSourceId(oldId, newId)
inherited
void

Changes the ID of a maplibre style source, and updates all associated maplibre style layers.

fromPortalItem(itemId, options)Promise<VectorTileLayer>

Creates a new VectorTileLayer instance from an ArcGIS vector tile service URL. You must provide a valid vector tile service URL.

fromUrl(serviceUrl, options)Promise<VectorTileLayer>

Creates a new VectorTileLayer instance from an ArcGIS vector tile service URL. You must provide a valid vector tile service URL.

_cleanStyle

Class Method
_cleanStyle(styleStyleSpecification): void
Parameters
ParameterType
styleStyleSpecification
Returns 
void

_loadItemInfo

Class Method
_loadItemInfo(): Promise<IItemInfo>

Retrieves information from the portal about item attribution and associated service URLs

Returns 
Promise<IItemInfo>

_loadServiceInfo

Class Method
_loadServiceInfo(): Promise<IVectorTileServiceInfo>

Retrieves information from the data service about data attribution, associated item IDs, and more.

Returns 
Promise<IVectorTileServiceInfo>

_loadStyleFromItemId

Class Method
_loadStyleFromItemId(): Promise<StyleSpecification>
Returns 
Promise<StyleSpecification>

_loadStyleFromServiceUrl

Class Method
_loadStyleFromServiceUrl(): Promise<StyleSpecification>
Returns 
Promise<StyleSpecification>

addLayersTo

inheritedinherited
Class Method
addLayersTo(mapMap$1): HostedLayer

Add layers to a maplibre map.

Parameters
ParameterTypeNotes
mapMap$1

A maplibre map object

Returns 
HostedLayer

addSourcesAndLayersTo

inheritedinherited
Class Method
addSourcesAndLayersTo(mapMap$1): HostedLayer

Convenience method that adds all associated Maplibre sources and data layers to a map.

Parameters
ParameterTypeNotes
mapMap$1

A MapLibre GL JS map

Returns 
HostedLayer

addSourcesTo

inheritedinherited
Class Method
addSourcesTo(mapMap$1): HostedLayer
Parameters
ParameterType
mapMap$1
Returns 
HostedLayer

copyLayer

inheritedinherited
Class Method
copyLayer(layerIdstring): LayerSpecification

Returns a mutable copy of the specified layer

Parameters
ParameterTypeNotes
layerIdstring

The ID of the maplibre style layer to copy

Returns 
LayerSpecification
Inherited from HostedLayer.copyLayer

copySource

inheritedinherited
Class Method
copySource(sourceIdstring): SupportedSourceSpecification

Returns a mutable copy of the specified source.

Parameters
ParameterTypeNotes
sourceIdstring

The ID of the maplibre style source to copy.

Returns 
SupportedSourceSpecification
Inherited from HostedLayer.copySource

initialize

Class Method
initialize(): Promise<VectorTileLayer>

Initializes the layer with data from ArcGIS. Called to instantiate a class.

Returns 
Promise<VectorTileLayer>

setAttribution

inheritedinherited
Class Method
setAttribution(sourceIdstring, attributionstring): void

Sets the data attribution of the specified source

Parameters
ParameterTypeNotes
sourceIdstring

The ID of the maplibre style source.

attributionstring

Custom attribution text.

Returns 
void

setSourceId

inheritedinherited
Class Method
setSourceId(oldIdstring, newIdstring): void

Changes the ID of a maplibre style source, and updates all associated maplibre style layers.

Parameters
ParameterTypeNotes
oldIdstring

The source ID to be changed.

newIdstring

The new source ID.

Returns 
void

fromPortalItem

static
Class Method
fromPortalItem(itemIdstring, optionsIVectorTileLayerOptions): Promise<VectorTileLayer>

Creates a new VectorTileLayer instance from an ArcGIS vector tile service URL. You must provide a valid vector tile service URL.

Use dark colors for code blocksCopy
1
2
3
4
5
import { VectorTileLayer } from '@esri/maplibre-arcgis';

// Add a vector tile layer from an ArcGIS item ID
const vectorLayer = await maplibreArcGIS.VectorTileLayer.fromPortalItem('e0b5e1aa287845d78b1dabd3223ebed1');
vectorLayer.addSourcesAndLayersTo(map);
Parameters
ParameterTypeNotes
itemIdstring

ArcGIS item ID of a vector tile layer.

optionsIVectorTileLayerOptions

Configuration options for the vector tile layer.

Returns 
Promise<VectorTileLayer>

A promise that resolves to a VectorTileLayer instance.

fromUrl

static
Class Method
fromUrl(serviceUrlstring, optionsIVectorTileLayerOptions): Promise<VectorTileLayer>

Creates a new VectorTileLayer instance from an ArcGIS vector tile service URL. You must provide a valid vector tile service URL.

Use dark colors for code blocksCopy
1
2
3
4
5
import { VectorTileLayer } from '@esri/maplibre-arcgis';

// Add a vector tile layer from an ArcGIS vector tile service URL
const vectorLayer = await maplibreArcGIS.VectorTileLayer.fromUrl('https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_parcels_VTL/VectorTileServer');
vectorLayer.addSourcesAndLayersTo(map);
Parameters
ParameterTypeNotes
serviceUrlstring

URL to an ArcGIS vector tile service.

optionsIVectorTileLayerOptions

Configuration options for the vector tile layer.

Returns 
Promise<VectorTileLayer>

A promise that resolves to a VectorTileLayer instance.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.