0

I am going to display the query results on infotemplate. I have written the code which I have mentioned below. After execution of this code just getting a point on map but not getting infowindow popup. Please suggest me where I have to modify my code to the query results on infotemplate.

<!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>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style>
  html, body, #map {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
  var map;
  require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "dojo/_base/Color", "dojo/domReady!"], function(Map, ArcGISDynamicMapServiceLayer, ImageParameters, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color) {
    map = new Map("map", {
      basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
      center: [-122.45, 37.75], // longitude, latitude
      zoom: 5
    }); 
    var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
      "opacity" : 0.5,        
      "infoTemplate" : infoTemplate
      });
      map.addLayer(dynamicMapServiceLayer);
      //map.on("click",executeQueryTask);
      dojo.connect(map, "onClick", executeQueryTask);

    var queryTask = new QueryTask("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");        

    var query = new Query();
     query.returnGeometry = true;
     query.outFields = ["STATE_NAME", "SUB_REGION", "POP2000"];
     //query.where = "STATE_NAME = 'WYOMING'";
    var infoTemplate = new InfoTemplate("${STATE_NAME}", "Sub Region : ${SUB_REGION}<br/> Population : ${POP2000}");

    var symbol = new SimpleMarkerSymbol();
    symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
    symbol.setSize(10);
    symbol.setColor(new Color([255,255,0,0.5]));

    function executeQueryTask(evt) {
        query.geometry = evt.mapPoint;  
        queryTask.execute(query,showResults);
    }
    function showResults(featureSet) {  
        map.graphics.clear();
  //Performance enhancer - assign featureSet array to a single variable.
  var resultFeatures = featureSet.features;
  //Loop through each feature returned
  for (var i=0, il=resultFeatures.length; i<il; i++) {
    //Get the current feature from the featureSet.
    //Feature is a graphic
    var graphic = resultFeatures[i];
    graphic.setSymbol(symbol);

    //Set the infoTemplate.
    graphic.setInfoTemplate(infoTemplate);

    //Add graphic to the map graphics layer.
    map.graphics.add(graphic);
        }
    }       
  });
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
  • 1
    Which API version are you using? – Mintx Jul 27 '16 at 20:14
1

try this

  var map,mapPoint;

    require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "dojo/_base/Color", "dojo/domReady!"], function(Map, ArcGISDynamicMapServiceLayer, ImageParameters, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color) {
map = new Map("map", {
  basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
  center: [-122.45, 37.75], // longitude, latitude
  zoom: 5
});

//var imageParameters = new ImageParameters();
//imageParameters.format = "jpeg";

var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
  "opacity" : 0.5,        
  "infoTemplate" : infoTemplate
  });
  map.addLayer(dynamicMapServiceLayer);

  //map.on("click",executeQueryTask);
  dojo.connect(map, "onClick", executeQueryTask);

var queryTask = new QueryTask("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");        

var query = new Query();
 query.returnGeometry = true;
 query.outFields = ["STATE_NAME", "SUB_REGION", "POP2000"];
 //query.where = "STATE_NAME = 'WYOMING'";
var infoTemplate = new InfoTemplate("${STATE_NAME}", "Sub Region : ${SUB_REGION}<br/> Population : ${POP2000}");

var symbol = new SimpleMarkerSymbol();
symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setSize(10);
symbol.setColor(new Color([255,255,0,0.5]));

function executeQueryTask(evt) {
    mapPoint =evt.mapPoint;
    query.geometry = evt.mapPoint;
    //var params = {"Input_File":dataFile}

    queryTask.execute(query,showResults);
}
function showResults(featureSet) {

    map.graphics.clear();

    var resultFeatures = featureSet.features;

    for (var i=0, il=resultFeatures.length; i<il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic

var infoTemplate = new InfoTemplate("${STATE_NAME}", "Sub Region : ${SUB_REGION}<br/> Population : ${POP2000}");

  resultFeatures[i].setInfoTemplate(infoTemplate);
    }
     map.infoWindow.setFeatures(resultFeatures);
     map.infoWindow.show(mapPoint);

}

});
  • Hi emredelioglu, thanks for giving the suggession, but after modifying my code with your suggession, a new issue is raising. i.e. the infotemplate is not changing its query fields while clicking outside of our featurelayer. – msurya Jul 28 '16 at 13:41
  • add map.graphics.clear() after line map.infoWindow.clearFeatures(); if dont like it , change map.infoWindow.setFeatures(resultFeatures); map.infoWindow.show(mapPoint);to if (resultFeatures.length>0){ map.infoWindow.setFeatures(resultFeatures); map.infoWindow.show(mapPoint); } else{ map.infoWindow.hide(); } – emredelioglu Jul 28 '16 at 16:59
  • Thank, and i want to display all fields on my infoeindow, please suggest how can I get. – msurya Jul 29 '16 at 6:42
  • change new InfoTemplate("${STATE_NAME}", "Sub Region : ${SUB_REGION}<br/> Population : ${POP2000}"); to new InfoTemplate("${*}"); – emredelioglu Jul 29 '16 at 6:46
  • Thanks for your suggission, and I want to display another query results from var queryTask1 = new QueryTask("sampleserver6.arcgisonline.com/arcgis/rest/services/Census/…); layer for all fields in the same infowindow. Please suggest me how to do it. – msurya Jul 30 '16 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.