Unresponsive map behaviour

Discussion created by pkdash on Nov 30, 2012
Latest reply on Dec 2, 2012 by jeff.pace
I copied code from one of the examples for adding a map using ArcGIS JavaScript API.  Since the copied code uses Dojo library and I have not installed this library on my webserver, I used the src reference to as follows:

<script src="//"
               data-dojo-config="async: true"></script>

That's the only change I made.  Now when I run my webpage to display the map, I see the following problems:

1. The zoom control seems to have three parts (the arrows, the slider, the zoom level markers)  and they are not aligned. The up and down arrow appear about 1 inch horizontally away to the left from the slider and the markers appear 1 inch away to the right of the slider.

2. When I drag the map, most of the times it is unresponsive. The mouse cursor changes to I-beam or a circle with a line within. Only few times when dragging the map, it actually shows mouse cursor as cross-hair style and that time the dragging seems to work.

The above problems I noticed when using chrome browser. In IE the problem is even worse. No dragging is at all possible.

Here is the complete code:

    <title>Esri Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--    <meta http-equiv="X-UA-Compatible" content="IE=7" />-->
    <link rel="stylesheet" type="text/css" href="">
     <!-- load Dojo -->
    <script src="//"
               data-dojo-config="async: true"></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">

      function init() {
        var myMap = new esri.Map("mapDiv");

        var baseMap = new esri.layers.ArcGISTiledMapServiceLayer("");
        //add the reference layer
        var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer("");     

         html, body { height: 100%; width: 100%; margin: 0; padding: 0; }     
         myMap{ padding:0; }   
    <div id="mapDiv" class ="tundra" style="min-width:500px; min-height: 500px; border:1px solid #000; align: center"></div>   

Would appreciate any help to fix this problem.