I have this Arcgis Online webmap that is a base for my testing in Arcgis Javascript. I have not done anything with the javascript file, other than the basic setup, as I am new to this. I was wondering if it was possible to de-highlight all features that dont share a color with it when hovering over them?

The data in the picture below consists of the same layer copied twice in a WebMap. The first layer filters out some points that becomes squares, and the other layer becomes circles. Both layers origin from the same feature layer, and the colors are determined by a string attribute of 3 characters. So if I hover over any of the blue points, my ideal map should look like the second picture, where all other points have an opacity of 80%. If no points are hovered, all should be visible (0% opacity).

enter image description here

enter image description here

], function (
) {

    var map = new WebMap({
        portalItem: {
            id: "xxxxx"

    var view = new MapView({
        container: "viewDiv",
        map: map,
        popup: {
            dockOptions: {
                     buttonEnabled: false
        ui: {
            components: ["zoom", "compass", "attribution"]


After you create the view, to create an event every time the mouse moves, you want to do this:

view.on("pointer-move", function(event) {
    // this code will get run every time the mouse moves in the view

Within that function, you can create a screen point:

var screenPoint = {
  x: event.x,
  y: event.y

And then run a hitTest on the view and screenPoint to see if the mouse is hovering over anything:

view.hitTest(screenPoint).then(function(response) {
    // your code here! response.results will be an array of the features that are intersecting the mouse.

So at that point you can grab the attribute you're interested in out of the intersecting features, and update the layer's renderer with whatever you want to do. Sounds like you want to change a Unique Value Renderer to update the symbols' opacity based on which attribute it is. To do that you might do something like this:

var renderer = map.layers.getItemAt(0).renderer;
var rendererClone = renderer.clone();
rendererClone.uniqueValueInfos = rendererClone.uniqueValueInfos.map(function(uniqueValueInfo) {
    // your code here! Change the value of uniqueValueInfo.symbol to meet your needs!
    // see: https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-UniqueValueRenderer.html#uniqueValueInfos
    return uniqueValueInfo;
map.layers.getItemAt(0).renderer = rendererClone;

I hope this helps! I have a working demo here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.