topic Re: onMouseOver with point features - flickers between onMouseOver and onMouseOut in ArcGIS JavaScript Maps SDK Questions

onMouseOver with point features - flickers between onMouseOver and onMouseOut

StephenLead — Sat, 11 Dec 2021 20:53:16 GMT

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>

Re: onMouseOver with point features - flickers between onMouseOver and onMouseOut

jamieeyre — Wed, 28 Sep 2011 14:42:33 GMT

I have the same problem. Did you find a solution to this?

Re: onMouseOver with point features - flickers between onMouseOver and onMouseOut

KellyHutchins — Sat, 11 Dec 2021 20:53:19 GMT

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>

Re: onMouseOver with point features - flickers between onMouseOver and onMouseOut

StephenLead — Wed, 28 Sep 2011 22:06:59 GMT

Thanks Kelly, that makes sense