Creating Custom Vector Basemap with ArcGIS API for JavaScript

Question

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

@JamesLawruk This is open now.

PolyGeo
– PolyGeo ♦

2020-02-05 19:27:35 +00:00
Commented Feb 5, 2020 at 19:27 — PolyGeo
– PolyGeo ♦, Commented Feb 5, 2020 at 19:27

James Lawruk · Accepted Answer · 2020-02-05 20:15:59Z

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);

edited Feb 5, 2020 at 20:15

answered Feb 5, 2020 at 20:04

James Lawruk

9816 silver badges9 bronze badges

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
– Chris

2020-02-10 20:49:17 +00:00
Commented Feb 10, 2020 at 20:49

Add a comment |

Baohua Chu · Accepted Answer · 2022-04-28 13:58:48Z

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>

`

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review — Vince
– Vince, Commented Apr 28, 2022 at 13:57
I tried the code above， which added the base map to baseMapGallery. — Baohua Chu
– Baohua Chu, Commented Apr 29, 2022 at 5:11

Stack Exchange Network

Creating Custom Vector Basemap with ArcGIS API for JavaScript

2 Answers 2

Your Answer

Hot Network Questions

Creating Custom Vector Basemap with ArcGIS API for JavaScript

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions