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>
