Community
Select to view content in your preferred language

problem with query on hover

1163
6
04-13-2011 02:50 PM
JillMaxwell
by
Emerging Contributor
‎04-13-2011 02:50 PM
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>
0 Kudos
6 Replies
HemingZhu
by
Frequent Contributor
‎04-14-2011 05:39 AM
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...
0 Kudos
JillMaxwell
by
Emerging Contributor
‎04-14-2011 11:53 AM
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?
0 Kudos
HemingZhu
by
Frequent Contributor
‎04-14-2011 12:37 PM
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...
0 Kudos
derekswingley1
by
Deactivated User
‎04-15-2011 09:17 AM
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.
0 Kudos
JillMaxwell
by
Emerging Contributor
‎04-15-2011 04:06 PM
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?
0 Kudos
derekswingley1
by
Deactivated User
‎04-15-2011 08:55 PM
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.
0 Kudos