Polygon Changes Colour on Mouse Hover

[RowanTaylor]

Hello!

I've made a map with a layer of building polygons in ArcGIS Online. (This map is being fed through Experience Builder so happy to use either platform for a fix!)

I would like the colour of a building polygon to change when the mouse hovers over it - I'm able to do this with the button widget in Experience Builder but I can't seem to do the same within the map. Is there a way to do this?

Thank you very much,

(I've accidently put this on the Survey123 board - please ignore it there!)

[JudithWammack]

I would enter this in ArcGIS Ideas! I like this idea as well.

[ToddW_stl]

It sounds like you want "highlights", which I'm not sure how or if you can add or set up in a web map.  On the Map widget in ExperienceBuilder, you can set the selection highlight color and outline in the Option section, but this would require a mouse click to "select" the feature instead of the hover functionality (and turn off the pop-up).  It might be helpful to know the desired workflow, and the value the "hover to highlight" function would provide your users.

Implementation of feature highlights in the ArcGIS Maps SDK for JavaScript

[RowanTaylor]

Thank you - I might settle for the 'select' colour change as coding might be beyond me.

This function would be valuable as we'd like the map to be publicly available and a hover function would quickly show new users which parts of the map are interactive to prevent them wasting time blindly clicking! Thank you for your response!

[ToddW_stl]

I found this existing idea, if you'd like to add your use case and support/kudo to it!

Add mouse hover behaviors on features (ArcGIS Idea)

[RowanTaylor]

Thank you!

[JeffreyThompson2 · Accepted solution]

https://developers.arcgis.com/javascript/latest/references/core/views/View/#highlights

The example for the highlight() function is exactly this. You would just need to build a Custom Widget around this code.

// Use the default highlights collection to apply a highlight to features when you hover over them

// A handler can be used to remove any previous highlight when applying a new one
let hoverHighlight;

view.on("pointer-move", (event) => {
  // Search for the first feature in the featureLayer at the hovered location
  view.hitTest(event, { include: featureLayer }).then((response) => {
    if (response.results[0]) {
       const graphic = response.results[0].graphic;
       view.whenLayerView(graphic.layer).then((layerView) => {
         // Remove any previous highlight, if it exists
         hoverHighlight?.remove();
         // Highlight the hit features with the temporary highlight options, which are pre-configured for this use case
         hoverHighlight = layerView.highlight(graphic, { name: "temporary"});
       });
    }
  });
});

[RowanTaylor]

Thank you very much for providing this code, I will try this cautiously (I have very little experience coding 😅)!