JavaScript - map.setExtent does not work

ShaningYu · ‎06-30-2015

About 1.5 year ago I created a JS application, which draw either a point or a polyline on the map after query. Now, when I work on this project again and found that the map.setExtent does not work well. The related code is below:

...

map.graphics.clear();

var polylineJson = response.Geometry[0];

var polyline = new esri.geometry.Polyline(polylineJson);

var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 3); // Red

var g = new esri.Graphic(polyline, symbol, null, null);

map.graphics.add(g);

map.setExtent(g.geometry.getExtent().expand(2));

If I disabled the line of map.setExtent(g.geometry.getExtent().expand(2)); the polyline is drawn on the map. With this line of code, the map does not shown well at all.

Besides, both the Zoom-in and Zoom-out buttons (+ & -) on the top-left of the map do not function well.

How can this be debugged? Thanks.

TomSellsted · ‎06-30-2015

Shaning,

Could you provide more of your code to give this some context? It might shed some light on debugging the problem.

Regards,

Tom

View solution in original post

TomSellsted · ‎06-30-2015

Shaning,

Could you provide more of your code to give this some context? It might shed some light on debugging the problem.

Regards,

Tom

ShaningYu · ‎06-30-2015

Tom:

See my code below:

<%@ Page Title="" Language="C#" AutoEventWireup="true" Inherits="SOEApp" Codebehind="SOEApp.aspx.cs" %>

<!DOCTYPE html>

<%--http://stackoverflow.com/questions/10489977/validation-xhtml-1-0-transitional-element-html-cannot-be...>

<html>

<%-- <head>

<%--06/30/2015 Add IE=edge--%>

<title>Untitled Document</title>

// var djConfig = { parseOnLoad: true };

// reference: http://dojotoolkit.org/reference-guide/1.9/loader/amd.html

// var djConfig = {

// parseOnLoad: true,

// baseUrl: './',

// modulePaths: {

// // if use local copy, make sure the path reference is relative to 'baseUrl', e.g.: 'agsjs': '../build/agsjs'

// 'agsjs': 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/1.04/build/agsjs'

// }

// };

var djConfig = {

parseOnLoad: true,

packages: [{

"name": "agsjs",

//"location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs'

"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs' // for xdomain load

}]

};

</script>

<%--Add by ?parameter=1 by refeering http://forums.asp.net/t/1586914.aspx--%>

<%-- <link href="../Scripts/dojo/arcgis3.8_dojo_dijit_claro.css" rel="stylesheet" type="text/css" />

<%-- <script src="../Scripts/j3.7.js" type="text/javascript"></script>--%>

<%-- <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7" type="text/javascript"></script>--%>

<%-- <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css" />

<style>

html, body { height: 98%;

width: 98%;

margin: 0;

padding: 5px;

font-family: helvetica, arial, sans-serif;

font-size: 90%; }

#header {

color: Purple;

height: 60px;

width: 660px;

overflow-y: hidden;

background: #fff url("../Images/MetroBackgound.png" ); /*no-repeat top right; */

} /* url("http://i246.photobucket.com/albums/gg113/comicrazee/ICCHeader1.gif") no-repeat top right; */

#rightPane { width:16%; background-color:white; font-color:black; }

#rightPane { width: 300px; overflow: auto; }

/* this line hide layers when out of scale for the inline TOC */

#scaleDiv .agsTOCOutOfScale { display: none; }

#footer { background-color:Silver; }

#tocPane, #segmentPane, #pointPane {

font-size:small;

}

</style>

dojo.require("dijit.dijit"); // optimize: load dijit layer

dojo.require("dijit.layout.BorderContainer");

dojo.require("dijit.layout.ContentPane");

dojo.require("dijit.form.Button");

dojo.require("esri.map");

dojo.require("esri.layers.GraphicsLayer");

dojo.require("esri.layers.FeatureLayer");

dojo.require("esri.dijit.BasemapGallery");

dojo.require("dijit.TitlePane");

dojo.require("esri.tasks.query");

dojo.require("dojo.data.ItemFileReadStore");

// dojo.require("esri/symbols/SimpleMarkerSymbol");

// dojo.require("esri/symbols/SimpleLineSymbol");

// dojo.require("dijit.layout.AccordionContainer"); // For TOC

dojo.require("agsjs.dijit.TOC"); // For TOC

// Adding the 2 below causes problem in API V2.x

dojo.require("dojo.dom");

dojo.require("dojo.domReady!");

////debugger;

var map;

var serverURL0 = '<%=ConfigurationManager.AppSettings["serverURL"].ToString() %>';

var serverURL = serverURL0 + '<%=ConfigurationManager.AppSettings["RailLRSDef"].ToString() %>';

var serverAnno = '<%=ConfigurationManager.AppSettings["RailAnno"].ToString() %>';

var gLayer;

//var featureLayer;

var initialExtent = new esri.geometry.Extent({

xmin: -8614312, ymin: 4687051, xmax: -8536040, ymax: 4730894, spatialReference: { wkid: 102100 }

});

var queryTask;

var queryParams;

var querySymbol;

function init() {

map = new esri.Map("map", { extent: initialExtent, zoom: 9 });

var streetURL = '<%=ConfigurationManager.AppSettings["baseMapStreetURL"].ToString() %>';

var basemap = new esri.layers.ArcGISDynamicMapServiceLayer(streetURL, { id: 'basemap', opacity: 0.7 });

// var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer(serverURL + "/0", { "opacity": 0.5 } );

gLayer = new esri.layers.GraphicsLayer();

gLayer.id = "gLayer";

//createBasemapGallery();

// Disable submit Button initially

////debugger;

document.getElementById("submitButton").disabled = true;

document.getElementById("submitButton2").disabled = true;

var operational2 = new esri.layers.ArcGISDynamicMapServiceLayer(serverAnno, { id: 'operational2', opacity: 0.8 });

var operational = new esri.layers.ArcGISDynamicMapServiceLayer(serverURL, { id: 'operational', opacity: 0.8 });

//map.addLayer(operational2, operational, basemap, operational);

// TOC - http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/examples/toc.html

dojo.connect(map, 'onLayersAddResult', function (results) {

// var standardTOC = new agsjs.dijit.TOC({

// map: map

// }, 'standardDiv');

// standardTOC.startup();

// var inlineTOC = new agsjs.dijit.TOC({

// map: map,

// style: 'inline'

// }, 'inlineDiv');

// inlineTOC.startup();

var sliderTOC = new agsjs.dijit.TOC({

map: map,

layerInfos: [{

layer: operational,

title: "LRS Rails",

collapsed: true,

//noLayers: true,

slider: true

}, {

layer: operational2,

title: "LRS Annotation",

collapsed: true

//noLayers: true // used in V2.x

//slider: true

}, {

layer: basemap,

title: "BaseMap",

noLayers: true,

slider: true

}], style: 'inline'

}, 'sliderDiv');

sliderTOC.startup();

// var scaleTOC = new agsjs.dijit.TOC({

// map: map,

// layerInfos: [{

// layer: operational,

// title: "Operational Layers",

// showGroupCount: true

// }]

// }, 'scaleDiv');

// scaleTOC.startup();

});

map.addLayers([operational2]);

map.addLayers([operational]);

map.addLayers([basemap]);

//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.map.on('onLoad', function (theMap) {

// dojo.connect(dijit.byId('map'), 'resize', function () { //resize the map if the div is resized

dojo.map.on('resize', function () {

clearTimeout(resizeTimer);

resizeTimer = setTimeout(function () {

map.resize();

map.reposition();

}, 500);

});

}

function drawPoint() {

var e = document.getElementById('DropDownRouteID2');

var routeById2 = e.options[e.selectedIndex].text;

var m = document.getElementById('measurePoint').value;

var soePoint = '<%=ConfigurationManager.AppSettings["SOEPoint"].ToString() %>';

var myURL = serverURL + soePoint + routeById2 + '&Chainmarker=' + m + '&f=pjson';

$.support.cors = true;

$.ajax({

type: 'Get',

url: myURL,

dataType: 'json',

callbackParamName: 'callback',

crossDomain: true,

success: function (response) {

//debugger;

drawResponseGeometries2(response);

},

error: function (xhr, status, error) {

////debugger;

console.log(error);

}

});

}

function drawResponseGeometries2(response) {

////debugger;

map.graphics.clear(); // clear graphicsLayer if exists

var pointJson = response.Geometry[0];

var point = new esri.geometry.Point(pointJson);

var symbol = new esri.symbol.SimpleMarkerSymbol({

"color": [255, 0, 0, 128],

"size": 10,

"angle": -30,

"xoffset": 0,

"yoffset": 0,

"type": "esriSMS",

"style": "esriSLSSolid",

"outline": {

"color": [0, 0, 0, 255],

"width": 1,

"type": "esriSLS",

"style": "esriSLSSolid"

}

});

// var symbol = new esri.symbol.SimpleMarkerSymbol (

// esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 15,

// new esri.symbol.SimpleLineSymbol(

// new esri.symbol.SimpleLineSymbol.STYLE_SOLID,

// new Color([0, 0, 255, 0.5]), 8 ),

// new Color([0, 0, 255])

// );

var g = new esri.Graphic(point, symbol);

map.graphics.add(g);

map.setExtent(initialExtent.expand(0.5)); // 0.125 or 0.25

map.centerAt(point);

// map.centerAndZoom(point.geometry, 14); //map.centerAndZoom(point, 20);

}

function toggleMeasure2() {

////debugger;

var m = parseFloat(document.getElementById('measurePoint').value);

var mMin = parseFloat(document.getElementById('LabelMinValue2').innerText);

var mMax = parseFloat(document.getElementById('LabelMaxValue2').innerText);

if (mMin <= m && m <= mMax) {

document.getElementById('submitButton2').disabled = false;

} else if (mMin > m || mMax < m) {

document.getElementById('measurePoint').value = '';

document.getElementById('submitButton2').disabled = true;

} else { }

}

function drawLine() {

//alert("You entered: " + dojo.byId("findText").value);

var e = document.getElementById('DropDownRouteID');

var routeById = e.options[e.selectedIndex].text;

var mA = document.getElementById('MeasureA').value;

var mB = document.getElementById('MeasureB').value;

////debugger;

var soeSegment = '<%=ConfigurationManager.AppSettings["SOESegment"].ToString() %>';

var myURL = serverURL + soeSegment + routeById + '&Chainmarker_Start=' + mA + '&Chainmarker_End=' + mB + '&f=json';

$.support.cors = true;

// http://www.codemonkeez.com/2011/12/ie9-cross-sitedomain-scripting-with.html

// for jQuery V1.9 or after, error on .browser. To use .browser, have to use V 1.8- http://stackoverflow.com/questions/14524289/browser-is-undefined-error*/

/*

if (jQuery.browser.msie && window.XDomainRequest) {

//debugger;

var xdr = new XDomainRequest();

xdr.onload = function () {

callback(xdr);

};

xdr.onerror = error;

xdr.open('Get', myURL);

xdr.send(data);

} else {

//debugger;

var xmlHttp = new XMLHttpRequest();

xmlHttp.onreadystatechange = function () {

callback(xmlHttp);

};

xmlHttp.open('Get', url, true);

xmlHttp.setRequestHeader('Content-type', 'text/xml; charset=utf-8');

xmlHttp.send(data);

return xmlHttp;

}

*/

$.ajax({

type: 'Get',

url: myURL,

dataType: 'json',

callbackParamName: 'callback',

crossDomain: true,

success: function (response) {

////debugger;

drawResponseGeometries(response);

},

error: function (xhr, status, error) {

////debugger;

console.log(error);

}

});

////debugger;

document.getElementById('submitButton').disabled = true;

}

function clear() {

map.graphics.clear();

document.getElementById('MeasureA').value = '';

document.getElementById('MeasureB').value = '';

document.getElementById('submitButton').disabled = true;

document.getElementById('measurePoint').value = '';

document.getElementById('submitButton2').disabled = true;

document.getElementById('Checkbox1').checked = false;

document.getElementById('Checkbox2').checked = false;

document.forms[0].elements["DropDownRouteID"].selectedIndex = 0;

document.forms[0].elements["DropDownRouteID2"].selectedIndex = 0;

if (gLayer != "undefined" && gLayer.graphics.length != 0) {

for (var i = gLayer.graphics.length - 1; i > -1; i--) {

gLayer.remove(gLayer.graphics);

}

map.setExtent(initialExtent);

}

// This draws the SOE response points on the map

function drawResponseGeometries(response) {

map.graphics.clear(); // clear graphicsLayer if exists

var polylineJson = response.Geometry[0];

var polyline = new esri.geometry.Polyline(polylineJson);

var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 3); // Red

var g = new esri.Graphic(polyline, symbol, null, null);

map.graphics.add(g);

map.setExtent(g.geometry.getExtent().expand(4));

}

function toggleMeasures() {

var mA = parseFloat(document.getElementById('MeasureA').value);

var mB = parseFloat(document.getElementById('MeasureB').value);

var mMin = parseFloat(document.getElementById('LabelMinValue').innerText);

var mMax = parseFloat(document.getElementById('LabelMaxValue').innerText);

if (mA < mB && mMin <= mA && mB <= mMax) {

document.getElementById('submitButton').disabled = false;

} else if (mMin > mA) {

document.getElementById('MeasureA').value = '';

document.getElementById('MeasureA').focus(); // Not working

} else if (mMax < mB) {

document.getElementById('MeasureB').value = '';

document.getElementById('MeasureB').focus(); // Not working

} else {

////debugger;

if (mB > mA) {

document.getElementById('submitButton').disabled = false;

} else {

document.getElementById('submitButton').disabled = true;

}

function MeasureA_onkeyPress(evt) {

// //debugger;

map.graphics.clear();

document.getElementById('measurePoint').value = '';

var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode == 13) {

document.getElementById('MeasureB').focus();

toggleMeasures();

} else if (charCode > 31 && (charCode < 48 || charCode > 57))

return false;

else {

return true;

}

function MeasureB_onkeyPress(evt) {

// //debugger;

map.graphics.clear();

document.getElementById('measurePoint').value = '';

var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode == 13) {

toggleMeasures();

} else if (charCode > 31 && (charCode < 48 || charCode > 57))

return false;

else {

return true;

}

function measurePoint_onkeyPress(evt) {

// //debugger;

map.graphics.clear();

document.getElementById('MeasureA').value = '';

document.getElementById('MeasureB').value = '';

var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode == 13) {

toggleMeasure2();

} else if (charCode > 31 && (charCode < 48 || charCode > 57))

return false;

else {

return true;

}

// //http://stackoverflow.com/questions/13952686/how-to-make-html-input-tag-only-accept-numerical-values

// function isNumberKey2(charCode) {

// //debugger;

// if (charCode > 31 && (charCode < 48 || charCode > 57))

// return false;

// return true;

// }

function isNumberKey(evt) {

////debugger;

map.graphics.clear();

var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode > 31 && (charCode < 48 || charCode > 57))

return false;

return true;

}

// function createBasemapGallery() {

// var basemapGallery = new esri.dijit.BasemapGallery({ map: map, showArcGISBasemaps: true }, "basemapGallery");

// basemapGallery.startup();

// }

function chkBoxEvt(cb) {

////debugger;

var s;

var gLayer = new esri.layers.GraphicsLayer();

if (cb.id == "Checkbox1") {

s = 'DropDownRouteID';

document.getElementById('Checkbox2').value = "off";

document.forms[0].elements["Checkbox2"].checked = false;

document.forms[0].elements["DropDownRouteID2"].selectedIndex = 0;

} else {

s = 'DropDownRouteID2';

document.getElementById('Checkbox1').value = "off";

document.forms[0].elements["Checkbox1"].checked = false;

document.forms[0].elements["DropDownRouteID"].selectedIndex = 0;

}

var routeID = document.getElementById(s).value;

if (cb.checked) {

if (typeof (gLayer) != "undefined") { // && gLayer.graphics.length != 0) {

gLayer.setVisibility(true);

// } else {

doQuery(routeID);

}

} else {

////debugger;

gLayer.setVisibility(false);

}

function doQuery(route) {

queryTask = new esri.tasks.QueryTask(serverURL + "/0");

queryParams = new esri.tasks.Query();

queryParams.returnGeometry = true;

queryParams.outSpatialReference = map.spatialReference;

querySymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,

new dojo.Color([255, 130, 100]), 3);

//new esri.symbol.SimpleLineSymbol();

//querySymbol.setColor(new dojo.Color([255, 255, 0, 0.5]));

queryParams.where = "TRACKNAME LIKE '" + route + "'";

queryTask.execute(queryParams, showResults);

////debugger;

}

function showResults(featureSet) {

////debugger;

gLayer = new esri.layers.GraphicsLayer();

gLayer.id = "gLayer";

var queryFeatures = featureSet.features;

for (var i = 0; i < queryFeatures.length; i++) {

queryFeatures.setSymbol(querySymbol);

gLayer.add(queryFeatures);

//map.graphics.add(queryFeatures);

}

map.addLayers([gLayer]);

}

function CleanMeasureInputs() {

//debugger;

document.getElementById('MeasureA').value = '';

document.getElementById('MeasureB').value = '';

document.getElementById('measurePoint').value = '';

}

dojo.addOnLoad(init);

</script>

<%-- </head>--%>

<div id="appContent" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true"

style="width:100%; height:90%; margin:0;">

<tr>

<h1 style="height:30px;" >Locate A Route's Point or Segment</h1>

</tr>

<tr>

<%-- <h5 style="width:250px; padding-left:10px;">WMATA GIS Application </h5>--%>

<asp:Label ID="LabelHeader2" runat="server" Text="WMATA GIS Application"

style="color: #0033CC" ></asp:Label>

</td>

<asp:HyperLink ID="HyperLink3" Text="Help"

ToolTip = "How to Use Procedure"

runat="server" NavigateUrl="http://metroweb/departments/IT/apps2/gis/Documents/LocateSegment.pdf">

</asp:HyperLink>

</td>

</table>

</td>

</tr>

</div>

<!-- <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left">

</div>-->

</div>

<div style="color:Purple; height:30px" >Choose a Route ID and 2 Measure Values:</div>

<div style="height:30px">Route ID:

<asp:DropDownList ID="DropDownRouteID" runat="server" onselectedindexchanged="DropDownRouteID_SelectedIndexChanged"

AutoPostBack="True" >

</asp:DropDownList>

<%-- <input id="Checkbox1" type="checkbox" onclick="chkBoxEvt(this)" onchange="chkBoxEvt(this)" />Show Route

--%> </div>

<div style="height:30px">Measure Start:

<input id="MeasureA" runat="server" onkeypress="return MeasureA_onkeyPress(event)" onchange="toggleMeasures()"

style="width:50px" />

<asp:Label ID="LabelMin" runat="server" Text="Min.:" Width="35" ForeColor="Gray"></asp:Label>

<asp:Label ID="LabelMinValue" runat="server" Text="" Width="50" ForeColor="Gray" Style="text-align: right"></asp:Label>

<asp:Label ID="Label1" runat="server" Text="ft." ForeColor="Gray"></asp:Label>

</div>

<div style="height:30px">Measure End:

<asp:Label ID="LabelMax" runat="server" Text="Max.:" Width="35" ForeColor="Gray"></asp:Label>

<asp:Label ID="LabelMaxValue" runat="server" Text="" Width="50" ForeColor="Gray" Style="text-align: right"></asp:Label>

<asp:Label ID="Label2" runat="server" Text="ft." ForeColor="Gray"></asp:Label>

</div>

<button id="submitButton" dojotype="dijit.form.Button" onclick="drawLine();">Draw Polyline</button>

<button id="clearButton" dojotype="dijit.form.Button" onclick="clear();">Clear</button>

</div>

<div style="color:Purple; height:30px" >Choose a Route ID and a Measure Value:</div>

<div style="height:30px">Route ID:

<asp:DropDownList ID="DropDownRouteID2" runat="server" onselectedindexchanged="DropDownRouteID2_SelectedIndexChanged"

AutoPostBack="True" >

</asp:DropDownList>

<%-- <input id="Checkbox2" type="checkbox" onclick="chkBoxEvt(this)" onchange="chkBoxEvt(this)" />Show Route

--%> </div>

<div>

Measure:

<input id="measurePoint" runat="server" onkeypress="return measurePoint_onkeyPress(event)" onchange="toggleMeasure2()"

style="width:50px" />

<%-- <input id="measurePoint" runat="server" onkeypress="return isNumberKey(event)" onChange="toggleMeasure2()"

style="width:50px" />--%>

</div>

<asp:Label ID="LabelMin2" runat="server" Text="Min.:" Width="32" ForeColor="Gray"></asp:Label>

<asp:Label ID="LabelMinValue2" runat="server" Text="" Width="48" ForeColor="Gray" Style="text-align: right"></asp:Label>

<asp:Label ID="Label3" runat="server" Text="ft." ForeColor="Gray"></asp:Label>

<asp:Label ID="LabelMax2" runat="server" Text="Max.:" Width="32" ForeColor="Gray"></asp:Label>

<asp:Label ID="LabelMaxValue2" runat="server" Text="" Width="48" ForeColor="Gray"></asp:Label>

<asp:Label ID="Label4" runat="server" Text="ft." ForeColor="Gray"></asp:Label>

</div>

<button id="submitButton2" dojotype="dijit.form.Button" onclick="drawPoint();" onclick="return submitButton2_onclick();">Draw Point</button>

<button id="clearButton2" dojotype="dijit.form.Button" onclick="clear();">Clear</button>

</div>

<%-- <div dojotype="dijit.TitlePane" title="Switch Basemap" open="false">

</div>

</div>--%>

</div>

</form>

</div>

<center>Created by WMATA GIS Team</center>

</div>

</body>

</html>

TomSellsted · ‎06-30-2015

Shaning,

Thanks for providing code. It appears that it is embedded in a .Net wrapper which will limit my ability to help you. I am not sure that your initial extent is actually getting set properly.

Is this a page that I can view or is it internal? Can you provide the URL?

Also you are using 3.8 CSS with 3.13 JS. I don't think this is the solution to this particular problem, but you might consider keeping them consistent.

Regards,

Tom

ShaningYu · ‎06-30-2015

Tom: Thanks for your response. This URL is an internal. This page does blend .Net & JS. So, it is hard to test. I also tested the versions 3.8 & 3.13. But I can't use 3.13's stylesheet in this project somehow. I have observed the Zoom-In/Out tool does not function well. I also have realized that the problem is caused by the conflicts between the css and js used. I will continue to debug on it. Thanks again.

TomSellsted · ‎06-30-2015

Shaning,

I am betting it is because of the initial extent. I kept getting an error as it was not defined until the dojo requires had been read. You might move it inside your init function. Something like this:

var initialExtent;

function init() {
  initialExtent = new esri.geometry.Extent(-8614312, 4687051, -8536040, 4730894, new esri.SpatialReference({ wkid:102100 }));
  map = new esri.Map("map", {basemap: "topo", extent: initialExtent, zoom: 9 });

Regards,

Tom

ShaningYu · ‎06-30-2015

Tom: Thanks for your finding. Whether I put the initialExtend in function init(), the results are the same. If the initialExtent is out of the init() body, I can retrieve its values from

map = new esri.Map("map", { extent: initialExtent, zoom: 9 });

I also tested my code and observed that the setExtent works in 2nd click on the query button. I will continue my debugging. Thanks again.

KenBuja · ‎06-30-2015

Do you get an error in the console on the first click?

ShaningYu · ‎06-30-2015

I debug on VS Studio. Could you tell me the approach how to use Console? Thanks a lot.

KenBuja · ‎06-30-2015

That would be using the browser's development tools. Use the F12 key to open it in all browsers.