Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
View live sample
Download as a zip file
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 theapp.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.29/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<link rel="stylesheet" href="css/styles.css">
<script src="https://js.arcgis.com/3.29/"></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>