topic Re: How can you change Graphic.visible in 4.10 in ArcGIS JavaScript Maps SDK Questions

How can you change Graphic.visible in 4.10

KrisKaplan1 — Tue, 05 Feb 2019 23:34:58 GMT

Prior to 4.10, Graphic client side features added to a FeatureLayer could be hidden and shown by toggling the Graphic.visible property, but this no longer appears to work in 4.10. I have tried changing 'visible' and calling FeatureLayer.applyEdits in the 'updateFeatures' value, but this does not appear to modify the property value (nor change the visibility).

I know I can remove and re-add the feature from the layer instead of toggle the visibility, but for a few reasons it would be more convenient to just toggle the visibility. Is this still possible in 4.10?

Kris

Re: How can you change Graphic.visible in 4.10

RobertScheitlin__GISP — Wed, 06 Feb 2019 13:39:39 GMT

Kris,

The ability to modify graphics is coming in a future release.

Modify graphics

Coming soon

To modify a graphic that is already added to the layer: you need to clone it, make modifications, add it to the layer and remove the original graphic. In-place modification of graphic objects will not trigger display refresh.

Re: How can you change Graphic.visible in 4.10

KrisKaplan1 — Wed, 06 Feb 2019 15:30:16 GMT

That line item from the functionality matrix is in the GraphicsLayer section, not for FeatureLayer. Are you sure it applies? We already have 'applyEdits' with 'updateFeatures' support for FeatureLayer graphics, and it can be used to 'modify graphics'. The documentation is not clear about any limits to the types of updates, but I know geometry and attribute updates take, so I would have thought visibility state would have as well.

Since this was already available in 4.9 and apparently removed in 4.10 is there a plan to replace this or am I just missing something about how to properly do it in 4.10?

Kris

Re: How can you change Graphic.visible in 4.10

RobertScheitlin__GISP — Wed, 06 Feb 2019 15:59:30 GMT

Kris,

Yes I am pretty sure it does.

When you say

Prior to 4.10, Graphic client side features added to a FeatureLayer could be hidden and shown by toggling the Graphic.visible property, but this no longer appears to work in 4.10.

Can you provide a sample of this working in 4.9?

Re: How can you change Graphic.visible in 4.10

KrisKaplan1 — Fri, 08 Feb 2019 00:51:49 GMT

Here is a sample using 4.9 (through v 2.5 of esri-loader) that toggles a graphic visibility on a feature layer.

map-toggle-vis - StackBlitz

Of course, to upgrade this to 4.10, the graphic would be added through applyEdits (instead of adding to the layer's source). And I would expect that modifying the visibility should similarly be done through applyEdits.

Re: How can you change Graphic.visible in 4.10

RobertScheitlin__GISP — Fri, 08 Feb 2019 02:17:30 GMT

Kris,

Actually the ApplyEdits portion is where you are going wrong. ApplyEdits only deals with geometry and attribute changes that need to go back to the map service on the server. The graphics visibility is controlled by the API client side. I will take a look at your code you have working for 4.9 and see if I can get it to work in 4.10.

Re: How can you change Graphic.visible in 4.10

KrisKaplan1 — Fri, 08 Feb 2019 15:11:46 GMT

Thanks Robert.

But just to clarify, I am only trying to get this working with purely client side features (no map service on the server). Prior to 4.10, the 'source' collection used to provide live references to the graphics on the feature layer (additions and removals from this collection modified the layer contents, and direct edits to these objects (like visibility) was applied to the scene). But with 4.10, the source collection is now only handled as inputs to layer creation, and graphics obtained from queries act like snapshot copies, not the live source object. The only API that I can see that you can affect any changes to a Graphic is through applyEdits.

Re: How can you change Graphic.visible in 4.10

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:37:52 GMT

Kris,

Thanks for the sample. I have been able to verify that what you are seeing is a change in the API behavior as well. Here is a simplified sample that does not work but does when the API reference is changed to 4.9.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to FeatureLayer - 4.10</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/FeatureLayer",
        "esri/Graphic"
      ],
      function(
        Map, SceneView,
        FeatureLayer,
        Graphic
      ) {

        var map = new Map({
          basemap: "hybrid"
        });

        var view = new SceneView({
          container: "viewDiv",
          map: map,

          center: {
            spatialReference: { wkid: 3857 },
            x: -9814403.288086168,
            y:5183235.096971049
          },
          zoom: 18
        });

        /********************
         * Add feature layer
         ********************/

        const fields = [
          {
            name: 'id',
            type: 'oid',
          }
        ];
      
        const renderer = {
          type: 'simple',
          symbol: {
            type: 'polygon-3d',
            symbolLayers: [{
              type: 'fill',
              material: { color: 'red' }
            }],
          },
        };
      
        const layer = new FeatureLayer({
          fields,
          geometryType: 'polygon',
          renderer,
          spatialReference: { wkid: 3857 },
          source: [],
        });
        map.layers.add(layer);
        
        const createRectangle = function(center) {
          return [
            [center.x - 10, center.y - 5],
            [center.x + 10, center.y - 5],
            [center.x + 10, center.y + 5],
            [center.x - 10, center.y + 5],
            [center.x - 10, center.y - 5],
          ];
        }
      
        const feat = new Graphic({
          geometry: {
            type: 'polygon',
            rings: [createRectangle(view.center)],
            spatialReference: { wkid: 3857 },
          }
        });
        layer.source.add(feat);
      
        // toggle the visibility of the feature every second
        setInterval(function(){
          feat.visible = !feat.visible
        }, 1000);

      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I did try the applyEdits to make the visibility change to the graphic and even queryFeatures to get the updated graphic after the change but the view never shows the graphic change even though the visibility is changed.

Time to tag an API team memeber

Undral Batsukh‌

Re: How can you change Graphic.visible in 4.10

JohnGrayson — Mon, 11 Feb 2019 16:38:19 GMT

At 4.10, I believe direct access to graphics was replaced by the use of applyEdits(). At 4.10, if you would like for your graphic to not display then you can use the 'deleteFeatures' parameter of applyEdits(...). When direct manipulation (add/delete) of a Graphic is absolutely necessary in an app, I've then switched back to using a GraphicsLayer.

Re: How can you change Graphic.visible in 4.10

KrisKaplan1 — Tue, 12 Feb 2019 19:20:52 GMT

Thanks for the feedback. But from the original question:

"I know I can remove and re-add the feature from the layer instead of toggle the visibility, but for a few reasons it would be more convenient to just toggle the visibility."

Likewise, using the GraphicsLayer instead of FeatureLayers for all graphics just for this ability to toggle individual feature visibility would (at least in our case) be a significant change and consequences (loss of other features that require FeatureLayer).

Re: How can you change Graphic.visible in 4.10

TylerKirk — Tue, 02 Jun 2020 23:42:55 GMT

Checking the latest version (4.15) the visible property on a Graphic is ignored for client-side FeatureLayers; will this ever be addressed or will the documentation be updated to specify it doesn't work for client-side FeatureLayers? Are there any FeatureLayer specific workarounds?

Re: How can you change Graphic.visible in 4.10

JohnGrayson — Wed, 03 Jun 2020 15:37:06 GMT

At 4.15, the correct way to manipulate features in a client-side FeatureLayer is via the applyEdits() method. From the FeatureLayer | 'Read more' | 'Add an array of client-side features' section:

"If features are added, removed or updated at runtime, then use applyEdits() to update the features then use queryFeatures() to return updated features. Check out add or remove graphics from a FeatureLayer sample to see this in action. Attribute values used in attribute queries executed against client-side feature layer, and layer views are case sensitive."

Re: How can you change Graphic.visible in 4.10

TylerKirk — Fri, 05 Jun 2020 17:24:44 GMT

Thanks for the response. I already understand how to utilize applyEdits for client-side FeatureLayer manipulation. My question was about the client-side FeatureLayer graphic's visible property not working and if the API will support it like it once did in the 4.9.