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

Basemaps can contain multiple baseLayers. To enhance the vector styles with terrain, visit ArcGIS Online and find the id for the World Hillshade layer and add it as a TileLayer to the baseLayers property.

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

Try the Style a Vector Basemap lab and create your own basemap style. When you are done, find the id for the basemap and load your own custom basemap into the app.