Mouse-over events not firing when adding graphics to highlight

SteveBurdette

I'm using the latest ArcGIS javascript libraries, and am finding that I can use the

 

     featureLayer.on("mouse-over", function (evt) {

          // code here to respond to mouse over

     });

 

script to easily respond to mouse events on the feature layers that I include in the map.  I'm using these events to highlight the county, point, or line the user is hovering over by adding a graphic to the map that shows the "highlighted" version of the county, line or point.  However, when I add the graphic to make the feature appear highlighted I lose the ability to respond to click events on the original feature (that was hovered over).  I've tried moving the highlight graphic to the back and a few other things, but nothing has worked.  How can I get the original click events to fire after I've added graphics to the layer to show the item highlighted?  Here's a little example to illustrate the point:

 

    <script type="text/javascript">

        var map, dialog;

 

        require(["esri/map",

                 "esri/geometry/Extent",

                 "esri/layers/FeatureLayer",

                 "esri/symbols/SimpleFillSymbol",

                 "esri/symbols/SimpleLineSymbol",

                 "esri/symbols/SimpleMarkerSymbol",

                 "esri/renderers/SimpleRenderer",

                 "esri/graphic",

                 "esri/lang",

                 "esri/Color",

                 "dojo/number",

                 "dojo/dom",

                 "dojo/dom-style",

                 "dijit/TooltipDialog",

                 "dijit/popup",

                 "dojo/domReady!"

        ], function (Map, Extent, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, SimpleRenderer, Graphic, esriLang, Color, number, dom, domStyle, TooltipDialog, dijitPopup) {

 

            var countiesUrl = "http://myesriserver:6080/arcgis/rest/services/Service1/FeatureServer/0";

            var geoPointsUrl = "http://myesriserver:6080/arcgis/rest/services/Service1/FeatureServer/1";

 

            var bbox = new Extent({ "xmin": 360678, "ymin": 3335262, "xmax": 698921, "ymax": 3874594, "spatialReference": { "wkid": 32616 } });

            map = new Map("mapDiv", {

                extent: bbox,

            });

 

            var counties = new FeatureLayer(countiesUrl, { mode: FeatureLayer.MODE_SNAPSHOT, outFields: ["*"] });

            map.addLayer(counties);

            var geoPoints = new FeatureLayer(geoPointsUrl, { mode: FeatureLayer.MODE_SNAPSHOT, outFields: ["*"] });

            map.addLayer(geoPoints);

 

            var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([100, 255, 100]), 3), new Color([255, 255, 255, 0.35]));

            var highlightPoint = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([200, 200, 200]), 3), new Color([200, 200, 200, 0.50]));

 

            map.on("load", function () {

                map.graphics.enableMouseEvents();

                map.graphics.on("mouse-out", clearGraphics);

            });

 

            counties.on("mouse-over", function (evt) {

                var highlightGraphic = new Graphic(evt.graphic.geometry, highlightSymbol);

               // If I comment the next line then the geoPoints mouse-over event will fire.

               // If I leave the next line uncommented then the graphic is added to the map and the geoPoints mouse-over event does not fire.

                map.graphics.add(highlightGraphic);

            });

 

            geoPoints.on("mouse-over", function (evt) {

                var highlightGraphic = new Graphic(evt.graphic.geometry, highlightPoint);

                map.graphics.add(highlightGraphic);

            });

 

            function clearGraphics() {

                map.graphics.clear();

            }

        });

    </script>

kenbuja

The issue is that the map.graphics layer is always the top-most layer, above the feature layer, so the graphic you've added to the map is getting in the way of the feature layers' graphics. From the help

However, the graphics layer in Map.Graphics is always on top.