topic Re: JavaScript - map.setExtent does not work in ArcGIS JavaScript Maps SDK Questions

JavaScript - map.setExtent does not work

ShaningYu — Tue, 30 Jun 2015 14:41:44 GMT

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.

Re: JavaScript - map.setExtent does not work

TomSellsted — Tue, 30 Jun 2015 15:15:14 GMT

Shaning,

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

Regards,

Tom

Re: JavaScript - map.setExtent does not work

KenBuja — Tue, 30 Jun 2015 15:23:13 GMT

What is the spatial reference of the polyline? I"m guessing that you'll have to project the extent into the spatial reference of the map before applying it in the setExtent method.

Re: JavaScript - map.setExtent does not work

JakeSkinner — Sun, 12 Dec 2021 04:16:57 GMT

Hi Shaning,

What coordinate system are the features within the JSON stored in? You may need to perform a conversion to that of the map's spatial reference. Ex:

var singleRingPolygon = new Polygon([[-75.77, 38.45], [-75.77, 38.7], [-75.11, 38.7], [-75.11, 38.45], [-75.77, 38.45]])
var attr = {"Area":"Southern Delaware"};
var infoTemplate = new InfoTemplate("Location","Area: ${Area}");
var gra = new Graphic(singleRingPolygon, sfs, attr, infoTemplate);
map.graphics.add(gra);
var extent = webMercatorUtils.geographicToWebMercator(gra.geometry);
map.setExtent(extent.getExtent().expand(2));

Re: JavaScript - map.setExtent does not work

ShaningYu — Tue, 30 Jun 2015 15:30:55 GMT

Ken: The SR is 102100, same as the basemap.

Re: JavaScript - map.setExtent does not work

ShaningYu — Tue, 30 Jun 2015 15:52:40 GMT

I checked and consider that your (also Tome and Jake) guess might be right. The coordinates should be decimal degree, but I retrieved the data of a point (on the polyline) like that: [-857466.85056352, 4707115.184330508]. How to convert the feet into decimal degree? Thanks.

Re: JavaScript - map.setExtent does not work

ShaningYu — Tue, 30 Jun 2015 16:04:04 GMT

My statement above is incorrect since in my code the initial extent is defined like that below:

		var initialExtent = new esri.geometry.Extent({
		xmin: -8614312, ymin: 4687051, xmax: -8536040, ymax: 4730894, spatialReference: { wkid: 102100 }

Re: JavaScript - map.setExtent does not work

KenBuja — Tue, 30 Jun 2015 16:10:44 GMT

Have you checked to see what the coordinates of the graphic's extent in the debugger?

Re: JavaScript - map.setExtent does not work

ShaningYu — Tue, 30 Jun 2015 16:20:20 GMT

The SR of the graphic is 102100. Its extent:

g.geometry.getExtent().expand(2)

{...}

cache: undefined

declaredClass: "esri.geometry.Extent"

spatialReference: {...}

type: "extent"

xmax: -8574746.902512721

xmin: -8574825.130163595

ymax: 4707115.203551244

ymin: 4707115.177750256

It is in the range of the initial extent.

Re: JavaScript - map.setExtent does not work

ShaningYu — Tue, 30 Jun 2015 16:42:53 GMT

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

Re: JavaScript - map.setExtent does not work

ShaningYu — Tue, 30 Jun 2015 16:48:51 GMT

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-nested-within-elem--%>

<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>

Re: JavaScript - map.setExtent does not work

ShaningYu — Tue, 30 Jun 2015 16:50:02 GMT

2nd part: Polyline's Json data:

{

"Geometry": [

{

"paths": [

[

-8574766.4594254401,

4707115.1842005029

[

-8574766.8505635206,

4707115.1843305081

[

-8574767.2417016011,

4707115.1844605133

[

-8574767.6328396816,

4707115.1845905175

[

-8574768.023977764,

4707115.1847205227

[

-8574768.4151158445,

4707115.184850527

[

-8574768.806253925,

4707115.1849805322

[

-8574769.1973920055,

4707115.1851105373

[

-8574769.5885300878,

4707115.1852405416

[

-8574769.9796681684,

4707115.1853705468

[

-8574770.3708062489,

4707115.185500551

[

-8574770.7619443294,

4707115.1856305562

[

-8574771.1530824099,

4707115.1857605604

[

-8574771.5442204922,

4707115.1858905656

[

-8574771.9353585728,

4707115.1860205708

[

-8574772.3264966533,

4707115.1861505751

[

-8574772.7176347338,

4707115.1862805802

[

-8574773.1087728161,

4707115.1864105845

[

-8574773.4999108966,

4707115.1865405897

[

-8574773.8910489772,

4707115.1866705948

[

-8574774.2821870577,

4707115.1868005991

[

-8574774.67332514,

4707115.1869306043

[

-8574775.0644632205,

4707115.1870606085

[

-8574775.455601301,

4707115.1871906137

[

-8574775.8467393816,

4707115.187320618

[

-8574776.2378774639,

4707115.1874506231

[

-8574776.6290155444,

4707115.1875806283

[

-8574777.0201536249,

4707115.1877106326

[

-8574777.4112917054,

4707115.1878406378

[

-8574777.8024297878,

4707115.187970642

[

-8574778.1935678683,

4707115.1881006472

[

-8574778.5847059488,

4707115.1882306524

[

-8574778.9758440293,

4707115.1883606566

[

-8574779.3669821117,

4707115.1884906618

[

-8574779.7581201922,

4707115.188620666

[

-8574780.1492582727,

4707115.1887506712

[

-8574780.5403963532,

4707115.1888806755

[

-8574780.9315344356,

4707115.1890106807

[

-8574781.3226725161,

4707115.1891406858

[

-8574781.7138105966,

4707115.1892706901

[

-8574782.1049486771,

4707115.1894006953

[

-8574782.4960867595,

4707115.1895306995

[

-8574782.88722484,

4707115.1896607047

[

-8574783.2783629205,

4707115.1897907099

[

-8574783.669501001,

4707115.1899207141

[

-8574784.0606390834,

4707115.1900507193

[

-8574784.4517771639,

4707115.1901807236

[

-8574784.8429152444,

4707115.1903107287

[

-8574785.2340533249,

4707115.1904407339

[

-8574785.6251914073,

4707115.1905707382

[

-8574786.0163294896,

4707115.1907007312

]

"spatialReference": {

"wkid": 102100,

"latestWkid": 3857

}

]

}

Re: JavaScript - map.setExtent does not work

TomSellsted — Tue, 30 Jun 2015 18:13:38 GMT

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

Re: JavaScript - map.setExtent does not work

ShaningYu — Tue, 30 Jun 2015 18:47:21 GMT

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.

Re: JavaScript - map.setExtent does not work

TomSellsted — Sun, 12 Dec 2021 04:17:00 GMT

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

Re: JavaScript - map.setExtent does not work

ShaningYu — Tue, 30 Jun 2015 19:19:34 GMT

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.

Re: JavaScript - map.setExtent does not work

KenBuja — Tue, 30 Jun 2015 19:29:04 GMT

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

Re: JavaScript - map.setExtent does not work

ShaningYu — Tue, 30 Jun 2015 19:34:17 GMT

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

Re: JavaScript - map.setExtent does not work

KenBuja — Tue, 30 Jun 2015 19:37:42 GMT

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

Re: JavaScript - map.setExtent does not work

ShaningYu — Wed, 01 Jul 2015 19:20:49 GMT

Ken: Thanks for your message yesterday. I installed IE11 to substitute the IE8. Then I can use the F12 tool. However, if F12 tool is used, the VS 2010 debugging tool will be disabled. I can only use one of the them. I debugged. The code works sometimes, but sometimes not working well. I am not sure why it behaves like that. I believe that your answer is at least a part of the solution. Thanks again.