Display a styled vector basemap

Overview

You will learn: how to build an app that displays a vector basemap with custom styles.

Applications can access and display vector tile basemaps and basemaps that have custom styles. You can create your own custom styles with the ArcGIS Vector Tile Style Editor. Custom basemaps are stored as tile layer items in ArcGIS Online or ArcGIS Enterprise. To add the layer to your map, use the item ID to create the vector tile layer, add it to a basemap, and then add the basemap to your application. Additional layers, e.g. hillshade, can be also be added to a basemap to enhance it the visualization. To learn more about how to create your own custom basemap styles, see the Style a Vector Basemap tutorial.

In this tutorial, you will build a mapping app that displays a custom vector basemap called Forest and Parks Canvas.

Zoom in and out on the map below to see the styles at different scales.

Steps

Create a starter app

1. Open the JavaScript Starter App on CodePen.

2. In CodePen, click Fork and save the pen as ArcGIS API for JavaScript Tutorials: Display a styled vector basemap.

Change the zoom level

1. In the main function, update the zoom level to 3.

         var view = new MapView({
           container: "viewDiv",
           map: map,
           center: [-118.80543,34.02700],
           //*** UPDATE ***//
           zoom: 3
         });
   

2. Run the code and you should see the southwest area of the United States.

Add a styled vector tile layer as a basemap

1. In the require statement, add a reference to the Basemap and VectorTileLayer module.

       require([
         "esri/Map",
         "esri/views/MapView",
         "esri/Basemap",
         "esri/layers/VectorTileLayer"
       ], function(Map, MapView, Basemap, VectorTileLayer) {
   

2. At the beginning of the code in the main function, create a new Basemap and then add a VectorTileLayer as a baseLayer to the basemap. Set the portalItem ID to d2ff12395aeb45998c1b154e25d680e5. Update the code to remove the reference to topo-vector and replace it with basemap.

         var basemap = new Basemap({
           baseLayers: [
             new VectorTileLayer({
               portalItem: {
                 id: "d2ff12395aeb45998c1b154e25d680e5" // Forest and Parks Canvas
               }
             })
           ]
         });
   
         var map = new Map({
           //*** UPDATE ***//
           // basemap: "topo-vector",
           basemap: basemap
         });
   

3. Run the code and explore the Forest and Parks Canvas basemap.

Congratulations, you're done!

Your app should look something like this.

Challenge

Add hillshade as a basemap layer

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Basemap",
      "esri/layers/VectorTileLayer",
      //*** ADD ***//
      "esri/layers/TileLayer"
    ], function(Map, MapView, Basemap, VectorTileLayer, TileLayer) {

      var basemap = new Basemap({
        baseLayers: [

          //*** ADD ***//
          new TileLayer({
            portalItem: {
              id: "1b243539f4514b6ba35e7d995890db1d" // World Hillshade
            }
          }),

          new VectorTileLayer({
            portalItem: {
              id: "d2ff12395aeb45998c1b154e25d680e5" // Forest and Parks Canvas
            },
            opacity: 0.5
          })
        ]
      });

Add your own custom vector basemap