add items to map, collectively, one at a time, per attribute id

[CamCode]

I have successfully been able to filter, for instance shakemaps, by attribute id - I have successfully achieved this multiple ways - but all ending with the same problem.

1.) with the where filter 2.) definition expression 3.) iterating through all attribute ids and bringing them back.

The problem: All exists for only allowing/displaying one per attribute id at a time.. my goal is to feed the attribute ids into a checkbox list (which I have done), but allowing for items via attribute id to be added to the map as they are checked, collectively, one at a time - currently I can not seem to get this to work with the aspect of having multiple or more then one appear at a time on the map - each filter or attempt results in the next item being added while at the same time the previous is replaced (only showing one at a time).

1.) i.e. the below filter (attempted logic 1) - & also here is CodePen of:

.....         function filterByID(event) {           const selectedID = event.target.getAttribute("data-id");             eqLayerView.filter = {             where: "id = '" + selectedID + "'"           };         }          view.whenLayerView(fl)           .then(function(layerView) {            eqLayerView = layerView;            eqLayerView.filter = {             where: "id = ''"           };.............

2.) i.e. another attempted logic (adding multiple at a time here, line by line, or via array):

layer.definitionExpression = "id = 'us70008jr5'",layer.definitionExpression = "id = 'cgi988jr52'",

3.) i.e. 3rd attempt with a suggestion here on GIS exchange: Loop through attribute ids of FeatureLayer

layer   .load()  .then(() => {    // create a query from the layer    const query = layer.createQuery();    query.returnDistinctValues = true;    query.where = "grid_value > 2"; // or 1=1 if you need them all    // the field you want distinct values for    query.outFields = ["id"];    return layer.queryFeatures(query);  })  .then(({ features }) => {    // extract the ids to a list    const ids = features.map(({ attributes }) => attributes.id);    return ids;  })  .then((ids) => {    // You can store them how you want, in this case,    // I put them in a dropdown select menu    const fragment = document.createDocumentFragment();    ids.forEach((id) => {      const option = document.createElement('option');      option.value = id;      option.innerText = id;      fragment.appendChild(option);    });    list.appendChild(fragment);    map.add(layer);});

All attempted logic above result in the toggling of a shakemap by attribute id to be displayed only one at a time — by toggling a new on, the previous turns off, I need the ability to have multiple being able to exist on the map at once.

[RobertScheitlin__GISP]

Cam,

  It is simply a matter of building a proper SQL expression for multiple values.

"id IN ('us70008jr5','cgi988jr52')"

[CamCode]

Thanks so much Robert, was pursuing this until noticed this service is now gone since today? https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServe...  (no layers found) - It was working yesterday, is this just maintenance or it being marked as depreciated as well?

[RobertScheitlin__GISP]

Sorry I don't know. My guess is some issue or maintenance though.

[CamCode]

It is back now, strange....

[CamCode]

Is it possible to update or add to and already declared definition expression? For instance, in your format above I can declare multiple in the initial definationExpression with id, but as soon as I try to update or add to it, it never reads.

I am able to hardcode the values in now initially, or pass initial variables in with multiple taking effect now - but as soon as I try to update or change my initial i.e. my 'layer.definitionExpression = "id IN ('"+ selectedID + "','us6000a4yi')";' - it does not update, only seemingly executing the first instance of definitionExpression with the id.

It appears now I'm struggling with how to update a definitionExpression (add to, remove, or replace) - I have tried layer.refresh(); in attempt for it to read my latest definition, but still didn't seem to work, I have also tried nesting them in variables and functions. This appears to be similar to what I'm trying to do: How to setDefinitionExpression on FeatureLayer in web map? (v3.30)  -except in 3.30 version, I also tried this and wont take the syntax in 4.xx.

    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 +"')";    }

[CamCode]

i.e. a simple demo logic, where I can't seem to update a definationExpression (add to, remove, re-add as a new), starting with none, here I try to simple add one, console log is fine, just wont seem to take a second instant of. You can see my attempt to refresh() and "" in attempt to add a new.

    let selectedID;    let datA;         layer.definitionExpression = "id IN ('')"; <-------- initial state nothing         function filterByID(event) {        console.log('filter hit');        selectedID = event.target.getAttribute("data-id");        console.log(selectedID);        layer.refresh();        layer.definitionExpression = "id IN ('"+ selectedID +"')";  <------- attempt to update/replace with selected id     }

[KenBuja]

You have a typo on your last line. It's "definitionExpression", not "DefinitionExpression"

[CamCode]

Thanks, yeah late night typo.. I have edited the above, even with the above corrected the current dilemma persists. Here the question seems clearer: arcgis javascript api - Updating/add to definition expression - Geographic Information Systems Stack... 

[RobertScheitlin__GISP]

Cam,

   Sounds like you are missing the basic logic that you need to be applying. So right now you have the filterById function firing when a checkbox is checked/unchecked. Your main issue is that you are not trying to see if an other checkboxes are checked/unchecked. Each time a checkbox is checked you need to be looping through all the check boxes to see which are checked and which are not. That way you can be building your SQL statement properly.

        function filterByID(event) {
          let sqlExp = '';
          let idChkBoxes = document.querySelectorAll(`.id-item`);
          idChkBoxes.forEach(function(node){
            if(node.checked){
              sqlExp += "'" + node.getAttribute("data-id") + "' ";
            }
          });
          sqlExp = sqlExp.replace(/' /g, "', ");
          sqlExp = sqlExp.substring(0, sqlExp.length - 2);
          console.info(sqlExp);
          eqLayerView.filter = {
            where: "id IN (" + sqlExp + ")"
          };
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍