updating/add to definationExpression

user_973397 0
Viewed 345

Is it possible to update or add to and already declared definition expression? For instance, in this format: "id IN ('us70008jr5','cgi988jr52')" I can declare multiple in the initial definationExpression with id, but as soon as I try to update it later or add to it, it never reads or executes.

I am trying to simply update or add to my definition expression based on a users choice from the front-end, I can't seem to get this to update; I have tried refreshing the feature layer.

    let selectedID;
    let datA;
    
    layer.definitionExpression = "id IN ('')";
    
    function filterByID(event) {
        console.log('filter hit');
        selectedID = event.target.getAttribute("data-id");
        console.log(selectedID);
        layer.refresh();
        layer.definitionExpression = "id IN ('"+ selectedID +"')";
    }

arcgis-js api 4.xx

arcgis-js-api sql javascript
1 Answers

You do not need to refresh the layer because it is done automatically when it detects the change in the definitionExpression property.

I am guessing that you might be having issues with the requests time. In your case and related to your other question (that I give you an answer btw), this is not a good solution because the user might experience delay responses. Just check and give it time, you will see that it update alone.

If the definition expression is set after the layer has been added to the map, the view will automatically refresh itself to display the features that satisfy the new definition expression. ArcGIS API - FeatureLayer definitionExpression

Just in case you want check this example that I made using the other answer, but with updating with definitionExpression. It start with the base query, and then it add the checked ids on user event inputs.

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <title>Filter features by attribute - 4.15</title>

  <link rel='stylesheet' href='https://js.arcgis.com/4.15/esri/themes/light/main.css' />
  <script src='https://js.arcgis.com/4.15/'></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 500px;
      width: 100%;
    }
  </style>
  <script>
    require([
      'esri/views/MapView',
      'esri/Map',
      'esri/layers/FeatureLayer',
      'esri/widgets/Expand'
    ], function (MapView, Map, FeatureLayer, Expand) {
      const baseDefinitionExpression = 'eventTime >= CURRENT_TIMESTAMP - 30 AND grid_value > 2';
      const layer = new FeatureLayer({
        url: 'https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/',
        outFields: ['*']
        , definitionExpression: baseDefinitionExpression
      });
      const map = new Map({
        basemap: 'gray-vector'
        , layers: [layer]
      });

      const view = new MapView({
        map: map,
        container: 'viewDiv',
        center: [-98, 40],
        zoom: 4
      });

      let selectedIDs = {};

      function updatedFilter() {
        const ids = [];
        for(const [key, value] of Object.entries(selectedIDs)) {
          if (value) {
            ids.push(`'${key}'`);
          }
        }
        layer.definitionExpression =
          `${baseDefinitionExpression} AND id IN (${ids.join(',')})`;
        console.log(`[updateFilter] ${layer.definitionExpression}`);
      }

      const idElement = document.getElementById('id-filter');
      idElement.addEventListener('click', filterByID);
      function filterByID(event) {
        const chk = event.target;
        console.log(`[filterByID] ${chk.getAttribute('data-id')} ${chk.checked}`);
        selectedIDs[chk.getAttribute('data-id')] = chk.checked;
        updatedFilter();
      }

      view.whenLayerView(layer).then(function (layerView) {
        
        const query = layer.createQuery();
        query.outFields = ['id'];
        query.returnDistinctValues = true;
        query.returnGeometry = false;
        layer.queryFeatures(query).then(function (results) {
          results.features.map(function (feat) {
            let id = feat.attributes['id'];
            let opt = document.createElement('input');
            opt.type = 'checkbox';
            let label = document.createElement('label')
            label.innerHTML = id;
            opt.className = 'id-item visible-id';
            opt.setAttribute('data-id', id);

            idElement.appendChild(opt);
            idElement.appendChild(label);

            selectedIDs[id] = false;
          });
        });
        
        console.log('[whenLayerView]');

      });

    });
  </script>
</head>

<body>
  <div id='id-filter' class='esri-widget'>
  </div>
  <div id='viewDiv'></div>
</body>

</html>

user_27011980
Related