Zoom to layer when layer is turned on

KenGalluccio · ‎07-02-2014

I am new to javascript.
I have a web page with a web map that is hosted on ArcGIS Online,
and a legend that lets the user turn on and off the layers.
I want to zoom to the extent of the last layer that was turned on.

I am not sure how to get information about the layers in the web map, such as extent.
Thanks in advance.

Here is my 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>CDTA System Map</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"/>
    <link rel="stylesheet" href="http://developers.arcgis.com/en/javascript/samples/ags_createwebmapid/css/layout.css"/>

    <script src="http://js.arcgis.com/3.9/"></script>
        <script type="text/javascript" src="C:\inetpub\wwwroot\WebMaps\SystemM\jsapi_vsdoc10_v38.js"></script>
    <script>var dojoConfig = { parseOnLoad: true };</script>

    <script>
        require([
          "dijit/Menu",
          "dijit/MenuItem",
    "dijit/CheckedMenuItem",
    "dijit/form/CheckBox",

        "dojo/parser",
        "dojo/ready",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "esri/map",
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "esri/dijit/BasemapGallery",
        "esri/geometry/Extent",
        "dojo/domReady!"
      ], function (
        Menu, MenuItem, CheckedMenuItem, CheckBox,
        parser,
        ready,
        BorderContainer,
        ContentPane,
        dom,
        Map,
        urlUtils,
        arcgisUtils,
        Legend,
        Scalebar,
        BasemapGallery,
        Extent
      ) {
          ready(function () {

              parser.parse();

              arcgisUtils.createMap("c168e98d135845cb9fbd91b4b07d3da2", "map").then(function (response) {

                  var map = response.map;

                  //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
                  var basemapGallery = new esri.dijit.BasemapGallery({
                      showArcGISBasemaps: true,
                      map: map
                  }, "basemapGallery");
                  basemapGallery.startup();

                  dojo.connect(basemapGallery, "onError", function (msg) { console.log(msg) });

                  //add the scalebar
                  var scalebar = new Scalebar({
                      map: map,
                      scalebarUnit: "english"
                  });

                  var layerList = arcgisUtils.getLegendLayers(response);

                  if (layerList.length > 0) {
                      //create a list of layers

                      //                      layerList.reverse();

                      try {
                          dojo.forEach(layerList, function (layer) {

                              var checkBox = new CheckBox(
                              {
                                  name: "chk" + layer.title,
                                  checked: layer.layer.visible,
                                  value: layer.title,
                                  onChange: function () {
                                      if (layer.layer.featureCollection) {
                                          //turn off all the layers in the feature collection even
                                          //though only the main layer is listed in the layer list
                                          dojo.forEach(layer.layer.featureCollection.layers, function (layer) {
                                              layer.layerObject.setVisibility(!layer.layerObject.visible);
                                          });
                                      }
                                      else {

                                          layer.layer.setVisibility(!layer.layer.visible);

                                      } // if layer.layer.featureCollection
                                  } //onChange
                              }); //var checkBox

                              var layertitle = layer.title;
                              //                              alert(layer.title + "index is " + layertitle.search("Route1"));

                              switch (0) {
                                  case layertitle.search("Route905"):
                                      dojo.byId('routesBRT').appendChild(checkBox.domNode);
                                      var lbl = dojo.create("label", { innerHTML: layer.title + "</br>", "for": "chk" + layer.title }, dojo.byId('routesBRT'));
                                      break;
                                  case layertitle.search("Route763"):
                                      dojo.byId('commuter').appendChild(checkBox.domNode);
                                      var lbl = dojo.create("label", { innerHTML: layer.title + "</br>", "for": "chk" + layer.title }, dojo.byId('commuter'));
                                      break;
                                  case layertitle.search("Route520"):
                                      dojo.byId('express').appendChild(checkBox.domNode);
                                      var lbl = dojo.create("label", { innerHTML: layer.title + "</br>", "for": "chk" + layer.title }, dojo.byId('express'));
                                      break;
                                  case layertitle.search("Route100"):
                                      dojo.byId('neighborhood').appendChild(checkBox.domNode);
                                      var lbl = dojo.create("label", { innerHTML: layer.title + "</br>", "for": "chk" + layer.title }, dojo.byId('neighborhood'));
                                      break;
                                  case layertitle.search("Route6"):
                                  case layertitle.search("Route1"):
                                      dojo.byId('trunk').appendChild(checkBox.domNode);
                                      var lbl = dojo.create("label", { innerHTML: layer.title + "</br>", "for": "chk" + layer.title }, dojo.byId('trunk'));
                                      break;
                                  default:
                                      dojo.byId('my-toc').appendChild(checkBox.domNode);
                                      var lbl = dojo.create("label", { innerHTML: layer.title + "</br>", "for": "chk" + layer.title }, dojo.byId('my-toc'));
                              }
                          });
                      }
                      catch (ex) {
                          var s = ex.message;
                      } //try
                  } //(layerList.length > 0)

              });

          });

      });
    </script>

</head>

<body class="claro">

   <div data-dojo-type="dijit/layout/BorderContainer"
    <div id="mainWindow"
    data-dojo-props="design:'headline'"
    style="width:100%; height:100%;">

      <div id="map" class="roundedCorners shadow"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">

        <div style="position:absolute; right:20px; top:10px; z-Index:999; background-color:white">
          <div data-dojo-type="dijit/TitlePane"
               data-dojo-props="title:'Switch Basemap', closable:false, open:false">
            <div data-dojo-type="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery" ></div></div>
          </div>
        </div>
      </div>

      <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
        <h1 style="margin-left:0px; margin-bottom:0px;font-size:18px;">Routes</h1>
        <span style="font-size:smaller">---- dashed lines are limited service</span>
            
            <div id="my-toc"></div>
            <div id="routesBRT">
                <h2 style="margin-left:0px; margin-bottom:0px;font-size:15px;">BRT Routes</h2>
            </div>
            <div id="trunk">
                <h3 style="margin-left:0px; margin-bottom:0px;font-size:15px;">Trunk Routes</h3>
            </div>
            <div id="neighborhood">
                <h3 style="margin-left:0px; margin-bottom:0px;font-size:15px;">Neighborhood Routes</h3>
            </div>
            <div id="express">
                <h3 style="margin-left:0px; margin-bottom:0px;font-size:15px;">Express Routes</h3>
            </div>
            <div id="commuter">
                <h3 style="margin-left:0px; margin-bottom:0px;font-size:15px;">Commuter Routes</h3>
            </div>
      </div>
    </div>
</body>
</html>

JakeSkinner · ‎07-02-2014

I believe you could do something like below:

checkBox = new CheckBox({
    name : "chk" + layer.title,
    checked : layer.layer.visible,
    value : layer.title,
    onChange : function() {                                                                                        
      if (layer.layer.featureCollection) {
        dojo.forEach(layer.layer.featureCollection.layers, function(layer) {                          
          layer.layerObject.setVisibility(!layer.layerObject.visible);
        });
      } else {

        layer.layer.setVisibility(!layer.layer.visible);

      } 
      if(this.checked){
        map.setExtent(layer.layer.fullExtent);
      }
    } 
  });

However, your service will need to be in the same spatial reference (102100 - WGS 1984 Web Mercator (Aux Sphere)) as the map.