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 · Accepted solution]

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'">

[JayThakur]

Thank you very much for quick reply. I am checking on it.

Jay from UIZ

[JayThakur]

Hi,

I want to add a legend to my map tour. (I have a layers in the map tour upon which i added the markers and want add a legend for that layer).

I tried to add the code shown in the image.

and in html the following codes where added

<div id="legend">

  <div data-dojo-type="dijit/TitlePane" data-dojo-props="closable:false, open:false, title: '<img src=resources/images/Legend16.png>'">

  <div data-dojo-type="dijit/layout/ContentPane">

  <div id="legendDiv" ></div></div>

  </div>

  </div><!--Legend added-->

But nothing appears in the legend box.

The waterbodies url is a sample url taken from arcgis api sample codes. Can someone help me in adding legend to the maptour.

Thanks in advance.