VectorTileLayer | MapLibre GL JS

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
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(options: IVectorTileLayerOptions): 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
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

Parameter	Type	Notes
`options`	IVectorTileLayerOptions	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

Property	Type	Notes
`style`	`StyleSpecification`	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

token

inheritedinherited

Class Property

Accessors

Hide inherited accessors

Accessor	Returns
`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

Method	Returns	Notes
`_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(style: StyleSpecification): void

Parameters

Parameter	Type
`style`	StyleSpecification

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(map: Map$1): HostedLayer

Add layers to a maplibre map.

Parameters

Parameter	Type	Notes
`map`	Map$1	A maplibre map object

Returns

HostedLayer

Inherited from HostedLayer.addLayersTo

addSourcesAndLayersTo

inheritedinherited

Class Method

addSourcesAndLayersTo(map: Map$1): HostedLayer

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

Parameters

Parameter	Type	Notes
`map`	Map$1	A MapLibre GL JS map

Returns

HostedLayer

Inherited from HostedLayer.addSourcesAndLayersTo

addSourcesTo

inheritedinherited

Class Method

addSourcesTo(map: Map$1): HostedLayer

Parameters

Parameter	Type
`map`	Map$1

Returns

HostedLayer

Inherited from HostedLayer.addSourcesTo

copyLayer

inheritedinherited

Class Method

copyLayer(layerId: string): LayerSpecification

Returns a mutable copy of the specified layer

Parameters

Parameter	Type	Notes
`layerId`	string	The ID of the maplibre style layer to copy

Returns

LayerSpecification

Inherited from HostedLayer.copyLayer

copySource

inheritedinherited

Class Method

copySource(sourceId: string): SupportedSourceSpecification

Returns a mutable copy of the specified source.

Parameters

Parameter	Type	Notes
`sourceId`	string	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(sourceId: string, attribution: string): void

Sets the data attribution of the specified source

Parameters

Parameter	Type	Notes
`sourceId`	string	The ID of the maplibre style source.
`attribution`	string	Custom attribution text.

Returns

void

Inherited from HostedLayer.setAttribution

setSourceId

inheritedinherited

Class Method

setSourceId(oldId: string, newId: string): void

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

Parameters

Parameter	Type	Notes
`oldId`	string	The source ID to be changed.
`newId`	string	The new source ID.

Returns

void

Inherited from HostedLayer.setSourceId

fromPortalItem

static

Class Method

fromPortalItem(itemId: string, options: IVectorTileLayerOptions): 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
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

Parameter	Type	Notes
`itemId`	string	ArcGIS item ID of a vector tile layer.
`options`	IVectorTileLayerOptions	Configuration options for the vector tile layer.

Returns

Promise<VectorTileLayer>

A promise that resolves to a VectorTileLayer instance.

fromUrl

static

Class Method

fromUrl(serviceUrl: string, options: IVectorTileLayerOptions): 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
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

Parameter	Type	Notes
`serviceUrl`	string	URL to an ArcGIS vector tile service.
`options`	IVectorTileLayerOptions	Configuration options for the vector tile layer.

Returns

Promise<VectorTileLayer>

A promise that resolves to a VectorTileLayer instance.