I just started using ArcGIS JS APIs. In my app, I want to combine a few ESRI basemaps with my own basemap service. I am using basemapGallery dijit to change basemaps. By default, basemapGallery shows the imagery map. I want to show OpenStreetMap as the default. How can I make this happen?

The code in my app is simple and directly borrowed from ArcGIS samples. So I did not put it here.



I think that you'll be best served to create a manual list of the basemaps, including the order, that you want displayed within the gallery.

This ArcGIS thread gives quite a bit of detail into what you might be looking for and some code in how to do it.


You also have the option of moving the div which contains your custom basemap using JavaScript. The following code moves the basemap div to the top of the gallery:

on(gallery, "load", function() {
    var nd = document.getElementById("galleryNode_myBasemap");
    nd.parentElement.insertBefore(nd, nd.parentElement.firstElementChild);

Where "myBasemap" is the ID of the basemap layer and gallery is a reference to the Basemap Gallery.

This will work in IE9+, if you need to support IE7+, change .firstElementChild to .firstChild (although I haven't tested it).


I had the same problem and this is my solution.

// Create a basemap order array.

    var bmOrder = ["Imagery","Open Street Map","Topographic","National Geographic","Streets"];

// OnLoad get the info and bind it to gallary basemap

    var mappedBm=[];
    basemapGallery.on("load", function (res) {
                    for (var i = 0; i < bmOrder.length; i++) {
                        for (var j = 0; j < res.target.basemaps.length; j++) {
                            if (bmOrder[i] === res.target.basemaps[j].title) {
                    // Bind the mapped version.
                    basemapGallery.basemaps = mappedBm;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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