asizer/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>centerAt discrepancy</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no,width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <link rel="stylesheet" href="//js.arcgis.com/3.17/esri/css/esri.css">

    <style>
        html, body {
          font-family: "Open Sans", sans-serif;
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
        }
        #header {
          background-color: gray;
          color: #eee;
          left: 0;
          right: 0;
          height: 80px;
          font-size: 30px;
          text-align: center;
          line-height: 1.2em;
        }

        #map {
          position: absolute;
          top: 80px;
          bottom: 0;
          right: 0;
          left: 0;
        }

        #map_zoom_slider {
          top: 10px;
          left: 10px;
        }
        #comparison-table {
          position: absolute;
          right: 10px;
          top: 10px;
          z-index: 50;
        }

        #redlands td:first-child {
          color: fuchsia;
        }

        #center td:first-child {
          color: dodgerblue;
        }

        .discrepancy {
          color: red;
        }

        table {
          font-family: Consolas, Courier, monospace;
          border-collapse: collapse;
          font-size: 12px;
          background: rgba(255, 255, 255, 0.7);
        }

        th, td {
          border: 1px solid gray;
          padding: 2px 5px;
        }

        /* map buttons */
        #centerAtRedlands, #zoomToRedlands {
          position: absolute;
          z-index: 50;
          left: 50px;
          background: white;
          padding: 5px 10px;
          border-color: dodgerblue;
          cursor: pointer;
        }
        #centerAtRedlands {
          top: 10px;
        }
        #zoomToRedlands {
          top: 60px;
        }
        .hide {
          display: none !important;
        }
    </style>
    <script src="//js.arcgis.com/3.17/"></script>
    <script>

    var redlandsPt, map, centerGr, redlandsGr;

      require([
        'esri/map',
        'esri/graphic',
        'esri/graphicsUtils',
        'esri/geometry/Point',
        'esri/geometry/Polyline',
        'esri/geometry/geometryEngine',
        'esri/geometry/webMercatorUtils',
        'dojo/dom',
        'dojo/query',
        'dojo/dom-attr',
        'dojo/dom-class',
        'dojo/on'
      ], function(Map, Graphic, graphicsUtils, Point, Polyline, geoEngine, webMercatorUtils, dom, dojoQuery, domAttr, domClass, dojoOn) {

        redlandsPt = new Point({
          x: -13046332.62639722,
          y: 4036417.9941648776,
          spatialReference: {
            wkid: 102100
          }
        });

        redlandsGr = new Graphic({
          geometry: redlandsPt.toJson(),
          symbol: {
            type: 'esriSMS',
            style: 'esriSMSCircle',
            color: [255, 0, 255],
            size: 6
          }
        });

        centerGr = new Graphic({
          symbol: {
            type: 'esriSMS',
            style: 'esriSMSCircle',
            color: [30, 144, 255],
            size: 6
          }
        });

        var differenceLine = new Graphic({
          symbol: {
            color: [255, 255, 0],
            width: 2,
            type: 'esriSLS',
            style: 'esriSLSSolid'
          }
        });

        map = new Map('map', {
          basemap: 'topo',
          center: [-98.58, 38.83],
          zoom: 4
        });

        dojoOn(map, 'load', function() {
          map.graphics.add(differenceLine);
          map.graphics.add(redlandsGr);
          centerGr.setGeometry(map.extent.getCenter());
          map.graphics.add(centerGr);
          writeRedlandsToTable();
        });

        dojoOn(dom.byId('centerAtRedlands'), 'click', function() {
          map.centerAt(redlandsPt).then(function() {
            var mapCenter = map.extent.getCenter();
            centerGr.setGeometry(mapCenter);
            updateTable(mapCenter);
            updateLine(mapCenter);
            domClass.remove(dom.byId('zoomToRedlands'), 'hide');
          });
        });

        dojoOn(dom.byId('zoomToRedlands'), 'click', function() {
          var extent = graphicsUtils.graphicsExtent([redlandsGr, centerGr]);
          map.setExtent(extent, true);
        });

        function writeRedlandsToTable() {
          var redlandsRow = dojoQuery('#redlands td');
          var screenRedlands = map.toScreen(redlandsPt);
          redlandsRow[1].innerHTML = screenRedlands.x;
          redlandsRow[2].innerHTML = screenRedlands.y;
          redlandsRow[3].innerHTML = redlandsPt.getLongitude();
          redlandsRow[4].innerHTML = redlandsPt.getLatitude();
          redlandsRow[5].innerHTML = redlandsPt.x;
          redlandsRow[6].innerHTML = redlandsPt.y;
        }

        function updateTable(mapCenter) {
          var redlandsRow = dojoQuery('#redlands td');
          var screenRedlands = map.toScreen(redlandsPt);
          redlandsRow[1].innerHTML = screenRedlands.x;
          redlandsRow[2].innerHTML = screenRedlands.y;

          var centerRow = dojoQuery('#center td');
          var screenCenter = map.toScreen(mapCenter);

          centerRow[1].innerHTML = getDifferenceHtml(screenRedlands.x, screenCenter.x);
          centerRow[2].innerHTML = getDifferenceHtml(screenRedlands.y, screenCenter.y);
          centerRow[3].innerHTML = getDifferenceHtml(redlandsPt.getLongitude(), mapCenter.getLongitude());
          centerRow[4].innerHTML = getDifferenceHtml(redlandsPt.getLatitude(), mapCenter.getLatitude());
          centerRow[5].innerHTML = getDifferenceHtml(redlandsPt.x, mapCenter.x);
          centerRow[6].innerHTML = getDifferenceHtml(redlandsPt.y, mapCenter.y);

          var distance = geoEngine.distance(redlandsPt, mapCenter, 'miles');
          var distanceRow = dojoQuery('#distance td');
          if (distance >= 0.5) {
            distanceRow[1].innerHTML = '<span class="discrepancy">' + distance + ' miles</span>';
            return;
          }
          distance = geoEngine.distance(redlandsPt, mapCenter, 'yards');
          if (distance >= 100) {
            distanceRow[1].innerHTML = '<span class="discrepancy">' + distance + ' yards</span>';
            return;
          }
          distance = distance * 3;
          distanceRow[1].innerHTML = distance + ' feet';
        }

        function updateLine(mapCenter) {
          differenceLine.setGeometry(new Polyline({
            paths: [[[mapCenter.x, mapCenter.y], [redlandsPt.x, redlandsPt.y]]],
            spatialReference: {wkid: map.spatialReference.wkid}
          }));
        }

        function getDifferenceHtml(comparison, toReturn) {
          toReturn = toReturn + '';
          comparison = comparison + '';
          var matching = true, i = 0;
          while (matching && i < toReturn.length) {
            if (toReturn[i] === comparison[i]) {
              i++;
            } else {
              matching = false;
            }
          }
          if (matching >= toReturn.length) {
            return toReturn;
          }
          return toReturn.substr(0, i) + '<span class="discrepancy">' + toReturn.substr(i);
        }

      });
    </script>
</head>

<body>
    <div id="header" class="head-foot">
      Demonstrating the discrepancy between<br>
      centerAt pt and resulting map center.
    </div>

    <div id="map">
      <div id="comparison-table">
        <table>
          <thead>
            <tr>
              <th></th>
              <th>ScreenX</th>
              <th>ScreenY</th>
              <th>Longitude</th>
              <th>Latitude</th>
              <th>X</th>
              <th>Y</th>
            </tr>
          </thead>
          <tbody>
            <tr id="redlands">
              <td>Esri Redlands</td>
              <td class="screenX"></td>
              <td class="screenY"></td>
              <td class="lng"></td>
              <td class="lat"></td>
              <td class="x"></td>
              <td class="y"></td>
            </tr>
            <tr id="center">
              <td>Centered pt</td>
              <td class="screenX"></td>
              <td class="screenY"></td>
              <td class="lng"></td>
              <td class="lat"></td>
              <td class="x"></td>
              <td class="y"></td>
            </tr>
            <tr id="distance">
              <td>Difference</td>
              <td colspan="6"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <button id="centerAtRedlands">
        Center at<br>
        Esri Redlands
      </button>
      <button id="zoomToRedlands" class="hide">
        Zoom to<br>
        both points
      </button>
    </div>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>centerAt discrepancy</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no,width=device-width" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">

	<link rel="stylesheet" href="//js.arcgis.com/3.17/esri/css/esri.css">

	<style>
	html, body {
	font-family: "Open Sans", sans-serif;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}
	#header {
	background-color: gray;
	color: #eee;
	left: 0;
	right: 0;
	height: 80px;
	font-size: 30px;
	text-align: center;
	line-height: 1.2em;
	}

	#map {
	position: absolute;
	top: 80px;
	bottom: 0;
	right: 0;
	left: 0;
	}

	#map_zoom_slider {
	top: 10px;
	left: 10px;
	}
	#comparison-table {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 50;
	}

	#redlands td:first-child {
	color: fuchsia;
	}

	#center td:first-child {
	color: dodgerblue;
	}

	.discrepancy {
	color: red;
	}

	table {
	font-family: Consolas, Courier, monospace;
	border-collapse: collapse;
	font-size: 12px;
	background: rgba(255, 255, 255, 0.7);
	}

	th, td {
	border: 1px solid gray;
	padding: 2px 5px;
	}

	/* map buttons */
	#centerAtRedlands, #zoomToRedlands {
	position: absolute;
	z-index: 50;
	left: 50px;
	background: white;
	padding: 5px 10px;
	border-color: dodgerblue;
	cursor: pointer;
	}
	#centerAtRedlands {
	top: 10px;
	}
	#zoomToRedlands {
	top: 60px;
	}
	.hide {
	display: none !important;
	}
	</style>
	<script src="//js.arcgis.com/3.17/"></script>
	<script>

	var redlandsPt, map, centerGr, redlandsGr;

	require([
	'esri/map',
	'esri/graphic',
	'esri/graphicsUtils',
	'esri/geometry/Point',
	'esri/geometry/Polyline',
	'esri/geometry/geometryEngine',
	'esri/geometry/webMercatorUtils',
	'dojo/dom',
	'dojo/query',
	'dojo/dom-attr',
	'dojo/dom-class',
	'dojo/on'
	], function(Map, Graphic, graphicsUtils, Point, Polyline, geoEngine, webMercatorUtils, dom, dojoQuery, domAttr, domClass, dojoOn) {

	redlandsPt = new Point({
	x: -13046332.62639722,
	y: 4036417.9941648776,
	spatialReference: {
	wkid: 102100
	}
	});

	redlandsGr = new Graphic({
	geometry: redlandsPt.toJson(),
	symbol: {
	type: 'esriSMS',
	style: 'esriSMSCircle',
	color: [255, 0, 255],
	size: 6
	}
	});

	centerGr = new Graphic({
	symbol: {
	type: 'esriSMS',
	style: 'esriSMSCircle',
	color: [30, 144, 255],
	size: 6
	}
	});

	var differenceLine = new Graphic({
	symbol: {
	color: [255, 255, 0],
	width: 2,
	type: 'esriSLS',
	style: 'esriSLSSolid'
	}
	});

	map = new Map('map', {
	basemap: 'topo',
	center: [-98.58, 38.83],
	zoom: 4
	});

	dojoOn(map, 'load', function() {
	map.graphics.add(differenceLine);
	map.graphics.add(redlandsGr);
	centerGr.setGeometry(map.extent.getCenter());
	map.graphics.add(centerGr);
	writeRedlandsToTable();
	});

	dojoOn(dom.byId('centerAtRedlands'), 'click', function() {
	map.centerAt(redlandsPt).then(function() {
	var mapCenter = map.extent.getCenter();
	centerGr.setGeometry(mapCenter);
	updateTable(mapCenter);
	updateLine(mapCenter);
	domClass.remove(dom.byId('zoomToRedlands'), 'hide');
	});
	});

	dojoOn(dom.byId('zoomToRedlands'), 'click', function() {
	var extent = graphicsUtils.graphicsExtent([redlandsGr, centerGr]);
	map.setExtent(extent, true);
	});

	function writeRedlandsToTable() {
	var redlandsRow = dojoQuery('#redlands td');
	var screenRedlands = map.toScreen(redlandsPt);
	redlandsRow[1].innerHTML = screenRedlands.x;
	redlandsRow[2].innerHTML = screenRedlands.y;
	redlandsRow[3].innerHTML = redlandsPt.getLongitude();
	redlandsRow[4].innerHTML = redlandsPt.getLatitude();
	redlandsRow[5].innerHTML = redlandsPt.x;
	redlandsRow[6].innerHTML = redlandsPt.y;
	}

	function updateTable(mapCenter) {
	var redlandsRow = dojoQuery('#redlands td');
	var screenRedlands = map.toScreen(redlandsPt);
	redlandsRow[1].innerHTML = screenRedlands.x;
	redlandsRow[2].innerHTML = screenRedlands.y;

	var centerRow = dojoQuery('#center td');
	var screenCenter = map.toScreen(mapCenter);

	centerRow[1].innerHTML = getDifferenceHtml(screenRedlands.x, screenCenter.x);
	centerRow[2].innerHTML = getDifferenceHtml(screenRedlands.y, screenCenter.y);
	centerRow[3].innerHTML = getDifferenceHtml(redlandsPt.getLongitude(), mapCenter.getLongitude());
	centerRow[4].innerHTML = getDifferenceHtml(redlandsPt.getLatitude(), mapCenter.getLatitude());
	centerRow[5].innerHTML = getDifferenceHtml(redlandsPt.x, mapCenter.x);
	centerRow[6].innerHTML = getDifferenceHtml(redlandsPt.y, mapCenter.y);

	var distance = geoEngine.distance(redlandsPt, mapCenter, 'miles');
	var distanceRow = dojoQuery('#distance td');
	if (distance >= 0.5) {
	distanceRow[1].innerHTML = '<span class="discrepancy">' + distance + ' miles</span>';
	return;
	}
	distance = geoEngine.distance(redlandsPt, mapCenter, 'yards');
	if (distance >= 100) {
	distanceRow[1].innerHTML = '<span class="discrepancy">' + distance + ' yards</span>';
	return;
	}
	distance = distance * 3;
	distanceRow[1].innerHTML = distance + ' feet';
	}

	function updateLine(mapCenter) {
	differenceLine.setGeometry(new Polyline({
	paths: [[[mapCenter.x, mapCenter.y], [redlandsPt.x, redlandsPt.y]]],
	spatialReference: {wkid: map.spatialReference.wkid}
	}));
	}

	function getDifferenceHtml(comparison, toReturn) {
	toReturn = toReturn + '';
	comparison = comparison + '';
	var matching = true, i = 0;
	while (matching && i < toReturn.length) {
	if (toReturn[i] === comparison[i]) {
	i++;
	} else {
	matching = false;
	}
	}
	if (matching >= toReturn.length) {
	return toReturn;
	}
	return toReturn.substr(0, i) + '<span class="discrepancy">' + toReturn.substr(i);
	}

	});
	</script>
	</head>

	<body>
	<div id="header" class="head-foot">
	Demonstrating the discrepancy between<br>
	centerAt pt and resulting map center.
	</div>

	<div id="map">
	<div id="comparison-table">
	<table>
	<thead>
	<tr>
	<th></th>
	<th>ScreenX</th>
	<th>ScreenY</th>
	<th>Longitude</th>
	<th>Latitude</th>
	<th>X</th>
	<th>Y</th>
	</tr>
	</thead>
	<tbody>
	<tr id="redlands">
	<td>Esri Redlands</td>
	<td class="screenX"></td>
	<td class="screenY"></td>
	<td class="lng"></td>
	<td class="lat"></td>
	<td class="x"></td>
	<td class="y"></td>
	</tr>
	<tr id="center">
	<td>Centered pt</td>
	<td class="screenX"></td>
	<td class="screenY"></td>
	<td class="lng"></td>
	<td class="lat"></td>
	<td class="x"></td>
	<td class="y"></td>
	</tr>
	<tr id="distance">
	<td>Difference</td>
	<td colspan="6"></td>
	</tr>
	</tbody>
	</table>
	</div>
	<button id="centerAtRedlands">
	Center at<br>
	Esri Redlands
	</button>
	<button id="zoomToRedlands" class="hide">
	Zoom to<br>
	both points
	</button>
	</div>

	</body>

	</html>