Basemap Gallery Widget Issue

1356
5
Jump to solution
10-20-2016 01:54 PM
LloydBronn
Occasional Contributor II

I'm using the basemap gallery widget in my maps. I've noticed that when I choose a different basemap, the reference from the default basemap (grey) is still in the map. As a result, I see city names doubled up on each other. Is there a way to clear the reference from the default basemap when a user chooses a new basemap? 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Lloyd,

OK that seems to be a bug.  Here is a workaround if you are going to use a basemap like gray that has a reference layer to initialize the map:

<!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, refLayerId;
    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: "gray",
        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("selection-change",function(){
        var layer = map.getLayer(refLayerId);
        if(layer){
          map.removeLayer(layer);
        }
      });

      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });

      basemapGallery.on("load", function(msg) {
        for (b=0;b<map.basemapLayerIds.length;b++){
          var lyr = map.getLayer(map.basemapLayerIds[b]);
          if(lyr._isRefLayer){
            refLayerId = lyr.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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Emeritus

Lloyd,

   I do not see this issue when using the basemap gallery sample

Basemap gallery | ArcGIS API for JavaScript 3.18 

So it must be something in your code.

0 Kudos
LloydBronn
Occasional Contributor II

If you change the default basemap on the sample to "gray" and then change the basemap, you'll see what I mean. The label for Boulder is doubled up. It think it might be an issue with the light gray canvas basemap. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Lloyd,

OK that seems to be a bug.  Here is a workaround if you are going to use a basemap like gray that has a reference layer to initialize the map:

<!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, refLayerId;
    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: "gray",
        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("selection-change",function(){
        var layer = map.getLayer(refLayerId);
        if(layer){
          map.removeLayer(layer);
        }
      });

      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });

      basemapGallery.on("load", function(msg) {
        for (b=0;b<map.basemapLayerIds.length;b++){
          var lyr = map.getLayer(map.basemapLayerIds[b]);
          if(lyr._isRefLayer){
            refLayerId = lyr.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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
LloydBronn
Occasional Contributor II

Thanks! Can we report this bug to ESRI?

0 Kudos
KenBuja
MVP Esteemed Contributor

This has been report as BUG-000089550. I came across this issue last year: Bug in Basemap Gallery dijit 

With a little more searching, it turns out this has been an issue for a while longer. NIM089693: If the BasemapGallery widget is initialized with a b.. 

It's a pity they don't plan to fix it.