Select to view content in your preferred language

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

5545
4
Jump to solution
07-01-2016 11:46 AM
BoYan
by
Deactivated User

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

0 Kudos
1 Solution

Accepted Solutions
BoYan1
by
Deactivated User

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.

View solution in original post

4 Replies
KellyHutchins
Esri Frequent Contributor

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);
            }
          });
        });
      });
0 Kudos
BoYan1
by
Deactivated User

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?

0 Kudos
BoYan1
by
Deactivated User

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.

0 Kudos
BoYan1
by
Deactivated User

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.