Hide Table of Contents
View Show current map extent sample in sandbox
Show current map extent

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.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.18/"></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",
          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>