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 · Accepted solution]

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.

[SteveBurdette]

Thanks Ken.  Given that the map layer is always on top, do you have any advice for how to accomplish the highlighting, etc., without adding graphics to the map layer?

[KenBuja]

I guess it's going to depend on how you're highlighting a feature...how the feature is symbolized versus how the highlighted graphic will be symbolized. You could try adding another Graphics Layer and see how arranging it relative to the Feature Layers will make the mouse events work properly.

Do you have events that clear the highlighted graphic when you move off of it?

[SteveBurdette]

I will try adding a new graphics layer for the highlight symbols...great idea.  I am clearing the added highlight graphic on mouse-out.

Thanks for your help...brand new at GIS but really like the javascript api they've developed. 

[JustinMcMillan1]

Hi Steve, I know this was some time ago, but I haven't found a more recent thread covering this topic. Were you able to fix the issue? And if so, how did you go about it?

Any help would be appreciated as I'm current dealing with the same issue, only with line data.

[ThomasSolow]

When you say the same issue, do you mean you're mousing over a feature with a polyline geometry and you want to add a corresponding highlight graphic to map but still retain the click event on the feature?

It looks like Steve resolved his issue by adding the highlight graphics to a new graphics layer rather than to map.graphics (the built in graphics layer) and making sure the new graphics layer is under the feature layer.

If that doesn't help please provide some more information (jsbin or code snippet would be best).

[JustinMcMillan1]

Firstly, thanks for the reply Thomas. You are correct about what I am trying to do.

It makes sense to have the highlight graphic placed beneath the feature layer since my click will be on the uppermost layer. Will this work stylistically though? Wouldn't this mean the feature itself would appear on top of the highlight symbol?

This issue got pushed behind a couple more important issues so I will revisit it when I have the time.