swapp0

custom basemap gallery widget could not change the main map. HELP!

Discussion created by swapp0 on May 24, 2013
Latest reply on May 24, 2013 by swapp0
Hi.. I'm a first time user of the ArcGIS API for javascript.

Problem:
My custom BasemapGallery widget, an slightly altered version of the BasemapGallery widget example in the documentation website
link does not change the basemap of my main map like the example.

What did I do wrong. What am I missing. Help.


Description:
Using API 3.4 but using dojo 1.6 non-AMD style coding.

I wanted to modularize  my webmap to be as much as possible so separated the html and javascript code for BasemapGallery into separate custom widgets. I going to use a lot of layers and I don't want to clutter up the main javascript file.

Essentially, I just wrapped the same code that would go in the map web map HTML and javascript into a widget package call customWidget.BasemapGallery

I was successful in making creating a TitlePane that opens up to a BaseMapGallery but that's as far as I went. Whenever I click on a image of a map. The main map doesn't change.

Here is my code.

JAVASCRIPT portion of the main map

app.map = new esri.Map(
  "mapDiv", 
  {
   center: [-64.46968730, 45.08473950], //Kentville, Nova Scotia, Canada
   zoom: 13,
   logo: false,
   showAttribution: false,
   slider: true,
   sliderStyle: "large",
   basemap: "streets"
  }
 );






HTML of the widget: BasemapGallery.html
[HTML]

<div class="${baseClass}">
<div>
  <div id="baseMapGalleryTitlePane">
   <div data-dojo-type="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
    <div id="basemapGalleryDiv" ></div>
   </div>
  </div>
</div>
</div>

[/HTML]




JAVASCRIPT  of the widget: BasemapGallery.js

dojo.provide("customWidget.BasemapGallery");

//required library imports from esri
dojo.require("esri.dijit.Basemap");
dojo.require("esri.dijit.BasemapLayer");
dojo.require("esri.dijit.BasemapGallery");

//required library imports from dojo
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit.TitlePane");
dojo.require("dijit.layout.ContentPane");
 
dojo.declare("customWidget.BasemapGallery", [dijit._Widget, dijit._Templated], {
 name: 'No Name',
 templateString: dojo.cache('customWidget.BasemapGallery', 'templates/BasemapGallery.html'),
 baseClass: "BasemapGalleryBase",
 title: "",

 postCreate: function(){
  /*
   * add basemap basemapgallery widget.
   * need to be the same extent
   */
  createBasemapGallery();
 },
});

// build the basemap gallery
function createBasemapGallery(){
 var tp = new dijit.TitlePane(
  {
   title:'Switch Basemap', 
   closable:false, 
   open:false
  }, 
  dojo.byId("baseMapGalleryTitlePane")
 );

 var map = dojo.byId("mapDiv");

 var basemapGallery = new esri.dijit.BasemapGallery(
  {
   bingMapKey: "AnwMNXxXUVsOh1xEmG_i6D_ajxScpoxwwXQHTdOjBM5NcPzXsxhxkVU6dq_Hr4Gw",
   map: map,
   showArcGISBasemaps: true
  }, 
  "basemapGalleryDiv"
 );
 //basemapGallery.basemaps = basemaps;
 basemapGallery.startup();
 
}



HELP HELP.

Outcomes