stevel

onMouseOver with point features - flickers between onMouseOver and onMouseOut

Discussion created by stevel on Mar 15, 2011
Latest reply on Sep 28, 2011 by stevel
I'm trying to highlight features when the mouse is above them, as in the sample at http://help.arcgis.com/en/webapi/javascript/arcgis/demos/query/query_hover.html

Listening for onMouseOver and onMouseOut events works fine with polygons. The problem is when hovering over point features - I'm finding that it flickers constantly between onMouseOver and onMouseOut.

Try this sample code for an example. I'm displaying a highlight graphic when the mouse is over the point feature, and removing it when the mouse is moved. It's almost impossible to hold the mouse exactly over the point feature.

Any ideas how to resolve this? Is it possible to put a timer on the onMouseOver event, so that it doesn't constantly flick to the onMouseOut event?

Thanks,
Steve

<!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" /> 
  <!--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"/>
    <title>FeatureLayer On Demand</title> 
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"> 
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script type="text/javascript">djConfig = { parseOnLoad:true };</script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> 
    <script type="text/javascript"> 
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");

      var mapLayers = [];  //array of layers in client map
      var map;
      var highlightPoint = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,   new dojo.Color([255,144,0]), 1),   new dojo.Color([255,144,0,0.25]));
      var highlightGraphic;

      function init() {
        var extent = new esri.geometry.Extent({"xmin":-96.6063,"ymin":38.3106,"xmax":-96.4764,
              "ymax":38.3689,"spatialReference":{"wkid":4269}});
        map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(extent)});

        var imagery = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
        map.addLayer(imagery);

        var content = "<b>Pop</b>: ${POP2000}" + "<br /><b>Households</b>: ${HOUSEHOLDS}";
        var infoTemplate = new esri.InfoTemplate("Census", content);
        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });
        map.addLayer(featureLayer);
        map.infoWindow.resize(150,85);  
        
        dojo.connect(featureLayer, "onMouseOver", function (evt) {
            map.setMapCursor("pointer");
            map.graphics.remove(highlightGraphic);
            highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightPoint);
            map.graphics.add(highlightGraphic);
        });
        
        dojo.connect(featureLayer, "onMouseOut", function () {
            map.setMapCursor("default");
            map.graphics.remove(highlightGraphic);  
        });

      }

      dojo.addOnLoad(init);
    </script> 
  </head> 
  <body class="claro"> 
    <div style="position:relative;width:100%;height:100%;"> 
      <div id="map" style="border:1px solid #000;width:100%;height:100%;"></div>
    </div> 
  </body> 
</html>

Outcomes