Onclick event for a sublayer in a ArcGISDynamicMapServiceLayer

2735
2
Jump to solution
11-25-2014 02:39 AM
NEvatt
by
New Contributor III

Hi there,

I have an ArcGISDynamicMapServiceLayer which consists of maybe 40 or so sublayers and I would like to trigger an onclick event for a specific sublayer within an ArcGISDynamicMapServiceLayer.  For instance, if I select a polygon of the sublayer, I want to create a chart in a seperate div. This is pretty easy to do with FeatureLayers, ie:

var featureLayer = new esri.layers.FeatureLayer("https://blah blah blah", { options  });

featureLayer.on("click", function (evt) {

     // Do something

});

However, I am not sure if this is possible with ArcGISDynamicMapServiceLayer.

The reason that I am hoping to add an event to a sublayer is that i need the sublayers to sit underneath the top layer in a table of contents view. The only other way that I can come up with is to put several featureLayers together and somehow group them in a group layer within the table of contents.  I am also not sure how to do this, but in theory this could be possible. 

Any ideas?

thanks,

Nat

0 Kudos
1 Solution

Accepted Solutions
JakeSkinner
Esri Esteemed Contributor

Hi N Evatt,

You can use the IdentifyTask class to do this.  Below is an example:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Sample Map</title>

    <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/ArcGISDynamicMapServiceLayer", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters",
        "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicMapServiceLayer, IdentifyTask, IdentifyParameters,
        dom, on, array
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-81.792107, 26.150807],
          zoom: 8
        });   
        
        map.on("load", initFunctionality);

        var dynamicLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer", {
          opacity: 0.5
        });

        map.addLayer(dynamicLayer);  
        
        function initFunctionality () {
          map.on("click", doIdentify);

          identifyTask = new IdentifyTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer");

          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 3;
          identifyParams.returnGeometry = true;
          identifyParams.layerIds = [0, 3];
          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
          
          on(identifyTask, "complete", function(event){
            array.forEach(event.results, function(feature){
              if(feature.layerName == "Counties"){
                //Do Something
              }
            })            
          })
        }

        function doIdentify (event) {
          map.graphics.clear();
          identifyParams.geometry = event.mapPoint;
          identifyParams.mapExtent = map.extent;
          identifyTask.execute(identifyParams)
        } 
        
      });
    </script>
  </head>
  
  <body>
    
    <div id="mapDiv"></div>

  </body>
</html>

View solution in original post

2 Replies
JakeSkinner
Esri Esteemed Contributor

Hi N Evatt,

You can use the IdentifyTask class to do this.  Below is an example:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Sample Map</title>

    <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/ArcGISDynamicMapServiceLayer", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters",
        "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicMapServiceLayer, IdentifyTask, IdentifyParameters,
        dom, on, array
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-81.792107, 26.150807],
          zoom: 8
        });   
        
        map.on("load", initFunctionality);

        var dynamicLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer", {
          opacity: 0.5
        });

        map.addLayer(dynamicLayer);  
        
        function initFunctionality () {
          map.on("click", doIdentify);

          identifyTask = new IdentifyTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer");

          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 3;
          identifyParams.returnGeometry = true;
          identifyParams.layerIds = [0, 3];
          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
          
          on(identifyTask, "complete", function(event){
            array.forEach(event.results, function(feature){
              if(feature.layerName == "Counties"){
                //Do Something
              }
            })            
          })
        }

        function doIdentify (event) {
          map.graphics.clear();
          identifyParams.geometry = event.mapPoint;
          identifyParams.mapExtent = map.extent;
          identifyTask.execute(identifyParams)
        } 
        
      });
    </script>
  </head>
  
  <body>
    
    <div id="mapDiv"></div>

  </body>
</html>
NEvatt
by
New Contributor III

Jake, that is great.  Thanks so much.  Did just what I needed it to

0 Kudos