pkdash

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="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
               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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <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="https://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
     <!-- load Dojo -->
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
               data-dojo-config="async: true"></script>
    <script type="text/javascript" src="https://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <script type="text/javascript">
      dojo.require("esri.map");

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

        var baseMap = new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        myMap.addLayer(baseMap);
        //add the reference layer
        var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer");     
        myMap.addLayer(referenceLayer);
      }

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

Would appreciate any help to fix this problem.

PK

Outcomes