ESRI JS API - Unable to register Basemap Gallery (ID is already registered)

Question

I am attempting to add a BasemapGallery to my web application. I prefer to create my layout dynamically using constructors such as:

layout.cpRight = new ContentPane({
    region:"right",
    ...
    ...
});

layout.borderContainer.addChild(layout.cpRight);

This is functioning fine and my layout is placed as it should.

The probleme is When I attempt to add basemapGallery with the bellow code:

maps.basemapGalleryParams = {
    showArcGISBasemaps:true,
    map: maps.map,
};

maps.basemapGallery = new BasemapGallery(maps.basemapGalleryParams,layout.cpRight);
maps.basemapGallery.startup();

I get the following Error Code: init.js.160

Error: Tried to register widget with id==dijit_layout_ContentPane_0 but that id is already registered(…) "in domReady callback" "Error: Tried to register widget with id==dijit_layout_ContentPane_0 but that id is already registered

I originally declared ids inside of the widget constructors parameter but removed when I got this error. The results where the same.

A few web searches indicate this can be a fairly common problem with some "easy" solutions but I have not found a solution where the layout is declared programaticly as I would like to. It seems many defer to declare components in HTML.

Side note: I break out applications into multiple scripts thus I create arrays to ensure certain variables are global across all scripts. Hence why in the scripts above, things are not being declared with the var keyword, but rather directly appending to the array.

Answer 1

It's incorrect to assign a dijit in Refnode param BasemapGallery(maps.basemapGalleryParams,layout.cpRight);.

So, you have to a assing a dom node in that params , in your case to prevent the BaseMaapGallery dijit to replace the contentPane you need to create div using dojo/dom-construct inside the contentPane and put the BaseMapGallery there .

Note that in dojo every Dijits has a containerNode attribute which refer to the contained domNode of that dijit , by exemple the contenier node of you contentePane is layout.cpRightFirst.containerNode

dont forget to import (require) the dojo/dom-construct :

here is the code :

require([
      ...
      "dojo/dom-construct",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(....
      domConstruct
    ) {
    ...
    ...
    maps.basemapGalleryParams = {
        showArcGISBasemaps:true,
        map: maps.map,
    };

    maps.basemapGallery = new BasemapGallery(maps.basemapGalleryParams,
                                             domConstruct.create("div", null, layout.cpRight.containerNode));
    maps.basemapGallery.startup();
    ...
    ...

});

Answer 2

Not sure if this is a best practice solution, however I was able to come up with a work around.

maps.basemapGallery = new BasemapGallery(maps.basemapGalleryParams,"bg");
layout.cpBasemap.addChild(maps.basemapGallery);

For the srcNode parameter I used an arbitrary string that is not an id to anything in the application. Then used addChild() to place it in the existing widget desired.