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 lab, 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 DevLabs: 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",
     "dojo/domReady!"
     //*** ADD ***//
   ], function(Map, MapView, Basemap, VectorTileLayer) {
   

2. In the 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",
    "dojo/domReady!"
    //*** ADD ***//
  ], 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
          }
        })
      ]
    });

Add your own custom vector basemap