nct_124

Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery

Discussion created by nct_124 on Oct 25, 2012
Latest reply on Nov 8, 2012 by summerbay
Hi there,
can you check if I did the implementation for basemapgallery in my example?


<!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" />
    <!--The viewport meta tag is used to improve the presentation and behavior
    of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>
      Basemap Gallery - Bing Maps
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/css/esri.css" />
    <style type="text/css">
      html,body {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      body {
        background-color:#feffff;
        overflow:hidden;
        font-family:"Trebuchet MS";
        margin:2%;
      }
      #map {
        -moz-border-radius:4px;
        overflow:hidden;
        border:solid 2px #03c;
      }

      .claro .dijitButtonText {
        color:#03c;
        font-family: Arial, Helvetica, sans-serif
        font-weight:bold;
      }
      .claro td.dijitMenuItemLabel {
        color:#03c;
        font-family: Arial, Helvetica, sans-serif
        font-weight:500;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
 <script type='text/javascript' src='http://www.onemap.sg/API/JS/?accessKEY=onemapkey&v=2.8&type=full'></script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8">
    </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("esri.dijit.BasemapGallery");
      dojo.require("dijit.Tooltip");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Menu");
   var basemaps = [];
   var OneMap = new GetOneMap('map','SM');
      var map, basemapGallery;
      var bingKey = 'bingmapkey';
      function init() {
        //map = new esri.Map("map", {});
  map = OneMap.map
        createBasemapGallery();
 
        dojo.connect(map, 'onLoad', function(map) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });

      }
      function createBasemapGallery(){
        //Manually create a list of basemaps to display
        var basemapRoad = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            type: "BingMapsRoad"
          })],
          id: "bmRoad",
          title: "Road"
        });
        basemaps.push(basemapRoad);
  alert("lala2");
        var basemapAerial = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            type: "BingMapsAerial"
          })],
          id: "bmAerial",
          title: "Aerial"
        });
        basemaps.push(basemapAerial);
  alert("lala3");
        var basemapHybrid = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            type: "BingMapsHybrid"
          })],
          id: "bmHybrid",
          title: "Aerial with labels"
        });
        basemaps.push(basemapHybrid);
  alert("lala4");

        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: false,
          basemaps: basemaps,
          bingMapsKey: bingKey,
          map: map
        });
        alert("lala5");
        //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
        //we are going to create a custom user interface to display the basemaps, in this case a menu.
        dojo.forEach(basemapGallery.basemaps, function(basemap) {            
          //Add a menu item for each basemap, when the menu items are selected
          dijit.byId("bingMenu").addChild(new dijit.MenuItem({
            label: basemap.title,
            onClick: dojo.hitch(this, function() {
              this.basemapGallery.select(basemap.id);
            })
          }));
          
        });
      }

      //show map on load
      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
    style="width: 95%; height: 94%;">

      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
        <div style="position:absolute; right:50px; top:10px; z-Index:99;">
          <button id="dropdownButton"  label="Basemaps"  dojoType="dijit.form.DropDownButton">
            <div dojoType="dijit.Menu" id="bingMenu">
              <!--The menu items are dynamically created using the basemap gallery layers-->
            </div>
          </button>
        </div>
      </div>

    </div>
  </body>

</html>


Ok the problem I'm facing now is when I choose one of the bingmaps from the dropdown list, the bingmap logo did appear but the map didn't so is it valid to use basemapgallery for two basemap with different spatial reference?

sorry if I don't make sense,newbie here

Outcomes