yanasdf789

how to  change  the mapserver

Discussion created by yanasdf789 on Jan 6, 2013
Latest reply on Jan 7, 2013 by jskinner-esristaff
I  add  two  mapserver  into Map,but i only can see the map first!!!
[HTML]<html>
  
  <head>
    <title>
      ExtJS Layout Example
    </title>
  
      <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css" />
      <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
</script>
      <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2compact" type="text/javascript"></script>
      <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
      <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Popup");
      dojo.require("dojo.number");
   dojo.require("esri.dijit.BasemapGallery");
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");    
      dojo.require("dijit.Tooltip");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Menu");

      var map;
      // var basemap;
    var basemaps = []
    var basemap1;
    var basemapGallery;
    var Ybasemap;
    var Dbasemap1;
      function init() {
        var viewport = new Ext.Viewport({
          layout: "fit",
          title: "EXT JS Layout",
          items: [{
            layout: "border",
            items: [{
              region: "center",
              title: "center",

          html: "<div id='map' style='height:100%; width:100%;z-index=: 1000;'> <div id='extSlider' style='position: absolute; right: 20px; top: 20px; height: 50px; z-index: 200;'> </div></div>"

            }, {
              region: "north",
              height: 50,
              collapsible: false,
              contentEl:"header" 
            }, {
              region: "south",
              height: 80,
              collapsible: false,
              contentEl: "footer" // this gets the content from the div named "footer"
            }, {
              region: "west",
              title: "Left Panel",
              width: 150,
              split: true,
              collapsible: true,
              html: "Left panel content. This panel is collapsible and can be resized using the splitter",
              listeners:{
                collapse: resizeMap,
                expand: resizeMap
              }
            }, {
              region: "east",
              width: 200,
              xtype: 'tabpanel',
              activeTab: 0, // index or id
              items:[{
                  title: 'Tab 1',
                  html: 'This is tab 1 content.'
              },{
                  title: 'Tab 2',
                  html: 'This is tab 2 content.'
              },{
                  title: 'Tab 3',
                  html: 'This is tab 3 content.'
              }]
            }]
          }]
        });
       var initialExtent = new esri.geometry.Extent({"xmin":-118.61,"ymin":34.34,"xmax":-118.09,"ymax":34.56,"spatialReference":{"wkid":4326}});

       // var popup = new esri.dijit.Popup(null, dojo.create("div"));
        
        map = new esri.Map("map", {
          //extent: esri.geometry.geographicToWebMercator(initialExtent),
         // infoWindow: popup
        });
        
//  createBasemapGallery();
        dojo.connect(map, 'onLoad', function(theMap) {
          dojo.connect(window, 'resize', map, map.resize);
        });

    

      Ybasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastructureBasemap/MapServer");


      Dbasemap1 = new esri.layers.ArcGISTiledMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServer");
       
  map.addLayer( Dbasemap1);
  map.addLayer(Ybasemap);
  createdropbutton();
      }
    function createBasemapGallery(){
        //Manually create a list of basemaps to display
      //  var basemaps = [];
  
 

      }
   
      function createdropbutton()
   {

         var splitbutoon=new Ext.button.Split({
       renderTo: "extSlider",
    frame:true,
             text:'????',
    menu:new Ext.menu.Menu({
        items: [
            // these will render as dropdown menu items when the arrow is clicked:
            {text: '????', handler: function(){
      // alert("Item 1 clicked");basemapGallery.select("basemap_0");}
           Dbasemap1.setVisibility(true);
                    Ybasemap.setVisibility(false);      }
   },
            {text: '????', handler: function(){
     //alert("Item 2 clicked");basemapGallery.select("basemap_1"); }
           Dbasemap1.setVisibility(false);
                    Ybasemap.setVisibility(true);
                                     }
   }
                ]
   
    })

          });  
   }
      function resizeMap() {
        map.resize();
      }
      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body>
    <!-- use class="x-hide-display" to prevent a brief flicker of the content
    -->
    <div id="header">
       <span>Header content goes here</span>
    </div>
    <div id="center" class="x-hide-display" style="z-index: 100;">
 
    </div>
    <div id="props-panel" class="x-hide-display">
    </div>
    <div id="footer" class="x-hide-display">
      <span>Footer content goes here<span>
    </div>
    <div id="north" class="x-hide-display">

    </div>
  </body>

</html> [/HTML]

Outcomes