Bug with basemapGallery onSelectionChange event?

BillHoney · ‎12-25-2012

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/MapSer...", { "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]

ManojrajTeli · ‎12-25-2012

Hello Bill,

I took your example and modified it little bit .try this code

<!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", callfunc); 
//            {
//                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) });
        }
        function callfunc() {
            alert("firing"); 
        }

        //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>

SunilPalkar · ‎12-25-2012

manojrajteli;259243 wrote:

It works perfectly..many thanks : )

JS Fiddle : http://jsfiddle.net/x3RJQ/

BillHoney · ‎12-28-2012

Thats fixed it - Many thanks !