jmaxwell1562

problem with query on hover

Discussion created by jmaxwell1562 on Apr 13, 2011
Latest reply on Apr 15, 2011 by DSwingley-esristaff
Hi:  I'm trying to adapt the example at
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/query/query_hover.html

However, I am not able to make it work.  I've looked at the sample code and some other examples, and I can't see where I went wrong. 

Any help would be appreciated.  Here's 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>Title</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/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;

function init() {
  var startExtent = new esri.geometry.Extent(-83.41, 31.98, -78.47, 35.28, new esri.SpatialReference({wkid:4326}));
map = new esri.Map("map",{extent:startExtent});

dojo.connect(map,"onLoad", initFunctionality);
 
map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/PADUS_status/MapServer"));
   
var gap = new esri.layers.ArcGISDynamicMapServiceLayer("http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/Ancillary/MapServer");
       map.addLayer(gap);  

}

function initFunctionality(map) {
 
   //build query task
  //var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
   var queryTask = new esri.tasks.QueryTask("http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/PADUS_status/MapServer/0");

//build query filter
  query = new esri.tasks.Query();
  query.returnGeometry = true;
  //query.outFields = ["NAME", "POP2000"];
        query.outFields =  ["P_Des_Nm","P_Loc_Nm","Own_Name","Mang_Name"];
  query.where = "State_Nm='South Carolina'";
       
       
         //identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.
        //If this null or not available the buffer operation will not work.  Otherwise it will do a http post to the proxy.
        //esriConfig.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
esriConfig.defaults.io.proxyUrl = "http://dingo.gapanalysisprogram.com/proxy/proxy.ashx";

esriConfig.defaults.io.alwaysUseProxy = false;

       
var infoTemplate = new esri.InfoTemplate();

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

        infoTemplate.setContent("<b>Owner: </b>${Own_Name}<br/>"

                             + "<b>Manager</b>${Mang_Name}<br/>"

                             + "<b>Location: </b>${P_Loc_Nm}");



        map.infoWindow.resize(245,125);

   
    queryTask.execute(query);
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([255,255,255,0.35]), 1),new dojo.Color([125,125,125,0.35]));



          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[i];

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

    Hover over a protected area in South Carolina to get more information.

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

  </body>

</html>

Outcomes