Querytask not showing the graphics on the map

2955
6
Jump to solution
11-11-2014 09:38 PM
IsraAlhamood
New Contributor II


I'm trying to replicate this sample http://developers.arcgis.com/javascript/jssamples/query_hover.html

I just replaced the url in the querytask to my own and changes the formatting of the infoTemplate and the filtering of ther query to

match my own requirements and the graphics was not showing on the map. then, I changed the symbol type from simplefillSymbol to simple MarkerSymbol because I'm using points not polygons. and this also didn't work. I attached my code to see what changes I did to the original code.

help plz!

0 Kudos
1 Solution

Accepted Solutions
JakeSkinner
Esri Esteemed Contributor

Hi Isra,

You will want to make sure you're executing the query 'where' statement.  Also, you will want to change the highlightSymbol to a SimpleMarkerSymbol as well.  Below is a point data example you can refer to:

<!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>QueryTask with geometry, results as an InfoWindow onHover</title>

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

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

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

    <script>

      var map;

      require([

        "esri/map",

        "esri/graphic",

        "esri/InfoTemplate",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/SpatialReference",

        "esri/geometry/Extent",

        "esri/layers/GraphicsLayer",

        "esri/symbols/SimpleFillSymbol",

        "esri/symbols/SimpleLineSymbol",

        "esri/tasks/query",

        "esri/tasks/QueryTask",

        "esri/Color",

        "dojo/domReady!"

      ],

        function (

          Map, Graphic, InfoTemplate, SimpleMarkerSymbol, SpatialReference, Extent, GraphicsLayer,

          SimpleFillSymbol, SimpleLineSymbol, Query, QueryTask, Color

        ) {

          map = new Map("mapDiv", {

              basemap: "streets",

              center: [-81.792107, 26.150807],

              zoom: 8

            });

          map.on("load", setUpQuery);

          function setUpQuery () {

            var queryTask = new QueryTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0");

            //build query filter

            var query = new Query();

            query.returnGeometry = true;

            query.outFields = ["*"];

            query.outSpatialReference = { "wkid": 102100 };

            query.where = "st = 'FL'";

            var infoTemplate = new InfoTemplate();

            var content = "<b>City Name: </b>${areaname}<br/>" +

                          "<b>2000 Population: </b>${pop2000}";

            infoTemplate.setTitle("${areaname}");

            infoTemplate.setContent(content);

            map.infoWindow.resize(245, 125);

            //Can listen for complete event to process results

            //or can use the callback option in the queryTask.execute method.

            queryTask.on("complete", function (event) {

              map.graphics.clear();

              var highlightSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,

                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

                new Color([255,0,0]), 1),

                new Color([125, 125, 125, 0.35]));

              var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,

                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

                new Color([255,0,0]), 1),

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

              var features = event.featureSet.features;

              var countiesGraphicsLayer = new GraphicsLayer();

              //QueryTask returns a featureSet.

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

              var featureCount = features.length;

              for (var i = 0; i < featureCount; i++) {

                //Get the current feature from the featureSet.

                var graphic = features; //Feature is a graphic

                graphic.setSymbol(symbol);

                graphic.setInfoTemplate(infoTemplate);

                countiesGraphicsLayer.add(graphic);

              }

              map.addLayer(countiesGraphicsLayer);

              map.graphics.enableMouseEvents();

              //listen for when the mouse-over event fires on the countiesGraphicsLayer

              //when fired, create a new graphic with the geometry from event.graphic

              //and add it to the maps graphics layer

              countiesGraphicsLayer.on("mouse-over",function (event) {

                map.graphics.clear();  //use the maps graphics layer as the highlight layer

                var graphic = event.graphic;

                map.infoWindow.setContent(graphic.getContent());

                map.infoWindow.setTitle(graphic.getTitle());

                var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol);

                map.graphics.add(highlightGraphic);

                map.infoWindow.show(event.screenPoint,

                  map.getInfoWindowAnchor(event.screenPoint));

              });

              //listen for when map.graphics mouse-out event is fired

              //and then clear the highlight graphic

              //and hide the info window

              map.graphics.on("mouse-out", function () {

                map.graphics.clear();

                map.infoWindow.hide();

              });

            });

            queryTask.execute(query);

          }

        });

    </script>

  </head>

  <body class="claro">

    Hover over a city in Florida to get more information.

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

  </body>

</html>

View solution in original post

0 Kudos
6 Replies
JakeSkinner
Esri Esteemed Contributor

Hi Isra,

You will want to make sure you're executing the query 'where' statement.  Also, you will want to change the highlightSymbol to a SimpleMarkerSymbol as well.  Below is a point data example you can refer to:

<!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>QueryTask with geometry, results as an InfoWindow onHover</title>

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

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

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

    <script>

      var map;

      require([

        "esri/map",

        "esri/graphic",

        "esri/InfoTemplate",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/SpatialReference",

        "esri/geometry/Extent",

        "esri/layers/GraphicsLayer",

        "esri/symbols/SimpleFillSymbol",

        "esri/symbols/SimpleLineSymbol",

        "esri/tasks/query",

        "esri/tasks/QueryTask",

        "esri/Color",

        "dojo/domReady!"

      ],

        function (

          Map, Graphic, InfoTemplate, SimpleMarkerSymbol, SpatialReference, Extent, GraphicsLayer,

          SimpleFillSymbol, SimpleLineSymbol, Query, QueryTask, Color

        ) {

          map = new Map("mapDiv", {

              basemap: "streets",

              center: [-81.792107, 26.150807],

              zoom: 8

            });

          map.on("load", setUpQuery);

          function setUpQuery () {

            var queryTask = new QueryTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0");

            //build query filter

            var query = new Query();

            query.returnGeometry = true;

            query.outFields = ["*"];

            query.outSpatialReference = { "wkid": 102100 };

            query.where = "st = 'FL'";

            var infoTemplate = new InfoTemplate();

            var content = "<b>City Name: </b>${areaname}<br/>" +

                          "<b>2000 Population: </b>${pop2000}";

            infoTemplate.setTitle("${areaname}");

            infoTemplate.setContent(content);

            map.infoWindow.resize(245, 125);

            //Can listen for complete event to process results

            //or can use the callback option in the queryTask.execute method.

            queryTask.on("complete", function (event) {

              map.graphics.clear();

              var highlightSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,

                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

                new Color([255,0,0]), 1),

                new Color([125, 125, 125, 0.35]));

              var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,

                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

                new Color([255,0,0]), 1),

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

              var features = event.featureSet.features;

              var countiesGraphicsLayer = new GraphicsLayer();

              //QueryTask returns a featureSet.

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

              var featureCount = features.length;

              for (var i = 0; i < featureCount; i++) {

                //Get the current feature from the featureSet.

                var graphic = features; //Feature is a graphic

                graphic.setSymbol(symbol);

                graphic.setInfoTemplate(infoTemplate);

                countiesGraphicsLayer.add(graphic);

              }

              map.addLayer(countiesGraphicsLayer);

              map.graphics.enableMouseEvents();

              //listen for when the mouse-over event fires on the countiesGraphicsLayer

              //when fired, create a new graphic with the geometry from event.graphic

              //and add it to the maps graphics layer

              countiesGraphicsLayer.on("mouse-over",function (event) {

                map.graphics.clear();  //use the maps graphics layer as the highlight layer

                var graphic = event.graphic;

                map.infoWindow.setContent(graphic.getContent());

                map.infoWindow.setTitle(graphic.getTitle());

                var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol);

                map.graphics.add(highlightGraphic);

                map.infoWindow.show(event.screenPoint,

                  map.getInfoWindowAnchor(event.screenPoint));

              });

              //listen for when map.graphics mouse-out event is fired

              //and then clear the highlight graphic

              //and hide the info window

              map.graphics.on("mouse-out", function () {

                map.graphics.clear();

                map.infoWindow.hide();

              });

            });

            queryTask.execute(query);

          }

        });

    </script>

  </head>

  <body class="claro">

    Hover over a city in Florida to get more information.

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

  </body>

</html>

0 Kudos
IsraAlhamood
New Contributor II

Thank you that was really helpful. I've been looking for a sample for the points feature and I had no luck.

I have two more question though,

1- What if I don't wanna filter the query? I want all the features to appear on the map?

2- Is it possible to filter the query like this  query.where = "ROOM_NO = '1'";  And query.where = "ROOM_NO = '13'";  meaning to have it filtered with two statements or even more?

0 Kudos
JakeSkinner
Esri Esteemed Contributor

1.  You can use the following query:

query.where = "1=1";

2.  You can use the following query:

query.where = "ROOM_NO = '13' OR ROOM_NO = '1'"

IsraAlhamood
New Contributor II

Thank you Jake,

it workerd.

0 Kudos
IsraAlhamood
New Contributor II

Jake,

I'm wondering if there is a way to add a timer for the infoWindow. I inserted links in the content so whenever I hover on a feature, the infoWindow appears but when I go ahead to click on the link inside the content it disapears.

I've been looking for a way to add a timer and tried several methods but no luck.

Thank you

Isra

0 Kudos
JakeSkinner
Esri Esteemed Contributor

Hi Isra,

I would recommend creating a new thread for this question.