How do I remove basemaps from the default 4.7 BasemapGallery?

JasonBrowning · ‎07-02-2018

Hello,

I'm trying to use the default BasemapGallery widget with my 4.7 ArcGIS JS application - but only with 4 of the basemaps. The others are superfluous for the app. I know that the BasemapGallery has a Collection of Basemap objects, but I can't seem to access it. For instance, the below code doesn't clear a basemap from the BasemapGallery:

var basemapGallery = new BasemapGallery({
view: view,
container: document.createElement("div")
});

basemapGallery.viewModel.items.removeAt(2); //does not work

How do I do this?

Thanks so much,

Jason

RobertScheitlin__GISP · ‎07-02-2018

Jason,

This is how I do it:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>BasemapGallery widget - 4.7</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/4.7/"></script>
  <script>
    require([
      "esri/Map",
      "esri/views/SceneView",
      "esri/widgets/BasemapGallery",
      "esri/core/watchUtils",
      "dojo/domReady!"
    ], function(
      Map, SceneView, BasemapGallery, watchUtils
    ) {
      var map = new Map({
        basemap: "gray"
      });

      var view = new SceneView({
        container: "viewDiv",
        map: map,
        center: [139.68, 35.68],
        zoom: 3
      });

      var basemapGallery = new BasemapGallery({
        view: view
      });
      

      // Add the widget to the top-right corner of the view
      view.ui.add(basemapGallery, {
        position: "top-right"
      });
      
      watchUtils.once(basemapGallery.source.basemaps,"length", function(state){
        setTimeout(function(){
          basemapGallery.source.basemaps.removeAt(2);
        }, 200);
      });
      
      
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎07-02-2018

Jason,

This is how I do it:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>BasemapGallery widget - 4.7</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/4.7/"></script>
  <script>
    require([
      "esri/Map",
      "esri/views/SceneView",
      "esri/widgets/BasemapGallery",
      "esri/core/watchUtils",
      "dojo/domReady!"
    ], function(
      Map, SceneView, BasemapGallery, watchUtils
    ) {
      var map = new Map({
        basemap: "gray"
      });

      var view = new SceneView({
        container: "viewDiv",
        map: map,
        center: [139.68, 35.68],
        zoom: 3
      });

      var basemapGallery = new BasemapGallery({
        view: view
      });
      

      // Add the widget to the top-right corner of the view
      view.ui.add(basemapGallery, {
        position: "top-right"
      });
      
      watchUtils.once(basemapGallery.source.basemaps,"length", function(state){
        setTimeout(function(){
          basemapGallery.source.basemaps.removeAt(2);
        }, 200);
      });
      
      
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JasonBrowning · ‎07-02-2018

That does it. I needed to add the watchUtil...I guess I was removing basemaps before they had been added. Thanks!!