geodev-hackerlabs

Add a vector tile layer

In this lab you will add a vector tile layer to an ArcGIS API for JavaScript application.

  1. Click create_starter_map/index.html and copy the contents to a new jsbin.com.

  2. Update the require statement and function definition:

  require([
    "esri/Map",
    "esri/views/MapView",
    /*** ADD ***/
    "esri/layers/VectorTileLayer",
    "dojo/domReady!"
  ], function(Map, MapView, VectorTileLayer) {
  1. Now we’ll add a vector tiled layer. To do that, we modify the code that creates the Map to just create an empty map and we’ll add the tiled layer later.
    ...

    /*** REPLACE ***/

    // Create an empty map with no basemap
    var map = new Map();

    ...

    /*** ADD ***/

    // Create a new Vector Layer pointing at the style JSON.
    var tileLyr = new VectorTileLayer({
      url: "https://www.arcgis.com/sharing/rest/content/items/51acb8875f86482e82cb2ae24155b362/resources/styles/root.json"
    });

    map.add(tileLyr);
  1. Confirm that the JSBin Output panel shows the vector tiles.

Your app should look something like this:

Bonus