How do I modify the "Playlist" Storymap to include a basemap switching widget?

Question

I'm fairly new to HTML and the ArcGIS Javascript API. I would like to modify the default "playlist" storymap template to include a basemap gallery widget. Can someone help break down the steps to do this?

This is what the default template looks like: http://storymaps.esri.com/stories/2013/20towns/

Here is an example of the modified playlist template with the basemap gallery widget. http://fishandgame.idaho.gov/ifwis/maps/wma/

Answer 1

You are going to add the basemap gallery code to your existing. You will need to modify portions of your code in the index.html by adding the following HTML:

<div id="basemapGallery"></div>

in the spot you want the gallery to be located

Then in the map.js file you will need to add the widget code by first adding

dojo.require("esri.dijit.BasemapGallery");

in the require statements list at line 10

then

createBasemapGallery();

within the createMaps function. In the app you referenced this is under findLayers(layers,i); code at line 110

finally you are going to need to add the actual widget code from ESRI:

function createBasemapGallery() {
  var basemapGallery = new esri.dijit.BasemapGallery({
    showArcGISBasemaps: true,   
     map: map  
}, "basemapGallery");
  basemapGallery.startup(); 
   dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});
}

This should go near the end of map.js at line 251.

That should get the gallery to work.

I have learned a fair amount of programming just by utilizing the developer tools within the browsers to figure out how people have made things work. Most browsers use F12 to launch this. Using the ESRI Forums and of course GIS StackExchange are great tools as well.