topic Re: BasemapGallery bug in ArcGIS JavaScript Maps SDK Questions

BasemapGallery bug

GeorgeSimpson — Wed, 11 Jul 2012 21:08:32 GMT

There seems to be a bug when creating a BasemapGallery inside of another programmatically defined container. In my scenario, I generate TitlePanes inside of a BorderContainer when the application loads. This is done in code and the TitlePanes you see are dependent on your user ID. The problem seems to be that the srcNodeRef in the constructor of BasemapGallery actually only accepts the ID of an existing element that was defined declaratively in HTML. The behavior I see is generally the same in which only partial HTML is created for the BasemapGallery. The "flowcontainer" element is always empty, even though the query to ArcGIS was successful and returned results. Depending on the method, I may get an error about registering the new container dijit.

Assuming I have:

var _container = new dijit.TitlePane({title:"Choose a Basemap"});

None of these work:

1. var _bmg = new esri.dijit.BasemapGallery({ showArcGISBasemaps: true,map: _map }, _container);
2. var _bmg = new esri.dijit.BasemapGallery({ showArcGISBasemaps: true,map: _map }, _container.srcNodeRef);
3. var _bmg = new esri.dijit.BasemapGallery({ showArcGISBasemaps: true,map: _map });_bmg.placeAt(_container.containerNode);
4. several other ways I've tried

Re: BasemapGallery bug

derekswingley1 — Wed, 11 Jul 2012 22:42:19 GMT

Can you post a full page that reproduces the issue?

Re: BasemapGallery bug

GeorgeSimpson — Sat, 11 Dec 2021 22:23:24 GMT

Here's a page with several scenarios:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  <html>  
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title> 
    </title> 

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">    
    <style type="text/css"> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{
        padding:0;
      }
    </style> 
    
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true
        };
    </script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
    
    <script type="text/javascript">
        dojo.require("dijit.dijit"); // optimize: load dijit layer
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.map");
        //dojo.require("esri.virtualearth.VETiledLayer");
        dojo.require("dijit.TitlePane");
        dojo.require("esri.dijit.BasemapGallery");
        dojo.require("esri.arcgis.utils");

        //var map = null;

        function init() {
            var initExtent = new esri.geometry.Extent({ "xmin": -11727455, "ymin": 4861652, "xmax": -11706340, "ymax": 4871512, "spatialReference": { "wkid": 102100} });
           var _map = new esri.Map("map", { extent: initExtent });

            var initBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
            _map.addLayer(initBasemap);
                       

            
            //add bmg to declarative contentpane html (existing)
            var basemapGallery1 = new esri.dijit.BasemapGallery({
                showArcGISBasemaps: true,
                map: _map
            }, "Div4");
            basemapGallery1.startup();


            //Programmatic 1 - will produce ID registry error
            //add bmg to declarative titlepane html (existing)
//            var basemapGallery2 = new esri.dijit.BasemapGallery({
//                showArcGISBasemaps: true,
//                map: _map
//            }, "Div1");
            //            basemapGallery2.startup();


            //Programmatic 2 - will produce empty
            //add bmg to programmatic contentpane
            var _tp1 = new dijit.TitlePane({title:"Programmatic 2"});
            var _c1 = new dijit.layout.ContentPane({id:"c1",style:"background-color:lightblue;"});
            
            var basemapGallery3 = new esri.dijit.BasemapGallery({
                showArcGISBasemaps: true,
                map: _map
            }, "c1");
            basemapGallery3.startup();
            _tp1.setContent(_c1);
            _tp1.placeAt(dijit.byId("leftside").containerNode);

            //Programmatic 3 - will produce ID registry error
            //add bmg to programmatic contentpane
//            var _tp2 = new dijit.TitlePane({ title: "Programmatic 3" });            

//            var basemapGallery4 = new esri.dijit.BasemapGallery({
//                showArcGISBasemaps: true,
//                map: _map
//            }, _tp2);
//            basemapGallery4.startup();
//            _tp2.placeAt(dijit.byId("leftside").containerNode);

            //Programmatic 4 - will produce empty
            //add bmg to programmatic contentpane
            var _tp3 = new dijit.TitlePane({ title: "Programmatic 4" });
            _tp3.placeAt(dijit.byId("leftside").containerNode);

            var basemapGallery5 = new esri.dijit.BasemapGallery({
                showArcGISBasemaps: true,
                map: _map
            }, _tp3.srcNodeRef);
            basemapGallery5.startup();


            //Programmatic 5 - will produce empty "flowcontainer"
            //add bmg to programmatic contentpane
            var _tp4 = new dijit.TitlePane({ title: "Programmatic 5" });
            _tp4.placeAt(dijit.byId("leftside").containerNode);

            var basemapGallery6 = new esri.dijit.BasemapGallery({
                showArcGISBasemaps: true,
                map: _map
            });
            basemapGallery6.startup();
            _tp4.setContent(basemapGallery6);


            //resize the map when the browser resizes
            dojo.connect(dijit.byId('map'), 'resize', _map, _map.resize);
        }


        //show map on load 
        dojo.addOnLoad(init);
    </script> 
  </head> 

<body class="claro"> 
    <div dojotype="dijit.layout.BorderContainer" design="sidebar" gutters="false" style="width:100%;height:100%;margin:0;">
        <div id="leftside" dojotype="dijit.layout.ContentPane" region="left" style="width:200px;border:1px solid #000;padding:0;">
            <div dojoType="dijit.TitlePane" id="Div3" title="Declarative Basemap" closable="false"  open="false">
                <div id="Div4"></div>          
            </div>
            <div dojoType="dijit.TitlePane" id="Div1" title="Programmatic 1 Basemap" closable="false"  open="false">
            </div>            
        </div>    
        <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">     
        </div>
    </div>
</body> 

  </html>

Re: BasemapGallery bug

derekswingley1 — Wed, 11 Jul 2012 23:54:58 GMT

How's this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">    <html>     <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior of the samples        on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>      </title>       <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">         <style type="text/css">        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       #map{         padding:0;       }     </style>           <script type="text/javascript">         var djConfig = {             parseOnLoad: true         };     </script>      <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>          <script type="text/javascript">         dojo.require("dijit.dijit"); // optimize: load dijit layer         dojo.require("dijit.layout.BorderContainer");         dojo.require("dijit.layout.ContentPane");         dojo.require("esri.map");         //dojo.require("esri.virtualearth.VETiledLayer");         dojo.require("dijit.TitlePane");         dojo.require("esri.dijit.BasemapGallery");         dojo.require("esri.arcgis.utils");          function init() {             var initExtent = new esri.geometry.Extent({ "xmin": -11727455, "ymin": 4861652, "xmax": -11706340, "ymax": 4871512, "spatialReference": { "wkid": 102100} });            var _map = new esri.Map("map", { extent: initExtent });              var initBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");             _map.addLayer(initBasemap);              //Programmatic 2 - will produce empty             //add bmg to programmatic contentpane             _tp1 = new dijit.TitlePane({                 title:"Programmatic 2",                 open: false             });                          basemapGallery3 = new esri.dijit.BasemapGallery({                 showArcGISBasemaps: true,                 map: _map             }, dojo.create("div"));             basemapGallery3.startup();             // _tp1.setContent(_c1);             _tp1.placeAt(dijit.byId("leftside").containerNode);             _tp1.setContent(basemapGallery3.domNode);              //resize the map when the browser resizes             dojo.connect(dijit.byId('map'), 'resize', _map, _map.resize);         }          //show map on load          dojo.addOnLoad(init);     </script>    </head>   <body class="claro">      <div dojotype="dijit.layout.BorderContainer" design="sidebar" gutters="false" style="width:100%;height:100%;margin:0;">         <div id="leftside" dojotype="dijit.layout.ContentPane" region="left" style="width:200px;border:1px solid #000;padding:0;">         </div>             <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">              </div>     </div> </body>     </html>

Re: BasemapGallery bug

GeorgeSimpson — Thu, 12 Jul 2012 00:09:21 GMT

That worked. Thanks a lot

George

Re: BasemapGallery bug

derekswingley1 — Thu, 12 Jul 2012 00:41:57 GMT

Gladly. Can you mark my post as an answer so this thread shows as answered?