I am attempting to implement the basemapGallery code found in the API samples here.

There seems to be an issue with the TitlePane into which my basemapGallery is nested. It simply does not render. The basemapGallery appears in place and works as expected, but since the TitlePane does not exist in the app, it is not appearing as a child within the TitlePane, and instead just sits there, with no way to collapse.

Like the sample code, the basemapGallery is being created programmatically and the TitlePane is being created declaratively. Here is the JS code:

function init() {

var popup = new esri.dijit.Popup({
selectionSymbol: new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, new dojo.Color([255,0,0]))}, dojo.create("div"));

map = new esri.Map("map", {
    basemap: "topo",
    extent: new esri.geometry.Extent({xmin:-11420303.522028634,ymin:3387689.093598152,xmax:-6939259.175839653,ymax:6114962.262812516,spatialReference:{wkid:102100}}), 
    infoWindow: popup

dojo.connect(map, "onLoad", mapReady);

var basemapGallery = new esri.dijit.BasemapGallery({
    showArcGISBasemaps: true,
    map: map
}, "basemapGallery");

dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});


And the HTML:

<div style="position:absolute; right:20px; top:10px; z-index:999;">
    <div id="basemapSelector" 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>

Notes: I am using v3.3 of the API. I am referencing the claro.css stylesheet. I have included dojo.require("dijit.TitlePane"); I have included a screencap of what I see.

basemapGallery rendering without parent TitlePane

1 Answer 1


Figured it out! The problem was in the HTML - I was referencing the the API and the JS file that contained all my JS before the dojoConfig object was defined. One I moved those references below the dojoConfig object (and removed async: true from its properties), the TitlePane worked just fine.

So always make sure those script tags referencing the API and any separate JS file are placed after the script tag containing dojoConfig.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.