Add basemap gallery (i.e. base layer switcher) to "side accordion" web template?

abcdefghij

Hello!

We are using the "side accordion" web template ( http://www.arcgis.com/home/item.html?id=8bbdc5a80ad34d91bb1c12132da20413 ) to present our storytelling maps, and we would like to add a "basemap gallery" ( https://developers.arcgis.com/javascript/jssamples/widget_basemap.html ) feature to the page. Unfortunately, the JS code of the template appears to be quite complex, and several attempts to solve this have failed (the basemap gallery won't appear at all). Does anybody know a working solution for this?

Many thanks in advance!

StephenSylvia

To add the basemap gallery to the side accordion add requires a few different components. The JavaScript code can be added the the Core.js file (app > series > core > Core.js). First, you will need to require the basemap gallery widget code from the API. At the top of the Core.js file add:

define(["esri/map",
"esri/arcgis/utils",
"esri/layout",
"esri/widgets",
"dojo/has",
"storymaps/utils/Helper",
"storymaps/ui/TimeSlider",
"esri/dijit/BasemapGallery"],
function(
Map,
Utils,
Layout,
Widgets,
Has,
Helper,
TimeSlider,
BasemapGallery)
{

Then later in the Core.js file (around line 233) you should see the createAppItems function. You can add the following section of code (Note: you can modify the basemap gallery options to fit your needs. We recommend only including the basemap that fit your story and not displaying all 9 options):

function createAppItems(map,layers,index)
{
//ADD INITIAL EXTENT BUTTON TO MAPS
$(".esriSimpleSliderIncrementButton").last().addClass("zoomButtonIn").after("<div class='esriSimpleSliderIncrementButton initExtentButton'><img style='margin-top:5px' src='resources/images/app/home.png'></div>");
$(".initExtentButton").last().click(function(){
map.setExtent(map._mapParams.extent);
});

if(configOptions.geocoderWidget){
$("#" + map.container.id).append('<div id="'+map.container.id+'geocoder" class="geocoderWidget"></div>');
var geocoder = new esri.dijit.Geocoder({
map: map
},map.container.id+'geocoder');
geocoder.startup();
}

//ADD BASEMAP GALLERY
$("#" + map.container.id).append('<div id="'+map.container.id+'basemapGallery" class="basemap-gallery"></div>');

var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, map.container.id+'basemapGallery");

basemapGallery.startup();

basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});


//ADD LEGEND
if(layers.length > 0){
var legend = new esri.dijit.Legend({
map: map,
layerInfos: layers
},"legend"+index);
legend.startup();
}
else{
$(".legend").eq(index).html("This map has no layers to show in the legend.");
}
}

Lastly, you will need to add the CSS to make sure the gallery matches your style and displays at the correct position. The API documentation provides the CSS classes to use when styling the gallery but at a minimum, you will need to add a few properties to make sure it is not covered up.

At the very bottom of the Core.css file (after the last bracket) you can add something similar to this:

.basemap-gallery{
position: absolute;
top: 20px;
left: 100px;
z-index: 2;
}