how to change the mapserver

yanli · ‎01-06-2013

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/LocalGovernmentInfrastructu...");

      Dbasemap1 = new esri.layers.ArcGISTiledMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServe...");

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

JanJeske · ‎01-06-2013

OLD BAD.....
Hey i think there is a sytax error on your code. At the place you decline the onload event for the map you say use the function "theMap" but it isn't declared. Try to use a debugging tool like firebug for FF.

IGNORE UPPER
OK I'm wrong first day after holiday 🙂 .... the js isn't correct but it seems that LOD's of the maps doesn't match. As example the WaterTemplate has a scale of 800 but the PublicSafety has no LOD with a scale of 800. If you have cached maps must have same scales or they can't displayed together

SunilPalkar · ‎01-06-2013

According to me there is problem in the code and I think <div> tag are mismatching..Please paste your code in JS Fiddle

JanJeske · ‎01-07-2013

No the div tags are correct

JakeSkinner · ‎01-07-2013

Hi Yan,

The map services are in different geographic areas. So, after you click the drop down button to show the other map service you will need to update the extent using the setExtent method. Ex:

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);
                    var originalExtent = new esri.geometry.Extent({"xmin":-86.309,"ymin":37.895,"xmax":-85.044,"ymax":38.515,"spatialReference":{"wkid":4326}});
                    map.setExtent(originalExtent);  
               }
            },
            {text: '�?�形', handler: function(){
              //alert("Item 2 clicked");basemapGallery.select("basemap_1"); }
                    Dbasemap1.setVisibility(false); 
                    Ybasemap.setVisibility(true);
                    var newExtent = new esri.geometry.Extent({"xmin":-80.466,"ymin":27.287,"xmax":-80.248,"ymax":27.536,"spatialReference":{"wkid":4326}});
                    map.setExtent(newExtent);
                        }
            }
                ]
             })
          });