lbrannon

Graphics not displaying on Map and MouseOver not working

Discussion created by lbrannon on May 31, 2012
Latest reply on Jun 6, 2012 by lbrannon
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>
<!-- html5 -->
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" >
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <!--improves the presentation and behavior on iOS devices-->
    <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" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/tundra/tundra.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[i];
            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">
      <!--
      <img class="appLogo" src="appFiles/graphics/logo.PNG" alt="Logo.png"> -->
      <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>

Attachments

Outcomes