Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Show current map extent
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample retrieves the coordinates of the lower left and upper right corners of the map extent, using the Map.extent property. Finding the extent of the map this way may be useful for doing more advanced things, such as panning the map to predetermined "bookmarks".Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Create Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("esri.map");
function init() {
var initialExtent = new esri.geometry.Extent({"xmin":244598,"ymin":6241389,"xmax":278995,"ymax":6264320,"spatialReference":{"wkid":102100}});
var map = new esri.Map("map", {
basemap: "streets-vector",
extent: initialExtent
});
dojo.connect(map, "onExtentChange", showExtent);
}
function showExtent(extent) {
var s = "";
s = "XMin: "+ extent.xmin.toFixed(2) + " "
+"YMin: " + extent.ymin.toFixed(2) + " "
+"XMax: " + extent.xmax.toFixed(2) + " "
+"YMax: " + extent.ymax.toFixed(2);
dojo.byId("info").innerHTML = s;
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div id="map" style="height:600px; border:1px solid #000;"></div>
<div id="info" style="padding:5px; margin:5px; background-color:#eee;"></div>
Creates a map with a basemap. The onExtentChanged event has been hooked up to show the extent printed below the map.
</body>
</html>