Graphics not displaying on Map and MouseOver not working

LeeBrannon · ‎05-31-2012

So I have pieced together some sample code with my data to try to display Place Name Point 'NAMES' in an infoWindow when a MouseOver occurs. I am using the Query task and resulting graphics to try to make this work. But no graphic points display on the map and the MouseOver triggers nothing. The query seems to work because the resulting featureSet has 44 features - exactly the number of Place Name Pts that it should have. So I am thinking the problem may be with the GraphicsLayer not getting the graphics successfully or the GraphicsLayer is not getting added to the map for some reason.

I currently have the !DOCTYPE setup as HTML5 (I think), but same problems exist using HTML 4.01 and XHTML 1.0.

Anyway, I can't seem to figure out the problem so any suggestions would be wonderful. Code for the .html is pasted below. All files attached as zip.

Thanks,
Lee

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" >
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
    <title>Lee Test HTML 1</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">

    <link rel="stylesheet" type="text/css" media="all" href="./appFiles/viewer2_Lee.css" >
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
   dojo.require("esri.geometry");
   dojo.require("esri.tasks.query");
   //dojo.require("esri.dijit.InfoWindow"); //Lee added

      var map;
      var spRef;
      var startExtent;
      setConfigProperties();

   // config settings for the TaxParcelViewer application
   // change the service urls and other properties to work with your GIS server.
   function setConfigProperties(){
    spRef = new esri.SpatialReference({ wkid: 2233 });
    startExtent = new esri.geometry.Extent(1963100.00, 1515500.00, 2444300.00, 1775700.00, spRef);
   }


      function init() {
        map = new esri.Map("mapDiv");
        //Add the CACHE tiled layer to the map.
        var cache = new esri.layers.ArcGISTiledMapServiceLayer("http://mcmap.montrosecounty.net:8399/arcgis/rest/services/MontroseCOcache/MapServer");
        map.addLayer(cache);
    //dojo.connect(map, "onExtentChange", extentChange);
    //listen for when map is loaded and then add query functionality
        dojo.connect(map, "onLoad", initPNP);
      }

   function initPNP(map) {
        //build query task
        var queryTaskHover = new esri.tasks.QueryTask("http://mcmap.montrosecounty.net:8399/arcgis/rest/services/MontroseCOfeatures/MapServer/8");

        //build query filter
        var queryH = new esri.tasks.Query();
        queryH.returnGeometry = true;
        queryH.outFields = ["NAME"];
        queryH.outSpatialReference = {"wkid":2233};
    queryH.where = "NAME LIKE '%'";
    //queryTaskHover.execute(queryH);

    //setup the infoTemplate
        var infoTemplateH = new esri.InfoTemplate();
        infoTemplateH.setTitle("Place Name");
        infoTemplateH.setContent("${NAME}");

        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(queryTaskHover, "onComplete", function(featureSet) {
          map.graphics.clear();

          var highlightSymbolH = new esri.symbol.SimpleMarkerSymbol();
     highlightSymbolH.setColor(new dojo.Color([254,22,0,1.0]));
     highlightSymbolH.setSize(16);
     highlightSymbolH.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE);
     var symbolH = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 12,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([38,115,0]), 1),new dojo.Color([0,0,255,1.0]));

          var pnpGraphicsLayer = 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++) {
            var graphic = featureSet.features;
            graphic.setSymbol(symbolH);
            graphic.setInfoTemplate(infoTemplateH);

            //Add graphic to the place name points graphics layer.
            pnpGraphicsLayer.add(graphic);
          }
          map.addLayer(pnpGraphicsLayer);
          map.graphics.enableMouseEvents();
          //listen for when the onMouseOver event fires on the pnpGraphicsLayer
          //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
          dojo.connect(pnpGraphicsLayer, "onMouseOver", function(evt) {
            map.graphics.clear(); //use the maps graphics layer as the highlight layer
            var contentH = evt.graphic.getContent();
            map.infoWindow.setContent(contentH);
            var titleH = evt.graphic.getTitle();
            map.infoWindow.setTitle(titleH);
            var highlightGraphicH = new esri.Graphic(evt.graphic.geometry,highlightSymbolH);
            map.graphics.add(highlightGraphicH);
            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();
          });
        });
        queryTaskHover.execute(queryH);
      }

      dojo.addOnLoad(init);
    </script>
</head>

<body class="claro">
    <div class="appTitle">
      
      <label>Parcel Viewer Test</label>
    </div>
        <br><br>

        <div id="mapArea" style="width:1400px; height:900px; border:1px solid #000;">
            <div id="mapDiv">
            </div>
        </div>
</body>

</html>

LeeBrannon · ‎06-06-2012

Finally got this issue resolved with Esri assistance!

Turns out the place name points layer in the map service I used for the query task did not have any geometry available to the service. So the query parameter to output geometry did not have anything to work with, hence no graphic points could show on my map. My fix was to just use another map service here that does have place name point geometry available. But, I believe the way to fix the layer from the problem map service would be to go back to the source MXD and make sure the SHAPE field is checked for visible (I had it not visible).