Error when removing some ESRI basemaps from the basemapGallery

ChristopherJohnson1 · ‎11-14-2016

I am using the ArcGIS JS API 3.16 and I am attempting to remove some of the ESRI basemaps from the basemapGallery. Some of the items are being removed, but I am encountering an issue with the last item not being removed (when the index gets to 10). The error is

"esri.dijit.BasemapGallery: could not find group for basemaps.".

Any ideas?

The code is attached/below.

Thanks...Chris

<!DOCTYPE html>
<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>Basemap gallery</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">    
  <link rel="stylesheet" href="https://js.arcgis.com/3.18/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.18/"></script>
  <script> 
    var map;
    require([
      "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
      "dojo/parser",

      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
      "dojo/domReady!"
    ], function(
      Map, BasemapGallery, arcgisUtils,
      parser
    ) {
      parser.parse();

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

      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();
      
      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });
      
      basemapGallery.on("load", function()
          {
               var tot = basemapGallery.basemaps.length;
               for (var cnt = 0; cnt < tot; cnt++)
               {
                    if (basemapGallery.basemaps[cnt].title === "Oceans" || basemapGallery.basemaps[cnt].title === "OpenStreetMap" || basemapGallery.basemaps[cnt].title === "USGS National Map" || basemapGallery.basemaps[cnt].title === "USA Topo Maps")
                    {
                         console.log("Removing..." + basemapGallery.basemaps[cnt].title);
                         basemapGallery.remove(basemapGallery.basemaps[cnt].id);
                    }
               }
          });
    });
  </script> 
</head> 

<body class="claro"> 
  <div data-dojo-type="dijit/layout/BorderContainer" 
       data-dojo-props="design:'headline', gutters:false" 
       style="width:100%;height:100%;margin:0;">

    <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', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</body> 

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎11-14-2016

Chris,

When removing items from the array you are looping through you always need to loop through the array in reverse:

            basemapGallery.on("load", function() {
                var tot = basemapGallery.basemaps.length;
                for (var cnt = tot - 1; cnt >= 0; cnt--) {
                    if (basemapGallery.basemaps[cnt].title === "Oceans" || basemapGallery.basemaps[cnt].title === "OpenStreetMap" || basemapGallery.basemaps[cnt].title === "USGS National Map" || basemapGallery.basemaps[cnt].title ===
                        "USA Topo Maps") {
                        console.log("Removing..." + basemapGallery.basemaps[cnt].title);
                        basemapGallery.remove(basemapGallery.basemaps[cnt].id);
                    }
                }
            });‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎11-14-2016

Chris,

When removing items from the array you are looping through you always need to loop through the array in reverse:

            basemapGallery.on("load", function() {
                var tot = basemapGallery.basemaps.length;
                for (var cnt = tot - 1; cnt >= 0; cnt--) {
                    if (basemapGallery.basemaps[cnt].title === "Oceans" || basemapGallery.basemaps[cnt].title === "OpenStreetMap" || basemapGallery.basemaps[cnt].title === "USGS National Map" || basemapGallery.basemaps[cnt].title ===
                        "USA Topo Maps") {
                        console.log("Removing..." + basemapGallery.basemaps[cnt].title);
                        basemapGallery.remove(basemapGallery.basemaps[cnt].id);
                    }
                }
            });‍‍‍‍‍‍‍‍‍‍

ChristopherJohnson1 · ‎11-14-2016

Thanks, Robert! I wondered about that, and even tried it, but I guess my syntax was wrong. Anyways, thanks again!!!

- Chris