asizer/index.html

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

<head>
    <title>Actual Locator Button</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;
        }
        .head-foot {
            background-color: gray;
            color: #eee;
            left: 0;
            right: 0;
            height: 60px;
            font-size: 30px;
            text-align: center;
            line-height: 1.2em;
        }
        #header {
          height: 110px;
        }
        #map {
            position: absolute;
            top: 110px;
            right: 0;
            left: 0;
            bottom: 60px;
        }

        /* map buttons */
        #setZoom, #locator, #zoom {
          position: absolute;
          z-index: 50;
          left: 20px;
        }
        #zoom {
          top: 40px;
          left: 60px;
          color: white;
          background: gray;
          padding: 5px 10px;
          font-size: 11px;
        }
        #setZoom {
          top: 95px;
        }
        #locator {
          top: 135px;
        }
        #footer {
          position: absolute;
          bottom: 0;
          line-height: 50px;
        }
        button {
          background: white;
          padding: 5px 10px;
          border-color: dodgerblue;
          cursor: pointer;
        }
        button[disabled] {
          cursor: not-allowed;
          border-color: gray;
        }
        .hide {
          visibility: hidden;
        }
        .webmap-change-wrapper {
          font-size: 12px;
        }
        .webmap-change {
          border: 1px solid dodgerblue;
          padding: 3px 6px;
          background: white;
          color: dodgerblue;
          cursor: pointer;
        }
    </style>
    <script src="//js.arcgis.com/3.17/"></script>
    <script>
      var map, locator, home, setZoomBtn, minStartingZoom;

      require([
        'esri/arcgis/utils',
        'esri/urlUtils',
        'esri/geometry/Point',
        'esri/dijit/LocateButton',
        'dojo/dom',
        'dojo/query',
        'dojo/dom-attr',
        'dojo/dom-class',
        'dojo/on'
      ], function(arcgisUtils, urlUtils, Point, Locator, dom, dojoQuery, domAttr, domClass, dojoOn) {

        var webmaps = {
          gray: '8b3d38c0819547faa83f7b7aca80bd76',
          'dark-gray': '1970c1995b8f44749f4b9b6e81b5ba45',
          oceans: '5ae9e138a17842688b0b79283a4353f6',
          hybrid: '86265e5a4bbb4187a59719cf134e0018',
          'national-geographic': 'd94dcdbe78e141c2b2d3a91d5ca8b9c9',
          topo: 'd5e02a0c1f2b4ec399823fdd3c2fdebd',
          streets: '8bf7167d20924cbf8e25e7b11c7c502c',
          terrain: 'fe44cf9a739848939988addfeba473e4',
          osm: 'b834a68d7a484c5fb473d4ba90d35e71'
        };

        function reloadPage(evt) {
          console.debug('reloadPage', evt);
          if (evt && evt.target) {
            var val = domAttr.get(evt.target, 'value');
            window.location.search = 'basemap=' + val;
          }
        }

        function onZoomEnd() {
          var zoomedOutFarEnough = map.getZoom() <= minStartingZoom;
          domAttr.set(setZoomBtn, {disabled: zoomedOutFarEnough});
          dom.byId('currentZoom').innerHTML = map.getZoom();
        }

        function getUrlParams() {
          var urlParams = urlUtils.urlToObject(document.location.search).query;

          if (urlParams) {
            return urlParams;
          }
          return urlUtils.urlToObject(document.location.hash).query || {};
        }

        console.debug('almost there...');
        var webmapId = webmaps[getUrlParams().basemap] || webmaps.gray;
        console.debug('webmapId', webmapId);


        arcgisUtils.createMap(webmapId, 'map').then(function(response) {
          console.debug('map created');
          map = response.map;
          minStartingZoom = map.getMaxZoom() - 11;
          setZoomBtn = dom.byId('setZoom');
          dom.byId('minStartingZoom').innerHTML = minStartingZoom;

          onZoomEnd();

          locator = new Locator({map: map}, 'locator');
          locator.startup();

          map.on('zoom-end', onZoomEnd);

          dojoQuery('.webmap-change').on('click', reloadPage);

          dojoOn(setZoomBtn, 'click', function() {
            map.setZoom(minStartingZoom);
          });
        });
      });
    </script>
</head>

<body>
    <div id="header" class="head-foot">
      Demonstrating the breaking of a webmap from a zoomed out state<br>
      with the Locate Button.
      <div class="webmap-change-wrapper">
        <span class="instructions">Change basemap and reload: </span>
        <span class="webmap-change" value="gray">gray</span>
        <span class="webmap-change" value="dark-gray">dark-gray</span>
        <span class="webmap-change" value="oceans">oceans</span>
        <span class="webmap-change" value="hybrid">hybrid</span>
        <span class="webmap-change" value="national-geographic">national-geographic</span>
        <span class="webmap-change" value="topo">topo</span>
        <span class="webmap-change" value="streets">Streets</span>
        <span class="webmap-change" value="terrain">terrain</span>
        <span class="webmap-change" value="osm">osm</span>
      </div>
    </div>

    <div id="map">
      <div id="zoom">Current zoom: <span id="currentZoom"></span></div>
      <button id="setZoom">Zoom out to level <span id="minStartingZoom">5</span></button>
      <div id="locator"></div>
    </div>
    <div id="footer" class="head-foot">breaks on <code>setScale()</code> and <code>centerAt()</code></div>

</body>

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

	<head>
	<title>Actual Locator Button</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;
	}
	.head-foot {
	background-color: gray;
	color: #eee;
	left: 0;
	right: 0;
	height: 60px;
	font-size: 30px;
	text-align: center;
	line-height: 1.2em;
	}
	#header {
	height: 110px;
	}
	#map {
	position: absolute;
	top: 110px;
	right: 0;
	left: 0;
	bottom: 60px;
	}

	/* map buttons */
	#setZoom, #locator, #zoom {
	position: absolute;
	z-index: 50;
	left: 20px;
	}
	#zoom {
	top: 40px;
	left: 60px;
	color: white;
	background: gray;
	padding: 5px 10px;
	font-size: 11px;
	}
	#setZoom {
	top: 95px;
	}
	#locator {
	top: 135px;
	}
	#footer {
	position: absolute;
	bottom: 0;
	line-height: 50px;
	}
	button {
	background: white;
	padding: 5px 10px;
	border-color: dodgerblue;
	cursor: pointer;
	}
	button[disabled] {
	cursor: not-allowed;
	border-color: gray;
	}
	.hide {
	visibility: hidden;
	}
	.webmap-change-wrapper {
	font-size: 12px;
	}
	.webmap-change {
	border: 1px solid dodgerblue;
	padding: 3px 6px;
	background: white;
	color: dodgerblue;
	cursor: pointer;
	}
	</style>
	<script src="//js.arcgis.com/3.17/"></script>
	<script>
	var map, locator, home, setZoomBtn, minStartingZoom;

	require([
	'esri/arcgis/utils',
	'esri/urlUtils',
	'esri/geometry/Point',
	'esri/dijit/LocateButton',
	'dojo/dom',
	'dojo/query',
	'dojo/dom-attr',
	'dojo/dom-class',
	'dojo/on'
	], function(arcgisUtils, urlUtils, Point, Locator, dom, dojoQuery, domAttr, domClass, dojoOn) {

	var webmaps = {
	gray: '8b3d38c0819547faa83f7b7aca80bd76',
	'dark-gray': '1970c1995b8f44749f4b9b6e81b5ba45',
	oceans: '5ae9e138a17842688b0b79283a4353f6',
	hybrid: '86265e5a4bbb4187a59719cf134e0018',
	'national-geographic': 'd94dcdbe78e141c2b2d3a91d5ca8b9c9',
	topo: 'd5e02a0c1f2b4ec399823fdd3c2fdebd',
	streets: '8bf7167d20924cbf8e25e7b11c7c502c',
	terrain: 'fe44cf9a739848939988addfeba473e4',
	osm: 'b834a68d7a484c5fb473d4ba90d35e71'
	};

	function reloadPage(evt) {
	console.debug('reloadPage', evt);
	if (evt && evt.target) {
	var val = domAttr.get(evt.target, 'value');
	window.location.search = 'basemap=' + val;
	}
	}

	function onZoomEnd() {
	var zoomedOutFarEnough = map.getZoom() <= minStartingZoom;
	domAttr.set(setZoomBtn, {disabled: zoomedOutFarEnough});
	dom.byId('currentZoom').innerHTML = map.getZoom();
	}

	function getUrlParams() {
	var urlParams = urlUtils.urlToObject(document.location.search).query;

	if (urlParams) {
	return urlParams;
	}
	return urlUtils.urlToObject(document.location.hash).query \|\| {};
	}

	console.debug('almost there...');
	var webmapId = webmaps[getUrlParams().basemap] \|\| webmaps.gray;
	console.debug('webmapId', webmapId);


	arcgisUtils.createMap(webmapId, 'map').then(function(response) {
	console.debug('map created');
	map = response.map;
	minStartingZoom = map.getMaxZoom() - 11;
	setZoomBtn = dom.byId('setZoom');
	dom.byId('minStartingZoom').innerHTML = minStartingZoom;

	onZoomEnd();

	locator = new Locator({map: map}, 'locator');
	locator.startup();

	map.on('zoom-end', onZoomEnd);

	dojoQuery('.webmap-change').on('click', reloadPage);

	dojoOn(setZoomBtn, 'click', function() {
	map.setZoom(minStartingZoom);
	});
	});
	});
	</script>
	</head>

	<body>
	<div id="header" class="head-foot">
	Demonstrating the breaking of a webmap from a zoomed out state<br>
	with the Locate Button.
	<div class="webmap-change-wrapper">
	<span class="instructions">Change basemap and reload: </span>
	<span class="webmap-change" value="gray">gray</span>
	<span class="webmap-change" value="dark-gray">dark-gray</span>
	<span class="webmap-change" value="oceans">oceans</span>
	<span class="webmap-change" value="hybrid">hybrid</span>
	<span class="webmap-change" value="national-geographic">national-geographic</span>
	<span class="webmap-change" value="topo">topo</span>
	<span class="webmap-change" value="streets">Streets</span>
	<span class="webmap-change" value="terrain">terrain</span>
	<span class="webmap-change" value="osm">osm</span>
	</div>
	</div>

	<div id="map">
	<div id="zoom">Current zoom: <span id="currentZoom"></span></div>
	<button id="setZoom">Zoom out to level <span id="minStartingZoom">5</span></button>
	<div id="locator"></div>
	</div>
	<div id="footer" class="head-foot">breaks on <code>setScale()</code> and <code>centerAt()</code></div>

	</body>

	</html>