GraphicsLayer takes on opacity from FeatureLayer

[MKF62]

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);
        };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Molly,

   You need to add the opacity/alpha to the graphics symbol (notice line 7 I have added the alpha value to the color):

        function getGraphics(response){
          graphicLyr.removeAll();
          var selectionSymbol = {
            type: "simple-fill",
            style: "none",
            outline: {
              color: [56, 247, 247, 1],
              width: 2
            }
          }
          var graphic = new Graphic({
            geometry: response.results[0].graphic.geometry,
            symbol: selectionSymbol
          });
          graphicLyr.add(graphic);
          graphicLyr.opacity = 1;
          map.add(graphicLyr);
        };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[MKF62]

Hi Robert,

I have tried that and unfortunately it does not work. It continues to inherit the opacity from the FeatureLayer.

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;
          }
        });
        
        //When the popupBox is closed, then remove the selection outline
        view.popup.watch("visible", function(visible){
          if (visible == false){
            view.graphics.removeAll();
          }
        });
        
        //Create a selection outline on a patch when it is clicked 
        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){
          view.graphics.removeAll();
          graphicLyr.removeAll();
          var selectionSymbol = {
            type: "simple-fill",
            style: "none",
            outline: {
              color: [56, 247, 247, 1],
              width: 2
            }
          }
          var graphic = new Graphic({
            geometry: response.results[0].graphic.geometry,
            symbol: selectionSymbol
          });
          //view.graphics.add(graphic);
          graphicLyr.add(graphic);
          graphicLyr.opacity = 1;
          map.add(graphicLyr);
        };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Molly,

   Can you try setting the opacity in the GLs constructor?

var graphicLyr = new GraphicsLayer({opacity:1});‍

[MKF62]

Yup, I've given that a shot as well and it doesn't not work either. I've attached my full code as a .txt file (minus the my actual services since I cannot share those) if you want to look at it. I'm unsure if it's something I'm doing or if it's really a bug.

        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;
          }
        });
        
        //Create a selection outline on a patch when it is clicked 
        view.on("click", function(evt){
          var screenPoint = {
            x: evt.x,
            y: evt.y
          };
          view.hitTest(screenPoint).then(getGraphics);
        });
        
        var graphicLyr = new GraphicsLayer({opacity: 1});
        
        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);
          map.add(graphicLyr);
        };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Molly,

   Yes if you could provide all your code for testing that would be great.

[MKF62]

I was editing my above post when you replied! I've attached the code as a .txt file in the previous reply I made; I realized it's going to be kinda hard to play with in the sandbox without my services since all the gigantic renderers in there won't work on just any old polygon layer, but at least you can look through it and see if there's anything out of place. Let me know if there's something I can do to make it easier to test with. Thanks for your help!

[MKF62]

If it helps visualize it at all, this is the HTML element where all the radio buttons correspond to changing renders/opacity.

[RobertScheitlin__GISP]

Molly,

   Something I find odd right off is that you clear the view.graphics when the popup is closed and when you are in the getGraphics function, but in the getGraphics you add the selection graphics to the graphicLyr and add that layer to the map each time you click on the map. Adding the layer each time you click on the map is no good and it seems like you need to clearing the graphicLyr and not the view.graphics.

[MKF62]

Yeah, you're right! Good catch. That was a hold-over from when I was switching back and forth between using a GraphicsLayer and just adding/removing graphics instead. I changed it to this, I think it only adds the GraphicsLayer once and then just removes/adds graphics to and from the layer based on clicking. Still getting the same opacity issue though.

//When the popupBox is closed, then remove the selection outline
        view.popup.watch("visible", function(visible){
          if (visible == false){
            graphicLyr.removeAll();
          }
        });
        
        //Create a selection outline on a patch when it is clicked 
        view.on("click", function(evt){
          var screenPoint = {
            x: evt.x,
            y: evt.y
          };
          view.hitTest(screenPoint).then(getGraphics);
        });
        
        var graphicLyr = new GraphicsLayer({opacity: 1});
        map.add(graphicLyr);
        
        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);
        };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍