How can you change Graphic.visible in 4.10

2263
12
02-05-2019 03:34 PM
KrisKaplan1
New Contributor II

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

0 Kudos
12 Replies
RobertScheitlin__GISP
MVP Emeritus

Kris,

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

Modify graphicsComing soonTo 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.
0 Kudos
KrisKaplan1
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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?

0 Kudos
KrisKaplan1
New Contributor II

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
KrisKaplan1
New Contributor II

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
TylerKirk
New Contributor II

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?

0 Kudos
JohnGrayson
Esri Regular Contributor

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."

0 Kudos