Map does not display after pressing F5

kawwen_bin · ‎02-19-2013

On first loading my map on IE8 it is able display. But, after pressing F5 to refresh page, my map does not display.
Anyone got this problem solved.?

KellyHutchins · ‎02-20-2013

Can you post the code you are using?

kawwen_bin · ‎02-20-2013

Hi Kelly,

Below is my code which the map will upload up but after pressing F5 the map will not display.
Currently, using locally hosted Arcgis 3.3 library but dijit module does not load up or work.
<script type="text/javascript" src="3.3.js"></script>

I have tried to use the init.js but I can't get it to work on my code.
I have downloaded the library files and followed their instructions on how to deploy on IIS but I still can't get it to work.
<script type="text/javascript" src="http://localhost:8090/arcgis_js_api/library/3.3/jsapi/init.js">

<!DOCTYPE html>
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Map</title> 

    <link rel="stylesheet" href="http://localhost:8090/arcgis_js_api/library/3.3/jsapi/js/dojo/dijit/themes/claro.css"> 
    <link rel="stylesheet" href="http://localhost:8090/arcgis_js_api/library/3.3/jsapi/js/esri/css/esri.css">
    
    <style> 
      html, body { height: 97%; width: 98%; margin: 1%; }
      #rightPane{
        width:20%;
      }
      #topPane{
        border: solid #97DCF2 1px;
      }
      #resultsdiv{
        font-size: small;  
      }

    </style> 

    <script>var dojoConfig = { parseOnLoad: true };</script> 
    <script type="text/javascript" src="3.3.js"></script> 
    <script> 
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      
      var locator;     
      var map;
      var geoResults;
      function init() {
          
        //Singapore Location
        var initExtent = new esri.geometry.Extent({"xmin":11530566.441108467,"ymin":144898.1479504113,"xmax":11579333.265154345,"ymax":159459.40183871775,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{
          wrapAround180:true,
          extent:initExtent,
          zoom: 11
        });
        
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);
        
        dojo.connect(map, 'onLoad', function(theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
        
        //Create geocoder  
        locator = new esri.tasks.Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
        
        //Show result when the geocoding is complete              
        dojo.connect(locator, "onAddressToLocationsComplete", function(geocodeResults) {
        geoResults = geocodeResults;    
        var rdiv = dojo.byId("resultsdiv");
        var content = [];
        var i=0;
        rdiv.innerHTML = ("");
        dojo.forEach(geocodeResults, function(result) {
          
          if(result.score > 80){

                content.push("<fieldset>");
                content.push("<i>Score:</i> " + result.score);
                content.push("<br/>");
                //Create hyperlink; call function zoomTo()
                content.push("<i>Address Found In</i> : " + "<a onclick =' zoomTo("+ i +")'>" + result.address + "</a>");
                content.push("<br/>");
                content.push("</fieldset>");
          }
          i++;
          
        });
        rdiv.innerHTML += content.join("");
        alert("Geo Code Done\n(Click on results)");
        
        });      
        
      }//end of inti()
 
      dojo.ready(init);
      
        //Function for "Center At Address" button
        function zoomTo(index) {
        map.graphics.clear();    
        var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 5,
        new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.5]), 8),
        new dojo.Color([255, 0, 0, 0.9]));
        var pointMeters = esri.geometry.geographicToWebMercator(geoResults[index].location);
        var locationGraphic = new esri.Graphic(pointMeters, symbol);

        var font = new esri.symbol.Font().setSize("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD);
        var textSymbol = new esri.symbol.TextSymbol(geoResults[index].address, font,
        new dojo.Color([255, 0, 0, 0.8])).setOffset(5, 15);

        //add the location graphic and text with the address to the map
        map.graphics.add(locationGraphic);
        map.graphics.add(new esri.Graphic(pointMeters, textSymbol));
        
        }
      
        //Perform the geocode. This function runs when the "Locate" button is pushed.
        function locate() {
            var address = {
            'SingleLine': dojo.byId("address1").value
            };
            var options = {
            address:address,
            outFields:["*"]
            };
            
            //optionally return the out fields if you need to calculate the extent of the geocoded point
            locator.addressToLocations(options);
            
        }
      
    </script> 
  </head> 
  
  <body class="claro"> 
    <div id="content" 
         data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline', gutters:true" 
         style="width: 100%; height: 100%; margin: 0;"> 

      <div id="rightPane" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'left'">

        <div data-dojo-type="dijit.layout.AccordionContainer">
          <div data-dojo-type="dijit.layout.ContentPane" id="topPane" 
               data-dojo-props="title:'Search', selected:true">
              
            <div id="legendDiv">
                Locate Single Address
                <input type="text" id="address1" size="32" value="Choa Chu Kang"/>
                <p><button onclick="locate()">Locate</button>
                <hr>
                
                Batch GeoCode (File)
                <input type="text" size="32" value=".xlsx"/> 
                <p><button onclick="">Batch Locate</button>
                <hr>
                
            </div>
              
          </div>
          <div data-dojo-type="dijit.layout.ContentPane" 
               data-dojo-props="title:'Results'">
                <div id="resultsdiv"></div>
          </div>
        </div>
      </div>
      
      <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'" 
           style="overflow:hidden;"> 
      </div> 
        
    </div> 
  </body> 
 
</html>

kawwen_bin · ‎02-20-2013

Can you post the code you are using?

Hi Kelly,

Below is my code which the map will upload up but after pressing F5 the map will not display.
Currently, using locally hosted Arcgis 3.3 library but dijit module does not load up or work.
The 3.3.js is downloaded from http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.3
<script type="text/javascript" src="3.3.js"></script>

I have tried to use the init.js but I can't get it to work on my code.
I have downloaded the library files and followed their instructions on how to deploy on IIS but I still can't get it to work.
<script type="text/javascript" src="http://localhost:8090/arcgis_js_api/library/3.3/jsapi/init.js">

<!DOCTYPE html>
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Map</title> 

    <link rel="stylesheet" href="http://localhost:8090/arcgis_js_api/library/3.3/jsapi/js/dojo/dijit/themes/claro.css"> 
    <link rel="stylesheet" href="http://localhost:8090/arcgis_js_api/library/3.3/jsapi/js/esri/css/esri.css">
    
    <style> 
      html, body { height: 97%; width: 98%; margin: 1%; }
      #rightPane{
        width:20%;
      }
      #topPane{
        border: solid #97DCF2 1px;
      }
      #resultsdiv{
        font-size: small;  
      }

    </style> 

    <script>var dojoConfig = { parseOnLoad: true };</script> 
    <script type="text/javascript" src="3.3.js"></script> 
    <script> 
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      
      var locator;     
      var map;
      var geoResults;
      function init() {
          
        //Singapore Location
        var initExtent = new esri.geometry.Extent({"xmin":11530566.441108467,"ymin":144898.1479504113,"xmax":11579333.265154345,"ymax":159459.40183871775,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{
          wrapAround180:true,
          extent:initExtent,
          zoom: 11
        });
        
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);
        
        dojo.connect(map, 'onLoad', function(theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
        
        //Create geocoder  
        locator = new esri.tasks.Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
        
        //Show result when the geocoding is complete              
        dojo.connect(locator, "onAddressToLocationsComplete", function(geocodeResults) {
        geoResults = geocodeResults;    
        var rdiv = dojo.byId("resultsdiv");
        var content = [];
        var i=0;
        rdiv.innerHTML = ("");
        dojo.forEach(geocodeResults, function(result) {
          
          if(result.score > 80){

                content.push("<fieldset>");
                content.push("<i>Score:</i> " + result.score);
                content.push("<br/>");
                //Create hyperlink; call function zoomTo()
                content.push("<i>Address Found In</i> : " + "<a onclick =' zoomTo("+ i +")'>" + result.address + "</a>");
                content.push("<br/>");
                content.push("</fieldset>");
          }
          i++;
          
        });
        rdiv.innerHTML += content.join("");
        alert("Geo Code Done\n(Click on results)");
        
        });      
        
      }//end of inti()
 
      dojo.ready(init);
      
        //Function for "Center At Address" button
        function zoomTo(index) {
        map.graphics.clear();    
        var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 5,
        new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.5]), 8),
        new dojo.Color([255, 0, 0, 0.9]));
        var pointMeters = esri.geometry.geographicToWebMercator(geoResults[index].location);
        var locationGraphic = new esri.Graphic(pointMeters, symbol);

        var font = new esri.symbol.Font().setSize("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD);
        var textSymbol = new esri.symbol.TextSymbol(geoResults[index].address, font,
        new dojo.Color([255, 0, 0, 0.8])).setOffset(5, 15);

        //add the location graphic and text with the address to the map
        map.graphics.add(locationGraphic);
        map.graphics.add(new esri.Graphic(pointMeters, textSymbol));
        
        }
      
        //Perform the geocode. This function runs when the "Locate" button is pushed.
        function locate() {
            var address = {
            'SingleLine': dojo.byId("address1").value
            };
            var options = {
            address:address,
            outFields:["*"]
            };
            
            //optionally return the out fields if you need to calculate the extent of the geocoded point
            locator.addressToLocations(options);
            
        }
      
    </script> 
  </head> 
  
  <body class="claro"> 
    <div id="content" 
         data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline', gutters:true" 
         style="width: 100%; height: 100%; margin: 0;"> 

      <div id="rightPane" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'left'">

        <div data-dojo-type="dijit.layout.AccordionContainer">
          <div data-dojo-type="dijit.layout.ContentPane" id="topPane" 
               data-dojo-props="title:'Search', selected:true">
              
            <div id="legendDiv">
                Locate Single Address
                <input type="text" id="address1" size="32" value="Choa Chu Kang"/>
                <p><button onclick="locate()">Locate</button>
                <hr>
                
                Batch GeoCode (File)
                <input type="text" size="32" value=".xlsx"/> 
                <p><button onclick="">Batch Locate</button>
                <hr>
                
            </div>
              
          </div>
          <div data-dojo-type="dijit.layout.ContentPane" 
               data-dojo-props="title:'Results'">
                <div id="resultsdiv"></div>
          </div>
        </div>
      </div>
      
      <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'" 
           style="overflow:hidden;"> 
      </div> 
        
    </div> 
  </body> 
 
</html>

Thanks

KellyHutchins · ‎02-20-2013

I just ran a quick test using your code but pointing to my local install and everything works fine. I suspect that your local install is not setup correctly. If you try the url to your init.js file in a browser does it display the file contents?

http://<myserver>/arcgis_js_api/library/3.3/jsapi/init.js

When you setup the local install did you follow the install instructions and update the init.js and dojo.js files to replace the [HOSTNAME_AND_PATH_TO_JSAPI] with the correct values?

kawwen_bin · ‎02-20-2013

I just ran a quick test using your code but pointing to my local install and everything works fine. I suspect that your local install is not setup correctly. If you try the url to your init.js file in a browser does it display the file contents?

http://<myserver>/arcgis_js_api/library/3.3/jsapi/init.js

When you setup the local install did you follow the install instructions and update the init.js and dojo.js files to replace the [HOSTNAME_AND_PATH_TO_JSAPI] with the correct values?

Yap, URL to init.js file in a browser is working and updated the two file init.js and dojo.js.
The location of my arcgis library is in: C:\inetpub\wwwroot\arcgis_js_api
And my webpage is in another folder: C:inetpub\wwwroot\eGIS\

However, if I use 3.3.js that was downloaded from http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.3
<script type="text/javascript" src="3.3.js"></script>
My map will display; but when I include dojo.require("dijit.layout.BorderContainer"), my map will not be display...