asizer/index.html

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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Map with Header and Footer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">

    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .sample-head-foot {
            box-sizing: border-box; /* only needed because of height and border together */
            background-color: gray;
            color: #eee;
            left: 0;
            right: 0;
            font-size: 30px;
            text-align: center;
        }

        #header {
            margin: 0;
            height: 40px;
            border: 2px solid yellow;
        }
        #map {
            box-sizing: border-box; /* only needed because of height and border together */
            border: 2px solid red;
            position: absolute;
            top: 40px;
            right: 0;
            left: 0;
            bottom: 50px;
        }
        #footer {
            position: absolute;
            bottom: 0;
            border: 2px solid lime;
            height: 50px;
        }
        /* firefox seems to treat box-sizing differently? */
        @-moz-document url-prefix() {
            #map {
                top: 44px;
                bottom: 54px;
             }
        }

    </style>
    <script src="http://js.arcgis.com/3.16/"></script>
    <script>
      var map, threshhold, boundingMax, boundingMin;
      require([
        'esri/arcgis/utils',
        'dojo/on',
        'dojo/domReady!'],
      function(arcgisUtils, dojoOn) {

        boundingMax = 20037508;
        boundingMin = -20037508;
        threshhold = 1;

        arcgisUtils.createMap('4c009d4c236c4c0e91936b2fbfb085da', 'map', {mapOptions: {zoom: 4, wrapAround180: false}}).then(function(response) {
          map = response.map;

          dojoOn(map, 'zoom-end', function(result) {
            console.debug('map zoom-end, reset threshhold');
            threshhold = 1;
          });

          dojoOn(map, 'extent-change', function(result) {
            console.debug('map extent changed');

            var leftDiff = boundingMin - result.extent.xmin;
            var rightDiff = result.extent.xmax - boundingMax;

            var mapCenter = result.extent.getCenter();

            if ((leftDiff + rightDiff) > threshhold * 2) {
              if (Math.abs(leftDiff - rightDiff) < threshhold) {
                return;
              }
              console.debug('centering');
              mapCenter.x += (leftDiff - rightDiff) / 2;

              map.centerAt(mapCenter).then(function() {
                dojoOn.once(map, 'extent-change', function() {
                  console.debug('centered.');
                  threshhold = Math.ceil(Math.abs(map.extent.getCenter().x - mapCenter.x)) * 2;
                });
              });
            } else if (leftDiff > threshhold) {
              console.debug('moving map center left');
              mapCenter.x += leftDiff;
              map.centerAt(mapCenter).then(function() {
                dojoOn.once(map, 'extent-change', function() {
                  console.debug('map center moved left');
                  threshhold = Math.ceil(Math.abs(map.extent.getCenter().x - mapCenter.x));
                });
              });
            } else if (rightDiff > threshhold) {
              console.debug('need to move map center right');
              mapCenter.x -= rightDiff;
              map.centerAt(mapCenter).then(function() {
                dojoOn.once(map, 'extent-change', function() {
                  console.debug('map center moved right');
                  threshhold = Math.ceil(Math.abs(map.extent.getCenter().x - mapCenter.x));
                });
              });
            }


          });

        });

      });
    </script>
</head>

<body>
    <div id="header" class="sample-head-foot">Locking map to full world extent</div>

    <div id="map"></div>
    <div id="footer" class="sample-head-foot">And centering on zoom out</div>

</body>

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

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
	<title>Map with Header and Footer</title>
	<link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">

	<style>
	html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}
	.sample-head-foot {
	box-sizing: border-box; /* only needed because of height and border together */
	background-color: gray;
	color: #eee;
	left: 0;
	right: 0;
	font-size: 30px;
	text-align: center;
	}

	#header {
	margin: 0;
	height: 40px;
	border: 2px solid yellow;
	}
	#map {
	box-sizing: border-box; /* only needed because of height and border together */
	border: 2px solid red;
	position: absolute;
	top: 40px;
	right: 0;
	left: 0;
	bottom: 50px;
	}
	#footer {
	position: absolute;
	bottom: 0;
	border: 2px solid lime;
	height: 50px;
	}
	/* firefox seems to treat box-sizing differently? */
	@-moz-document url-prefix() {
	#map {
	top: 44px;
	bottom: 54px;
	}
	}

	</style>
	<script src="http://js.arcgis.com/3.16/"></script>
	<script>
	var map, threshhold, boundingMax, boundingMin;
	require([
	'esri/arcgis/utils',
	'dojo/on',
	'dojo/domReady!'],
	function(arcgisUtils, dojoOn) {

	boundingMax = 20037508;
	boundingMin = -20037508;
	threshhold = 1;

	arcgisUtils.createMap('4c009d4c236c4c0e91936b2fbfb085da', 'map', {mapOptions: {zoom: 4, wrapAround180: false}}).then(function(response) {
	map = response.map;

	dojoOn(map, 'zoom-end', function(result) {
	console.debug('map zoom-end, reset threshhold');
	threshhold = 1;
	});

	dojoOn(map, 'extent-change', function(result) {
	console.debug('map extent changed');

	var leftDiff = boundingMin - result.extent.xmin;
	var rightDiff = result.extent.xmax - boundingMax;

	var mapCenter = result.extent.getCenter();

	if ((leftDiff + rightDiff) > threshhold * 2) {
	if (Math.abs(leftDiff - rightDiff) < threshhold) {
	return;
	}
	console.debug('centering');
	mapCenter.x += (leftDiff - rightDiff) / 2;

	map.centerAt(mapCenter).then(function() {
	dojoOn.once(map, 'extent-change', function() {
	console.debug('centered.');
	threshhold = Math.ceil(Math.abs(map.extent.getCenter().x - mapCenter.x)) * 2;
	});
	});
	} else if (leftDiff > threshhold) {
	console.debug('moving map center left');
	mapCenter.x += leftDiff;
	map.centerAt(mapCenter).then(function() {
	dojoOn.once(map, 'extent-change', function() {
	console.debug('map center moved left');
	threshhold = Math.ceil(Math.abs(map.extent.getCenter().x - mapCenter.x));
	});
	});
	} else if (rightDiff > threshhold) {
	console.debug('need to move map center right');
	mapCenter.x -= rightDiff;
	map.centerAt(mapCenter).then(function() {
	dojoOn.once(map, 'extent-change', function() {
	console.debug('map center moved right');
	threshhold = Math.ceil(Math.abs(map.extent.getCenter().x - mapCenter.x));
	});
	});
	}


	});

	});

	});
	</script>
	</head>

	<body>
	<div id="header" class="sample-head-foot">Locking map to full world extent</div>

	<div id="map"></div>
	<div id="footer" class="sample-head-foot">And centering on zoom out</div>

	</body>

	</html>