L.esri.Vector.vectorBasemapLayer

Extends L.esri.Vector.vectorTileLayer

L.esri.Vector.vectorBasemapLayer uses the esri-leaflet-vector plugin to display vector tile basemaps from the Basemap styles service. It also handles basemap attribution.

Constructor

The required key parameter can be used to display either a basemap style enumeration or a custom basemap style.

Basemap style enumerations

Basemap style enumerations represent predefined basemap styles provided by ArcGIS. Set the key parameter to a valid style enumeration to load a basemap into your application.

V1 enumerations

Style enumerations from the Basemap styles service v1 contain two or three parts separated by a colon (:). Each part is written in camel case without spaces between words:

• {Provider}:{StyleName}
• {Provider}:{StyleName}:{Component}

Some examples include:

• ArcGIS:Imagery
• ArcGIS:HumanGeography:Detail

V2 enumerations

Style enumerations from the Basemap styles service (v2) contain two or three parts separated by a forward slash (/). Each part is written in lowercase with words separated by dashes:

• {provider}/{style-name}
• {provider}/{style-name}/{component}

Some examples include:

• arcgis/imagery
• arcgis/human-geography/detail

Custom basemap styles

L.esri.Vector.vectorBasemapLayer also supports custom basemap styles created with the Vector Tile Style Editor. To load a custom basemap style, set the key parameter to its item ID.

Options

L.esri.Vector.vectorBasemapLayer accepts all L.esri.Vector.vectorTileLayer options, though portalUrl has no effect. A valid API key or token is required to load a vector basemap layer.

function (style) {
    // make changes to the style object
    // return your style overrides
    return newStyleObj;
}

Default panes

By default, L.esri.Vector.vectorBasemapLayer objects are added to Leaflet maps using the following panes:

Methods

L.esri.Vector.vectorBasemapLayer inherits all methods from L.esri.Vector.vectorTileLayer.

Examples

1
2
3
4
5
6
  const map = L.map("map").setView([40.706, -73.926], 14);

  L.esri.Vector.vectorBasemapLayer("arcgis/outdoor", {
      token: "YOUR_ACCESS_TOKEN",
      version: 2 // this property is optional
  }).addTo(map);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
    /* Use for API key authentication */
    const accessToken = "YOUR_ACCESS_TOKEN";

    // or

    /* Use for user authentication */
    // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
    //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
    //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
    //   portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
    // })

    // const accessToken = session.token;
    const map = L.map("map", {
      minZoom: 2
    })

    map.setView([34.02, -118.805], 11);

    const basemapEnum = "9d94a890b76a417cad8a748df4f97336";

    L.esri.Vector.vectorBasemapLayer(basemapEnum, {
      token: accessToken
    }).addTo(map);

1
2
3
4
5
6
  const map = L.map("map").setView([40.706, -73.926], 14);

  L.esri.Vector.vectorBasemapLayer("arcgis/streets", {
      token: "YOUR_ACCESS_TOKEN",
      language: "uk" // set language to Ukranian
  }).addTo(map);