harshanand.wankhede

Unable to render MAP on browser using ESRI javascipt API.

Discussion created by harshanand.wankhede on Feb 26, 2014
We are using ESRI javascript API for our Map application. When Map is loaded completely, we are showing location on Map by calling map.CenterAndZoom method. It is working fine. But when user click on Locate button to Plot another location, it shows blank map. After investigation it is found that Map tiles are downloaded but unable to render on Browser. I have checked this on Firefox, Crome browser.

Please suggest us the way to address this issue. We are using ESRI javascript downloaded API (Not ESRI CDN)

Following is the code that we are using.

<html>
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Altus Mobile</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- meta tags to hide url and minimize status bar to give the web app a native app look this only happens after app is saved to the desktop-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="translucent-black" >
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/arcgis_js_v33_api/library/3.3/jsapicompact/js/dojo/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="/arcgis_js_v33_api/library/3.3/jsapicompact/js/esri/css/esri.css"/>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
var arcgis_js_api_url = '/arcgis_js_v33_api';

$(document).ready(function () {
var map = null;
initmap();
  function initmap() {
        $("#mapcontainer").height($(window).height());
        var options = {
            slider: false,
            zoom: 3,
            displayGraphicsOnPan: true
        }
        // Create map and call Init function
        map = new esri.Map("mapcontainer", options);
  map.setBasemap('streets');
        //if custom map is specified, load that map otherwise load esri street map
      
        //map.addLayer(myTiledMapServiceLayer);
        dojo.connect(map, "onLoad", onmapload);
       // dojo.connect(map, "onPanEnd", handlePanEndEvent);
       // dojo.connect(map, "onZoomEnd", handleZoomEndEvent);
    }

function onmapload()
{
  var long = 78.042155;
  var lat = 27.175015;
  var pt = new esri.geometry.Point(long, lat);
  var imgUrl = "./img/user-location.png";
  var graphic = creategraphic(pt, imgUrl);
  var grLayer = new esri.layers.GraphicsLayer();
  grLayer.id = 999;
  grLayer.add(graphic);
  map.addLayer(grLayer);
  zoomtocenter(pt, map.getMaxZoom() - 2);
}

function creategraphic(pt, imgurl) {
    var symbol = new esri.symbol.PictureMarkerSymbol(imgurl, 16, 16);
    var graphic = new esri.Graphic(pt, symbol);
    return graphic;
}
function zoomtocenter(pt, zoomLevel)
{
   map.centerAndZoom(pt, zoomLevel);
}

$("#btnLocate").click(function(){
  var long = -122.083104;
  var lat = 37.385674;
  var pt = new esri.geometry.Point(long, lat);
  var imgUrl = "./img/user-location.png";
  var graphic = creategraphic(pt, imgUrl);
  var grLayer = new esri.layers.GraphicsLayer();
 
  grLayer.add(graphic);
  map.addLayer(grLayer);
  zoomtocenter(pt, map.getMaxZoom() - 2);
});
});
</script>
</head>
<body>
<div id="mapcontainer" style="width: 100%; background-color: black"></div>
  <input type="button" id="btnLocate" value="Save" class="button_default" />
<script src="/arcgis_js_v33_api/library/3.3/jsapicompact/init.js"></script>
</body>
</html>

Thanks in advance.

Outcomes