asizer · March 16, 2016 19:00
diff --git a/index.html b/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, horizThreshhold, vertThreshhold, boundingMax, boundingMin, vertMax, vertMin;
      require([
        'esri/arcgis/utils',
        'dojo/on',
        'dojo/domReady!'],
      function(arcgisUtils, dojoOn) {

        boundingMax = 20037508;
        boundingMin = -20037508;
        horizThreshhold = 1;
        vertThreshhold = 1;
        vertMax = 19971868.8804086;
        vertMin = -19971868.8804086;

        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 threshholds');
            horizThreshhold = 1;
            vertThreshhold = 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 bottomDiff = vertMin - result.extent.ymin;
            var topDiff = result.extent.ymax - vertMax;

            var mapCenter = result.extent.getCenter();

            var flag = false;
            var horizMultiplier = 1;
            var vertMultiplier = 1;

            if ((leftDiff + rightDiff) > horizThreshhold * 2) {
              if (Math.abs(leftDiff - rightDiff) < horizThreshhold) {
                console.debug('ignoring...');
                return;
              }
              console.debug('centering horizontal');
              mapCenter.x += (leftDiff - rightDiff) / 2;
              flag = true;
              horizMultiplier = 2;

            } else if (leftDiff > horizThreshhold) {
              console.debug('moving map center left');
              mapCenter.x += leftDiff;
              flag = true;
            } else if (rightDiff > horizThreshhold) {
              console.debug('need to move map center right');
              mapCenter.x -= rightDiff;
              flag = true;
            }

            if ((topDiff + bottomDiff) > vertThreshhold * 2) {
              if (Math.abs(bottomDiff - topDiff) < vertThreshhold) {
                console.debug('ignoring...');
                return;
              }
              console.debug('centering vertical');
              mapCenter.y += (bottomDiff - topDiff) / 2;
              flag = true;
              vertMultiplier = 2;
            } else if (bottomDiff > vertThreshhold) {
              console.debug('moving map center down');
              mapCenter.y += bottomDiff;
              flag = true;
            } else if (topDiff > vertThreshhold) {
              console.debug('need to move map center up');
              mapCenter.y -= topDiff;
              flag = true;
            }

            if (!flag) {
              return;
            }

            map.centerAt(mapCenter).then(function() {
              dojoOn.once(map, 'extent-change', function() {
                horizThreshhold = Math.ceil(Math.abs(map.extent.getCenter().x - mapCenter.x)) * horizMultiplier;
                vertThreshhold = Math.ceil(Math.abs(map.extent.getCenter().y - mapCenter.y)) * vertMultiplier;
                console.debug('map center moved.');
              });
            });

          });

        });

      });
    </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, horizThreshhold, vertThreshhold, boundingMax, boundingMin, vertMax, vertMin;
	require([
	'esri/arcgis/utils',
	'dojo/on',
	'dojo/domReady!'],
	function(arcgisUtils, dojoOn) {

	boundingMax = 20037508;
	boundingMin = -20037508;
	horizThreshhold = 1;
	vertThreshhold = 1;
	vertMax = 19971868.8804086;
	vertMin = -19971868.8804086;

	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 threshholds');
	horizThreshhold = 1;
	vertThreshhold = 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 bottomDiff = vertMin - result.extent.ymin;
	var topDiff = result.extent.ymax - vertMax;

	var mapCenter = result.extent.getCenter();

	var flag = false;
	var horizMultiplier = 1;
	var vertMultiplier = 1;

	if ((leftDiff + rightDiff) > horizThreshhold * 2) {
	if (Math.abs(leftDiff - rightDiff) < horizThreshhold) {
	console.debug('ignoring...');
	return;
	}
	console.debug('centering horizontal');
	mapCenter.x += (leftDiff - rightDiff) / 2;
	flag = true;
	horizMultiplier = 2;

	} else if (leftDiff > horizThreshhold) {
	console.debug('moving map center left');
	mapCenter.x += leftDiff;
	flag = true;
	} else if (rightDiff > horizThreshhold) {
	console.debug('need to move map center right');
	mapCenter.x -= rightDiff;
	flag = true;
	}

	if ((topDiff + bottomDiff) > vertThreshhold * 2) {
	if (Math.abs(bottomDiff - topDiff) < vertThreshhold) {
	console.debug('ignoring...');
	return;
	}
	console.debug('centering vertical');
	mapCenter.y += (bottomDiff - topDiff) / 2;
	flag = true;
	vertMultiplier = 2;
	} else if (bottomDiff > vertThreshhold) {
	console.debug('moving map center down');
	mapCenter.y += bottomDiff;
	flag = true;
	} else if (topDiff > vertThreshhold) {
	console.debug('need to move map center up');
	mapCenter.y -= topDiff;
	flag = true;
	}

	if (!flag) {
	return;
	}

	map.centerAt(mapCenter).then(function() {
	dojoOn.once(map, 'extent-change', function() {
	horizThreshhold = Math.ceil(Math.abs(map.extent.getCenter().x - mapCenter.x)) * horizMultiplier;
	vertThreshhold = Math.ceil(Math.abs(map.extent.getCenter().y - mapCenter.y)) * vertMultiplier;
	console.debug('map center moved.');
	});
	});

	});

	});

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