IdentifyTask always return no information available

3139
2
11-19-2015 09:39 PM
longcui
New Contributor II

Hi folks,

I am trying to create simple web to show map with time slider and identify function. The time slider works fine, but the identify function always returns "no information available". I have no clue what's wrong.

Here is the code:

<!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>Well completion dates for the Hugoton Gas Field Over Time</title>

   

    <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

    <style>

      html, body, #mapDiv {

        padding:0;

        margin:0;

        height:100%;

      }

      #mapDiv {

        position: relative;

      }

      #bottomPanel {

        left: 50%;

        margin: 0 auto;

        margin-left: -500px;

        position: absolute;

        bottom: 2.5em;

      }

      #timeInfo{

        border-radius: 4px;

        border: solid 2px #ccc;

        background-color: #fff;

        display: block;

        padding: 5px;

        position: relative;

        text-align: center;

        width: 1000px;

        z-index: 99;

      }

    </style>

    <script src="http://js.arcgis.com/3.14/"></script>

    <script>

      var map;

      require([

        "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/symbols/SimpleFillSymbol",

        "esri/symbols/SimpleLineSymbol",

        "esri/tasks/IdentifyTask",

        "esri/tasks/IdentifyParameters",

        "esri/dijit/Popup",

        "esri/TimeExtent", "esri/dijit/TimeSlider",

        "dojo/_base/array", "dojo/dom", "esri/Color",

        "dojo/dom-construct","dojo/domReady!"

      ], function(

       Map, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,

        SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,

        TimeExtent, TimeSlider,

        arrayUtils, dom, Color, domConstruct

      ) {

       

        var identifyTask, identifyParams;

        var popup = new Popup({

          fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

              new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))

        }, domConstruct.create("div"));

       

        map = new Map("mapDiv", {

          basemap: "streets",

          center: [-101.15, 37.604],

          zoom: 9,

          infoWindow: popup

        });

       

        map.on("load", mapReady);

       

        var opLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSWells/MapServer");

        opLayer.setVisibleLayers([0]);

        //apply a definition expression so only some features are shown

        var layerDefinitions = [];

        layerDefinitions[0] = "FIELD_KID=1000148164";

        opLayer.setLayerDefinitions(layerDefinitions);

        //add the gas fields layer to the map

        map.addLayers([opLayer]);

        map.on("layers-add-result", initSlider);

       

        function mapReady () {

          map.on("click", executeIdentifyTask);

          //create identify tasks and setup parameters

          identifyTask = new IdentifyTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSWells/MapServer");

          identifyParams = new IdentifyParameters();

          identifyParams.tolerance = 3;

          identifyParams.returnGeometry = true;

          identifyParams.layerIds = [0, 2];

          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;

          identifyParams.width = map.width;

          identifyParams.height = map.height;

        }

        function executeIdentifyTask (event) {

          identifyParams.geometry = event.mapPoint;

          identifyParams.mapExtent = map.extent;

          var deferred = identifyTask

            .execute(identifyParams)

            .addCallback(function (response) {

              // response is an array of identify result objects

              // Let's return an array of features.

              return arrayUtils.map(response, function (result) {

                var feature = result.feature;

                var layerName = result.layerName;

                feature.attributes.layerName = layerName;

                var parcelTemplate = new InfoTemplate("Illegal Dumping Request","Address");

                feature.setInfoTemplate(parcelTemplate);

                return feature;

              });

            });

          map.infoWindow.setFeatures([deferred]);

          map.infoWindow.show(event.mapPoint);

        }

        function initSlider() {

          var timeSlider = new TimeSlider({

            style: "width: 100%;"

          }, dom.byId("timeSliderDiv"));

          map.setTimeSlider(timeSlider);

         

          var timeExtent = new TimeExtent();

          timeExtent.startTime = new Date("1/1/1921 UTC");

          timeExtent.endTime = new Date("12/31/2009 UTC");

          timeSlider.setThumbCount(2);

          timeSlider.createTimeStopsByTimeInterval(timeExtent, 2, "esriTimeUnitsYears");

          timeSlider.setThumbIndexes([0,1]);

          timeSlider.setThumbMovingRate(2000);

          timeSlider.startup();

         

          //add labels for every other time stop

          var labels = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) {

            if ( i % 2 === 0 ) {

              return timeStop.getUTCFullYear();

            } else {

              return "";

            }

          });

         

          timeSlider.setLabels(labels);

         

          timeSlider.on("time-extent-change", function(evt) {

            var startValString = evt.startTime.getUTCFullYear();

            var endValString = evt.endTime.getUTCFullYear();

            dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString  + "<\/i>";

          });

        }

      });

    </script>

  </head>

  <body class="claro">

    <div id="mapDiv">

      <div id="bottomPanel">

        <div id="timeInfo">

          <div>Hugoton Gas Field Wells from <span id="daterange">1921 to 2009</span> (Completion date)</div>

          <div id="timeSliderDiv"></div>

        </div>

      </div>

    </div>

  </body>

</html>

0 Kudos
2 Replies
thejuskambi
Occasional Contributor III

You need to expand the search extent. Usually if you just pass a point for query/identify tasks, chances of getting a result back is less, unless it is a polygon layer. And you are trying to identify a pointl layer, the chance of a point intersecting another is very rare. Hence you need to provide a buffered geometry instead of point.

var extent = new Extent(event.mapPoint.X - 5, event.mapPoint.Y - 5, event.mapPoint.X + 5,event.mapPoint.Y + 5, map.spatialReference);

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Long Cui,

  You had several issues in your code:

  1. You needed the InfoTemplate require
  2. You should have specified a markerSymbol for your popup object not a fillSymbol
  3. Your inedtifyParams.layerIds was set to 0, 2 and your layer did not have a third sublayer
  4. You needed to set identifyParams.timeExtent
<!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>Well completion dates for the Hugoton Gas Field Over Time</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }

      #mapDiv {
        position: relative;
      }

      #bottomPanel {
        left: 50%;
        margin: 0 auto;
        margin-left: -500px;
        position: absolute;
        bottom: 2.5em;
      }

      #timeInfo{
        border-radius: 4px;
        border: solid 2px #ccc;
        background-color: #fff;
        display: block;
        padding: 5px;
        position: relative;
        text-align: center;
        width: 1000px;
        z-index: 99;
      }
    </style>

    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
      var map;
      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "esri/dijit/Popup",
        "esri/InfoTemplate",
        "esri/TimeExtent",
        "esri/dijit/TimeSlider",
        "dojo/_base/array",
        "dojo/dom",
        "esri/Color",
        "dojo/dom-construct",
        "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicMapServiceLayer, SimpleMarkerSymbol,
        SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
        InfoTemplate, TimeExtent, TimeSlider,
        arrayUtils, dom, Color, domConstruct
      ) {
        var identifyTask, identifyParams;

        var popup = new Popup({
          markerSymbol: new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([255,0,0]), 1),
            new Color([0,255,0,0.25]))
        }, domConstruct.create("div"));

        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-101.15, 37.604],
          zoom: 9,
          infoWindow: popup
        });

        map.on("load", mapReady);
        var opLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSWells/MapServer");
        opLayer.setVisibleLayers([0]);

        //apply a definition expression so only some features are shown
        var layerDefinitions = [];
        layerDefinitions[0] = "FIELD_KID=1000148164";
        opLayer.setLayerDefinitions(layerDefinitions);

        //add the gas fields layer to the map
        map.addLayers([opLayer]);

        map.on("layers-add-result", initSlider);

        function mapReady () {
          map.on("click", executeIdentifyTask);
          //create identify tasks and setup parameters
          identifyTask = new IdentifyTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSWells/MapServer");
          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 6;
          identifyParams.returnGeometry = true;
          identifyParams.layerIds = [0, 1];
          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
          identifyParams.width = map.width;
          identifyParams.height = map.height;
        }

        function executeIdentifyTask (event) {
          identifyParams.geometry = event.mapPoint;
          identifyParams.mapExtent = map.extent;
          identifyParams.timeExtent = map.timeExtent;
          var deferred = identifyTask
            .execute(identifyParams)
            .addCallback(function (response) {
              // response is an array of identify result objects
              // Let's return an array of features.
              return arrayUtils.map(response, function (result) {
                console.info(result);
                var feature = result.feature;
                var layerName = result.layerName;

                feature.attributes.layerName = layerName;
                var taxParcelTemplate = new InfoTemplate("Illegal Dumping Request", "${*}");
                feature.setInfoTemplate(taxParcelTemplate);
                console.info(feature);
                return feature;
              });
            });

          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(event.mapPoint);
        }

        function initSlider() {
          var timeSlider = new TimeSlider({
            style: "width: 100%;"
          }, dom.byId("timeSliderDiv"));
          map.setTimeSlider(timeSlider);

          var timeExtent = new TimeExtent();
          timeExtent.startTime = new Date("1/1/1921 UTC");
          timeExtent.endTime = new Date("12/31/2009 UTC");
          timeSlider.setThumbCount(2);
          timeSlider.createTimeStopsByTimeInterval(timeExtent, 2, "esriTimeUnitsYears");
          timeSlider.setThumbIndexes([0,1]);
          timeSlider.setThumbMovingRate(2000);
          timeSlider.startup();

          //add labels for every other time stop
          var labels = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) {
            if ( i % 2 === 0 ) {
              return timeStop.getUTCFullYear();
            } else {
              return "";
            }
          });

          timeSlider.setLabels(labels);

          timeSlider.on("time-extent-change", function(evt) {
            var startValString = evt.startTime.getUTCFullYear();
            var endValString = evt.endTime.getUTCFullYear();
            dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString  + "<\/i>";
          });
        }
      });
    </script>
  </head>

  <body class="claro">
    <div id="mapDiv">
      <div id="bottomPanel">
        <div id="timeInfo">
          <div>Hugoton Gas Field Wells from <span id="daterange">1921 to 2009</span> (Completion date)</div>
          <div id="timeSliderDiv"></div>
        </div>
      </div>
    </div>
  </body>
</html>