nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

BasemapGallery bug

gsimpson4

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

Vind meer berichten getagd met

Accepted answers

derekswingley1

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>

All comments

derekswingley1

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

gsimpson4

That worked. Thanks a lot

George

derekswingley1

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>

gsimpson4

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>

derekswingley1

Can you post a full page that reproduces the issue?

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.