Customize Map Tour with basemap switcher

JayThakur

I have downloaded the zip file of the template "map-tour-storytelling-template-js-master".

I have tried all possible ways i can to customize the map tour template to add a basemap switcher, but i am not success full.

May be I am not able to accesss the right file to add the changes. when ever i add the basemap gallery it does not give any error, but it doesn't give the basemaps either. I always get an empty base map button as shown in the figure.

This map tour template is using id=mainMap, while the basemap switcher need id=map.

I am not so expert in javascript so I am not able to edit MainView.js file.

It would be very helpful if you can suggest an idea how I can customize.

Thanks in advance.

GregoryL_Azou

As there is already a basemap switcher in builder mode, this is quite simple. You only have to edit index.html (you don't need the developer version where you have to run grunt).

Add the following piece of code after Core.init(...) near the end of index.html

require(["dojo/topic", "esri/dijit/BasemapGallery"], function(topic, BasemapGallery) {
  topic.subscribe("maptour-ready", function(){
  var basemapGallery = new BasemapGallery({
  map: app.map
  }, "basemapGallery");
  basemapGallery.startup();
  });
});

Looks like this

Add the following css rules (look for 'Custom css rules')

#basemapChooser {
  display: block;
}

Modify the title of the dialog by editing the following tag in index.html

<div data-dojo-type="dijit/TitlePane" 
  data-dojo-props="closable:false, open:false, title: 'Change map'">