Problem with creating a "blank" basemap in an application built with arcgis javascript api

Question

I'm building an application where I'd like the user to be able to select a blank basemap from a gallery of basemap options.

I've found that if I initialize the app with a "white" "blank" or "none," I get the blank basemap I desire. Unfortunately, when I set this property it seems to "lock" the basemap into the "blank" property. When the user selects a new basemap, such as "topo" from the gallery I've created, the basemap stays blank.

On the other hand, if I initialize the app with a basemap such as "topo," the user can switch between other basemaps, but if they try to select "blank" the basemap doesn't change.

Even though it isn't listed as an option in the API, is it possible to switch between a "blank" basemap and the others?

Answer 1

It worked fine for me, by just adding a new basemap without any layers:

 var blankBasemap = new esri.dijit.Basemap({
      layers:[],
      title:"Blank"
    });

   basemaps.push(blankBasemap);

Here is a working example, the blank basemap gets added at line 119.

Answer 2

I have a similar situation where I have a bootstrap menu with a check box "[X] Display Basemap"

I also need to remember the value when the page reloads using browser session. I solved the problem by hiding the map at startup until it loads and then turn off the basemap if necessary before it is set to visible. This prevents flickering the map on and then back off again if the user has disabled the basemap.

CSS

#main-map {
  visibility: hidden;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
}

Javascript

  // Toggle basemap remembering the value in session
  $('#main-menu-basemaps').on('click', function() {
    var bm = MainPage.map.getLayer(MainPage.map.layerIds[0]);
    MainPage.state.map.displayBaseMaps = !MainPage.state.map.displayBaseMaps;
    MainPage.saveState();
    if (MainPage.state.map.displayBaseMaps) {
      $('#main-menu-basemaps').parent().addClass('active');
      bm.setVisibility(true);
    }
    else {
      $('#main-menu-basemaps').parent().removeClass('active');
      bm.setVisibility(false);
    }
  });

  var promiseCreateMap = arcgisUtils.createMap(webmapID, "main-map", options);

  promiseCreateMap.then(function(response) {
    MainPage.map = response.map;

    // Turn off basemap if that setting is in session.
    // We are doing this before the map is visible.
    if (!MainPage.state.map.displayBaseMaps) {
      $('#main-menu-basemaps').parent().removeClass('active');
      map.getLayer(map.layerIds[0]).setVisibility(false);
    }
    // Now set the map visible after basemap is hidden
    $('#main-map').css('visibility', 'visible');
    ...