AnsweredAssumed Answered

GraphicsLayer takes on opacity from FeatureLayer

Question asked by MollyKFoley on Mar 13, 2018
Latest reply on Mar 19, 2018 by MollyKFoley

I'm trying to symbolize selections using a GraphicsLayer derived from a FeatureLayer. When I change the opacity of the FeatureLayer and get a graphic based on whatever polygon I have clicked on, it sets the opacity of the GraphicsLayer to the same as the FeatureLayer, even if I set the opacity to something different on the GraphicsLayer. 

 

When they click on a radio button here, the opacity of the FeatureLayer changes to reflect their choice:

        on(query('input[name="setOpacity"]'), "click", function (evt){
          var opacity = evt.target.id;
          switch(opacity){
            case "100-percent":
              featureLayer.opacity = 1;
              break;
            case "25-percent":
              featureLayer.opacity = .25;
              break;
            case "50-percent":
              featureLayer.opacity = .5;
              break;
            case "75-percent":
              featureLayer.opacity = .75;
              break;
          }
        });

 

Next, if I select a polygon on the map (via clicking), I create a new graphic of that polygon and set the symbol to be a blue outline. Then I add it to a GraphicsLayer, set the opacity to 1, and then add it to the map. But the opacity remains at 25/50/75 percent or whatever is selected by the user on the FeatureLayer. Is this happening because the graphic is derived from the FeatureLayer? Is there a way to fix this?

        view.on("click", function(evt){
          var screenPoint = {
            x: evt.x,
            y: evt.y
          };
          view.hitTest(screenPoint).then(getGraphics);
        });
       
        var graphicLyr = new GraphicsLayer({});
       
        function getGraphics(response){
          graphicLyr.removeAll();
          var selectionSymbol = {
            type: "simple-fill",
            style: "none",
            outline: {
              color: [56, 247, 247],
              width: 2
            }
          }
          var graphic = new Graphic({
            geometry: response.results[0].graphic.geometry,
            symbol: selectionSymbol
          });
          graphicLyr.add(graphic);
          graphicLyr.opacity = 1;
          map.add(graphicLyr);
        };

Outcomes