Trouble with InfoWindow on mouse hover

BrettGreenfield__DNR_ — Fri, 10 Dec 2021 20:58:00 GMT

I'm a total newbie when it comes to javascript, so please bear with my ignorance!

I've been trying to recreate the Load query results, show on hover example in the help section, and I've been running into some trouble. First off, why do I need to do a query task, then add the feature set to the map as a graphic, in order to get an info window on mouse hover? I'm able to get an info window with a click pretty simply, without having to use a query at all.

Secondly, in the example code, what if I wanted the query to produce EVERY county, and not just those in South Carolina? I ask because for the layers I'll be working with, I do want to be able to mouse over every feature and get an info window. For example, look at my code below:

<!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 geometry, results as an InfoWindow onHover</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");

      function init() {
        //create map
        var map = new esri.Map("mapDiv");
        //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://www.mdimap.us/ArcGIS/rest/services/ImageryBaseMapsEarthCover/MD.State.MDiMap_Gazetteer83M/MapServer");
  map.addLayer(layer);
  
      }

      function initFunctionality(map) {
        //build query task
        var queryTask = new esri.tasks.QueryTask("http://www.mdimap.us/ArcGIS/rest/services/Biota/MD.State.BayOysters/MapServer/0");

        //build query filter
        var query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = ["BARNAME", "OTHERNAMES", "YATESBRS"];

        var infoTemplate = new esri.InfoTemplate();
        infoTemplate.setTitle("Historic Oyster Bar");
        infoTemplate.setContent("<b>Name</b>: ${BARNAME}<br/>"
                             + "<b>Other Names</b>: ${OTHERNAMES}<br/>");

        map.infoWindow.resize(245,125);

        //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.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3), new dojo.Color([125,125,125,0.35]));
          //var highlightSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3);
          var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([168, 112, 0, 255]), 1),new dojo.Color([255,255,255,0.0]));

          var countiesGraphicsLayer = new esri.layers.GraphicsLayer();
          //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 counties graphics layer.
            countiesGraphicsLayer.add(graphic);
          }
          map.addLayer(countiesGraphicsLayer);
          map.graphics.enableMouseEvents();
          //listen for when the onMouseOver event fires on the countiesGraphicsLayer
          //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
          dojo.connect(countiesGraphicsLayer, "onMouseOver", function(evt) {
            map.graphics.clear();  //use the maps graphics layer as the highlight layer
            var content = evt.graphic.getContent();
            map.infoWindow.setContent(content);
            var title = evt.graphic.getTitle();
            map.infoWindow.setTitle(title);
            var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);
            map.graphics.add(highlightGraphic);
            map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
          });

          //listen for when map.graphics onMouseOut event is fired and then clear the highlight graphic
          //and hide the info window
          dojo.connect(map.graphics, "onMouseOut", function(evt) {
            map.graphics.clear();
            map.infoWindow.hide();
          });
        });

        queryTask.execute(query);
      }
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
   <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
  </body>
</html>

When I run this, I expect every feature in the queried layer to be produced on the map; however, none of them are! I determined that I needed to add a filter, such as "query.where = "YATESBRS = 'Y'";. This would display every feature containing a value of "Y" in the YATESBRS field; but I want every feature to be displayed. How can I accomplish this?

topic Trouble with InfoWindow on mouse hover in ArcGIS JavaScript Maps SDK Questions

Trouble with InfoWindow on mouse hover