topic GraphicsLayer takes on opacity from FeatureLayer in ArcGIS JavaScript Maps SDK Questions

GraphicsLayer takes on opacity from FeatureLayer

MKF62 — Sat, 11 Dec 2021 19:07:24 GMT

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

Re: GraphicsLayer takes on opacity from FeatureLayer

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:07:27 GMT

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

Re: GraphicsLayer takes on opacity from FeatureLayer

MKF62 — Sat, 11 Dec 2021 19:07:30 GMT

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

Re: GraphicsLayer takes on opacity from FeatureLayer

RobertScheitlin__GISP — Wed, 14 Mar 2018 16:10:54 GMT

Molly,

Can you try setting the opacity in the GLs constructor?

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

Re: GraphicsLayer takes on opacity from FeatureLayer

MKF62 — Sat, 11 Dec 2021 19:07:32 GMT

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

Re: GraphicsLayer takes on opacity from FeatureLayer

RobertScheitlin__GISP — Thu, 15 Mar 2018 12:59:21 GMT

Molly,

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

Re: GraphicsLayer takes on opacity from FeatureLayer

MKF62 — Thu, 15 Mar 2018 13:04:09 GMT

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!

Re: GraphicsLayer takes on opacity from FeatureLayer

MKF62 — Thu, 15 Mar 2018 13:15:00 GMT

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

Re: GraphicsLayer takes on opacity from FeatureLayer

RobertScheitlin__GISP — Thu, 15 Mar 2018 13:48:36 GMT

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.

Re: GraphicsLayer takes on opacity from FeatureLayer

RobertScheitlin__GISP — Thu, 15 Mar 2018 14:00:44 GMT

Molly,

Your selection symbol is just the outline of the poly with no fill so are you saying that the outline is using the opacity of the original FeatureLayer?

Re: GraphicsLayer takes on opacity from FeatureLayer

MKF62 — Sat, 11 Dec 2021 19:07:35 GMT

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

Re: GraphicsLayer takes on opacity from FeatureLayer

MKF62 — Thu, 15 Mar 2018 14:33:39 GMT

Yes, it's just an outline. Anytime I change the opacity on the FeatureLayer, the outline, which should be on the GraphicsLayer, also becomes transparent.

Re: GraphicsLayer takes on opacity from FeatureLayer

RobertScheitlin__GISP — Fri, 16 Mar 2018 16:22:43 GMT

Molly,

After modifying your code to use another layer I have determined that it is nothing in your code that is at fault and this seems to be a bug that you need to report to esri tech support ASAP.

Re: GraphicsLayer takes on opacity from FeatureLayer

MKF62 — Mon, 19 Mar 2018 11:59:22 GMT

Thanks for all your help and testing Robert. I will submit a bug to ESRI.