IdentifyTask always return no information available

longcui · ‎11-19-2015

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>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Well completion dates for the Hugoton Gas Field Over Time</title>

<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>

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>

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

</div>

</body>

</html>

thejuskambi · ‎11-20-2015

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

RobertScheitlin__GISP · ‎11-20-2015

Long Cui,

You had several issues in your code:

You needed the InfoTemplate require
You should have specified a markerSymbol for your popup object not a fillSymbol
Your inedtifyParams.layerIds was set to 0, 2 and your layer did not have a third sublayer
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>