Community
Select to view content in your preferred language

onMouseOver with point features - flickers between onMouseOver and onMouseOut

4057
3
03-15-2011 04:23 PM
StephenLead
by
Regular Contributor III
‎03-15-2011 04:23 PM
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>
3 Replies
jamieeyre
by
New Contributor II
‎09-28-2011 07:42 AM
I have the same problem. Did you find a solution to this?
0 Kudos
KellyHutchins
by Esri Frequent Contributor
Esri Frequent Contributor
‎09-28-2011 08:42 AM
Steve,

Since you are adding a highlight graphic to the map's graphic layer listening to the map's graphics onMouseOut event instead of the feature layers should remove the flicker.
<!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 highlightLayer;
 
      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)});
        
        dojo.connect(map,"onLoad",function(){
          highlightLayer= new esri.layers.GraphicsLayer();
          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]));
          highlightLayer.setRenderer(new esri.renderer.SimpleRenderer(highlightPoint));
          dojo.connect(highlightLayer,"onMouseOut",function(){
              map.setMapCursor("default");
              highlightLayer.clear(); 
          });
          map.addLayer(highlightLayer);
        });
        
        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");
            highlightLayer.clear();         
            highlightLayer.add(new esri.Graphic(evt.graphic.geometry));

        });

      }

      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>
StephenLead
by
Regular Contributor III
‎09-28-2011 03:06 PM
Thanks Kelly, that makes sense
0 Kudos