I wanted to create an effect where the map would be zoomed in and clicked a button that would immediately return the map to its original loading position, unzoomed.

What to do? The best way to do this is to use the Home button.

<! DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Home Extent</title> <link rel="stylesheet" Href = "https://js.arcgis.com/3.19/esri/css/esri.css" > < style > HTML, body, # map {padding: 0; margin:0; height:100%; } #HomeButton { position: absolute; top: 95px; left: 20px; z-index: 50; } < / style > < script SRC = "https://js.arcgis.com/3.19/" > < / script > < script > the require ([" esri/map ", "esri/dijit/HomeButton", "dojo/domReady!" ] , function(Map, HomeButton) {var Map = new Map(" Map ", {center: [-56.049, 38.485], zoom: 3, basemap: "streets"}); var home = new HomeButton({ map: map }, "HomeButton"); home.startup(); }); </script> </head> <body> <div id="map" class="map"> <div id="HomeButton"></div> </div> </body> </html>Copy the code

It’s not impossible to use another button, please:

var mapcenter = new Point([120.26].new SpatialReference({ wkid:4326 }));
  map = new Map("map", {
    basemap: "delorme".center: mapcenter,
    maxZoom: 10.minZoom: 1.zoom: 5.extent: bounds,
    logo: false.nav: false
  });
  var homeClick = function(){
      map.centerAndZoom(mapcenter,5);  
  }  
Copy the code

Basemap must be set, otherwise this scaling will not work.