BillHoney

Bug with basemapGallery onSelectionChange event?

Discussion created by BillHoney on Dec 25, 2012
Latest reply on Dec 28, 2012 by BillHoney
Hi,

I'm having trouble with the the basemapGallery OnSelectionChange event.
It only seems to ever fire once (see attached code) 
am I missing something ? 

Bill

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">   
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
    <style type="text/css">
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail{
        border-color: #66FFFF !important;
      }
      #map{
        padding:0;
      }
    </style>
   
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true
        };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
   
    <script type="text/javascript">
        dojo.require("dijit.dijit"); // optimize: load dijit layer
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.map");
        dojo.require("dijit.TitlePane");
        dojo.require("esri.dijit.BasemapGallery");
        dojo.require("esri.arcgis.utils");

        var map = null;

        function init() {
            var initExtent = new esri.geometry.Extent({ "xmin": -514440, "ymin": 5385504, "xmax": 4847158, "ymax": 7640702, "spatialReference": { "wkid": 102100} });
            map = new esri.Map("map", { extent: initExtent });

            createBasemapGallery();

            //resize the map when the browser resizes
            dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
        }

        function createBasemapGallery() {
            var basemapGallery = new esri.dijit.BasemapGallery({
                showArcGISBasemaps: true,
                map: map
            }, "basemapGallery");

            var selectionHandler = dojo.connect(basemapGallery, "onSelectionChange", function () {
                dojo.disconnect(selectionHandler);
                //add the esri population layer to the map
                var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", { "opacity": 0.5 });
                alert("firing");
                map.addLayer(operationalLayer);
            });

            basemapGallery.startup();


            dojo.connect(basemapGallery, "onError", function (msg) { console.log(msg) });
        }


        //show map on load
        dojo.addOnLoad(init);
    </script>
  </head>

  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
    <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;">
      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false"  open="false">
          <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
          <div id="basemapGallery" ></div></div>
        </div>
      </div>
      </div>
    </div>
  </body>

  </html>[/HTML]

Outcomes