I am using the ArcGIS API for JavaScript 3.x and would like to add a vector tile layer that I created to my map as a basemap that appears in the basemap gallery dijit. I am able to load my layer into the map as a VectorTileLayer but when I try to add the layer to the basemaps it just doesn't seem to work.

How can I do this?

I've tried creating a basemap object with the url set to my VectorTileServer, creating a BasemapLayer with a VectorTileLayer type, and use creating a map without a basemap and adding the VectorTileLayer as a layer. The last try got my closest and looks like this:

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Vector Basemap Test</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.31/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.31/esri/css/esri.css">
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;

  <script src="https://js.arcgis.com/3.15/"></script>
      var map4;
        ], function(Map, esriBasemaps, BasemapLayer, VectorTileLayer, Basemap, BasemapGallery) {
          esriBasemaps.vector1 = {
            baseMapLayers: [{ url: "https://tiles.arcgis.com/tiles/bFDgLqS5IyUBQLAd/arcgis/rest/services/Color_Basemap_with_Buildings/VectorTileServer" }],
            title: "vector1"

          map4 = new Map("map4", {
            center: [-75.520195, 39.146485],
            zoom: 13
          var vtlayer = new VectorTileLayer("https://tiles.arcgis.com/tiles/bFDgLqS5IyUBQLAd/arcgis/rest/services/Color_Basemap_with_Buildings/VectorTileServer/resources/styles/root.json");
          var basemapGallery4 = new BasemapGallery({
                showArcGISBasemaps: false,
                map: map4
              }, "basemapGallery4");
              basemapGallery4.on("error", function(msg) {
                console.log("basemap gallery error:  ", msg);

<body class="claro">
    <div style="margin:5px;padding:0;width:300px;height:300px;display:inline-block;">
      <div id="map4" style="padding:0;width:100%;height:100%;postition:relative;">
        <div style="position:absolute;z-Index:999;width:150px;height:100px;overflow:auto;">
          <div id="basemapGallery4"></div>


However, the layer doesn't show in my basemap gallery and the other ways of doing it are closer to the few examples I can find online.

You can see my other tries here: https://codepen.io/sirhcybe/pen/abOoqmq

  • 1
    @JamesLawruk This is open now.
    – PolyGeo
    Feb 5 '20 at 19:27

1. Create a BasemapLayer of type VectorTileLayer.

var vtlayer = new BasemapLayer({
    styleUrl: "https://tiles.arcgis.com/tiles/bFDgLqS5IyUBQLAd/arcgis/rest/services/Color_Basemap_with_Buildings/VectorTileServer",
    type: "VectorTileLayer"

2. Create a Basemap object with the BasemapLayer included in the layers array property.

var basemap = new Basemap({ 
  thumbnailUrl: "https://www.arcgis.com/sharing/rest/content/items/e64f06e8d912465a96f9ea9bfdb72676/info/thumbnail/thumbnail1561649662036.jpeg"

3. Add the Basemap to to the BasemapGallery collection.

  • This does get the layer to show in the gallery but it's a little more code than I was hoping for. With non-vector basemaps I can add them to the esriBasemaps object which allows me to set them as the default basemap for a new map object and have them appear automatically in the BasemapGallery. I'm starting to think that's not possible in the 3.x API
    – Chris
    Feb 10 '20 at 20:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.