Zoom to layer when layer is turned on

KenGalluccio — Wed, 02 Jul 2014 16:22:43 GMT

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>

Re: Zoom to layer when layer is turned on

JakeSkinner — Sat, 11 Dec 2021 18:09:36 GMT

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.

topic Zoom to layer when layer is turned on in ArcGIS JavaScript Maps SDK Questions

Zoom to layer when layer is turned on

Re: Zoom to layer when layer is turned on