Unable to render MAP on browser using ESRI javascipt API.

HarshanandWankhede · ‎02-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 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="https://community.esri.com/arcgis_js_v33_api/library/3.3/jsapicompact/js/dojo/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="https://community.esri.com/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.