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/


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


in the require statements list at line 10



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");
   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.

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.