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;
}

[SiennaSvob]

Hi Stephen,

I was wondering if you could help me out with adding a bookmarks widget to this template - I am unaware of how to place it in the code.

[NathanielRoth]

This thread and the response were very timely. We're working on a story map that needed exactly this. We've got it working partially, but are experiencing issues with the basemap gallery hiding itself at the bottom of the map. Any idea where to change this? I'm not a js programmer.

Note that I think you've got a missmatched set of quotes in: }, map.container.id+'basemapGallery"); Fixing both of them to ' let the js operate (with the exception of the hiding issue). I suspect that it's the hidePopups() function causing the issue, but do a better job of breaking it further than fixing it when I try to exclude the basemapGallery.

Ideas are very much appreciated.

Nate

[abcdefghij]

Hey!

First of all, thank you very much, Stephen, for that (almost) perfect instruction! Nate already mentioned the wrong " character, and I solved the visibility problem:

The correct class name to use in the CSS selector is "esriBasemapGallery", not "basemap-gallery". Fix this and it works.

I wish both of you a nice weekend!

[RonySutter]

Thank for effort!

Not work with me. I need change "basemap-gallery" only in Core.CSS ou in Core.JS to?

[NickBarrett]

Hello!

I would like to also add multiple base maps to my map, however I am using the Storytelling map template. In my Core.js there does not appear to be a CreateAppItems function. Would the instructions here apply to my map as well, or would they be very different?

Thanks for any assistance!