nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

change the symbol (color, opacity, size, etc) when I click one feature in the layer

BoYan

is there a way to change the symbol (color, opacity, size, etc) when I click one feature in the layer? I just want to highlight the selected feature. I'm using javascript api 4.0 in scene view

Find more posts tagged with

Accepted answers

BoYan1

I fixed it by cloning the original graphics. Here is my code:

        view.on("click", function(e){
          // console.log(graphicCollection);
          view.hitTest(e.screenPoint).then(function(response){
            response.results.forEach(function(g){
              var graphic = g.graphic;
              // console.log(graphic);
              if (graphic) {
                var newGraphics = view.graphics.clone();
                view.graphics.removeAll();
                newGraphics.forEach(function(g){
                  g.symbol.symbolLayers.items[0].material.color.a = 0.3;
                });
                var gpcIndex = newGraphics.findIndex(function(item){
                  return item.id === graphic.id;
                });
                newGraphics.getItemAt(gpcIndex).symbol.symbolLayers.items[0].material.color.a = 1;
                view.graphics = newGraphics;
              };
            });
          });
        });

Here I'm changing the opacity of the graphics, I fade all the unselected graphics.

The "zoom to" function of the popup works fine with the above code.

All comments

BoYan1

I fixed it by cloning the original graphics. Here is my code:

        view.on("click", function(e){
          // console.log(graphicCollection);
          view.hitTest(e.screenPoint).then(function(response){
            response.results.forEach(function(g){
              var graphic = g.graphic;
              // console.log(graphic);
              if (graphic) {
                var newGraphics = view.graphics.clone();
                view.graphics.removeAll();
                newGraphics.forEach(function(g){
                  g.symbol.symbolLayers.items[0].material.color.a = 0.3;
                });
                var gpcIndex = newGraphics.findIndex(function(item){
                  return item.id === graphic.id;
                });
                newGraphics.getItemAt(gpcIndex).symbol.symbolLayers.items[0].material.color.a = 1;
                view.graphics = newGraphics;
              };
            });
          });
        });

Here I'm changing the opacity of the graphics, I fade all the unselected graphics.

The "zoom to" function of the popup works fine with the above code.

BoYan1

I tried using view.graphics.add(graphic) to add the graphics onto the view directly instead of adding the graphic onto a GraphicsLayer and then adding the layer onto the map. It still gives me the above error.

BoYan1

thanks for the reply. This works pretty well.

However, this raises another problem. after adding the new graphic on the layer, when I click on the "zoom to" on the popup of the graphic, there is an error 'Object {name: "internal:graphic-not-part-of-view", message: "Graphic is not part of this view", details: undefined}'

do you have any idea?

khutchins

One option might be to apply a new symbol to the clicked feature and add to the graphics layer. Then remove it when they click another feature.

      view.on("click", function(e){
        view.hitTest(e.screenPoint).then(function(response){
          selectionLayer.graphics.removeAll();
          response.results.forEach(function(g){
            if(g.graphic){
              var graphic = g.graphic;
              graphic.symbol = symbol;
              selectionLayer.graphics.add(graphic);
            }
          });
        });
      });

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.