Loading image won't stop

MayJeff · ‎08-20-2014

Here is my code:

The loading image will start loading when map is loading but after map is loaded the loading image won't stop. Can you tell me where I add to modify the code?

Thanks.

JakeSkinner · ‎08-20-2014

Hi May,

You will need to add the esri.domUtils class to your code. Also, you will need to use the 'update-start' and 'update-end' events. Ex:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
     <script src="http://js.arcgis.com/3.10/"></script>
    <script>
     require([
        "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
        "dojo/on",
        "dojo/dom",
        "esri/domUtils",
        "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicMapServiceLayer, on, dom, domUtils
      ) {
          var map;
    var loading, loadingIconShow, loadingIconHide; //loading #1 
       loading = dom.byId("loadingImg");  //loading image. id

        map = new esri.Map("map", {
          basemap: "topo",
          center: [117.773, 28.498],
          zoom: 6
        });

        loadingIconShow = map.on("update-start", showLoading);
        loadingIconHide = map.on("update-end", hideLoading);


        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapSer...");
        dynamicMapServiceLayer.setOpacity(0.4);
        map.addLayer(dynamicMapServiceLayer);
  
    function showLoading(){
        domUtils.show(loading);
        map.disableMapNavigation();
        map.hideZoomSlider();
        }

    function hideLoading(error){
      domUtils.hide(loading);
      map.enableMapNavigation();
      map.showZoomSlider();
      }
      });
    </script>
  </head>

  <body>
    <div id="map">
  <img id="loadingImg" src="images/loading.gif" style="position:absolute; right:512px; top:256px; z-index:100;" /> <!--loading #5-->
  </div>
  </body>
</html>

View solution in original post

JakeSkinner · ‎08-20-2014

Hi May,

You will need to add the esri.domUtils class to your code. Also, you will need to use the 'update-start' and 'update-end' events. Ex:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
     <script src="http://js.arcgis.com/3.10/"></script>
    <script>
     require([
        "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
        "dojo/on",
        "dojo/dom",
        "esri/domUtils",
        "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicMapServiceLayer, on, dom, domUtils
      ) {
          var map;
    var loading, loadingIconShow, loadingIconHide; //loading #1 
       loading = dom.byId("loadingImg");  //loading image. id

        map = new esri.Map("map", {
          basemap: "topo",
          center: [117.773, 28.498],
          zoom: 6
        });

        loadingIconShow = map.on("update-start", showLoading);
        loadingIconHide = map.on("update-end", hideLoading);


        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapSer...");
        dynamicMapServiceLayer.setOpacity(0.4);
        map.addLayer(dynamicMapServiceLayer);
  
    function showLoading(){
        domUtils.show(loading);
        map.disableMapNavigation();
        map.hideZoomSlider();
        }

    function hideLoading(error){
      domUtils.hide(loading);
      map.enableMapNavigation();
      map.showZoomSlider();
      }
      });
    </script>
  </head>

  <body>
    <div id="map">
  <img id="loadingImg" src="images/loading.gif" style="position:absolute; right:512px; top:256px; z-index:100;" /> <!--loading #5-->
  </div>
  </body>
</html>

JohnGrayson · ‎08-20-2014

You are missing a require for "esri/domUtils":

Edit fiddle - JSFiddle‌

MayJeff · ‎08-20-2014

Thank you all very much. It works.