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
CSS
esri/map | Download source
esriAttribution | Represents the map attribution node.
.esriAttribution{
color:#B20000 !important;
font-weight:bold;
}
|
esriAttributionOpen | Represents 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
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
attribution | Attribution | Reference to the attribution widget created by the map when map attribution is enabled. |
autoResize | Boolean | Value is true when the map automatically resizes if the browser window or ContentPane widget enclosing the map is resized. |
backgroundColor | Color | The background color "behind" the map. |
basemapLayerIds | String[] | An array of IDs corresponding to the layers that make up the map's current basemap. |
extent | Extent | The current extent of the map in map units. |
fadeOnZoom | Boolean | Indicates if the fade effect is enabled while zooming. |
force3DTransforms | Boolean | When the mapNavigation mode is set to 'css-transforms', CSS3 transforms will be used for map navigation when supported by the browser. |
geographicExtent | Extent | The extent (or bounding box) of the map in geographic coordinates. |
graphics | GraphicsLayer | Provides access to the Map's GraphicsLayer. |
graphicsLayerIds | String[] | An array of the current GraphicsLayers in the map. |
height | Number | Current height of the map in screen pixels. |
id | String | Reference to HTML DIV or other element where the map is placed on the page. |
infoWindow | InfoWindowBase | Displays the InfoWindow on a map. |
isClickRecenter | Boolean | When true, the key sequence of shift then click to recenter the map is enabled. |
isDoubleClickZoom | Boolean | When true, double click zoom is enabled. |
isKeyboardNavigation | Boolean | When true, keyboard navigation is enabled. |
isMapNavigation | Boolean | Indicates whether all map navigation is enabled. |
isPan | Boolean | When true, map panning is enabled using the mouse. |
isPanArrows | Boolean | When true, pan arrows are displayed around the edge of the map. |
isPinchZoom | Boolean | Indicates whether pinch zoom navigation is enabled on touch-enabled devices. |
isRubberBandZoom | Boolean | When true, rubberband zoom is enabled. |
isScrollWheel | Boolean | It indicates whether map navigation based on mouse scroll wheel is enabled. |
isScrollWheelZoom | Boolean | When true, the mouse scroll wheel zoom is enabled. |
isShiftDoubleClickZoom | Boolean | When true, shift double click zoom is enabled. |
isZoomSlider | Boolean | When true, the zoom slider is displayed on the map. |
layerIds | String[] | Array of IDs corresponding to layers in the map, except for GraphicsLayers and FeatureLayers, which are maintained in map.graphicsLayerIds. |
loaded | Boolean | After the first layer is loaded, the value is set to true. |
navigationMode | String | Indicates whether the map uses CSS3 transformations when panning and zooming. |
position | Point | This point geometry in screen coordinates represent the top-left corner of the map container. |
root | Node | The DOM node that contains the container of layers, build-in info window, logo and slider. |
showAttribution | Boolean | When true, map attribution is enabled. |
snappingManager | SnappingManager | If snapping is enabled on the map using map.enableSnapping() this property provides access to the SnappingManager. |
spatialReference | SpatialReference | The spatial reference of the map. |
timeExtent | TimeExtent | The current TimeExtent for the map. |
visible | Boolean | Indicates whether map is visible. |
webglEnabled | Boolean | Indicates if WebGL is enabled for rendering FeatureLayers in the map. |
width | Number | Current width of the map in screen pixels. |
Methods
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
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 > mouseEvent | 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. |
dbl-click | <MouseEvent > mouseEvent | 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. |
extent-change | {
delta: <Point >,
extent: <Extent >,
levelChange: <Boolean >,
lod: <LOD >
} | Fires when the extent of the map has changed. |
key-down | <KeyboardEvent > keyboardEvent | Fires when a keyboard key is pressed. |
key-up | <KeyboardEvent > keyboardEvent | Fires 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-removed | | Fires 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 > mouseEvent | Fires when a mouse button is pressed down and the mouse cursor is in the map region of the HTML page. |
mouse-drag | <MouseEvent > mouseEvent | Fires while the mouse is being dragged until the mouse button is released. |
mouse-drag-end | <MouseEvent > mouseEvent | Fires when a mouse button is released and the user stops dragging the mouse. |
mouse-drag-start | <MouseEvent > mouseEvent | Fires when a mouse button is pressed down and the user starts to drag the mouse. |
mouse-move | <MouseEvent > mouseEvent | Fires any time the mouse pointer moves over the map region. |
mouse-out | <MouseEvent > mouseEvent | Fires when the mouse moves out of the map region of the HTML page. |
mouse-over | <MouseEvent > mouseEvent | Fires when the mouse moves into the map region of the HTML page. |
mouse-up | <MouseEvent > mouseEvent | Fires when the mouse button is released and the mouse pointer is within the map region of the HTML page. |
mouse-wheel | <MouseEvent > mouseEvent | Fires 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-start | | Fires 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. |
Old Events
onBasemapChange(event) | Fired when the map's basemap is changed. . |
onBeforeUnload(map) | Event is fired before the map gets destroyed. |
onClick(event) | 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. |
onDblClick(event) | 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. |
onExtentChange(extent, delta, levelChange, lod) | Fires when the extent of the map has changed. |
onKeyDown(keyEvent) | Fires when a keyboard key is pressed. |
onKeyUp(keyEvent) | Fires when a keyboard key is released. |
onLayerAdd(layer) | Fires any time a layer is added to the map. |
onLayerAddResult(layer, error) | Fires after specified layer has been added to the map. |
onLayerRemove() | Fires after the layer has been removed. |
onLayerReorder(layer, index) | Fires when the map layer order has been changed. |
onLayerResume(layer) | Fires when a map layer resumes drawing. |
onLayerSuspend(layer) | Fires when a map layer suspends drawing. |
onLayersAddResult(results) | Fires after all layers are added to the map using the map.addLayers method. |
onLayersRemoved() | Fires after all the layers have been removed. |
onLayersReordered(layerIds) | Fires when all the layers have been reordered. |
onLoad(map) | Fires when the first or base layer has been successfully added to the map. |
onMouseDown(event) | Fires when a mouse button is pressed down and the mouse cursor is in the map region of the HTML page. |
onMouseDrag(event) | Fires while the mouse is being dragged until the mouse button is released. |
onMouseDragEnd(event) | Fires when a mouse button is released and the user stops dragging the mouse. |
onMouseDragStart(event) | Fires when a mouse button is pressed down and the user starts to drag the mouse. |
onMouseMove(event) | Fires any time the mouse pointer moves over the map region. |
onMouseOut(event) | Fires when the mouse moves out of the map region of the HTML page. |
onMouseOver(event) | Fires when the mouse moves into the map region of the HTML page. |
onMouseUp(event) | Fires when the mouse button is released and the mouse pointer is within the map region of the HTML page. |
onMouseWheel(event) | Fires when the mouse wheel is scrolled. |
onPan(extent, delta) | Fires during the pan process. |
onPanEnd(extent, delta) | Fires when the pan is complete. |
onPanStart(extent, startPoint) | Fires when a user commences panning. |
onReposition(x, y) | Fires when the map DIV is repositioned. |
onResize(extent, width, height) | Fires when the map's container has been resized. |
onTimeExtentChange(timeExtent) | Fires when the map's timeExtent property is set. |
onUnload(map) | Fires when the page is refreshed. |
onUpdateEnd() | Fires after layers that are updating their content have completed. |
onUpdateStart() | Fires when one or more layers being updating their content. |
onZoom(extent, zoomFactor, anchor) | Fires during the zoom process. |
onZoomEnd(extent, zoomFactor, anchor, level) | Fires when the zoom is complete. |
onZoomStart(extent, zoomFactor, anchor, level) | Fires when a user commences zooming. |
Constructor Details
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
Reference to the attribution widget created by the map when map attribution is enabled. (Added at v3.1)
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
The background color "behind" the map. (Added at v3.20)
An array of IDs corresponding to the layers that make up the map's current basemap. (Added at v3.3)
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;
}
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
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
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);
});
...
});
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);
};
...
});
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);
}
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");
...
});
Displays the InfoWindow on a map. Default value is an instance of a Popup.
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;
};
...
});
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;
...
});
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;
...
});
Indicates whether all map navigation is enabled. See
Map navigation for more details.
(Added at v3.21) Default value: true
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;
...
});
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
Indicates whether pinch zoom navigation is enabled on touch-enabled devices. (Added at v3.21)
Default value: true
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;
...
});
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
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;
};
...
});
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;
...
});
When true, the zoom slider is displayed on the map. See
Map navigation for more details.
Known values: true | false
Default value: true
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);
}
}
After the first layer is loaded, the value is set to true.
Known values: true | false
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'
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)
The DOM node that contains the container of layers, build-in info window, logo and slider. (Added at v2.2)
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
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();
...
});
Indicates whether map is visible. (Added at v3.7)
Known values: true | false
Indicates if WebGL is enabled for rendering FeatureLayers in the map. (Added at v3.24)
Default value: true
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
Adds an Esri Layer to the map.
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);
...
});
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]);
...
});
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)
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. |
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)
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);
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.
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);
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)
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();
}
...
});
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();
}
...
});
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();
}
...
});
Disallows all map navigation except the slider and pan arrows. See
Map navigation for more details.
Disallows panning a map using the mouse. See
Map navigation for more details.
Sample:
function noPan() {
myMap.disablePan();
}
None
Sample: Disables the use of pinch zoom navigation for touch-enabled devices.
Disallows zooming in or out on a map using a bounding box. See
Map navigation for more details.
Sample: function noRubberBand() {
myMap.disableRubberBandZoom();
}
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)
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;
};
...
});
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();
}
...
});
Disables snapping on the map. (Added at v2.3)
Sample: map.disableSnapping();
Permits users to click on a map to center it. See
Map navigation for more details.
Sample:
function okClickRecenter() {
myMap.enableClickRecenter();
}
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();
}
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();
}
...
});
Permits users to pan a map using the mouse. See
Map navigation for more details.
Sample:
function panAgain() {
map.enablePan();
}
Enables the user to work with pinch zoom navigation for touch-enabled devices. (Added at v3.21)
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();
}
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)
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();
}
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();
}
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)
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();
Returns the name of the current basemap. (Added at v3.3)
Parameters:
<ScreenPoint > screenCoords |
Required |
The anchor point in screen units. |
Returns an individual layer of a map.
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]);
Return an array of layers visible at the current scale. (Added at v3.1)
Sample:
require([
"dojo/_base/array", ...
], function(array, ... ) {
var layers = map.getLayersVisibleAtScale(map.getScale());
array.forEach(layers,function(layer){
console.log(layer.id);
});
...
});
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)
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)
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)
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)
Returns the map scale at the center of the view. (Added at v3.1)
Sample:
var currentScale = map.getScale();
console.log('Scale: ' + currentScale);
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)
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.
Hides the zoom slider from the map. See
Map navigation for more details.
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.
Sample:
function south() {
map.panDown();
}
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.
Sample:
function west() {
map.panLeft();
}
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.
Sample:
function southWest() {
map.panLowerLeft();
}
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.
Sample:
function southEast() {
map.panLowerRight();
}
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.
Sample:
function east() {
map.panRight();
}
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.
Sample:
function north() {
map.panUp();
}
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.
Sample:
function northWest() {
map.panUpperLeft();
}
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.
Sample:
function northEast() {
map.panUpperRight();
}
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)
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. |
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);
Repositions the map DIV on the page. This method should be used after the map DIV has been repostioned.
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);
});
});
...
});
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. |
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. |
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.
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);
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);
...
});
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.
Parameters:
<Number > level |
Required |
The level ID. |
Sample:
map.setLevel(10);
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");
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)
Parameters:
<Number > scale |
Required |
A map scale value greater than 0. |
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);
...
});
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);
Show or hide the map. (Added at v3.7)
Parameters:
<Boolean > visible |
Required |
If true, map will be visible. |
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);
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)
Parameters:
<Number > zoom |
Required |
A valid zoom level value. |
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.
Shows the zoom slider on the map. See
Map navigation for more details.
Converts a single screen point to map coordinates.
Parameters:
<ScreenPoint > screenPoint |
Required |
Converts screen coordinates to map coordinates. Starting at version 3.3, screenPoint should be an instance of ScreenPoint. |
Converts a single map point to screen coordinate.
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 ]
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. |
Event is fired before the map gets destroyed. (Added at v3.9)
Event Object Properties:
<Map > map |
Specified the map to unload. |
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)
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)
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. |
Fires when a keyboard key is pressed. Should be used in favor of onKeyDown. (Added at v3.5)
Fires when a keyboard key is released. Should be used in favor of onKeyUp. (Added at v3.5)
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. |
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. |
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. |
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. |
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. |
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');
});
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. |
Fires after all the layers have been removed. Should be used in favor of onLayersRemoved. (Added at v3.5)
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. |
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. |
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)
Fires while the mouse is being dragged until the mouse button is released. Should be used in favor of onMouseDrag. (Added at v3.5)
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)
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)
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)
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)
Fires when the mouse moves into the map region of the HTML page. Should be used in favor of onMouseOver. (Added at v3.5)
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)
Fires when the mouse wheel is scrolled. Should be used in favor of onMouseWheel. (Added at v3.5)
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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)
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)
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. |
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. |
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. |
Fired when the map's basemap is changed. (Added at v3.3)
Event Object Properties:
<Object > event |
An object with current and previous objects.
See the object specifications tables below for the structure of the current and previous objects.
|
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. |
Event is fired before the map gets destroyed. (Added at v3.9)
Event Object Properties:
<Map > map |
Specified the map to unload. |
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.
Event Object Properties:
<Object > event |
The result can be any JavaScript MouseEvent, or the x and y coordinates of screenPoint or mapPoint. |
Sample:
dojo.connect(map, "onClick", function(evt) {
map.graphics.clear();
locator.locationToAddress(evt.mapPoint, 100);
});
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.
Event Object Properties:
<Object > event |
The result can be any JavaScript MouseEvent, or the x and y coordinates of screenPoint or mapPoint. |
Fires when the extent of the map has changed.
Event Object Properties:
<Extent > extent |
Gets the extent when after the extent has changed. |
<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. |
<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. |
Sample:
dojo.connect(map, "onExtentChange", function(extent){
var s = "";
s = "Xmin: "+ extent.xmin + " "
+ "Ymin: " + extent.ymin + " "
+ "Xmax: " + extent.xmax + " "
+ "Ymax: " + extent.ymax;
dojo.byId("info").innerHTML = s;
});
Fires when a keyboard key is pressed.
Event Object Properties:
<Object > keyEvent |
The keyCode is the Unicode number representing the pressed key. |
Fires when a keyboard key is released.
Event Object Properties:
<Object > keyEvent |
The keyCode is the Unicode number representing the pressed key. |
Fires any time a layer is added to the map.
Event Object Properties:
<Layer > layer |
The layer added to the map. |
Sample:
dojo.connect(map, "onLayerAdd", function() { console.log("Layer added"); });
Fires after specified layer has been added to the map. (Added at v2.0)
Event Object Properties:
<Layer > layer |
The layer added to the map. |
<Error > error |
Optional argument, available when an error occurs during the update. |
Fires after the layer has been removed. (Added at v1.3)
Fires when the map layer order has been changed.
Event Object Properties:
<Layer > layer |
The reordered layer. |
<Number > index |
The index of the reordered layer. |
Fires when a map layer resumes drawing. (Added at v3.1)
Event Object Properties:
<Layer > layer |
The layer that has resumed drawing. |
Sample:
dojo.connect(map,'onLayerSuspend',function(layer){
console.log(layer.id + ' suspended');
});
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.1) Event Object Properties:
<Layer > layer |
The layer that has suspended drawing. |
Sample:
dojo.connect(map,'onLayerSuspend',function(layer){
console.log(layer.id + ' suspended');
});
Fires after all layers are added to the map using the map.addLayers method. (Added at v2.0)
Event Object Properties:
<Object[] > results |
Array of result objects with the following properties
<Layer> layer
|
Layer added to the map.
|
<Boolean> success
|
True if the layer was successfully added.
|
<Error> error
|
Error message if the map was unable to add the layer.
|
|
Sample:
dojo.connect(map, "onLayersAddResult", initEditing);
function initEditing(results) {
var layerInfos = dojo.map(results, function(result) {
return {'featureLayer':result.layer};
});
});
Fires after all the layers have been removed. (Added at v1.3)
Fires when all the layers have been reordered. (Added at v1.1)
Event Object Properties:
<String[] > layerIds |
The reordered layer ids. |
Fires when the first or base layer has been successfully added to the map.
Event Object Properties:
<Map > map |
Specifies the map that was loaded. |
Sample:
dojo.connect(map, "onLoad", function() {
//after map loads, connect to listen to mouse move & drag events
dojo.connect(map, "onMouseMove", showCoordinates);
dojo.connect(map, "onMouseDrag", showCoordinates);
});
Fires when a mouse button is pressed down and the mouse cursor is in the map region of the HTML page.
Event Object Properties:
<Object > event |
The result can be any JavaScript MouseEvent, or the x and y coordinates of screenPoint or mapPoint. |
Fires while the mouse is being dragged until the mouse button is released.
Event Object Properties:
<Object > event |
The result can be any JavaScript MouseEvent, or the x and y coordinates of screenPoint or mapPoint. |
Sample:
dojo.connect(map, "onMouseDrag", function(evt){
//get mapPoint from event and display the mouse coordinates
var mp = evt.mapPoint;
dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
});
Fires when a mouse button is released and the user stops dragging the mouse.
Event Object Properties:
<Object > event |
The result can be any JavaScript MouseEvent, or the x and y coordinates of screenPoint or mapPoint. |
Fires when a mouse button is pressed down and the user starts to drag the mouse.
Event Object Properties:
<Object > event |
The result can be any JavaScript MouseEvent, or the x and y coordinates of screenPoint or mapPoint. |
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.
Event Object Properties:
<Object > event |
The result can be any JavaScript MouseEvent, or the x and y coordinates of screenPoint or mapPoint. |
Sample:
dojo.connect(map, "onMouseMove", function(evt){
//get mapPoint from event and display the mouse coordinates
var mp = evt.mapPoint;
dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
});
Fires when the mouse moves out of the map region of the HTML page.
Event Object Properties:
<Object > event |
The result can be any JavaScript MouseEvent, or the x and y coordinates of screenPoint or mapPoint. |
Fires when the mouse moves into the map region of the HTML page.
Event Object Properties:
<Object > event |
The result can be any JavaScript MouseEvent, or the x and y coordinates of screenPoint or mapPoint. |
Fires when the mouse button is released and the mouse pointer is within the map region of the HTML page.
Event Object Properties:
<Object > event |
The result can be any JavaScript MouseEvent, or the x and y coordinates of screenPoint or mapPoint. |
Fires when the mouse wheel is scrolled.
Event Object Properties:
<Object > event |
The returned object contains screenPoint, mapPoint, and Graphic. |
Fires during the pan process.
Event Object Properties:
<Extent > extent |
The current extent of the map as the map is panning. |
<Point > delta |
The change in x,y values in screen units as the map is panning. |
Fires when the pan is complete.
Event Object Properties:
<Extent > extent |
The current extent of the map as the map is panning. |
<Point > delta |
The change in x,y values in screen units from the starting screen point once the map is finished panning. |
Fires when a user commences panning.
Event Object Properties:
<Extent > extent |
The current extent of the map as the map is panning. |
<Point > startPoint |
When using a mouse, the starting point in screen units where the mouse was clicked. If the keyboard is used, the starting point is 0,0. |
Fires when the map DIV is repositioned.
Event Object Properties:
<Number > x |
X-coordinate in screen units. |
<Number > y |
Y-coordinate in screen units. |
Fires when the map's container has been resized.
Event Object Properties:
<Extent > extent |
The extent of the map. |
<Number > width |
The width of the map in pixels. |
<Number > height |
The height of the map in pixels. |
Fires when the map's timeExtent property is set. (Added at v2.0)
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. |
Fires when the page is refreshed.
Event Object Properties:
<Map > map |
Specified the map to unload. |
Fires after layers that are updating their content have completed. This event is often used in combination with onUpdateStart to display a "Map is busy" or "Loading..." message as visual feedback to the end-user. (Added at v2.2)
Sample:
dojo.connect(map,"onUpdateEnd",function(){
esri.hide(dojo.byId("status"));
});
Fires when one or more layers being updating their content. This event is often used in combination with onUpdateEnd to display a "Map is busy" or "Loading..." message as visual feedback to the end-user. (Added at v2.2)
Sample:
dojo.connect(map,"onUpdateEnd",function(){
esri.hide(dojo.byId("status"));
});
dojo.connect(map,"onUpdateStart",function(){
esri.show(dojo.byId("status"));
});
//Map div with loading text
<div id="map" style="position:relative; width:1024px; height:512px; border:1px solid #000;">
<span id="status" style="position: absolute; z-index: 100; right: 5px; top: 5px;">
Loading...
</span>
</div>
//CSS to style the loading text
#status {
background-color: black;
color: white;
padding: 3px;
border: solid 1px white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Fires during the zoom process.
Event Object Properties:
<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. |
<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. |
Fires when the zoom is complete.
Event Object Properties:
<Extent > extent |
Gets the extent when the zoom event ends. |
<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. |
<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. |
<Number > level |
Level of an ArcGISTiledMapServiceLayer after zoom is complete. |
Fires when a user commences zooming.
Event Object Properties:
<Extent > extent |
Gets the extent when the zoom event starts. |
<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. |
<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. |
<Number > level |
Level of an ArcGISTiledMapServiceLayer before the zoom commences. |