Hide Table of Contents
View Set custom extent and spatial reference sample in sandbox
Set custom extent and spatial reference

Description

This sample shows how you can define a custom extent and spatial reference when you create a map.

At versions 1.0 and 1.1 of the ArcGIS JavaScript API, any map service layers you used were required to correspond with the map's spatial reference. Beginning at version 1.2, you can use dynamic map services that have a different spatial reference from the map. Although this gives you more flexibility of the layers you can use, the projection on the fly negatively affects performance.

Cached (tiled) layers in your map must still match the map's spatial reference.

Notice that the extent is specified in the map units used by the spatial reference (in this case, meters).

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>Dynamic Map Service Layer with Custom Projection and Extent</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
    
    <script src="https://js.arcgis.com/3.22/"></script>
    <script>
      dojo.require("esri.map");

      function init() {
        var customExtentAndSR = new esri.geometry.Extent(-20037506,-9823074,20037506,10214431,new esri.SpatialReference({"wkid":54052}));
        //create map with new custom spatial reference and extent.  The map will be in the Goode Homolosine Land projection
        var map = new esri.Map("map", { extent: customExtentAndSR });
        //map service layer has a default spatial reference of 4326.
        var mapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer");
        map.addLayer(mapServiceLayer);
      }

      dojo.ready(init);
    </script>

  </head>
  <body>
    <div id="map" class="claro" style="position:relative; width:1024px; height:512px; border:2px solid #000;background-color:#99CCFF;"></div>
  </body>
</html>