AnsweredAssumed Answered

Hover over feature layer does not work!

Question asked by IsraAlhamood on Oct 27, 2014
Latest reply on Oct 27, 2014 by rscheitlin

<!DOCTYPE html>
<html class="no-js dj_ie dj_ie9 dj_contentbox" lang="en">

<head>

<meta charset="UTF-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta content="Mohammed Zainuddin" name="author" />


<title>U-Drive Locator</title>

<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="esri.css">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery-ui.min.js" ></script>
<script type="text/javascript" src="js/vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/cssrefresh.js"></script>

<!--[if IE]>
<script type="text/javascript">
  var console = { log: function() {} };
</script>
<![endif]-->

<script src="js/gsitu-head2.js"></script>
<script src="js/classie.js"></script>
<script src="js/gnmenu.js"></script>
<script src="js/init.js"></script>


<!-- Esri  -->
<link href="esri.css" rel="stylesheet">
<script src="identi1.dat"></script>
<script type="text/javascript"> var djConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1" type="text/javascript">
</script>

<script type="text/javascript"> dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("esri.map");
  dojo.require("esri.layers.FeatureLayer");
  dojo.require("esri.dijit.AttributeInspector");
  dojo.require("esri.tasks.query");
  dojo.require("dojo.number");
  dojo.require("dojo/on");
 
  var map;
  var extent = new esri.geometry.Extent({"xmin" :5564986.97 ,"ymin" : 3029612.93  ,"xmax": 5599383.63 ,"ymax": 3052544.04, "spatialReference":{"wkid": 102100}}); 
  function init()
  {
   
   map = new esri.Map("mapDiv");
     
   var basemap = new esri.layers.ArcGISTiledMapServiceLayer("basemapLink");
   map.addLayer(basemap);
  
   var template1 = "This is Template 1";
   var template2 =  "This is Template 2";

   var template3 =  "This is Template 3";

 

   // --------------------------------------------------------------------------------
  

   var infoTemplate = new esri.InfoTemplate();
   infoTemplate.setTitle("<b>${BUILDING_NO}</b>");     
   infoTemplate.setContent("default");
   map.infoWindow.resize(450,305);
          
   var featureLayer = new esri.layers.FeatureLayer("featureLayerLink", {
        mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
         outFields: ["*"],
         infoTemplate: infoTemplate
      });
     
      featureLayer.on("mouse-over",function (event) { 
                //map.graphics.clear();  //use the maps graphics layer as the highlight layer
                var graphic = event.graphic; 
                if (graphic.attributes.OBJECTID == 1) { 
                   infoTemplate.setContent(template1 ); 
                }
                else
                if(graphic.attributes.OBJECTID == 2){ 
                   infoTemplate.setContent(template2 ); 
                }
                else
                if(graphic.attributes.OBJECTID == 3){ 
                   infoTemplate.setContent(template3  ); 
                }  
              
   featureLayer.on("mouse-out", function ()
   {               
    map.graphics.clear();               
    map.infoWindow.hide();             
   });
  
   dojo.connect(featureLayer, "onMouseOver", function (evt) { 
            map.setMapCursor("pointer"); 
           }); 
         
         dojo.connect(featureLayer, "onMouseOut", function () { 
            map.setMapCursor("default"); 
              
         });

   //***********************************************************************
  
  
   map.addLayer(featureLayer);
         map.setExtent(extent );
            
   var resizeTimer;
  
   dojo.connect(map, 'onLoad', function(theMap) {
   dojo.connect(dijit.byId('map'), 'resize', function() {
   clearTimeout(resizeTimer);
   resizeTimer = setTimeout(function() {
   map.resize();
   map.reposition();
   }, 500);
     });
      });
  }
 
 
  dojo.ready(init); 
  dojo.addOnLoad(init);
</script>


</head>

<body>
 

 

   <!-- ******************************************************** Map ******************************************************* -->
 
  
    
     <div id="mapDiv">             </div>

  
  
  
   <!-- ******************************************************** Map ******************************************************* -->

 

 

 

</body>

</html>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
I have this code and I'm trying to display the infoTemplate on hover. I tried the above but it's not working. However, it's working when I click on the feature points(it displays the right template depending on the OBJECTI). but I want it to work on hover too it won't even change the mouse to pointer
I'm new to arcgis and javascript please help.

 

 

  

 

Outcomes