Hide Table of Contents
View Any projection sample in sandbox
Any projection

Description

At version 3.3, the API supports using only vector layers in the map (no basemap required). This means that features from a feature service can be displayed in any projection. To use a projection other than a service's default, define the Map's spatial reference by specifying the extent constructor option. The spatial reference of the extent will be used as the map's spatial reference. When requests are made for features from a service, the map's spatial reference will be included which tells the service to re-project features before sending them to the client. Use this sample to explore various projections and to create extents for use in your own applications.

Note that the bulk of the JavaScript used in this application is contained in the app.js file.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>ArcGIS API for JavaScript | Extent/Bounds Helper</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
    <link rel="stylesheet" href="css/styles.css">

    <script src="https://js.arcgis.com/3.21/"></script>
    <script src="js/app.js"></script>

  </head>

  <body class="tundra">
    <div data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map"
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'center'">

        <div id="controls">
          <label>Center:</label>
          <span id="center"></span>
          <br>
          <label>Extent:</label>
          <span id="extent"></span>
          <hr>
          <div id="instructions">
            <p>When JSON above is highlighted, press ctrl/cmd + c to copy it to your clipboard. Click on JSON to highlight it.</p>
            <p>Select from the list below or type in a WKID. For other ID's, check out the list of
            <a href="../../jshelp/pcs.html">Projected Coordinate Systems</a>
            as well as <a href="../../jshelp/gcs.html">Geographic Coordinate Systems</a>.</p>
          </div>
          <div id="wkidWrapper">
            <label for="wkid">WKID:</label>
            <select id="wkid" name="wkid" class="wkidList"
                    data-dojo-type="dijit/form/ComboBox">
              <option value="102003">102003 (Albers)</option>
              <option value="102100">102100 (Web Merctor)</option>
              <option value="4326">4326 (WGS84)</option>
              <option value="2243">2243 (Idaho West, State Plane)</option>
              <option value="2244">2244 (Indiana East, State Plane)</option>
              <option value="2248">2248 (Maryland, State Plane)</option>
              <option value="3995">3995 (Arctic Polar Stereographic)</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>