nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Querytask not showing the graphics on the map

IsraAlhamood

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!

code.txt.zip

Find more posts tagged with

Accepted answers

jskinner

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>

All comments

IsraAlhamood

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

IsraAlhamood

Thank you Jake,

it workerd.

jskinner

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

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?

jskinner

Hi Isra,

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.