How do I get the current extent in AMD and then how do I set the current extent; I use a WKID of 3435.

ChrisSergent · ‎11-07-2014

Here is my code:

<!DOCTYPE html>

<html>

<head>

<title>Create a Map</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

}

</style>

var map;

require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/domReady!"], function (Map, Tiled, ArcGISDynamicMapServiceLayer

) {

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "large"

});

var tiled = new Tiled("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

var baseLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Base/MapServer");

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

map.addLayer(baseLayer);

map.addLayer(operationalLayer);

}

);

</script>

</head>

</div>

</body>

</html>

TimWitt2 · ‎11-07-2014

This is how it looks in your code:

<!DOCTYPE html>
<html>
    <head>
        <title>Create a Map</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
        <style>
            html, body, #mapDiv
            {
                padding:0;
                margin:0;
                height:100%;
            }
        </style>
        <script src="http://js.arcgis.com/3.11/"></script>
        <script>
            var map;
         
            require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
            "dojo/dom","dojo/on","dojo/parser","esri/geometry/Extent", "dojo/domReady!"], function (Map, Tiled, ArcGISDynamicMapServiceLayer,
            dom, on,parser,Extent
            ) {
                map = new Map("mapDiv", {
                    showAttribution: false,
                    sliderStyle: "large"
                 
                });


                var tiled = new Tiled("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");
                map.addLayer(tiled);
                var baseLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Base/MapServer");
                var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });
                map.addLayer(baseLayer);
                map.addLayer(operationalLayer);
           
                    map.on( "extent-change", showExtent);
          function showExtent(extent) {
        var s = "";
        s = "XMin: "+ extent.extent.xmin.toFixed(2) + " "
          +"YMin: " + extent.extent.ymin.toFixed(2) + " "
          +"XMax: " + extent.extent.xmax.toFixed(2) + " "
          +"YMax: " + extent.extent.ymax.toFixed(2);
        dom.byId("info").innerHTML = s;
      }
             
             
            }


                );


        </script>
    </head>
    <body class="soria">
        <div id="mapDiv">
            <div id="extentDiv">
            <div id="info" style="padding:5px; margin:5px; background-color:#eee;"></div>
        </div>
        </div>
     
    </body>
</html>

View solution in original post

TimWitt2 · ‎11-07-2014

Chris,

here is an amd example of how to get extent: Edit fiddle - JSFiddle

used this to set the extent: map-amd | API Reference | ArcGIS API for JavaScript

Tim

TimWitt2 · ‎11-07-2014

This is how it looks in your code:

<!DOCTYPE html>
<html>
    <head>
        <title>Create a Map</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
        <style>
            html, body, #mapDiv
            {
                padding:0;
                margin:0;
                height:100%;
            }
        </style>
        <script src="http://js.arcgis.com/3.11/"></script>
        <script>
            var map;
         
            require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
            "dojo/dom","dojo/on","dojo/parser","esri/geometry/Extent", "dojo/domReady!"], function (Map, Tiled, ArcGISDynamicMapServiceLayer,
            dom, on,parser,Extent
            ) {
                map = new Map("mapDiv", {
                    showAttribution: false,
                    sliderStyle: "large"
                 
                });


                var tiled = new Tiled("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");
                map.addLayer(tiled);
                var baseLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Base/MapServer");
                var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });
                map.addLayer(baseLayer);
                map.addLayer(operationalLayer);
           
                    map.on( "extent-change", showExtent);
          function showExtent(extent) {
        var s = "";
        s = "XMin: "+ extent.extent.xmin.toFixed(2) + " "
          +"YMin: " + extent.extent.ymin.toFixed(2) + " "
          +"XMax: " + extent.extent.xmax.toFixed(2) + " "
          +"YMax: " + extent.extent.ymax.toFixed(2);
        dom.byId("info").innerHTML = s;
      }
             
             
            }


                );


        </script>
    </head>
    <body class="soria">
        <div id="mapDiv">
            <div id="extentDiv">
            <div id="info" style="padding:5px; margin:5px; background-color:#eee;"></div>
        </div>
        </div>
     
    </body>
</html>