Overview

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

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 a tile layer on ArcGIS Online with a unique item id. To add the layer as a basemap to your application, you first have to create the vector tile layer using it's item 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 JavaScript 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.

          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"
    ], 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

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.

Content