3

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:

<html>
<head>
  <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">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
      var map4;
        require([
          "esri/map",
          "esri/basemaps",
          "esri/dijit/BasemapLayer",
          "esri/layers/VectorTileLayer",
          "esri/dijit/Basemap",
          "esri/dijit/BasemapGallery",
          "dojo/domReady!"
        ], 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");
          map4.addLayer(vtlayer);
          var basemapGallery4 = new BasemapGallery({
                showArcGISBasemaps: false,
                map: map4
              }, "basemapGallery4");
              basemapGallery4.startup();
              basemapGallery4.on("error", function(msg) {
                console.log("basemap gallery error:  ", msg);
              });
        });
  </script>
</head>

<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>
        </div>
      </div>
    </div>
</body>

</html>

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
  • 1
    @JamesLawruk This is open now.
    – PolyGeo
    Feb 5, 2020 at 19:27

2 Answers 2

1

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({ 
  layers:[vtlayer],
  title:"Vector",
  thumbnailUrl: "https://www.arcgis.com/sharing/rest/content/items/e64f06e8d912465a96f9ea9bfdb72676/info/thumbnail/thumbnail1561649662036.jpeg"
});

3. Add the Basemap to to the BasemapGallery collection.

basemapGallery.add(basemap);
1
  • 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, 2020 at 20:49
0

I'm researching this topic too. The colde is :.`

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

<script src="https://js.arcgis.com/3.40/"></script>
<script>
    var map;
    require([
        "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils","esri/dijit/Basemap","esri/dijit/BasemapLayer",
        "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
        "dojo/domReady!"
    ], function(
        Map, BasemapGallery, arcgisUtils,Basemap,BasemapLayer,
        parser
    ) {
        parser.parse();

        map = new Map("map", {
            basemap: "topo-vector",
            center: [-105.255, 40.022],
            zoom: 13
        });
        var basemaps = [];

        var layer1 = new BasemapLayer({
            url:"https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
        });
        var layer2 = new BasemapLayer({
            url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
           // type: "VectorTileLayer"
        });

        var vtLayer = new BasemapLayer({
            styleUrl:  "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
            type: "VectorTileLayer"
        });

        var basemap1 = new Basemap({
            layers:[layer1],
            title:"basemap1",
            thumbnailUrl:"https://stamen-tiles.a.ssl.fastly.net/terrain/10/177/409.png"
        });
        var basemap2 = new Basemap({
            layers:[layer2],
            title:"basemap2",
            thumbnailUrl:"https://stamen-tiles.a.ssl.fastly.net/terrain/10/177/409.png"
        });
        var basemap3 = new Basemap({
            layers:[vtLayer],
            title:"Vector",
            thumbnailUrl: "https://www.arcgis.com/sharing/rest/content/items/e64f06e8d912465a96f9ea9bfdb72676/info/thumbnail/thumbnail1561649662036.jpeg"
        });
        basemaps.push(basemap1,basemap2,basemap3);
        //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
        var basemapGallery = new BasemapGallery({
            showArcGISBasemaps: false,
            basemaps:basemaps,
            map: map
        }, "basemapGallery");
   
        basemapGallery.startup();

        basemapGallery.on("error", function(msg) {
            console.log("basemap gallery error:  ", msg);
        });
    });
</script>
<div id="map"
     data-dojo-type="dijit/layout/ContentPane"
     data-dojo-props="region:'center'"
     style="padding:0;">

    <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane"
             data-dojo-props="title:'Switch Basemap', open:true">
            <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
                <div id="basemapGallery"></div>
            </div>
        </div>
    </div>

</div>
`
2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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