How do I set the extent in AMD?

ChrisSergent · ‎11-07-2014

I modified my code based on an example to set the extent, but it appears not to be working. 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/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"

});

// add imagery

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

map.addLayer(tiled);

// set operational layers

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 });

// add operational layers

map.addLayer(baseLayer);

map.addLayer(operationalLayer);

// set map extent

var extent = new Extent();

extent.xmin = 777229.03;

extent.ymin = 1133467.92;

extent.xmax = 848340.14;

extent.ymax = 1185634.58;

map.setExtent(extent);

}

);

</script>

</head>

</div>

</body>

</html>

TimWitt2 · ‎11-07-2014

This should do it:

<!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
            ) {
            var initialExtent = new Extent({"xmin":777229.03,"ymin":1133467.92,"xmax":848340.14,"ymax":1185634.58,"spatialReference":{"wkid":3435}});
                map = new Map("mapDiv", {
                    showAttribution: false,
                    sliderStyle: "large",
                    extent: initialExtent


                });
                    // add imagery
                    var tiled = new Tiled("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");
                    map.addLayer(tiled);
                    // set operational layers
                    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 });
                    // add operational layers
                    map.addLayer(baseLayer);
                    map.addLayer(operationalLayer);


                }
            );
           


        </script>
    </head>
    <body class="soria">
        <div id="mapDiv">
           
        </div>
       
    </body>
</html>

View solution in original post

TimWitt2 · ‎11-07-2014

This should do it:

<!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
            ) {
            var initialExtent = new Extent({"xmin":777229.03,"ymin":1133467.92,"xmax":848340.14,"ymax":1185634.58,"spatialReference":{"wkid":3435}});
                map = new Map("mapDiv", {
                    showAttribution: false,
                    sliderStyle: "large",
                    extent: initialExtent


                });
                    // add imagery
                    var tiled = new Tiled("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");
                    map.addLayer(tiled);
                    // set operational layers
                    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 });
                    // add operational layers
                    map.addLayer(baseLayer);
                    map.addLayer(operationalLayer);


                }
            );
           


        </script>
    </head>
    <body class="soria">
        <div id="mapDiv">
           
        </div>
       
    </body>
</html>

ChrisSergent · ‎11-07-2014

Thanks Tim. I am new to AMD. Some of it is still guess work for me, but this gets me closer to my starting template.

TimWitt2 · ‎11-07-2014

No problem, good thing you start using it though!