AnsweredAssumed Answered

Help: Map unable to load up and dojo dgrid

Question asked by kawbin on Feb 3, 2013
Latest reply on Feb 4, 2013 by stevel
Hi Help needed... I got a problem loading up my local published map and my dojo dgrid on my IE 8 (Project must use IE8 only).
On loading my webpage I am able to see the esri logo but not my map and the dojo grid layout.
Publish map on REST server is working as I'm able to see service directory of the map.
Can anyone help me find out whats wrong with it..?

Thanks!
kawbin

Code:
[HTML]
<textbox>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Address Locator</title>
  <link rel="stylesheet" href="dgrid.css">
  <link rel="stylesheet" href="esri.css">
  <style>
    html,body {
      font-family: Arial,Helvetica,sans-serif;
      height:100%;
      margin:0;
    }
    #map {
      height:100%;
      overflow:hidden;
    }
    #dialog {
      top: 15px;
      right: 15px;
      position: absolute;
      padding: 5px;
      width: 300px;
      background-color:#ffffff;
      border-radius:5px;
      margin:8px;
      box-shadow:0px 5px 3px #888;
    }
    #dialog img, #dialog input{
      vertical-align:bottom;
    }
    #dialog input{
      margin:6px;
    }

    #grid{
      overflow-x:hidden;
      overflow-y:auto;

    }
    .dgrid-row{
      padding:5px;
      margin-bottom:5px;
      min-height:50px;
      border-bottom: solid 1px #C0C0C0;
    }
    .detail a{
      font-size:small;
      color:#000;
      text-decoration:none;
      cursor:pointer;
    }
    .detail a:hover{
      text-decoration:underline;
    }

  </style>
  <script>var dojoConfig = { parseOnLoad: true };</script>
  <script src="3.3.js"></script>
  <script>
    dojo.require("esri.map");
    dojo.require("esri.tasks.locator");
    dojo.require("dgrid.Grid");

    var map, locator, geoResults, grid;

    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://localhost:6080/arcgis/rest/services/basemap/mymap");
      map.addLayer(basemap);
     

      locator = new esri.tasks.Locator("http://localhost:6080/arcgis/rest/services/geocoding/addresslocator/goeServer");
     
    }
    dojo.ready(init);

    //Execute a routing task when clicking "get direction".
    function locate() {
        var address = {
        'SingleLine': dojo.byId("address1").value
        };
        var options = {
        address:address,
        outFields:["*"]
        };
       
        locator.addressToLocations(options);
       
        dojo.connect(locator, "onAddressToLocationsComplete", function showResults(geocodeResults){
            alert("GeoCoding Done");
            geoResults = geocodeResults;
            var data = [];
            var i=0;
            if(grid) grid.refresh();
            grid = new dgrid.Grid({
            renderRow:renderList
            //columns:{address: "Address"}
            },"grid");
           
            dojo.forEach(geocodeResults, function(result){
                if(result.score > 80){
                    data = [{address: result.address, index: i}];
                    grid.renderArray(data);
                }
                i++;
            });// end of forEach loop
        });// end of dojo.connect()  
           
    }// end of locate()
   
    function renderList(obj,options){
        var template = "<div class='detail'><a  href='#' onclick='zoomTo(${index});'>${address}</a></div>";
       
      return dojo.create("div",{innerHTML:esri.substitute(obj,template)});
    }
   
    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));
    }   
   
  </script>
 
</head>
<body>
   
    <div id="map" style=" border-width: 5px"></div>
 
  <div id="dialog">
    <div>
      Locate Single Address: <br/>
      <input type="text" id="address1" value="Choa Chu Kang" size="40"/>
    </div>
      <input type="button" value="Locate" onclick="locate()" style="float:left;"/>
   
    <div id="directionsDetail" style="clear:both;" >
      <div id="grid"></div>
    </div>
  </div>

</body>
</html>

</textbox>
[/HTML]

Outcomes