Unresponsive map behaviour

PabitraDash · ‎11-30-2012

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"/>

    <link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
     
    <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

JeffPace · ‎11-30-2012

Why are using the latest version of dojo (1.8.1) with such an ancient version of the api (1.6)

Just use the 3.2 api, it comes with dojo 1.7. You do not need a separate call to dojo.

PabitraDash · ‎11-30-2012

Why are using the latest version of dojo (1.8.1) with such an ancient version of the api (1.6)

Just use the 3.2 api, it comes with dojo 1.7. You do not need a separate call to dojo.

Thanks. I am new to using this API. With this suggested changes it seems to fix the unresponsiveness when dragging the map. The displayed zooming control is still messed up though its functionality is there. Could it be a CSS issue?

PK

JeffPace · ‎11-30-2012

yes 3.2 requires a css file

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/css.htm

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />

PabitraDash · ‎11-30-2012

yes 3.2 requires a css file

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/css.htm

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />

I have this already referenced this css file. However, when I go to console in chrome for debug, I see the following error:

XMLHttpRequest cannot load https://server.arcgisonline.com/ArcGIS/rest/info?f=json.
required Cross Origin Resource Sharing (CORS).

Not sure if this error is related problem with display of the zoom control.

Thanks

JeffPace · ‎12-02-2012

That error can be safely ignored and is not related