Community

problem with query task

3582
5
11-10-2010 05:45 AM
ErdenebaatarBatbaatar
by
New Contributor
‎11-10-2010 05:45 AM
Hi all!

I´m trying to make a web aplication with JavaScript API. there is a dynamic map service in my Arcgis server, it  I need for my work. I want to query one layer of map service.
By click on map should be displayed the results (infomation about point object) in Infowindow and should result a geometry on the map. I see the map, if I execute it in browser. but by click on point symbol it shows no Infowindow and no geometry on the map.
i think, it´s a swall problem, but I can´t find , where the problem is.

Thanks,
eba

my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>QueryTask with value, results as an InfoWindow</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <script type="text/javascript" language="Javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");

      var map, queryTask, query;
      var symbol, infoTemplate;

      function init() {
        //create map
       var startExtent = new esri.geometry.Extent({
          "xmin": 3479611.19575,
          "ymin": 5372668.28135,
          "xmax": 3572397.21575,
          "ymax": 5441668.28135,
          "spatialReference": {
          "wkid": 31493       }
   
      });

        //create map
        map = new esri.Map("mapDiv", {extent:startExtent});

        //create and add new layer
        var layer = new esri.layers.ArcGISDynamicMapServiceLayer("..../ArcGIS/rest/services/dienste/karte1/MapServer");
        map.addLayer(layer);

          dojo.connect(map, "onClick", executeQueryTask);

        //build query task
        queryTask = new esri.tasks.QueryTask("...../ArcGIS/rest/services/dienste/karte1/MapServer/0");

        //build query filter
        query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = ["OBJECTID","ObjTyp","Name","Strasse","PLZ","Ort"];


        //create the infoTemplate to be used in an InfoWindow.
        //All ${attributeName} will be substituted with the attribute value for current feature.
        infoTemplate = new esri.InfoTemplate("${OBJECTID}", "ObjektID : ${OBJECTID}<br/>Objekttype : ${ObjTyp}<br/> Name : ${Name}<br/>Strasse: ${Strasse}<br/>PLZ: ${PLZ}<br/>Ort: ${Ort}");

  //create symbol for selected features
  symbol = new esri.symbol.SimpleMarkerSymbol();
  symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
  symbol.setSize(30);
  symbol.setColor(new dojo.Color([255,255,0,0.5]));

      }

   function executeQueryTask(evt) {
        //set query based on what user typed in for population;
       
         query.geometry = evt.mapPoint;

        //execute query and call showResults on completion
        queryTask.execute(query,showResults);
      }


      function showResults(featureSet) {
        //remove all graphics on the maps graphics layer
        map.graphics.clear();

        //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the map.

  //Performance enhancer - assign featureSet array to a single variable.
  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 graphic = resultFeatures;
          graphic.setSymbol(symbol);

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

          //Add graphic to the map graphics layer.
          map.graphics.add(graphic);
        }
      }

      dojo.addOnLoad(init);
    </script>

  </head>
  <body class="tundra">
  <br/>
     


    <div id="mapDiv" style="width:1200px; height:800px; border:1px solid #000;"></div>


  </body>


</html>
0 Kudos
5 Replies
timgogl
by
New Contributor II
‎11-10-2010 11:09 AM
i have NOT use the query task, but i have used  identify and find, and both return results as an array of objects.

iset up your call back funciton like this:
function showResults(featureSet) {
  //remove all graphics on the maps graphics layer
  map.graphics.clear();

  //******* add this
  console.log(featureSet);
  console.log(featureSet.length);
  //*******


  //QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.

  //Performance enhancer - assign featureSet array to a single variable.
  var resultFeatures = featureSet.features;

  //****** add this
  console.log(resultFeatures);
  // im guessing this may be undefined. or an unexpected value

  console.log(resultFeatures.length);

  //******

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

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

      //Add graphic to the map graphics layer.
      map.graphics.add(graphic);
  }
}


then run it inside firefox with firebug open. see what gets traced out.

my guess would be you might want to loop over featureSet. but let us know what the console logs.
0 Kudos
timgogl
by
New Contributor II
‎11-10-2010 11:17 AM
ok. so querytask is a bit different then the ones im used to using... this is great cause im about to start working with this object i believe....

anyway, in your execute statment you have:
queryTask.execute(query,showResults);


ok. so query is the parameters to deal with. showResults is the callback function if the query is successful, if it is not successful, this will not run. so throw in the third paraments (an error call back) like this:

queryTask.execute(query,showResults,showErr);


then add the function to your code:
function showErr(){
  console.log('error in query execution');
}


if this last log pops up in firebug, then you know that something went wrong in the execution of the query.
0 Kudos
ErdenebaatarBatbaatar
by
New Contributor
‎11-11-2010 09:38 AM
Hi lowgas,

Thanks for the replay!

I tried your code. But that does not display the attributes and geometry. And Firefox Firebug shows me no errors.
I do not understand what the problem is. I saw many examples in internet.
and I downloaded one of they and tried without the images.
e.g. http://resources.esri.com/arcgisserver/apis/javascript/arcgis/index.cfm?fa=codeGalleryDetails&script....

I just wanted to try with attrubutes and geometry.
I published the file PhotoLocations.mxd to my arcgisserver as map service and used for javascript code. I think basically this shoud work.
I see the map, but no infowindow with attributes as before.  I wonder....

if this example works right with you, I pehaps have problem with the publishing of map service.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>QueryTask with geometry, results as an InfoWindow onHover containg image</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>
    <script type="text/javascript" language="Javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");

      function init() {
        var startExtent = new esri.geometry.Extent(-117.197, 34.035, -117.183, 34.045, new esri.SpatialReference({wkid:4326}));
        //create map
        var map = new esri.Map("mapDiv",{extent:startExtent});
        //listen for when map is loaded and then add query functionality
        dojo.connect(map, "onLoad", initFunctionality);

        //create and add new layer
        var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
        map.addLayer(layer);
       
        var overlaymap=new esri.layers.ArcGISDynamicMapServiceLayer("http://myserver/ArcGIS/rest/services/PhotoLocations/MapServer");
      map.addLayer(overlaymap);
       
      }

      function initFunctionality(map) {
        //build query task
        var queryTask = new esri.tasks.QueryTask("http://myserver/ArcGIS/rest/services/PhotoLocations/MapServer/0");

        //build query filter
        var query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = ["OID", "EXIF_ImageDescription", "EXIF_Copyright", "SourceFileName"];
        query.where = "OID >= 0";

        var infoTemplate = new esri.InfoTemplate();
        infoTemplate.setTitle("${SourceFileName}");
        infoTemplate.setContent("<b>Description: </b>${EXIF_ImageDescription}<br/>"
                                          + "<b>Copyrights: </b>${EXIF_Copyright}<br/>");

        map.infoWindow.resize(225,350);

        //Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method.
        dojo.connect(queryTask, "onComplete", function(featureSet) {
          map.graphics.clear();
          var highlightSymbol = new esri.symbol.PictureMarkerSymbol("images/i_camera.png", 40, 40);
          var symbol = new esri.symbol.PictureMarkerSymbol("images/i_camera.png", 40, 40);

          //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the map.
          for (var i=0, il=featureSet.features.length; i<il; i++) {
            //Get the current feature from the featureSet.
            //Feature is a graphic
            var graphic = featureSet.features;
            graphic.setSymbol(symbol);
            graphic.setInfoTemplate(infoTemplate);

            //Add graphic to the map graphics layer.
            map.graphics.add(graphic);
          }
          map.graphics.enableMouseEvents();
          dojo.connect(map.graphics, "onMouseOver", function(evt) {
            var content = evt.graphic.getContent();
            map.infoWindow.setContent(content);
            var title = evt.graphic.getTitle();
            map.infoWindow.setTitle(title);
            evt.graphic.setSymbol(highlightSymbol);

            map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
          });
          dojo.connect(map.graphics, "onMouseOut", function(evt) {
            map.infoWindow.hide();
            evt.graphic.setSymbol(symbol);
          });
        });

        queryTask.execute(query);
      }
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Hover over a camera icon to see image thumbnail and image description.
    <div id="mapDiv" style="width:1000px; height:800px; border:1px solid #000;"></div>
  </body>
</html>
0 Kudos
timgogl
by
New Contributor II
‎11-15-2010 08:27 AM
well, using firebug was not so much to see if there were errors (altho that is helpful too), but to see what is actually traced out when you use console.log.


if you are getting NO trace statements in firebugs console window, especially when you put this code inside your call back function

function showResults(featureSet) {
  //remove all graphics on the maps graphics layer
  map.graphics.clear();

  //******* add this
  console.log(featureSet);
  console.log(featureSet.length);
  //*******

///all the rest of your code


if console.log(featureSet); does not print anything in firebug console window, then this function was never triggered.. which means there was a problem in the execute, in which case, the error call back should have fired.
0 Kudos
HemingZhu
by
Occasional Contributor III
‎12-17-2010 10:23 AM
Hi lowgas,

Thanks for the replay!

I tried your code. But that does not display the attributes and geometry. And Firefox Firebug shows me no errors.
I do not understand what the problem is. I saw many examples in internet.
and I downloaded one of they and tried without the images.
e.g. http://resources.esri.com/arcgisserver/apis/javascript/arcgis/index.cfm?fa=codeGalleryDetails&script....

I just wanted to try with attrubutes and geometry.
I published the file PhotoLocations.mxd to my arcgisserver as map service and used for javascript code. I think basically this shoud work.
I see the map, but no infowindow with attributes as before.  I wonder....

if this example works right with you, I pehaps have problem with the publishing of map service.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>QueryTask with geometry, results as an InfoWindow onHover containg image</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>
    <script type="text/javascript" language="Javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");

      function init() {
        var startExtent = new esri.geometry.Extent(-117.197, 34.035, -117.183, 34.045, new esri.SpatialReference({wkid:4326}));
        //create map
        var map = new esri.Map("mapDiv",{extent:startExtent});
        //listen for when map is loaded and then add query functionality
        dojo.connect(map, "onLoad", initFunctionality);

        //create and add new layer
        var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
        map.addLayer(layer);
       
        var overlaymap=new esri.layers.ArcGISDynamicMapServiceLayer("http://myserver/ArcGIS/rest/services/PhotoLocations/MapServer");
      map.addLayer(overlaymap);
       
      }

      function initFunctionality(map) {
        //build query task
        var queryTask = new esri.tasks.QueryTask("http://myserver/ArcGIS/rest/services/PhotoLocations/MapServer/0");

        //build query filter
        var query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = ["OID", "EXIF_ImageDescription", "EXIF_Copyright", "SourceFileName"];
        query.where = "OID >= 0";

        var infoTemplate = new esri.InfoTemplate();
        infoTemplate.setTitle("${SourceFileName}");
        infoTemplate.setContent("<b>Description: </b>${EXIF_ImageDescription}<br/>"
                                          + "<b>Copyrights: </b>${EXIF_Copyright}<br/>");

        map.infoWindow.resize(225,350);

        //Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method.
        dojo.connect(queryTask, "onComplete", function(featureSet) {
          map.graphics.clear();
          var highlightSymbol = new esri.symbol.PictureMarkerSymbol("images/i_camera.png", 40, 40);
          var symbol = new esri.symbol.PictureMarkerSymbol("images/i_camera.png", 40, 40);

          //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the map.
          for (var i=0, il=featureSet.features.length; i<il; i++) {
            //Get the current feature from the featureSet.
            //Feature is a graphic
            var graphic = featureSet.features;
            graphic.setSymbol(symbol);
            graphic.setInfoTemplate(infoTemplate);

            //Add graphic to the map graphics layer.
            map.graphics.add(graphic);
          }
          map.graphics.enableMouseEvents();
          dojo.connect(map.graphics, "onMouseOver", function(evt) {
            var content = evt.graphic.getContent();
            map.infoWindow.setContent(content);
            var title = evt.graphic.getTitle();
            map.infoWindow.setTitle(title);
            evt.graphic.setSymbol(highlightSymbol);

            map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
          });
          dojo.connect(map.graphics, "onMouseOut", function(evt) {
            map.infoWindow.hide();
            evt.graphic.setSymbol(symbol);
          });
        });

        queryTask.execute(query);
      }
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Hover over a camera icon to see image thumbnail and image description.
    <div id="mapDiv" style="width:1000px; height:800px; border:1px solid #000;"></div>
  </body>
</html>


I looked at your code. It seems that queryTask is a local variable not a globel one. put it in your init function like this:

var queryTask, query;
function init() {
        var startExtent = new esri.geometry.Extent(-117.197, 34.035, -117.183, 34.045, new esri.SpatialReference({wkid:4326}));
        //create map
        var map = new esri.Map("mapDiv",{extent:startExtent});
        //listen for when map is loaded and then add query functionality
        dojo.connect(map, "onLoad", initFunctionality);

        //create and add new layer
        var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
        map.addLayer(layer);
       
        var overlaymap=new esri.layers.ArcGISDynamicMapServiceLayer("http://myserver/ArcGIS/rest/services/PhotoLocations/MapServer");
      map.addLayer(overlaymap);
       
       queryTask = new esri.tasks.QueryTask("http://myserver/ArcGIS/rest/services/PhotoLocations/MapServer/0");
      }
0 Kudos