Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: Map

require(["esri/map"], function(Map) { /* code goes here */ });

Description

(Added at v1.0)
The Map class creates a container and required DOM structure for adding layers, graphics, an info window, and other navigation controls.

Typically, a map is added to a page using a DIV. The map's width and height are initialized to those of the DIV container.

The load event is fired after the first layer has been added to the map. At this point, the map is fully functional. A Map.on("load") handler function should be used to add content and change map behaviors.

For an introduction on using the Map class, see Adding a map.

Samples

Search for samples that use this class.

Constructors

NameSummary
new Map(divId, options?)Creates a new map inside of the given HTML container, which is often a DIV element.

CSS

esri/map | Download source

NameDescription
esriAttributionRepresents the map attribution node.
.esriAttribution{
  color:#B20000 !important;
  font-weight:bold;
}
esriAttributionOpenRepresents the map attribution node when it is open i.e., it is clicked. Use this class to define CSS rules that apply to the attribution only when it is open.
.esriAttributionOpen{
  font-style:italic;
}

Data Attributes

NameTypeDescription
data-basemap"<String>"Current basemap.
data-loaded"" (empty string)Added to the map container after the map is loaded.
data-scale"<Number>"Current map scale.
data-updating"" (empty string)Added to the map container when the map is updating.
data-zoom"<Number>"Current map zoom level.

Properties

NameTypeSummary
attributionAttributionReference to the attribution widget created by the map when map attribution is enabled.
autoResizeBooleanValue is true when the map automatically resizes if the browser window or ContentPane widget enclosing the map is resized.
backgroundColorColorThe background color "behind" the map.
basemapLayerIdsString[]An array of IDs corresponding to the layers that make up the map's current basemap.
extentExtentThe current extent of the map in map units.
fadeOnZoomBooleanIndicates if the fade effect is enabled while zooming.
force3DTransformsBooleanWhen the mapNavigation mode is set to 'css-transforms', CSS3 transforms will be used for map navigation when supported by the browser.
geographicExtentExtentThe extent (or bounding box) of the map in geographic coordinates.
graphicsGraphicsLayerProvides access to the Map's GraphicsLayer.
graphicsLayerIdsString[]An array of the current GraphicsLayers in the map.
heightNumberCurrent height of the map in screen pixels.
idStringReference to HTML DIV or other element where the map is placed on the page.
infoWindowInfoWindowBaseDisplays the InfoWindow on a map.
isClickRecenterBooleanWhen true, the key sequence of shift then click to recenter the map is enabled.
isDoubleClickZoomBooleanWhen true, double click zoom is enabled.
isKeyboardNavigationBooleanWhen true, keyboard navigation is enabled.
isMapNavigationBooleanIndicates whether all map navigation is enabled.
isPanBooleanWhen true, map panning is enabled using the mouse.
isPanArrowsBooleanWhen true, pan arrows are displayed around the edge of the map.
isPinchZoomBooleanIndicates whether pinch zoom navigation is enabled on touch-enabled devices.
isRubberBandZoomBooleanWhen true, rubberband zoom is enabled.
isScrollWheelBooleanIt indicates whether map navigation based on mouse scroll wheel is enabled.
isScrollWheelZoomBooleanWhen true, the mouse scroll wheel zoom is enabled.
isShiftDoubleClickZoomBooleanWhen true, shift double click zoom is enabled.
isZoomSliderBooleanWhen true, the zoom slider is displayed on the map.
layerIdsString[]Array of IDs corresponding to layers in the map, except for GraphicsLayers and FeatureLayers, which are maintained in map.graphicsLayerIds.
loadedBooleanAfter the first layer is loaded, the value is set to true.
navigationModeStringIndicates whether the map uses CSS3 transformations when panning and zooming.
positionPointThis point geometry in screen coordinates represent the top-left corner of the map container.
rootNodeThe DOM node that contains the container of layers, build-in info window, logo and slider.
showAttributionBooleanWhen true, map attribution is enabled.
snappingManagerSnappingManagerIf snapping is enabled on the map using map.enableSnapping() this property provides access to the SnappingManager.
spatialReferenceSpatialReferenceThe spatial reference of the map.
timeExtentTimeExtentThe current TimeExtent for the map.
visibleBooleanIndicates whether map is visible.
webglEnabledBooleanIndicates if WebGL is enabled for rendering FeatureLayers in the map.
widthNumberCurrent width of the map in screen pixels.

Methods

NameReturn typeSummary
addLayer(layer, index?)LayerAdds an Esri Layer to the map.
addLayers(layers)NoneAdds multiple layers to a map.
attr(name, value)MapAdds a new attribute or changes the value of an existing attribute on the map container.
centerAndZoom(mapPoint, levelOrFactor)DeferredCenters and zooms the map.
centerAt(mapPoint)DeferredCenters the map based on map coordinates as the center point.
destroy()NoneDestroys the map instance.
disableClickRecenter()NoneDisallows clicking on a map to center it.
disableDoubleClickZoom()NoneDisallows double clicking on a map to zoom in a level and center the map.
disableKeyboardNavigation()NoneDisallows panning and zooming using the keyboard.
disableMapNavigation()NoneDisallows all map navigation except the slider and pan arrows.
disablePan()NoneDisallows panning a map using the mouse.
disablePinchZoom()None
disableRubberBandZoom()NoneDisallows zooming in or out on a map using a bounding box.
disableScrollWheel()NoneDisables navigation of the map based on mouse scroll wheel.
disableScrollWheelZoom()NoneDisallows zooming in or out on a map using the mouse scroll wheel.
disableShiftDoubleClickZoom()NoneDisallows shift double clicking on a map to zoom in a level and center the map.
disableSnapping()NoneDisables snapping on the map.
enableClickRecenter()NonePermits users to click on a map to center it.
enableDoubleClickZoom()NonePermits users to double click on a map to zoom in a level and center the map.
enableKeyboardNavigation()NonePermits users to pan and zoom using the keyboard.
enableMapNavigation()NoneAllows all map navigation.
enablePan()NonePermits users to pan a map using the mouse.
enablePinchZoom()NoneEnables the user to work with pinch zoom navigation for touch-enabled devices.
enableRubberBandZoom()NonePermits users to zoom in or out on a map using a bounding box.
enableScrollWheel()NoneEnables the user to navigate the map based on mouse scroll wheel.
enableScrollWheelZoom()NonePermits users to zoom in or out on a map using the mouse scroll wheel.
enableShiftDoubleClickZoom()NonePermits users to shift double click on a map to zoom in a level and center the map.
enableSnapping(snapOptions?)SnappingManagerEnable snapping on the map when working with the Editor, Measurement widget or the Draw and Edit toolbars.
getBasemap()StringReturns the name of the current basemap.
getInfoWindowAnchor(screenCoords)StringSets an InfoWindow's anchor when calling InfoWindow.show.
getLayer(id)LayerReturns an individual layer of a map.
getLayersVisibleAtScale()Layer[]Return an array of layers visible at the current scale.
getLevel()NumberGets the current level of detail for the map.
getMaxScale()NumberReturns the maximum visible scale of the map.
getMaxZoom()NumberReturns the maximum zoom level of the map.
getMinScale()NumberReturns the minimum visible scale of the map.
getMinZoom()NumberReturns the minimum zoom level of the map.
getScale()NumberReturns the map scale at the center of the view.
getZoom()NumberReturns the current zoom level of the map.
hidePanArrows()NoneHides the pan arrows from the map.
hideZoomSlider()NoneHides the zoom slider from the map.
panDown()DeferredPans the map south.
panLeft()DeferredPans the map west.
panLowerLeft()DeferredPans the map southwest.
panLowerRight()DeferredPans the map southeast.
panRight()DeferredPans the map east.
panUp()DeferredPans the map north.
panUpperLeft()DeferredPans the map northwest.
panUpperRight()DeferredPans the map northeast.
removeAllLayers()NoneRemoves all layers from the map.
removeLayer(layer)NoneRemoves the specified layer from the map.
reorderLayer(layer, index)NoneChanges the layer order in the map.
reposition()NoneRepositions the map DIV on the page.
resize(immediate?)NoneResizes the map DIV.
setBackgroundColor(color)NoneChange the background color of the map.
setBasemap(basemap)NoneChange the map's current basemap.
setExtent(extent, fit?)DeferredSets the extent of the map.
setInfoWindowOnClick(enabled)NoneIf true and a map click event occurs, it may show the map's infoWindow.
setLevel(level)DeferredSets the map to the specified level.
setMapCursor(cursor)NoneSets the default cursor for the map.
setScale(scale)DeferredSets the map scale to the specified value.
setTimeExtent(timeExtent)NoneSets the TimeExtent for the map.
setTimeSlider(timeSlider)NoneSet the time slider associated with the map.
setVisibility(visible)MapShow or hide the map.
setWebGLEnabled(enable)NoneToggles WebGL rendering on/off for all FeatureLayers in the map.
setZoom(zoom)DeferredSet the map zoom level to the given value.
showPanArrows()NoneShows the pan arrows on the map.
showZoomSlider()NoneShows the zoom slider on the map.
toMap(screenPoint)PointConverts a single screen point to map coordinates.
toScreen(mapPoint)ScreenPointConverts a single map point to screen coordinate.

Events

[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.

Events

NameEvent ObjectSummary
basemap-change
{
  current: <Object>,
  previous: <Object>
}
Fired when the map's basemap is changed.
before-unload
{
  map: <Map>
}
Event is fired before the map gets destroyed.
click<MouseEvent> mouseEventFires when a user single clicks on the map using the mouse and the mouse pointer is within the map region of the HTML page.
dbl-click<MouseEvent> mouseEventFires when a user double clicks on the map using the mouse and the mouse pointer is within the map region of the HTML page.
extent-change
{
  delta: <Point>,
  extent: <Extent>,
  levelChange: <Boolean>,
  lod: <LOD>
}
Fires when the extent of the map has changed.
key-down<KeyboardEvent> keyboardEventFires when a keyboard key is pressed.
key-up<KeyboardEvent> keyboardEventFires when a keyboard key is released.
layer-add
{
  layer: <Layer>
}
Fires any time a layer is added to the map.
layer-add-result
{
  error: <Error>,
  layer: <Layer>
}
Fires after specified layer has been added to the map.
layer-remove
{
  layer: <Layer>
}
Fires after the layer has been removed.
layer-reorder
{
  index: <Number>,
  layer: <Layer>
}
Fires when the map layer order has been changed.
layer-resume
{
  layer: <Layer>
}
Fires when a map layer resumes drawing.
layer-suspend
{
  layer: <Layer>
}
Fires when a map layer suspends drawing.
layers-add-result
{
  layers: <Object[]>
}
Fires after all layers are added to the map using the map.addLayers method.
layers-removedFires after all the layers have been removed.
layers-reordered
{
  layerIds: <String[]>
}
Fires when all the layers have been reordered.
load
{
  map: <Map>
}
Fires when the first or base layer has been successfully added to the map.
mouse-down<MouseEvent> mouseEventFires when a mouse button is pressed down and the mouse cursor is in the map region of the HTML page.
mouse-drag<MouseEvent> mouseEventFires while the mouse is being dragged until the mouse button is released.
mouse-drag-end<MouseEvent> mouseEventFires when a mouse button is released and the user stops dragging the mouse.
mouse-drag-start<MouseEvent> mouseEventFires when a mouse button is pressed down and the user starts to drag the mouse.
mouse-move<MouseEvent> mouseEventFires any time the mouse pointer moves over the map region.
mouse-out<MouseEvent> mouseEventFires when the mouse moves out of the map region of the HTML page.
mouse-over<MouseEvent> mouseEventFires when the mouse moves into the map region of the HTML page.
mouse-up<MouseEvent> mouseEventFires when the mouse button is released and the mouse pointer is within the map region of the HTML page.
mouse-wheel<MouseEvent> mouseEventFires when the mouse wheel is scrolled.
pan
{
  delta: <Point>,
  extent: <Extent>
}
Fires during the pan process.
pan-end
{
  delta: <Point>,
  extent: <Extent>
}
Fires when the pan is complete.
pan-start
{
  extent: <Extent>
}
Fires when a user commences panning.
reposition
{
  x: <Number>,
  y: <Number>
}
Fires when the map DIV is repositioned.
resize
{
  extent: <Extent>,
  height: <Number>,
  width: <Number>
}
Fires when the map's container has been resized.
time-extent-change
{
  timeExtent: <TimeExtent>
}
Fires when the map's timeExtent property is set.
unload
{
  map: <Map>
}
Fires when the page is refreshed.
update-end
{
  error: <Error>
}
Fires after layers that are updating their content have completed.
update-startFires when one or more layers begins updating their content.
zoom
{
  anchor: <Point>,
  extent: <Extent>,
  zoomFactor: <Number>
}
Fires during the zoom process.
zoom-end
{
  anchor: <Point>,
  extent: <Extent>,
  level: <Number>,
  zoomFactor: <Number>
}
Fires when the zoom is complete.
zoom-start
{
  anchor: <Point>,
  extent: <Extent>,
  level: <Number>,
  zoomFactor: <Number>
}
Fires when a user commences zooming.
Constructor Details

new Map(divId, options?)

Creates a new map inside of the given HTML container, which is often a DIV element. The size of the map is the size of the container. The Map constructor can also include optional parameters.
Parameters:
<Node | String> divId Required Container id for the referencing map. Required.
<Object> options Optional Optional parameters. See options list.
options properties:
<Number> attributionWidth Optional Width of the attribution node relative to the map width. The default value is 0.45 i.e., 45% of the map width. Added at v3.1
<Boolean> autoResize Optional When true the map will automatically resize when the browser window is resized or when the ContentPane widget enclosing the map is resized. The default value is true.
<String> basemap Optional Specify a basemap for the map, for example "topo-vector" or "satellite". See esri/basemap object for a full listing with more details.
<Number[] | Point> center Optional The location where the map should be centered. Enter the location as an array containing longitude and latitude (for example, [-98, 40]) or as an esri.geometry.Point. Added at v3.3
<Boolean> displayGraphicsOnPan Optional When true, graphics are displayed during panning. When false, the graphics are turned off during pan movement. Setting to false may improve performance in Internet Explorer. The default is true.
<Extent> extent Optional If provided, the extent and projection of the map is set to the properties of Extent. Once the projection is set, all layers must be able to be drawn in the defined projection. The tiling scheme of an ArcGISTiledMapServiceLayer must match the projection of the map. The projection of the extent is honored when used in the map constructor.
require([
  "esri/map", "esri/geometry/Extent", "esri/layers/ArcGISDynamicMapServiceLayer"
], function(Map, Extent, ArcGISDynamicMapServiceLayer) {
  var map = new Map("map", {
    extent: new Extent({xmin:-20959118,ymin:-9819082,xmax:20959118,ymax:9819082,spatialReference:{wkid:8859}}) // WGS_1984_Equal_Earth_Asia_Pacific
  });
  var dynamicMSLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServe");
  map.addLayer(dynamicMSLayer);
});
<Boolean> fadeOnZoom Optional When true a fade effect is enabled for supported layers. Currently only tiled layers are supported. This option is not applicable if navigationMode is set to classic. (As of v2.6)
require([
  "esri/map", ... 
], function(Map, ... ) {
  var map = new Map("map",{
    extent: initExtent,
    fadeOnZoom: true
  });
  ...
});
<Boolean> fitExtent Optional When true, for maps that contain tiled map service layers, you are guaranteed to have the initial extent defined using the extent constructor option shown completely on the map. For example, if fitExtent = false, the map will snap to the nearest LOD, which could indicate the map's extent may not contain the set extent. fitExtent=true, makes sure that it snaps to the currently set extent.
require([
  "esri/map", ... 
], function(Map, ... ) {
  var map = new Map("map",{ extent: initExtent, fitExtent: true });
  ...
});
<Boolean> force3DTransforms Optional When the mapNavigation mode is set to 'css-transforms', CSS3 transforms will be used for map navigation when supported by the browser. It is recommended that you let the map determine when to enable transformations to avoid running into a known issue with scrollbar rendering on Chrome on Windows XP.(As of v2.6)
  map = new esri.Map("map",{
    extent:initExtent,
    force3DTransforms:true
  });
require([
  "esri/map", ... 
], function(Map, ... ) {
  var map = new Map("map",{
    extent: initExtent,
    force3DTransforms: true
  });
  ...
});
<InfoWindowBase> infoWindow Optional By default the map creates and uses an out-of-the-box esri/dijit/Popup. If you create a custom implementation using InfoWindowBase or would like to use esri/dijit/InfoWindow, create an instance and specify it using this option. The snippet below shows using InfoWindow instead of Popup.
require([
  "esri/map", "esri/dijit/InfoWindow", "dojo/dom-construct", "dojo/dom", ... 
], function(Map, InfoWindow, domConstruct, dom, ... ) {
  var infoWindow = new InfoWindow({
    domNode: domConstruct.create("div", null, dom.byId("map"))
  }); 

  var map = new Map("map", {
    extent: initExtent,
    infoWindow: infoWindow
  });
  ...
});
<Boolean> isClickRecenter Optional Indicates whether to enable double-click on a map to recenter and zoom in a level by using SHIFT + Click.
<Boolean> isDoubleClickZoom Optional Indicates whether double-clicking on map zooms in on extent.
<Boolean> isKeyboardNavigation Optional Indicates whether to enable navigation of the map using a keyboard's arrow keys.
<Boolean> isMapNavigation Optional Indicates whether all map navigation is enabled.
<Boolean> isPan Optional Indicates whether panning is enabled within the map.
<Boolean> isPinchZoom Optional Indicates whether pinch zoom navigation is enabled on touch-enabled devices.
<Boolean> isRubberBandZoom Optional Indicates whether to enable a mouse drag to zoom into to a specific region on the map.
<Boolean> isScrollWheel Optional (Added at version 3.21). It indicates whether map navigation based on mouse scroll wheel is enabled. This property controls both pan and zoom actions and should be used in place of isScrollWheelZoom.
<LOD[]> lods Optional If provided, the map is initialized with the specified levels of detail. All ArcGISTiledMapServiceLayers added to the map must have matching resolutions in order to be displayed.
require([
  "esri/map", ... 
], function(Map, ... ) {
  var lods = [
    {"level" : 0, "resolution" : 0.010986328125, "scale" : 4617149.97766929},
    {"level" : 1, "resolution" : 0.0054931640625, "scale" : 2308574.98883465},
    {"level" : 2, "resolution" : 0.00274658203125, "scale" : 1154287.49441732},
    {"level" : 3, "resolution" : 0.001373291015625, "scale" : 577143.747208662},
    {"level" : 4, "resolution" : 0.0006866455078125, "scale" : 288571.873604331}
  ];

  var map = new Map("map", {
    lods: lods
  });
  ...
});
<Boolean> logo Optional Display the esri logo on the map. The default value is true.
require([
  "esri/map", ... 
], function(Map, ... ) {
  map = new Map("map", {
    extent: initExtent,
    logo:false
  });
  ...
});
<Number> maxScale Optional Maximum visible scale of the map. You cannot zoom in beyond this scale. The value will be further adjusted based on the maxZoom. Added at v3.3
<Number> maxZoom Optional Maximum map zoom level. You cannot zoom in beyond this level. If a value is not provided, the maximum zoom level will be calculated based on maxScale or the maximum zoom level supported by the basemap. Added at v3.3
<Number> minScale Optional Minimum visible scale of the map. You cannot zoom out beyond this scale. The specified value will be further adjusted based on the minZoom. Added at v3.3
<Number> minZoom Optional Minimum map zoom level. You cannot zoom out beyond this level. If a value is not provided, the minimum zoom will be calculated based on maxScale or the maximum zoom level supported by the basemap. Added at v3.3
<Boolean> nav Optional Displays pan buttons on map. When false, the pan arrows never display. The default is false. Also, this property must be set to true to use the showPanArrows() method and/or the isPanArrows property.
<String> navigationMode Optional Specify whether or not to use CSS3 transformations when panning and zooming. Valid values are "css-transforms" or "classic". If not specified, CSS3 transforms will be used when supported by the browser. Advantages of using CSS3 transforms are a smoother, less jarring experience during map navigation and hardware acceleration in browsers that support it. (As of v2.6)
require([
  "esri/map", ... 
], function(Map, ... ) {
  var map = new Map("map",{
    extent: initExtent,
    navigationMode: 'classic'
  });
  ...
});
<Boolean> optimizePanAnimation Optional Default value is true, indicating that the map will skip panning animation when calling map.centerAt() or map.setExtent() (for map.setExtent(), the animation is only skipped if the map's zoom level is not changing) if the panning distance is twice the distance of the current extent. The reason to do this is to eliminate unnecessary tile requests. If prefer keeping the old behavior, set this value as false.
<Number> resizeDelay Optional Specify a time period in milliseconds to ignore repeated calls to the resize method. Default value is 300.
<Number> scale Optional Initial map scale. If a value is not provided, the scale will be calculated based on the initial extent of the basemap. Added at v3.3
<Boolean> showAttribution Optional Enable or disable map attribution display. The attribution is displayed at the bottom of the map next to the Esri logo. The default value is true unless you are using the compact build then the default is false. To add attribution with the compact build import the esri.dijit.Attribution module and enable showAttribution. For additional information on working with attribution please visit the official attribution in your app documentation. Added at v3.1
<Boolean> showInfoWindowOnClick Optional If true and a map click event occurs, it may show the map's infoWindow. If the infoWindow supports showing more than one feature, it will search for all features in all layers of the map that have an infoTemplate, including the sublayers of a ArcGIS Tiled or Map service. If the infoWindow only supports showing a single feature, the infoWindow will be shown if the user directly clicked on a client side graphic. When false, disables this behavior. The default value is true. See also: setInfoWindowOnClick, usePopupManager option as part of the options parameter in the esri.arcgis.utils.createMap method, and Working with InfoWindows.
<Boolean> showLabels Optional Indicate whether to display labels. If true, any FeatureLayer added to the map will automatically label based on labelingInfo. Default is false. Added at v3.11

NOTE: In order for the labels to display, all fields used by the labelingInfo should be set in outFields. In addition, only simple labeling is supported, for example {CITY_NAME}. For example, SQL keywords such as "CONCAT" are not supported. Consider using the LabelLayer class where you can specify the textExpression if needing more functionality.
<Boolean> slider Optional Displays a slider on the map. When false, the slider never displays. Default is true.
<String[]> sliderLabels Optional Define labels for the slider. Only valid when the sliderStyle is set to large. Added at version 3.3
<String> sliderOrientation Optional Orientation of the zoom slider. Valid values are: "vertical" or "horizontal". The default value is "vertical". Added at v3.3
<String> sliderPosition Optional Position of the zoom slider within the map control. Valid values are: "top-left", "top-right", "bottom-left", "bottom-right". The default value is "top-left". Added at v3.3
<String> sliderStyle Optional Defines the slider style. At version 3.3 the small slider is displayed by default. Valid values are 'small' or 'large'.
<Boolean> smartNavigation Optional When true, for Apple computers with a trackpad or magic mouse use, swipe pans instead of zooming. Default is true.
<Boolean> webglEnabled Optional Indicates whether to enable WebGL rendering for FeatureLayers in the map. The default value is true.
<Boolean> wrapAround180 Optional When true, supports continuous pan across the dateline. Wraparound is supported in the following cases:
  • Map spatial reference is WGS84 or Web Mercator
  • The tiling scheme is either the pre-9.3 ArcGIS Online (4326) tiling scheme or ArcGIS/Google Maps/ Bing tiling scheme.
  • Dynamic services must be version 10 or greater.
At version 3.1 the default value is true. For versions earlier than 3.1 the default value is false.
<Number> zoom Optional Initial zoom level of the map. If a value is not provided, it will be calculated based on the initial extent of the basemap. Added at v3.3
Sample:
  • 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 });
      ...
    });
    
Property Details

<Attribution> attribution

Reference to the attribution widget created by the map when map attribution is enabled. (Added at v3.1)

<Boolean> autoResize

Value is true when the map automatically resizes if the browser window or ContentPane widget enclosing the map is resized. Otherwise false. Added at v.3.3.
Known values: true | false

<Color> backgroundColor

The background color "behind" the map. (Added at v3.20)

<String[]> basemapLayerIds

An array of IDs corresponding to the layers that make up the map's current basemap. (Added at v3.3)

<Extent> extent

The current extent of the map in map units. See Setting and using extents in a map for more information about extents.
Sample:
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;
}

<Boolean> fadeOnZoom

Indicates if the fade effect is enabled while zooming. Only applicable when navigationMode is set to 'css-transforms'. (Added at v2.6)
Known values: true | false
Default value: true

<Boolean> force3DTransforms

When the mapNavigation mode is set to 'css-transforms', CSS3 transforms will be used for map navigation when supported by the browser. It is recommended that you let the map determine when to enable transformations to avoid running into a known issue (https://code.google.com/p/chromium/issues/detail?id=105227) with scrollbar rendering on Chrome on Windows XP. (Added at v2.6)
Known values: true | false

<Extent> geographicExtent

The extent (or bounding box) of the map in geographic coordinates. Available only when the map's spatial reference is Web Mercator or Geographic (wkid 4326).  (Added at v3.3)
Sample:
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);
  });
  ...
});

<GraphicsLayer> graphics

Provides access to the Map's GraphicsLayer. The graphics object is available to use after the Map.onLoad event.
Sample:
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);
  };
  ...
});

<String[]> graphicsLayerIds

An array of the current GraphicsLayers in the map. (Added at v1.4)
See also: layerIds

<Number> height

Current height of the map in screen pixels. This property is read-only. The height and width of the map are normally set in the HTML DIV or other HTML element containing the map container.
Sample:
function getMapWidthHeight() {
  alert("Width = " + map.width + "; Height = " + map.height);
}

<String> id

Reference to HTML DIV or other element where the map is placed on the page. This property is set in the Map constructor.
Sample:
require([
  "esri/map", ... 
], function(Map, ... ) {
  var map = new Map("mapDiv");
  ...
});

<InfoWindowBase> infoWindow

Displays the InfoWindow on a map. Default value is an instance of a Popup.

<Boolean> isClickRecenter

When true, the key sequence of shift then click to recenter the map is enabled. See Map navigation for more details.
Known values: true | false
Default value: true
Sample:
require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  function stopClickRecenter() {
    var map = new Map( ... );
    map.disableClickRecenter();
    dom.byId("stopClickRecenter").value = map.isClickRecenter;
  };
  ...
});

<Boolean> isDoubleClickZoom

When true, double click zoom is enabled. This allows a user to zoom and recenter the map by double clicking the mouse. See Map navigation for more details.
Known values: true | false
Default value: true
Sample:
require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  dom.byId("theDoubleClickZoom").value = map.isDoubleClickZoom;
  ...
});

<Boolean> isKeyboardNavigation

When true, keyboard navigation is enabled. This allows users to pan the keyboard using the arrow keys and to zoom using the + and - keys. See Map navigation for more details.
Known values: true | false
Default value: true
Sample:
require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  dom.byId("keyboardNavigationStatus").value = map.isKeyboardNavigation;
  ...
});

<Boolean> isMapNavigation

Indicates whether all map navigation is enabled. See Map navigation for more details. (Added at v3.21)
Default value: true

<Boolean> isPan

When true, map panning is enabled using the mouse. See Map navigation for more details.
Known values: true | false
Default value: true
Sample:
require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  dom.byId("panStatus").value = map.isPan;
  ...
});

<Boolean> isPanArrows

When true, pan arrows are displayed around the edge of the map. In addition, the Map's nav constructor property must be set to true. See Map navigation for more details.
Known values: true | false
Default value: false

<Boolean> isPinchZoom

Indicates whether pinch zoom navigation is enabled on touch-enabled devices. (Added at v3.21)
Default value: true

<Boolean> isRubberBandZoom

When true, rubberband zoom is enabled. This allows users to draw a bounding box zoom area using the mouse. See Map navigation for more details.
Known values: true | false
Default value: true
Sample:
require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  dom.byId("checkRubberBandZoom").value = map.isRubberBandZoom;
  ...
});

<Boolean> isScrollWheel

It indicates whether map navigation based on mouse scroll wheel is enabled. This property controls both pan and zoom actions and should be used in place of isScrollWheelZoom. (Added at v3.21)
Default value: true

<Boolean> isScrollWheelZoom

When true, the mouse scroll wheel zoom is enabled. It indicates whether map navigation based on mouse scroll wheel is enabled. Beginning in version 3.21, the isScrollWheel property was introduced. This property controls both pan and zoom actions and should be used in place of isScrollWheelZoom. See Map navigation for more details.
Known values: true | false
Default value: true
Sample:
require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  function stopScrollWheelZoom() {
    map.disableScrollWheelZoom();
    dom.byId("stopScrollWheelZoom").value = map.isScrollWheelZoom;
  };
  ...
});

<Boolean> isShiftDoubleClickZoom

When true, shift double click zoom is enabled. This allows a user to zoom and recenter the map by shift + double clicking the mouse. See Map navigation for more details. (Added at v1.2)
Known values: true | false
Default value: true
Sample:
require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  dom.byId("theShiftDoubleClickZoom").value = map.isShiftDoubleClickZoom;
  ...
});

<Boolean> isZoomSlider

When true, the zoom slider is displayed on the map. See Map navigation for more details.
Known values: true | false
Default value: true

<String[]> layerIds

Array of IDs corresponding to layers in the map, except for GraphicsLayers and FeatureLayers, which are maintained in map.graphicsLayerIds.
Sample:
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);
  }
}

<Boolean> loaded

After the first layer is loaded, the value is set to true.
Known values: true | false

<String> navigationMode

Indicates whether the map uses CSS3 transformations when panning and zooming. In 'css-transform' mode the map will use CSS3 transformations, if supported by the browser, to provide a smoother experience while panning and zooming the map. (Added at v2.6)
Known values: 'classic' | 'css-transforms'

<Point> position

This point geometry in screen coordinates represent the top-left corner of the map container. This coordinate also acts as the origin for all screen coordinates returned by Map and GraphicsLayer events. (Added at v1.3)

<Node> root

The DOM node that contains the container of layers, build-in info window, logo and slider. (Added at v2.2)

<Boolean> showAttribution

When true, map attribution is enabled. For additional information on working with attribution please visit the official attribution in your app documentation. (Added at v3.1)
Known values: true | false

<SnappingManager> snappingManager

If snapping is enabled on the map using map.enableSnapping() this property provides access to the SnappingManager. The snapping manager's setLayerInfo method can be used to modify the target snapping layers. (Added at v2.3)
Sample:
require([
  "esri/map", ... 
], function(Map, ... ) {
  var map = new Map( ... );
  var snappingManager = map.snappingManager();
  ...
});

<SpatialReference> spatialReference

The spatial reference of the map. See Projected Coordinate Systems and Geographic Coordinate Systems for the list of supported spatial references.

<TimeExtent> timeExtent

The current TimeExtent for the map. Use the setTimeExtent method to modify the time extent. (Added at v2.0)

<Boolean> visible

Indicates whether map is visible. (Added at v3.7)
Known values: true | false

<Boolean> webglEnabled

Indicates if WebGL is enabled for rendering FeatureLayers in the map. (Added at v3.24)
Default value: true

<Number> width

Current width of the map in screen pixels. This property is read-only. The height and width of the map are normally set in the HTML DIV or other HTML element containing the map container.
Sample:
function getMapWidthHeight() {
  alert("Width = " + map.width + "; Height = " + map.height);
}  
Method Details

addLayer(layer, index?)

Adds an Esri Layer to the map.
Return type: Layer
Parameters:
<Layer> layer Required Layer to be added to the map.
<Number> index Optional A layer can be added at a specified index in the map. If no index is specified or the index specified is greater than the current number of layers, the layer is automatically appended to the list of layers in the map and the index is normalized. (As of v1.3)
Sample:
require([
  "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", ... 
], function(Map, ArcGISTiledMapServiceLayer, ... ) {
  var map = new Map( ... );
  var baseMapLayer = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer");
  map.addLayer(baseMapLayer);
  ...
});

addLayers(layers)

Adds multiple layers to a map. The array order corresponds to the layer order in the client side map. The onLayerAddResult event fires for each layer that is added. Once all the layers are added to the map the onLayersAddResult fires.

(Added at v2.0)
Parameters:
<Layer[]> layers Required Layers to be added to the map.
Sample:
require([
  "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", ... 
], function(Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, ... ) {
  var map = new Map( ... );
  var basemap = new ArcGISTiledMapServiceLayer("https://www.example.com/argis/rest/services/World_Topo_Map/MapServer");
  var statesLayer= new ArcGISDynamicMapServiceLayer("https://www.example.com/argis/rest/services/Demographics/ESRI_Census_USA/MapServer");
  map.addLayers([basemap, statesLayer]);
  ...
});

attr(name, value)

Adds a new attribute or changes the value of an existing attribute on the map container. Removes the attribute if the value is null or undefined. (Added at v3.7)
Return type: Map
Parameters:
<String> name Required The name of the attribute.
<String> value Required The value of the attribute. Set this value as null to remove the attribute.

centerAndZoom(mapPoint, levelOrFactor)

Centers and zooms the map.

At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the operation is completed. (Added at v1.2)
Return type: Deferred
Parameters:
<Point> mapPoint Required Centers the map on the specified x,y location. Starting at version 3.3, the mapPoint can be an array of longitude/latitude pairs. 
<Number> levelOrFactor Required When using an ArcGISTiledMapServiceLayer, the map is zoomed to the level specified. When using a DynamicMapServiceLayer, the map is zoomed in or out by the specified factor. For example, use 0.5 to zoom in twice as far and 2.0 to zoom out twice as far.
Sample:

map.centerAndZoom(location,12);

centerAt(mapPoint)

Centers the map based on map coordinates as the center point.
At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the map has been re-centered to the given point.
Return type: Deferred
Parameters:
<Point> mapPoint Required Centers the map on the specified x,y location. Starting at version 3.3 this value can be an array of longitude/latitude pairs. 
Sample:

map.centerAt(evt.mapPoint);

destroy()

Destroys the map instance. After the map is destroyed it is no longer valid however you can re-use the div element of the map to create a new map instance. (Added at v2.0)
Sample:
map.destroy();

disableClickRecenter()

Disallows clicking on a map to center it. See Map navigation for more details.
Sample:
require([
  "esri/map", ... 
], function(Map, ... ) {
  function init() {

    myMap = new Map("mapDiv");

    myMap.disableClickRecenter();

  }
  ...
});

disableDoubleClickZoom()

Disallows double clicking on a map to zoom in a level and center the map. See Map navigation for more details.
Sample:
require([
  "esri/map", ... 
], function(Map, ... ) {
  function init() {

    myMap = new Map("mapDiv");

    myMap.disableDoubleClickZoom();

  }
  ...
});

disableKeyboardNavigation()

Disallows panning and zooming using the keyboard. See Map navigation for more details.
Sample:
require([
  "esri/map", ... 
], function(Map, ... ) {
  function init() {
    map = new Map("mapDiv");
    map.disableKeyboardNavigation();
  }
  ...
});

disableMapNavigation()

Disallows all map navigation except the slider and pan arrows. See Map navigation for more details.

disablePan()

Disallows panning a map using the mouse. See Map navigation for more details.
Sample:

function noPan() {

  myMap.disablePan();

}

See also: enablePan()isPan

disablePinchZoom()

None
Sample: Disables the use of pinch zoom navigation for touch-enabled devices.

disableRubberBandZoom()

Disallows zooming in or out on a map using a bounding box. See Map navigation for more details.
Sample:
function noRubberBand() {
  myMap.disableRubberBandZoom();
}

disableScrollWheel()

Disables navigation of the map based on mouse scroll wheel. This method controls both pan and zoom actions and should be used in place of disableScrollWheelZoom. (Added at v3.21)

disableScrollWheelZoom()

Disallows zooming in or out on a map using the mouse scroll wheel. See Map navigation for more details.
Sample:
require([
  "esri/map", "dojo/dom", ... 
], function(Map, dom, ... ) {
  var map = new Map( ... );
  function stopScrollWheelZoom() {
    map.disableScrollWheelZoom();
    dom.byId("stopScrollWheelZoom").value = map.isScrollWheelZoom;
  };
  ...
});

disableShiftDoubleClickZoom()

Disallows shift double clicking on a map to zoom in a level and center the map. See Map navigation for more details. (Added at v1.2)
Sample:
require([
  "esri/map", ... 
], function(Map, ... ) {
  function init() {
    map = new Map("mapDiv");
    map.disableShiftDoubleClickZoom();
  }
  ...
});

disableSnapping()

Disables snapping on the map. (Added at v2.3)
Sample:
map.disableSnapping();

enableClickRecenter()

Permits users to click on a map to center it. See Map navigation for more details.
Sample:

function okClickRecenter() {

  myMap.enableClickRecenter();

}

enableDoubleClickZoom()

Permits users to double click on a map to zoom in a level and center the map. See Map navigation for more details.
Sample:
function okDoubleClickZoom() {
  map.enableDoubleClickZoom();
}

enableKeyboardNavigation()

Permits users to pan and zoom using the keyboard. See Map navigation for more details.
Sample:
require([
  "esri/map", ... 
], function(Map, ... ) {
  function init() {

    myMap = new Map("mapDiv");

    myMap.enableKeyboardNavigation();

  }
  ...
});

enableMapNavigation()

Allows all map navigation. See Map navigation for more details.

enablePan()

Permits users to pan a map using the mouse. See Map navigation for more details.
Sample:
function panAgain() {
  map.enablePan();
}
See also: disablePan()isPan

enablePinchZoom()

Enables the user to work with pinch zoom navigation for touch-enabled devices. (Added at v3.21)

enableRubberBandZoom()

Permits users to zoom in or out on a map using a bounding box. See Map navigation for more details.
Sample:
function allowRubberBand() {
  map.enableRubberBandZoom();
}

enableScrollWheel()

Enables the user to navigate the map based on mouse scroll wheel. This method controls both pan and zoom actions and should be used in place of enableScrollWheelZoom. (Added at v3.21)

enableScrollWheelZoom()

Permits users to zoom in or out on a map using the mouse scroll wheel. See Map navigation for more details.
Sample:
function allowScrollWheelZoom() {
  map.enableScrollWheelZoom();
}

enableShiftDoubleClickZoom()

Permits users to shift double click on a map to zoom in a level and center the map. See Map navigation for more details. (Added at v1.2)
Sample:
function okShiftDoubleClickZoom() {
  map.enableShiftDoubleClickZoom();
}

enableSnapping(snapOptions?)

Enable snapping on the map when working with the Editor, Measurement widget or the Draw and Edit toolbars. If no snapOptions are provided all graphics layers, including feature layers, will be set as snap targets. Call this method after the layers are loaded. (Added at v2.3)
Return type: SnappingManager
Parameters:
<Object> snapOptions Optional See the object specifications table below for the structure of the snapOptions object.
require([
  "dojo/keys",
  "esri/symbols/SimpleMarkerSymbol", ... 
], function(keys, SimpleMarkerSymbol, ... ) {
  var symbol = new SimpleMarkerSymbol();
  map.enableSnapping({
    snapPointSymbol: symbol,
    tolerance:20,
    snapKey: keys.ALT
  });
  ...
});
Object Specifications:
<layerInfo>
<Layer> layer Required Reference to a feature or graphics layer that will be a target snapping layer. The default option is to set all feature and graphics layers in the map to be target snapping layers.
<Boolean> snapToEdge Required Default is true. When true snapping to edges will be enabled for layers with polyline or polygon geometry.
<Boolean> snapToPoint Required Default is true. When true snapping to points will be enabled for layers with point geometry.
<Boolean> snapToVertex Required Default is true. When true snapping to vertices will be enabled for layers with polyline or polygon geometry.
<snapOptions>
<Boolean> alwaysSnap Required When true, snapping is always enabled. When false users press the snapKey to enable snapping. The default value is false.
<Object> layerInfos Required An array of layerInfo objects that define the snapping target layers. All values are optional. If no snapping options are set the default values will be used. See layerInfo for details.
<Keys> snapKey Required When alwaysSnap is set to false use this option to define the key users press to enable snapping. The default values is the CTRL key.
<SimpleMarkerSymbol> snapPointSymbol Required Define a symbol for the snapping location. The default symbol is a simple marker symbol with the following properties: size:15px,color:cyan,style:STYLE_CROSS.
<Number> tolerance Required Specify the radius of the snapping circle in pixels. The default value is 15 pixels.
Sample:
map.enableSnapping();

getBasemap()

Returns the name of the current basemap. (Added at v3.3)
Return type: String

getInfoWindowAnchor(screenCoords)

Sets an InfoWindow's anchor when calling InfoWindow.show.
Return type: String
Parameters:
<ScreenPoint> screenCoords Required The anchor point in screen units.

getLayer(id)

Returns an individual layer of a map.
Return type: Layer
Parameters:
<String> id Required ID assigned to the layer.
Sample:

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

getLayersVisibleAtScale()

Return an array of layers visible at the current scale. (Added at v3.1)
Return type: Layer[]
Sample:
require([
  "dojo/_base/array", ... 
], function(array, ... ) {
  var layers = map.getLayersVisibleAtScale(map.getScale());
  array.forEach(layers,function(layer){
    console.log(layer.id);
  });
  ...
});

getLevel()

Gets the current level of detail for the map. Valid only with an ArcGISTiledMapService layer.
Return type: Number

getMaxScale()

Returns the maximum visible scale of the map. You cannot zoom-in beyond this scale. A value of 0 indicates that the map does not have a maximum scale constraint. (Added at v3.3)
Return type: Number

getMaxZoom()

Returns the maximum zoom level of the map. You cannot zoom in beyond this value. A value of -1 indicates that the map does not have pre-defined zoom levels. (Added at v3.3)
Return type: Number

getMinScale()

Returns the minimum visible scale of the map. You cannot zoom out beyond this scale. A value of 0 indicates that the map does not have a maximum scale constraint. (Added at v3.3)
Return type: Number

getMinZoom()

Returns the minimum zoom level of the map. You cannot zoom out beyond this value. A value of -1 indicates that the map does not have pre-defined zoom levels. (Added at v3.3)
Return type: Number

getScale()

Returns the map scale at the center of the view. (Added at v3.1)
Return type: Number
Sample:
var currentScale = map.getScale();
console.log('Scale: ' + currentScale);

getZoom()

Returns the current zoom level of the map. A value of -1 indicates that the map does not have pre-defined zoom levels. (Added at v3.3)
Return type: Number

hidePanArrows()

Hides the pan arrows from the map. In addition, the Map's nav constructor property must be set to true. See Map navigation for more details.

hideZoomSlider()

Hides the zoom slider from the map. See Map navigation for more details.

panDown()

Pans the map south. At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the pan operation is completed.
Return type: Deferred
Sample:
function south() {
  map.panDown();
}

panLeft()

Pans the map west. At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the pan operation is completed.
Return type: Deferred
Sample:
function west() {
  map.panLeft();
}

panLowerLeft()

Pans the map southwest. At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the pan operation is completed.
Return type: Deferred
Sample:
function southWest() {
  map.panLowerLeft();
}

panLowerRight()

Pans the map southeast. At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the pan operation is completed.
Return type: Deferred
Sample:
function southEast() {
  map.panLowerRight();
}

panRight()

Pans the map east. At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the pan operation is completed.
Return type: Deferred
Sample:
function east() {
  map.panRight();
}

panUp()

Pans the map north. At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the pan operation is completed.
Return type: Deferred
Sample:
function north() {
  map.panUp();
}

panUpperLeft()

Pans the map northwest. At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the pan operation is completed.
Return type: Deferred
Sample:
function northWest() {
  map.panUpperLeft();
}

panUpperRight()

Pans the map northeast. At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the pan operation is completed.
Return type: Deferred
Sample:
function northEast() {
  map.panUpperRight();
}

removeAllLayers()

Removes all layers from the map.

The map's extent, spatial reference, and tiling scheme if defined do not change when the layers are removed. When the next layer is added to the map, this layer is displayed at the same extent and spatial reference. (Added at v1.3)

removeLayer(layer)

Removes the specified layer from the map. (Added at v1.3)
Parameters:
<Layer> layer Required Layer to be removed from the map.

The map's extent, spatial reference, and tiling scheme if defined do not change when the layer is removed. When the next layer is added to the map, this layer is displayed at the same extent and spatial reference.

reorderLayer(layer, index)

Changes the layer order in the map. Note that the first layer added is always the base layer, even if its order is changed.
Parameters:
<Layer> layer Required The layer to be moved. (As of v1.4)
<Number> index Required Refers to the location for placing the layer. The bottom most layer has an index of 0.
Sample:

map.addLayer(cityLayer);

map.reorderLayer(cityLayer,1);

reposition()

Repositions the map DIV on the page. This method should be used after the map DIV has been repostioned.

resize(immediate?)

Resizes the map DIV. This method should be used after the map DIV has been resized.
Parameters:
<Boolean> immediate Optional By default, the actual resize logic is delayed internally in order to throttle spurious resize events dispatched by some browsers. In cases where you explicitly call this method in a one-and-done situation, you can use the boolean immediate argument to indicate that the resize logic should be applied immediately without any delay.
Sample:
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);
    });
  });
  ...
});
See also: on("resize")

setBackgroundColor(color)

Change the background color of the map. The default is no background color at all. (Added at v3.20)
Parameters:
<Color | String> color Required Color specified using either a named string (for example red), hex string (for example #FF0000), array of rgba values with "a" in the 0-1 range (for example [255,0,0,0.75]), or an instance of esri/Color.

setBasemap(basemap)

Change the map's current basemap. (Added at v3.3)
Parameters:
<String> basemap Required Specify a basemap for the map, for example "topo-vector" or "satellite". See esri/basemap object for a full listing with more details.

setExtent(extent, fit?)

Sets the extent of the map. The extent must be in the same spatial reference as the map.
At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the extent change has been committed by the map.
Return type: Deferred
Parameters:
<Extent> extent Required Sets the minx, miny, maxx, and maxy for a map.
<Boolean> fit Optional When true, for maps that contain tiled map service layers, you are guaranteed to have the input extent shown completely on the map. The default value is false. (As of v1.3)
Sample:
var taxLotExtent = selectedTaxLot.geometry.getExtent();
map.setExtent(taxLotExtent);

setInfoWindowOnClick(enabled)

If true and a map click event occurs, it may show the map's infoWindow. If the infoWindow supports showing more than one feature, it will search for all features in all layers of the map that have an infoTemplate, including the sublayers of an ArcGIS Map service. If the infoWindow only supports showing a single feature, the infoWindow will be shown if the user directly clicked on a client side graphic. When false, disables this behavior. The default value is true. See also, Working with InfoWindows. (Added at v3.10)
Parameters:
<Boolean> enabled Required Toggles the behavior initially set by the map's showInfoWindowOnClick constructor option.
Sample:
require([
  "esri/map", ... 
], function(Map, ... ) {
    map = new Map("mapDiv");
    map.setInfoWindowOnClick(true);
  ...
});

setLevel(level)

Sets the map to the specified level. Zooms to the new level based on the current map center point. Valid only with an ArcGISTiledMapService layer.

At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the zoom level has been changed.
Return type: Deferred
Parameters:
<Number> level Required The level ID.
Sample:

map.setLevel(10);

setMapCursor(cursor)

Sets the default cursor for the map. This cursor is shown whenever the mouse is pointed over the map, except when panning by dragging the map or using SHIFT+Drag to zoom. If not set, the map uses the platform-dependent default cursor, usually an arrow. (Added at v1.5)
Parameters:
<String> cursor Required A standard CSS cursor value. Some common values include "default", "pointer", "crosshair", "text", "help", and "wait".
Sample:
map.setMapCursor("wait");
When using a url for the cursor, Firefox requires an additional, non-URL value.
map.setMapCursor("url(custom.cur),auto");

setScale(scale)

Sets the map scale to the specified value. The value must be greater than 0.

At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the map scale has been changed. (Added at v3.3)
Return type: Deferred
Parameters:
<Number> scale Required A map scale value greater than 0. 

setTimeExtent(timeExtent)

Sets the TimeExtent for the map. When the time extent is changed the onTimeExtentChange event fires. Time aware layers listen for this event and update to only display content for the current time extent. (Added at v2.0)
Parameters:
<TimeExtent> timeExtent Required Set the time extent for which data is displayed on the map.
Sample:
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);
  ...
});

setTimeSlider(timeSlider)

Set the time slider associated with the map.
Parameters:
<TimeSlider> timeSlider Required The time slider dijit to associate with the map.
Sample:
map.setTimeSlider(timeSlider);

setVisibility(visible)

Show or hide the map. (Added at v3.7)
Return type: Map
Parameters:
<Boolean> visible Required If true, map will be visible.

setWebGLEnabled(enable)

Toggles WebGL rendering on/off for all FeatureLayers in the map. (Added at v3.24)
Parameters:
<Boolean> enable Required Indicates whether to enable WebGL rendering on the FeatureLayers in the map.
Sample:
map.setWebGLEnabled(true);

setZoom(zoom)

Set the map zoom level to the given value. At version 3.4, this method returns a deferred object. You can add a callback to the deferred object and get notified after the zoom level has been changed. (Added at v3.3)
Return type: Deferred
Parameters:
<Number> zoom Required A valid zoom level value. 

showPanArrows()

Shows the pan arrows on the map. In addition, the Map's nav constructor property must be set to true. See Map navigation for more details.

showZoomSlider()

Shows the zoom slider on the map. See Map navigation for more details.

toMap(screenPoint)

Converts a single screen point to map coordinates.
Return type: Point
Parameters:
<ScreenPoint> screenPoint Required Converts screen coordinates to map coordinates. Starting at version 3.3, screenPoint should be an instance of ScreenPoint. 

toScreen(mapPoint)

Converts a single map point to screen coordinate.
Return type: ScreenPoint
Parameters:
<Point> mapPoint Required Converts map coordinates to screen coordinates. 
Sample:
var screenPoint = map.toScreen(feature.geometry.getExtent().getCenter());
Event Details
[ On Style Events | Connect Style Event ]

basemap-change

Fired when the map's basemap is changed. Should be used in favor of onBaseChange. (Added at v3.5)
Event Object Properties:
<Object> current An object with basemapName, infos, and layers properties of the current basemap. See the object specifications table below for the structure of the current object.
<Object> previous An object with the basemapName and infos properties of the previous basemap. See the object specifications table below for the structure of the previous object.
Object Specifications:
<current>
<String> basemapName The "well known" name of the basemap, valid values for setBaseMap.
<Object[]> infos An array of objects containing essential information about the layer such as type, url, and isReference.
<Layer[]> layers An array of the map layers which compose the basemap.
<previous>
<String> basemapName The "well known" name of the basemap, valid values for SetBasemap
<Object[]> infos An array of objects containing essential information about the layer such as type, url, and isReference.

before-unload

Event is fired before the map gets destroyed. (Added at v3.9)
Event Object Properties:
<Map> map Specified the map to unload.

click

Fires when a user single clicks on the map using the mouse and the mouse pointer is within the map region of the HTML page. Should be used in favor of onClick. (Added at v3.5)
Event Object:
<MouseEvent> mouseEvent A standard DOM MouseEvent with additional properties mapPoint and screenPoint.

dbl-click

Fires when a user double clicks on the map using the mouse and the mouse pointer is within the map region of the HTML page. Should be used in favor of onDblClick. (Added at v3.5)
Event Object:
<MouseEvent> mouseEvent A standard DOM MouseEvent with additional properties mapPoint and screenPoint.

extent-change

Fires when the extent of the map has changed. Should be used in favor of onExtentChange. (Added at v3.5)
Event Object Properties:
<Point> delta The change in the x and y values from the previous extent. The Point x and y values are in screen units. This point acts as an anchor point, and this part of the map stays within the map region during the zoom process.
<Extent> extent Gets the extent when after the extent has changed.
<Boolean> levelChange When using ArcGIS Server tiled map services, the value is "true" when the user zooms to a new level. The value remains "false" during pan operations.
<LOD> lod When using ArcGIS Server tiled map services, this argument returns characteristics about the level of detail.
See also: extentsetExtent()

key-down

Fires when a keyboard key is pressed. Should be used in favor of onKeyDown. (Added at v3.5)
Event Object:
<KeyboardEvent> keyboardEvent A standard DOM KeyboardEvent.

key-up

Fires when a keyboard key is released. Should be used in favor of onKeyUp. (Added at v3.5)
Event Object:
<KeyboardEvent> keyboardEvent A standard DOM KeyboardEvent.

layer-add

Fires any time a layer is added to the map. Should be used in favor of onLayerAdd. (Added at v3.5)
Event Object Properties:
<Layer> layer The layer added to the map.
See also: addLayer()

layer-add-result

Fires after specified layer has been added to the map. Should be used in favor of onLayerAddResult. (Added at v3.5)
Event Object Properties:
<Error> error An optional parameter. The value of this parameter will be a JavaScript error object if an error occurred or null if the layer was added successfully.
<Layer> layer The layer that was added to the Map.

layer-remove

Fires after the layer has been removed. Should be used in favor of onLayerRemove. (Added at v3.5)
Event Object Properties:
<Layer> layer The removed layer.

layer-reorder

Fires when the map layer order has been changed. Should be used in favor of onLayerReorder. (Added at v3.5)
Event Object Properties:
<Number> index The index of the reordered layer.
<Layer> layer The reordered layer.
See also: reorderLayer()

layer-resume

Fires when a map layer resumes drawing. Should be used in favor of onLayerResume. (Added at v3.5)
Event Object Properties:
<Layer> layer The layer that has resumed drawing.

layer-suspend

Fires when a map layer suspends drawing. A layer is considered suspended when one of the following is true:
  • The layer is hidden.
  • The layer is not visible at the current map scale.
  • The layer is explicitly suspended by calling the Layer.suspend method.
(Added at v3.6)
Event Object Properties:
<Layer> layer The layer that has suspended drawing.
Sample:
map.on("layer-suspend", function(layer){
  console.log(layer.id + ' suspended');
});

layers-add-result

Fires after all layers are added to the map using the map.addLayers method. Should be used in favor of onLayersAddResult. (Added at v3.5)
Event Object Properties:
<Object[]> layers An array of objects, each of which corresponds to a layer added to the map.
Object Specifications:
<layers>
<Error> error An optional parameter. If an error occurred, the value of this parameter will be a JavaScript error object. The value will be null if the corresponding layer was added successfully.
<Layer> layer Layer that was added to the map.
See also: addLayers()

layers-removed

Fires after all the layers have been removed. Should be used in favor of onLayersRemoved. (Added at v3.5)

layers-reordered

Fires when all the layers have been reordered. Should be used in favor of onLayersReordered. (Added at v3.5)
Event Object Properties:
<String[]> layerIds The reordered layer ids.

load

Fires when the first or base layer has been successfully added to the map. Should be used in favor of onLoad. (Added at v3.5)
Event Object Properties:
<Map> map Specifies the map that was loaded.

mouse-down

Fires when a mouse button is pressed down and the mouse cursor is in the map region of the HTML page. Should be used in favor of onMouseDown. (Added at v3.5)
Event Object:
<MouseEvent> mouseEvent A standard DOM MouseEvent with additional properties mapPoint and screenPoint.

mouse-drag

Fires while the mouse is being dragged until the mouse button is released. Should be used in favor of onMouseDrag. (Added at v3.5)
Event Object:
<MouseEvent> mouseEvent A standard DOM MouseEvent with additional properties mapPoint and screenPoint.

mouse-drag-end

Fires when a mouse button is released and the user stops dragging the mouse. Should be used in favor of onMouseDragEnd. (Added at v3.5)
Event Object:
<MouseEvent> mouseEvent A standard DOM MouseEvent with additional properties mapPoint and screenPoint.

mouse-drag-start

Fires when a mouse button is pressed down and the user starts to drag the mouse. Should be used in favor of onMouseDragStart. (Added at v3.5)
Event Object:
<MouseEvent> mouseEvent A standard DOM MouseEvent with additional properties mapPoint and screenPoint.

mouse-move

Fires any time the mouse pointer moves over the map region. A common use for this event is to show the current x,y coordinate of the map as the user moves the mouse pointer. Should be used in favor of onMouseMove. (Added at v3.5)
Event Object:
<MouseEvent> mouseEvent A standard DOM MouseEvent with additional properties mapPoint and screenPoint.

mouse-out

Fires when the mouse moves out of the map region of the HTML page. Should be used in favor of onMouseOut. (Added at v3.5)
Event Object:
<MouseEvent> mouseEvent A standard DOM MouseEvent with additional properties mapPoint and screenPoint.

mouse-over

Fires when the mouse moves into the map region of the HTML page. Should be used in favor of onMouseOver. (Added at v3.5)
Event Object:
<MouseEvent> mouseEvent A standard DOM MouseEvent with additional properties mapPoint and screenPoint.

mouse-up

Fires when the mouse button is released and the mouse pointer is within the map region of the HTML page. Should be used in favor of onMouseUp. (Added at v3.5)
Event Object:
<MouseEvent> mouseEvent A standard DOM MouseEvent with additional properties mapPoint and screenPoint.

mouse-wheel

Fires when the mouse wheel is scrolled. Should be used in favor of onMouseWheel. (Added at v3.5)
Event Object:
<MouseEvent> mouseEvent A standard DOM MouseEvent with additional properties mapPoint and screenPoint.

pan

Fires during the pan process. Should be used in favor of onPan. (Added at v3.5)
Event Object Properties:
<Point> delta The change in x,y values in screen units as the map is panning.
<Extent> extent The current extent of the map as the map is panning.
See also: extentsetExtent()

pan-end

Fires when the pan is complete. Should be used in favor of onPanEnd. (Added at v3.5)
Event Object Properties:
<Point> delta The change in x,y values in screen units from the starting screen point once the map is finished panning.
<Extent> extent The current extent of the map when panning ends.

pan-start

Fires when a user commences panning. Should be used in favor of onPanStart. (Added at v3.5)
Event Object Properties:
<Extent> extent The current extent of the map as the map is panning.

reposition

Fires when the map DIV is repositioned. Should be used in favor of onReposition. (Added at v3.5)
Event Object Properties:
<Number> x X-coordinate in screen units.
<Number> y Y-coordinate in screen units.

resize

Fires when the map's container has been resized. Should be used in favor of onResize. (Added at v3.5)
Event Object Properties:
<Extent> extent The extent of the map.
<Number> height The height of the map in pixels.
<Number> width The width of the map in pixels.
See also: resize()

time-extent-change

Fires when the map's timeExtent property is set. Should be used in favor of onTimeExtentChange. (Added at v3.5)
Event Object Properties:
<TimeExtent> timeExtent Fires when the map's timeExtent property is changed. Time aware layers listen for this event and update to only display content for the map's specified time extent.

unload

Fires when the page is refreshed. Should be used in favor of onUnload. (Added at v3.5)
Event Object Properties:
<Map> map Specified the map to unload.
See also: on("load")loaded

update-end

Fires after layers that are updating their content have completed. This event is often used in combination with update-start to display a 'Map is busy' or 'Loading...' message as visual feedback to the end-user. Should be used in favor of onUpdateEnd. (Added at v3.5)
Event Object Properties:
<Error> error An optional parameter whose value will be a JavaScript error object if an error occurred.

update-start

Fires when one or more layers begins updating their content. This event is often used in combination with update-end to display a 'Map is busy' or 'Loading...' message as visual feedback to the end-user. Should be used in favor of onUpdateStart. (Added at v3.5)

zoom

Fires during the zoom process. Should be used in favor of onZoom. (Added at v3.5)
Event Object Properties:
<Point> anchor The location of the mouse pointer. The Point x and y values are in screen units. This point acts as an anchor point, and this part of the map stays within the map region during the zoom process.
<Extent> extent Gets the extent during the zoom event.
<Number> zoomFactor The scale factor represents the amount as a percentage that the map zoomed in or out from the previous extent. A value of 2 means the map was zoomed in twice as far as the previous extent. A value of 0.5 means the map zoomed out twice as far as previously.
See also: extentsetExtent()

zoom-end

Fires when the zoom is complete. Should be used in favor of onZoomEnd. (Added at v3.5)
Event Object Properties:
<Point> anchor The location of the mouse pointer. The Point x and y values are in screen units. This point acts as an anchor point, and this part of the map stays within the map region during the zoom process.
<Extent> extent Gets the extent when the zoom event ends.
<Number> level Level of an ArcGISTiledMapServiceLayer after zoom is complete.
<Number> zoomFactor The scale factor represents the amount as a percentage that the map zoomed in or out from the previous extent. A value of 2 means the map was zoomed in twice as far as the previous extent. A value of 0.5 means the map zoomed out twice as far as previously.
See also: extentsetExtent()

zoom-start

Fires when a user commences zooming. Should be used in favor of onZoomStart. (Added at v3.5)
Event Object Properties:
<Point> anchor The location of the mouse pointer. The Point x and y values are in screen units. This point acts as an anchor point, and this part of the map stays within the map region during the zoom process.
<Extent> extent Gets the extent when the zoom event starts.
<Number> level Level of an ArcGISTiledMapServiceLayer before the zoom commences.
<Number> zoomFactor The scale factor represents the amount as a percentage that the map zoomed in or out from the previous extent. A value of 2 means the map was zoomed in twice as far as the previous extent. A value of 0.5 means the map zoomed out twice as far as previously.
See also: extentsetExtent()
Show Modal