Esri Map Limit Extent

Limit the map to a specified region. region defined by bounding box. If user pans out of box, the map will pan to the nearest bounding box edge . In this case, it keeps at least a little bit of Japan in the field of view.

HTML

<script src="http://js.arcgis.com/3.7"></script>
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">

CSS

#mapDiv,
html,
body {
  height: 100%;
  width: 100%;
}

JavaScript

require([
  "esri/map",
  "dojo/on"
], function(Map, on) {

  var map = new Map("mapDiv", {
    zoom: 5,
    basemap: "streets"
  });

  //This code limits the extent of the map to prevent users from scrolling far away from the
  //initial extent.
  var initialExtent; 

  map.on('extent-change', function(event) {
    if(!initialExtent){
      initialExtent = map.extent;
    }
    
    //If the map has moved to the point where it's center is outside the initial boundaries,
    //then move it back to the edge where it moved out
    var currentCenter = map.extent.getCenter();
    if (initialExtent && !initialExtent.contains(currentCenter) && event.delta && event.delta.x !== 0 && event.delta.y !== 0) {
      var newCenter = map.extent.getCenter();

      //check each side of the initial extent and if the current center is outside that extent, 
      //set the new center to be on the edge that it went out on
      if (currentCenter.x < initialExtent.xmin) {
        newCenter.x = initialExtent.xmin;
      }
      if (currentCenter.x > initialExtent.xmax) {
        newCenter.x = initialExtent.xmax;
      }
      if (currentCenter.y < initialExtent.ymin) {
        newCenter.y = initialExtent.ymin;
      }
      if (currentCenter.y > initialExtent.ymax) {
        newCenter.y = initialExtent.ymax;
      }
      map.centerAt(newCenter);
    }
  });
});