topic Re: problem with query on hover in ArcGIS JavaScript Maps SDK Questions

problem with query on hover

JillMaxwell — Wed, 13 Apr 2011 21:50:14 GMT

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;

            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>

Re: problem with query on hover

HemingZhu — Thu, 14 Apr 2011 12:39:14 GMT

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;

            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>

I looked at your map services: http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/PADUS_status/MapServer/0. The field State_Nm listed as numeric string. So your statement query.where ="State_Nm='South Carolina'"; would not work. Actually i tried it on your query page: http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/PADUS_status/MapServer/0//query. Change your query.where statement to query.where ="State_Nm='46'" (i don't know SC's code value in your layer, so i just guess it), you will get results back and u can go from there to test rest of your code. I did noticed that query returned a big number of graphics, so i am not sure your approach is going to work...

Re: problem with query on hover

JillMaxwell — Thu, 14 Apr 2011 18:53:23 GMT

I looked at your map services: http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/PADUS_status/MapServer/0. The field State_Nm listed as numeric string. So your statement query.where ="State_Nm='South Carolina'"; would not work. Actually i tried it on your query page: http://dingo.gapanalysisprogram.com/ArcGIS/rest/services/PADUS/PADUS_status/MapServer/0//query. Change your query.where statement to query.where ="State_Nm='46'" (i don't know SC's code value in your layer, so i just guess it), you will get results back and u can go from there to test rest of your code. I did noticed that query returned a big number of graphics, so i am not sure your approach is going to work...

Should I do this kind of query against a feature layer, or is it simply not feasible with a large dataset?

Re: problem with query on hover

HemingZhu — Thu, 14 Apr 2011 19:37:20 GMT

Should I do this kind of query against a feature layer, or is it simply not feasible with a large dataset?

A feature layer sounds like a good candidate. Narrow down your query.where clause or add a spatial filter to your query might be another option...

Re: problem with query on hover

derekswingley1 — Fri, 15 Apr 2011 16:17:52 GMT

Whichever one you end up going with (querytask or a feature layer), look into using maxAllowableOffset to generalize your geometries before they're sent to the client.

Re: problem with query on hover

JillMaxwell — Fri, 15 Apr 2011 23:06:56 GMT

OK, thanks for the tip. I got this to work, but when I zoom out to the whole country it's too slow the way it's written. Would there be a way to ask users to select a state, then identify the areas inside that state?

Re: problem with query on hover

derekswingley1 — Sat, 16 Apr 2011 03:55:51 GMT

That's possible, but did you try maxAllowableOffset? It's not talked about much but it will do exactly what you want: generalize geometries returned from your service for an appropriate scale.