JavaScript - map.setExtent does not work

[ShaningYu]

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:

<script src="http://js.arcgis.com/3.13/" type="text/javascript"></script>

  ...

  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.

[ShaningYu]

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.

[ShaningYu]

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

  }

  }

]

}

[KenBuja]

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.

[ShaningYu]

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

[ShaningYu]

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.

[ShaningYu]

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 }

[KenBuja]

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

[ShaningYu]

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.

[ShaningYu]

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

[JakeSkinner]

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