ArcGIS API for JavaScript ^3.26

• In this example, a new map named "map" is created and will be placed inside a container named "mapDiv".
  

  require([
    "esri/map", ... 
  ], function(Map, ... ) {
    var map = new Map("mapDiv");
    ...
  });
  

  Later in the code, the map container is referenced in the DIV id.
  

  <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
  

• In this second example, the optional extent parameter is also included in the constructor.
  

  require([
    "esri/map", "esri/geometry/Extent", ... 
  ], function(Map, Extent, ... ) {
    var map = new Map("mapDiv", { extent: new Extent(-124.71, 31.89, -113.97, 42.63) });
    ...
  });
  

• This example creates a map with no slider or pan arrows.

  require([
    "esri/map", ... 
  ], function(Map, ... ) {
    var map = new Map("mapDiv", { slider:false, nav:false });
    ...
  });
  

• In this example, graphics are turned off whenever the map is panned.

  require([
    "esri/map", ... 
  ], function(Map, ... ) {
    var map = new Map("mapDiv", { displayGraphicsOnPan:false });
    ...
  });
  

  
  If you want the graphics turned off during a pan only for Internet Explorer, use the following constructor:

  require([
    "esri/map", ... 
  ], function(Map, ... ) {
    var map = new Map("mapDiv", { displayGraphicsOnPan:! dojo.isIE });
    ...
  });
  

function showExtent() {

  var s = "";

  s = "XMin: "+ map.extent.xmin

      +" YMin: " + map.extent.ymin

      +" XMax: " + map.extent.xmax

      +" YMax: " + map.extent.ymax;

      dojo.byId("info").innerHTML = s;

}

require(["esri/map"], function(Map) {
  var map = new Map( ... );
  map.on("extent-change", function(){
    var geo = map.geographicExtent;
    console.log(geo.xmin, geo.ymin, geo.xmax, geo.ymax);
  });
  ...
});

require([
  "esri/map", "esri/geometry/Point", "esri/SpatialReference",
  "esri/symbols/SimpleMarkerSymbol", "esri/graphic", ... 
], function(Map, Point, SpatialReference, SimpleMarkerSymbol, Graphic, ... ) {
  var map = new Map( ... );
  map.on("load", function() { ShowLocation(-81.3765, 28.54175); });

  function ShowLocation(x, y) {
    var point = new Point(x, y, new SpatialReference({wkid:4326}));
    var simpleMarkerSymbol = new SimpleMarkerSymbol();
    var graphic = new Graphic(point, simpleMarkerSymbol);

    map.graphics.add(graphic);
  };
  ...
});

function getMapWidthHeight() {

  alert("Width = " + map.width + "; Height = " + map.height);

}  

require([
  "esri/map", ... 
], function(Map, ... ) {
  var map = new Map("mapDiv");
  ...
});

require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  function stopClickRecenter() {
    var map = new Map( ... );
    map.disableClickRecenter();
    dom.byId("stopClickRecenter").value = map.isClickRecenter;
  };
  ...
});

require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  dom.byId("theDoubleClickZoom").value = map.isDoubleClickZoom;
  ...
});

require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  dom.byId("keyboardNavigationStatus").value = map.isKeyboardNavigation;
  ...
});

require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  dom.byId("panStatus").value = map.isPan;
  ...
});

require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  dom.byId("checkRubberBandZoom").value = map.isRubberBandZoom;
  ...
});

require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  function stopScrollWheelZoom() {
    map.disableScrollWheelZoom();
    dom.byId("stopScrollWheelZoom").value = map.isScrollWheelZoom;
  };
  ...
});

require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  dom.byId("theShiftDoubleClickZoom").value = map.isShiftDoubleClickZoom;
  ...
});

function getLayerProperties() {
  for(var j = 0; j < map.layerIds.length; j++) {
    var layer = map.getLayer(map.layerIds[j]);
    alert(layer.id + ' ' + layer.opacity + ' ' + layer.visible);
  }
}

require([
  "esri/map", ... 
], function(Map, ... ) {
  var map = new Map( ... );
  var snappingManager = map.snappingManager();
  ...
});

function getMapWidthHeight() {
  alert("Width = " + map.width + "; Height = " + map.height);
}  

require([
  "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", ... 
], function(Map, ArcGISTiledMapServiceLayer, ... ) {
  var map = new Map( ... );
  var baseMapLayer = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
  map.addLayer(baseMapLayer);
  ...
});

require([
  "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", ... 
], function(Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, ... ) {
  var map = new Map( ... );
  var basemap = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
  var statesLayer= new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
  map.addLayers([basemap, statesLayer]);
  ...
});

map.centerAndZoom(location,12);

map.centerAt(evt.mapPoint);

map.destroy();

require([
  "esri/map", ... 
], function(Map, ... ) {
  function init() {

    myMap = new Map("mapDiv");

    myMap.disableClickRecenter();

  }
  ...
});

require([
  "esri/map", ... 
], function(Map, ... ) {
  function init() {

    myMap = new Map("mapDiv");

    myMap.disableDoubleClickZoom();

  }
  ...
});

require([
  "esri/map", ... 
], function(Map, ... ) {
  function init() {
    map = new Map("mapDiv");
    map.disableKeyboardNavigation();
  }
  ...
});

function noPan() {

  myMap.disablePan();

}

function noRubberBand() {

  myMap.disableRubberBandZoom();

}

require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  function stopScrollWheelZoom() {
    map.disableScrollWheelZoom();
    dom.byId("stopScrollWheelZoom").value = map.isScrollWheelZoom;
  };
  ...
});

require([
  "esri/map", ... 
], function(Map, ... ) {
  function init() {
    map = new Map("mapDiv");
    map.disableShiftDoubleClickZoom();
  }
  ...
});

map.disableSnapping();

function okClickRecenter() {

  myMap.enableClickRecenter();

}

function okDoubleClickZoom() {
  map.enableDoubleClickZoom();
}

require([
  "esri/map", ... 
], function(Map, ... ) {
  function init() {

    myMap = new Map("mapDiv");

    myMap.enableKeyboardNavigation();

  }
  ...
});

function panAgain() {
  map.enablePan();
}

function allowRubberBand() {
  map.enableRubberBandZoom();
}

function allowScrollWheelZoom() {
  map.enableScrollWheelZoom();
}

function okShiftDoubleClickZoom() {
  map.enableShiftDoubleClickZoom();
}

require([
  "dojo/keys",
  "esri/symbols/SimpleMarkerSymbol", ... 
], function(keys, SimpleMarkerSymbol, ... ) {
  var symbol = new SimpleMarkerSymbol();
  map.enableSnapping({
    snapPointSymbol: symbol,
    tolerance:20,
    snapKey: keys.ALT
  });
  ...
});

map.enableSnapping();

//get the layer using the layer id

var incidentLayer = map.getLayer("incidentLayer");

//get the layer using the layer index

var layer = map.getLayer(map.layerIds[j]);

require([
  "dojo/_base/array", ... 
], function(array, ... ) {
  var layers = map.getLayersVisibleAtScale(map.getScale());
  array.forEach(layers,function(layer){
    console.log(layer.id);
  });
  ...
});

var currentScale = map.getScale();
console.log('Scale: ' + currentScale);

function south() {
  map.panDown();
}

function west() {
  map.panLeft();
}

function southWest() {
  map.panLowerLeft();
}

function southEast() {
  map.panLowerRight();
}

function east() {
  map.panRight();
}

function north() {
  map.panUp();
}

function northWest() {
  map.panUpperLeft();
}

function northEast() {
  map.panUpperRight();
}

map.addLayer(cityLayer);

map.reorderLayer(cityLayer,1);

require([
  "esri/map", "dojo/_base/connect", "dijit/registry", ... 
], function(Map, connect, registry, ... ) {
  var map = new Map( ... );
  var resizeTimer;
  map.on("load", function(theMap) {
    connect.connect(registry.byId('map'), 'resize', function() {
      //resize the map if the div is resized
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout( function() {
        map.resize();
        map.reposition();
      }, 500);
    });
  });
  ...
});

var taxLotExtent = selectedTaxLot.geometry.getExtent();
map.setExtent(taxLotExtent);

require([
  "esri/map", ... 
], function(Map, ... ) {
    map = new Map("mapDiv");
    map.setInfoWindowOnClick(true);
  ...
});

map.setLevel(10);

map.setMapCursor("wait");

map.setMapCursor("url(custom.cur),auto");

require([
  "esri/map", "esri/TimeExtent", ... 
], function(Map, TimeExtent, ... ) {
  var map = new Map( ... );
  var timeExtent = new TimeExtent();
  timeExtent.startTime = new Date("1/1/1989 UTC");
  map.setTimeExtent(timeExtent);
  ...
});

map.setTimeSlider(timeSlider);

map.setWebGLEnabled(true);

var screenPoint = map.toScreen(feature.geometry.getExtent().getCenter());