Add a vector tile layer | ArcGIS Maps SDK for JavaScript

Add a published vector tile layer to an existing map.

A vector tile layer A vector tile layer is a data layer used to access and display tiled data and its corresponding styles. Learn more is a hosted data layer A data layer is a layer that references geographic data from a file or a service and is used to visualize the data in a map or scene. Learn more . The data is vector tile data. You can create a vector tile layer by publishing your data with data management tools Data management tools are ArcGIS software applications and functionality in portal and ArcGIS Pro that can be used by developers to create, manage, and edit content and data such as web maps, hosted layers, and data services for their applications. Learn more .

In this tutorial, you display a parcels layer from a public vector tile service A vector tile service is a data service that provides access to vector tile data and a style definition. Learn more , using the default styling.

Prerequisites

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 An access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication. Learn more with the correct privileges to access the location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more used in this tutorial.

Go to the Create an API key tutorial and create an API key An API key is a long-lived access token created using API key credentials. They are valid for up to one year and are typically embedded directly into client applications. Learn more with the following privilege(s) Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more :
- 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 API key credentials are an item that contains the parameters used to create and manage long-lived access tokens for API key authentication. They are a type of developer credential. Learn more access to the layer item. Learn more in Item access privileges.
In CodePen, set the apiKey property on the global esriConfig variable to your access token.
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 and change the zoom level.

26 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a vector tile layer</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/light-gray" center="-118.805, 34.020" zoom="12">

    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>
4 collapsed lines

</body>

</html>

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 ArcGIS Maps SDK for JavaScript, previously known as ArcGIS API for JavaScript, is a developer product for building mapping and spatial analysis applications for the web. Learn more 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.

31 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a vector tile layer</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/light-gray" center="-118.805, 34.020" zoom="12">

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

  <script type="module">
    const VectorTileLayer = await $arcgis.import("@arcgis/core/layers/VectorTileLayer.js");

  </script>
4 collapsed lines

</body>

</html>

Add the vector tile layer

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

31 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a vector tile layer</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/light-gray" center="-118.805, 34.020" zoom="12">

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

  <script type="module">
    const VectorTileLayer = await $arcgis.import("@arcgis/core/layers/VectorTileLayer.js");

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

  </script>
4 collapsed lines

</body>

</html>

Create a VectorTileLayer and set the url property to reference the vector tile layer A vector tile layer is a data layer used to access and display tiled data and its corresponding styles. Learn more .

31 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a vector tile layer</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/light-gray" center="-118.805, 34.020" zoom="12">

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

  <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>
4 collapsed lines

</body>

</html>

Add the VectorTileLayer to the map.

31 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a vector tile layer</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/light-gray" center="-118.805, 34.020" zoom="12">

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

  <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>
4 collapsed lines

</body>

</html>

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 SDK features and ArcGIS services in these tutorials: