panning doesn't work

PramodHarithsa1 · ‎09-17-2012

Panning doesn't work in chrome and mozilla, it works fine in IE

Here's my code..

<style type="text/css"> 
      
      
      #map{ 
        padding:0; 
      } 

</style>
<script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script> 
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
<script type="text/javascript">
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.map");
        dojo.require("esri.dijit.Popup");
        

        var map;
        var resizeTimer;
        var identifyTask, identifyParams;
        var attName=new Array();
        var attVal=new Array();
        
        
        
        function init() {
            
            var initExtent = new esri.geometry.Extent({"xmin":-9270392,"ymin":5247043,"xmax":-9269914,"ymax":5247401,"spatialReference":{"wkid":102100}});

            //setup the popup window  
            var popup = new esri.dijit.Popup({
                fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
            }, dojo.create("div"));
  


            map = new esri.Map("map", {
                infoWindow: popup,
                extent: initExtent,
                logo: false,
                wrapAround180: true
                });

            //map.hideZoomSlider();
            dojo.connect(map, "onLoad", mapReady);

            //Add the imagery layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service     
            var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
            map.addLayer(basemap);

            var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer");
            map.addLayer(landBaseLayer);
        }

        function mapReady(map) {
            map.hideZoomSlider();
           
            //resize the map when the browser resizes 
            dojo.connect(dijit.byId('map'), 'resize', map, map.resize);

        }
        
        
        dojo.addOnLoad(init);
       

</script>
<div style="border-style: none solid solid solid; border-width: thin; border-color: #0099cc; width:345px; height: 281px">
<div style="width:345px; height:30px; overflow:hidden; z-index: -1; color: #FFFFFF; font-style: normal; font-family: Cambria; font-weight: bold; font-size: medium; " 
            title="GIS Map Control">

            GIS Map Control
    </div>   
      <div id="map" style="padding:0; width: 345px; height: 251px;position: relative; z-index:0;"> 
     </div> 
    
</div>

What am i missing?

derekswingley1 · ‎09-18-2012

This works for me in Chrome:

<!DOCTYPE html>
<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></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/Popup.css">
    <style>
      #map{ 
        padding:0; 
      } 
    </style>
    <script>var dojoConfig = {parseOnLoad: true};</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Popup");

      var map;
              
      function init() {
        var initExtent = new esri.geometry.Extent({
          "xmin": -9270392,
          "ymin": 5247043,
          "xmax": -9269914,
          "ymax": 5247401,
          "spatialReference": {
            "wkid": 102100
          }
        });

        //setup the popup window  
        var popup = new esri.dijit.Popup({
          fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
        }, dojo.create("div"));

        map = new esri.Map("map", {
          infoWindow: popup,
          extent: initExtent,
          logo: false,
          slider: false,
          wrapAround180: true
        });

        dojo.connect(map, "onLoad", mapReady);

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer");
        map.addLayer(landBaseLayer);
      }

      function mapReady(map) {
        //resize the map when the browser resizes 
        dojo.connect(window, 'resize', map, map.resize);
      }

      dojo.ready(init);
    </script>
  </head>
  
  <body class="claro">

    <div style="border-style: none solid solid solid; border-width: thin; border-color: #0099cc; width:345px; height: 281px">
      <div style="width:345px; height:30px; overflow:hidden; z-index: -1; color: #FFFFFF; font-style: normal; font-family: Cambria; font-weight: bold; font-size: medium; " title="GIS Map Control">
         GIS Map Control
      </div>
      <div id="map" style="padding:0; width: 345px; height: 251px;position: relative; z-index:0;"></div>
    </div>

  </body>

</html>

PramodHarithsa1 · ‎09-21-2012

This works for me in Chrome:

<!DOCTYPE html>
<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></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/Popup.css">
    <style>
      #map{ 
        padding:0; 
      } 
    </style>
    <script>var dojoConfig = {parseOnLoad: true};</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Popup");

      var map;
              
      function init() {
        var initExtent = new esri.geometry.Extent({
          "xmin": -9270392,
          "ymin": 5247043,
          "xmax": -9269914,
          "ymax": 5247401,
          "spatialReference": {
            "wkid": 102100
          }
        });

        //setup the popup window  
        var popup = new esri.dijit.Popup({
          fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
        }, dojo.create("div"));

        map = new esri.Map("map", {
          infoWindow: popup,
          extent: initExtent,
          logo: false,
          slider: false,
          wrapAround180: true
        });

        dojo.connect(map, "onLoad", mapReady);

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer");
        map.addLayer(landBaseLayer);
      }

      function mapReady(map) {
        //resize the map when the browser resizes 
        dojo.connect(window, 'resize', map, map.resize);
      }

      dojo.ready(init);
    </script>
  </head>
  
  <body class="claro">

    <div style="border-style: none solid solid solid; border-width: thin; border-color: #0099cc; width:345px; height: 281px">
      <div style="width:345px; height:30px; overflow:hidden; z-index: -1; color: #FFFFFF; font-style: normal; font-family: Cambria; font-weight: bold; font-size: medium; " title="GIS Map Control">
         GIS Map Control
      </div>
      <div id="map" style="padding:0; width: 345px; height: 251px;position: relative; z-index:0;"></div>
    </div>

  </body>

</html>

My code was part of a JSP and i was just including this page into the main window.
So had removed HTML tags within.
Adding

<!DOCTYPE html>

in the code resolved stuffs!