Display a styled vector basemap

Overview

You will learn: how to display a vector basemap with custom styles.

With the ArcGIS API for JavaScript you can build mapping applications that use Esri vector basemaps with custom styles. Esri vector basemaps are multi-scale vector tile layers you can create, style and save with the new ArcGIS Vector Tile Style Editor. Each custom style is stored as Tile Layer on ArcGIS Online with a unique portal id. To add the layer as a basemap to your application, you first have to create the vector tile layer (by id), add it to a new basemap, and then add it to your application. Additional tile layers can be also be added to a basemap to enhance it further e.g. hillshade. To learn more about how to create your own custom vector styles, see the Style a Vector Basemap lab.

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

Steps

Create a starter app

1. Go to the JavaScript Starter App.

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

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",
         //*** ADD ***//
         "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. Remove the reference to topo-vector and replace it with the basemap.

         //*** ADD ***//
         var basemap = new Basemap({
           baseLayers: [
             new VectorTileLayer({
               portalItem: {
                 id: "d2ff12395aeb45998c1b154e25d680e5" // Forest and Parks Canvas
               }
             })
           ]
         });
   
         var map = new Map({
           //*** ADD ***//
           // 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