RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/tutorials/add-a-vector-tile-layer/ below:

Add a vector tile layer | Overview | ArcGIS Maps SDK for JavaScript 4.33

Add a published vector tile layer to an existing map.

A vector tile layer is a hosted data layer. The data is vector tile data. You can create a vector tile layer by publishing your data with data management tools.

In this tutorial, you display a parcels layer from a public vector tile service, using the default styling.

Note

To learn how to publish your own vector tile layer, visit Data hosting in the Mapping and location services guide.

Prerequisites ArcGIS Accounts:

You need an ArcGIS Location Platform or ArcGIS Online account.

Steps Create a new pen

To get started, either complete the Display a map tutorial or .

Get an access token

You need an access token with the correct privileges to access the location services used in this tutorial.

Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
  - Location services > Basemaps
- Item access
  - Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials access to the layer item. Learn more in Item access privileges.

In CodePen, set esriConfig.apiKey to your access token.

Use dark colors for code blocks

1
2
3
4
5
6
7
8
9
  var esriConfig = {
    apiKey: "YOUR_ACCESS_TOKEN",
  };

To learn about other ways to get an access token, go to Types of authentication.

Update the map

Update the basemap attribute to display a gray basemap.

Expand

Use dark colors for code blocks

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
    <arcgis-map basemap="arcgis/light-gray" center="-118.805, 34.027" zoom="13">

      <arcgis-zoom position="top-left"></arcgis-zoom>
    </arcgis-map>

Add modules

In a new <script> at the bottom of the <body>, use $arcgis.import to add the VectorTileLayer module.
The ArcGIS Maps SDK for JavaScript is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK's different modules, visit the References page.

Expand
Use dark colors for code blocks
```
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
    <script type="module">
      const VectorTileLayer = await $arcgis.import("@arcgis/core/layers/VectorTileLayer.js");

    </script>
```

Add the vector tile layer

Use the viewOnReady method to wait until the Map component is ready before adding the layer.

Expand

Use dark colors for code blocks

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
    <script type="module">
      const VectorTileLayer = await $arcgis.import("@arcgis/core/layers/VectorTileLayer.js");

      const viewElement = document.querySelector("arcgis-map");
      await viewElement.viewOnReady();

    </script>

Create a VectorTileLayer and set the url property to reference the vector tile layer.

Expand

Use dark colors for code blocks

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
    <script type="module">
      const VectorTileLayer = await $arcgis.import("@arcgis/core/layers/VectorTileLayer.js");

      const viewElement = document.querySelector("arcgis-map");
      await viewElement.viewOnReady();

      const vtlLayer = new VectorTileLayer({
        url: "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/",
      });

    </script>

Add the VectorTileLayer to the map.

Expand

Use dark colors for code blocks

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
    <script type="module">
      const VectorTileLayer = await $arcgis.import("@arcgis/core/layers/VectorTileLayer.js");

      const viewElement = document.querySelector("arcgis-map");
      await viewElement.viewOnReady();

      const vtlLayer = new VectorTileLayer({
        url: "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/",
      });

      viewElement.map.add(vtlLayer);

    </script>

Run the App

In CodePen, run your code to display the map.

You should see the vector tile layer with parcels displayed on the basemap layer.

What's next?

Learn how to use additional API features and ArcGIS services in these tutorials:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4