nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Loading image won't stop

MayJeff

Here is my code:

Edit fiddle - JSFiddle‌

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.

Vind meer berichten getagd met

Accepted answers

jskinner

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/MapServer");
        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>

All comments

MayJeff

Thank you all very much. It works.

JohnGrayson

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

Edit fiddle - JSFiddle‌

jskinner

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/MapServer");
        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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.