Showing a wait cursor in different divs

KenBuja · ‎04-08-2013

I'm using nliu's TOC script and am playing the example script (I'm just making the transition to JavaScript from Flex).

Some of my layers can be complex and take a little while to actually appear on the map, so I'd like to show a wait cursor until the layer is ready. I'm using the onUpdateStart and onUpdateEnd to change the cursor, but this is only appearing when the cursor is in the TOC div. If I move the cursor to the map div, the cursor changes to the default cursor. How do I make the wait cursor show in both divs?

Here's the coding I'm using

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />     <title>TOC</title>     <!--<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">-->     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">     <link rel="Stylesheet" type="text/css" href="css/style.css" />      <style>         html, body         {             height: 98%;             width: 98%;             margin: 0;             padding: 5px;             font-family: helvetica, arial, sans-serif;             font-size: 90%;         }           #leftPane         {             width: 280px;             overflow: auto;         }         /* this line hide layers when out of scale for the inline TOC */         #scaleDiv .agsTOCOutOfScale         {             display: none;         }     </style>     <script type="text/javascript">         var djConfig = {             parseOnLoad: true,             packages: [{                 "name": "agsjs",                 "location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs'                 // "location": location.pathname.replace(/\/[^/]+$/, "")+'/../build/agsjs'                 //"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.02/xbuild/agsjs' // for xdomain load             }]         };     </script>     <!--<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0">-->     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>      </script>         <script type="text/javascript">             //             //dojo.require("dijit.dijit");             dojo.require("dijit.layout.BorderContainer");             dojo.require("dijit.layout.ContentPane");             // uncomment if want dojo widget style checkbox             //dojo.require('dijit.form.CheckBox');             dojo.require("esri.map");             dojo.require("dijit.layout.AccordionContainer");             dojo.require("dojo.fx"); // needed if use jsapi 3.0             dojo.require("agsjs.dijit.TOC");         </script>     <script type="text/javascript">         var map;         function init() {             map = new esri.Map("map", {                 showAttribution: false              });               //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service                 var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");             map.addLayer(basemap);              var layerSEFCRI = new esri.layers.ArcGISDynamicMapServiceLayer("http://egisws02.nos.noaa.gov/ArcGIS/rest/services/biogeo/SEFCRI/MapServer", {                 id: 'SEFCRI'              });              dojo.connect(map, 'onLayersAddResult', function (results) {                  var toc = new agsjs.dijit.TOC({                     map: map,                     layerInfos: [{                         layer: layerSEFCRI,                         title: "SEFCRI",                         slider: true                     }]                 }, 'tocDiv');                  toc.startup();                  layerSEFCRI.setVisibleLayers([0]);              });             map.addLayers([layerSEFCRI]);             document.body.style.cursor = "wait";              dojo.connect(layerSEFCRI, "onLoad", function () {                 map.setExtent(layerSEFCRI.initialExtent, true);                 document.body.style.cursor = "default";             });              dojo.connect(layerSEFCRI, "onUpdateStart", function () {                 document.body.style.cursor = "wait";             });              dojo.connect(layerSEFCRI, "onUpdateEnd", function (error) {                 document.body.style.cursor = "default";                 if (error) {                     alert("Updated completed with error: " & error);                 }             });              //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in             //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm                   var resizeTimer;             dojo.connect(map, 'onLoad', function (theMap) {                 dojo.connect(dijit.byId('map'), 'resize', function () { //resize the map if the div is resized                     clearTimeout(resizeTimer);                     resizeTimer = setTimeout(function () {                         map.resize();                         map.reposition();                     }, 500);                 });             });          }          dojo.addOnLoad(init);     </script> </head> <body class="claro">      <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">      <!--            <div id="header" dojotype="dijit.layout.ContentPane" region="top">                  <div>                     <b>Table Of Content (TOC/Legend) Widget</b>  <a style="right:20px;position: absolute" href="../docs/toc/examples.html">Documentation</a>                 </div>                                     <ul style="margin:2px">                     <li>                         Click check box to turn on/off layers. When click on groups, all sublayers will be turned on/off.                     </li>                  </ul>             </div>-->         <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">             <div id="tocDiv">             </div>          </div>         <div id="map" dojotype="dijit.layout.ContentPane" region="center">         </div>     </div> </body> </html>

KenBuja · ‎04-10-2013

I ended up using a loading icon, taken from the Show loading icon sample.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />     <title>SEFCRI Data View</title>      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">     <link rel="Stylesheet" type="text/css" href="css/style.css" />      <style>         html, body         {             height: 100%;             width: 100%;             margin: 0;             padding: 0px;             font-family: helvetica, arial, sans-serif;             font-size: 90%;         }           #leftPane         {             width: 280px;             overflow: auto;         }         /* this line hide layers when out of scale for the inline TOC */         #scaleDiv .agsTOCOutOfScale         {             display: none;         }      </style>     <script type="text/javascript">         var djConfig = {             parseOnLoad: true,             packages: [{                 "name": "agsjs",                 "location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs'                 // "location": location.pathname.replace(/\/[^/]+$/, "")+'/../build/agsjs'                 //"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.02/xbuild/agsjs' // for xdomain load             }]         };     </script>     <!--<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0">-->     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>      </script>         <script type="text/javascript">             //             //dojo.require("dijit.dijit");             dojo.require("dijit.layout.BorderContainer");             dojo.require("dijit.layout.ContentPane");             // uncomment if want dojo widget style checkbox             //dojo.require('dijit.form.CheckBox');             dojo.require("esri.map");             dojo.require("dijit.layout.AccordionContainer");             dojo.require("dojo.fx"); // needed if use jsapi 3.0             dojo.require("agsjs.dijit.TOC");         </script>     <script type="text/javascript">         var map;         function init() {             map = new esri.Map("map", {                 showAttribution: false             });              loading = dojo.byId("loadingImg");              //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service                 var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");             map.addLayer(basemap);              var layerSEFCRI = new esri.layers.ArcGISDynamicMapServiceLayer("http://egisws02.nos.noaa.gov/ArcGIS/rest/services/biogeo/SEFCRI/MapServer", {                 id: 'SEFCRI'              });              dojo.connect(map, 'onLayersAddResult', function (results) {                 var toc = new agsjs.dijit.TOC({                     map: map,                     layerInfos: [{                         layer: layerSEFCRI,                         title: "SEFCRI",                         slider: true                     }]                 }, 'tocDiv');                  toc.startup();                  layerSEFCRI.setVisibleLayers([0]);              });             map.addLayers([layerSEFCRI]);             //document.body.style.cursor = "wait";             esri.show(loading);              dojo.connect(layerSEFCRI, "onLoad", function () {                 map.setExtent(layerSEFCRI.initialExtent, true);                 //document.body.style.cursor = "default";                 esri.hide(loading);             });              dojo.connect(layerSEFCRI, "onUpdateStart", function () {                 //document.body.style.cursor = "wait";                 esri.show(loading);             });              dojo.connect(layerSEFCRI, "onUpdateEnd", function (error) {                 //document.body.style.cursor = "default";                 esri.hide(loading);                 if (error) {                     alert("Updated completed with error: " & error);                 }             });              //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in             //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm                   var resizeTimer;             dojo.connect(map, 'onLoad', function (theMap) {                 dojo.connect(dijit.byId('map'), 'resize', function () { //resize the map if the div is resized                     clearTimeout(resizeTimer);                     resizeTimer = setTimeout(function () {                         map.resize();                         map.reposition();                     }, 500);                 });             });          }          dojo.addOnLoad(init);     </script> </head> <body class="claro">     <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">         <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">             <div id="tocDiv">             </div>         </div>         <div id="map" dojotype="dijit.layout.ContentPane" region="center">             <img id="loadingImg" src="assets/images/loading.gif" class="centered" alt="" style="position: relative; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; z-index: 100" />         </div>     </div> </body> </html>

View solution in original post

KenBuja · ‎04-10-2013

I ended up using a loading icon, taken from the Show loading icon sample.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />     <title>SEFCRI Data View</title>      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">     <link rel="Stylesheet" type="text/css" href="css/style.css" />      <style>         html, body         {             height: 100%;             width: 100%;             margin: 0;             padding: 0px;             font-family: helvetica, arial, sans-serif;             font-size: 90%;         }           #leftPane         {             width: 280px;             overflow: auto;         }         /* this line hide layers when out of scale for the inline TOC */         #scaleDiv .agsTOCOutOfScale         {             display: none;         }      </style>     <script type="text/javascript">         var djConfig = {             parseOnLoad: true,             packages: [{                 "name": "agsjs",                 "location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs'                 // "location": location.pathname.replace(/\/[^/]+$/, "")+'/../build/agsjs'                 //"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.02/xbuild/agsjs' // for xdomain load             }]         };     </script>     <!--<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0">-->     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>      </script>         <script type="text/javascript">             //             //dojo.require("dijit.dijit");             dojo.require("dijit.layout.BorderContainer");             dojo.require("dijit.layout.ContentPane");             // uncomment if want dojo widget style checkbox             //dojo.require('dijit.form.CheckBox');             dojo.require("esri.map");             dojo.require("dijit.layout.AccordionContainer");             dojo.require("dojo.fx"); // needed if use jsapi 3.0             dojo.require("agsjs.dijit.TOC");         </script>     <script type="text/javascript">         var map;         function init() {             map = new esri.Map("map", {                 showAttribution: false             });              loading = dojo.byId("loadingImg");              //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service                 var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");             map.addLayer(basemap);              var layerSEFCRI = new esri.layers.ArcGISDynamicMapServiceLayer("http://egisws02.nos.noaa.gov/ArcGIS/rest/services/biogeo/SEFCRI/MapServer", {                 id: 'SEFCRI'              });              dojo.connect(map, 'onLayersAddResult', function (results) {                 var toc = new agsjs.dijit.TOC({                     map: map,                     layerInfos: [{                         layer: layerSEFCRI,                         title: "SEFCRI",                         slider: true                     }]                 }, 'tocDiv');                  toc.startup();                  layerSEFCRI.setVisibleLayers([0]);              });             map.addLayers([layerSEFCRI]);             //document.body.style.cursor = "wait";             esri.show(loading);              dojo.connect(layerSEFCRI, "onLoad", function () {                 map.setExtent(layerSEFCRI.initialExtent, true);                 //document.body.style.cursor = "default";                 esri.hide(loading);             });              dojo.connect(layerSEFCRI, "onUpdateStart", function () {                 //document.body.style.cursor = "wait";                 esri.show(loading);             });              dojo.connect(layerSEFCRI, "onUpdateEnd", function (error) {                 //document.body.style.cursor = "default";                 esri.hide(loading);                 if (error) {                     alert("Updated completed with error: " & error);                 }             });              //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in             //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm                   var resizeTimer;             dojo.connect(map, 'onLoad', function (theMap) {                 dojo.connect(dijit.byId('map'), 'resize', function () { //resize the map if the div is resized                     clearTimeout(resizeTimer);                     resizeTimer = setTimeout(function () {                         map.resize();                         map.reposition();                     }, 500);                 });             });          }          dojo.addOnLoad(init);     </script> </head> <body class="claro">     <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">         <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">             <div id="tocDiv">             </div>         </div>         <div id="map" dojotype="dijit.layout.ContentPane" region="center">             <img id="loadingImg" src="assets/images/loading.gif" class="centered" alt="" style="position: relative; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; z-index: 100" />         </div>     </div> </body> </html>