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

2422
20
Jump to solution
06-20-2020 05:50 PM
CamCode
New Contributor III
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.

0 Kudos
20 Replies
CamCode
New Contributor III

Thanks so much, Robert - I get you on the checkbox looping and building of the string... The problem is my feature layer contains some custom graphics, from some testing I could filter it with the server-side logic 'definationExpression' but was never successful with the more client-side 'using the view'  solution as I am passing my initial layer data to some graphics. Will the client side 'view' filter still work in my scenario? Could I build the string like you have above with serverside 'definationExpression'? i.e. below is how I pass my initial feature layer data to some custom graphics in the form of a new layer:

graphics = new FeatureLayer({
source: graphicsLayer.graphics,
objectIdField: "ObjectID",
geometryType: "polygon",
fields: [{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},{
name: "id",
alias: "id",
type: "string"
}, {
name: "url",
alias: "url",
type: "string"
}, {
name: "grid_value",
alias: "grid_value",
type: "double"
}],
renderer: renderer,
popupEnabled: true,
popupTemplate: popuptemp
});
map.add(graphics);
});
});

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Don't see why not.

0 Kudos
CamCode
New Contributor III

I still can't seem to find the correct place to capture my layer view to use for the client side filter; I have tried on 'fl' as well as 'SeismicData' layers. Below is my complete code: (there is no syntax errors, not sure why the editor below is commenting out a closing bracket, the only errors arise are ones referencing the layerview 'eqLayerView'

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Add layers to a map</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .contn { position: absolute; bottom: 0px; left: 0px;}
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.15/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/geometry/geometryEngine",
      "esri/geometry/Circle",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/renderers/ClassBreaksRenderer",
      "esri/widgets/Legend"
    ], function(
      Map,
      MapView,
      FeatureLayer,
      geometryEngine,
      Circle,
      Graphic,
      GraphicsLayer,
      SimpleFillSymbol,
      ClassBreaksRenderer,
      Legend) {
      
      var map = new Map({
        basemap: "gray"
      });
      
      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-122, 37],
        zoom: 2
      });
      
      shakeLays();
            
      function shakeLays() { 
       
          let selectedID;
          let currentShakes;
          let SeismicData;
          let eqLayerView;
          let fl; 
                
          fetchdata();

          function fetchdata(){
            SeismicData = new FeatureLayer({
              title: "MMI - Shake Intensity",
              url: "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/",
              outFields: ["*"],
            });
                        
            SeismicData.definitionExpression = "eventTime >= CURRENT_TIMESTAMP - 30 AND grid_value > 2";

            //map.add(SeismicData);
          };



          let quakeFoldr = document.getElementById("Shakemaps").parentElement;
          let onup = quakeFoldr.parentElement;
          let twup = onup.parentElement;

          let idElement = document.createElement("div");
          let isElement = document.createElement("ul");

          idElement.className += "shaked";
          isElement.className += "k-group";
          twup.appendChild(idElement);
          idElement.appendChild(isElement);

          var graphicsLayer = new GraphicsLayer();
        
          function filterByID(event) {
             console.log('filter hit');
              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);
             
              // SeismicData.definitionExpression = "id IN (" + sqlExp + ")";
              // SeismicData.refresh();
            
               eqLayerView.filter = {
                 where: "id IN (" + sqlExp + ")"
               };
            }

          view.when(SeismicData).then(function(layerView) {
            
              var query = SeismicData.createQuery();
              query.outFields = ["id"];
              query.returnDistinctValues = true;
              query.returnGeometry = false;

              SeismicData.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 shakeids";
                  opt.setAttribute("data-id", id);
                  opt.name = "shaks";

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

                  getCur(event);
        
                });
                
                view.whenLayerView(SeismicData).then(function(layerView) {

                  eqLayerView = layerView;
                  console.log(eqLayerView);
                  console.log(SeismicData);

                  // eqLayerView.filter = {
                  //   where: "id = ''"
                  // };

                });
                
              });
                                         
            function getCur(event) {
                let chkst = document.querySelector('.shaked');
                if (chkst) { 
                    chkst.addEventListener("click", filterByID);
                } else {
                  getCur();
                }
              }

              SeismicData.queryFeatures().then(function(evt) {
                evt.features.forEach(function(feature) {
                  
                  var att = feature.attributes
                  var test = geometryEngine.convexHull(feature.geometry)
                  var genpoly = null
                  if (att.grid_value <= 4.0) {
                    var rad = att.Shape__Length / 75
                    genpoly = new Circle({
                      center: test.centroid,
                      radius: rad,
                      radiusUnit: "meters"
                    })
                  } else {
                    genpoly = test
                  }
                  var polygonGraphic = new Graphic({
                    geometry: genpoly,
                    attributes: att,
                    type: "polygon"
                  });
                  graphicsLayer.add(polygonGraphic);
                });
                var renderer = {
                  type: "class-breaks",
                  field: "grid_value",
                  classificationMethod: "esriClassifyManual",
                  classBreakInfos: [{
                      minValue: 0,
                      maxValue: 1.9999,
                      symbol: {
                        color: [0, 0, 0, 0],
                        outline: {
                          color: [0, 0, 0, 0],
                          width: 0.4,
                          type: "simple-line",
                          style: "solid"
                        },
                        type: "simple-fill",
                        style: "solid"
                      },
                      label: "I (Not Felt)"
                    },
                    {
                      minValue: 2.0,
                      maxValue: 3.0,
                      symbol: {
                        color: [191, 204, 255, .3],
                        outline: {
                          color: [0, 0, 0, 0],
                          width: 0.4,
                          type: "simple-line",
                          style: "solid"
                        },
                        type: "simple-fill",
                        style: "solid"
                      },
                      label: "II (Weak)"
                    },
                    {
                      minValue: 3.1,
                      maxValue: 3.9,
                      symbol: {
                        color: [153, 153, 255, .4],
                        outline: {
                          color: [0, 0, 0, 0],
                          width: 0.4,
                          type: "simple-line",
                          style: "solid"
                        },
                        type: "simple-fill",
                        style: "solid"
                      },
                      label: "III (Weak)"
                    },
                    {
                      minValue: 4.0,
                      maxValue: 4.5,
                      symbol: {
                        color: [136, 255, 255, 1],
                        outline: {
                          color: [0, 0, 0, 0],
                          width: 0.4,
                          type: "simple-line",
                          style: "solid"
                        },
                        type: "simple-fill",
                        style: "solid"
                      },
                      label: "IV (Light)"
                    },
                    {
                      minValue: 4.5,
                      maxValue: 4.9999,
                      symbol: {
                        color: [125, 248, 148, 1],
                        outline: {
                          color: [0, 0, 0, 0],
                          width: 0.4,
                          type: "simple-line",
                          style: "solid"
                        },
                        type: "simple-fill",
                        style: "solid"
                      },
                      label: "V (Light)"
                    },
                    {
                      minValue: 6.0,
                      maxValue: 6.9999,
                      symbol: {
                        color: [255, 255, 0, 1],
                        outline: {
                          color: [0, 0, 0, 0],
                          width: 0.4,
                          type: "simple-line",
                          style: "solid"
                        },
                        type: "simple-fill",
                        style: "solid"
                      },
                      label: "VI (Strong)"
                    },
                    {
                      minValue: 7.0,
                      maxValue: 7.9999,
                      symbol: {
                        color: [255, 221, 0, 1],
                        outline: {
                          color: [0, 0, 0, 0],
                          width: 0.4,
                          type: "simple-line",
                          style: "solid"
                        },
                        type: "simple-fill",
                        style: "solid"
                      },
                      label: "VII (Very Strong)"
                    },
                    {
                      minValue: 8.0,
                      maxValue: 8.9999,
                      symbol: {
                        color: [255, 145, 0, 1],
                        outline: {
                          color: [0, 0, 0, 0],
                          width: 0.4,
                          type: "simple-line",
                          style: "solid"
                        },
                        type: "simple-fill",
                        style: "solid"
                      },
                      label: "VIII (Severe) "
                    },
                    {
                      minValue: 9.0,
                      maxValue: 9.9999,
                      symbol: {
                        color: [255, 0, 0, 1],
                        outline: {
                          color: [0, 0, 0, 0],
                          width: 0.4,
                          type: "simple-line",
                          style: "solid"
                        },
                        type: "simple-fill",
                        style: "solid"
                      },
                      label: "IX (Violent)"
                    },
                    {
                      minValue: 10.0,
                      maxValue: 10.9999,
                      symbol: {
                        color: [221, 0, 0, 1],
                        outline: {
                          color: [0, 0, 0, 0],
                          width: 0.4,
                          type: "simple-line",
                          style: "solid"
                        },
                        type: "simple-fill",
                        style: "solid"
                      },
                      label: "X"
                    },
                    {
                      minValue: 11.0,
                      maxValue: 11.9999,
                      symbol: {
                        color: [136, 0, 0, 1],
                        outline: {
                          color: [0, 0, 0, 0],
                          width: 0.4,
                          type: "simple-line",
                          style: "solid"
                        },
                        type: "simple-fill",
                        style: "solid"
                      },
                      label: "XI"
                    },
                    {
                      minValue: 12.0,
                      maxValue: 12.0,
                      symbol: {
                        color: [68, 0, 0, 1],
                        outline: {
                          color: [0, 0, 0, 0],
                          width: 0.4,
                          type: "simple-line",
                          style: "solid"
                        },
                        type: "simple-fill",
                        style: "solid"
                      },
                      label: "XII"
                    }
                  ]
                }
                var popuptemp = {
                  title: "Shake Intensity",
                  content: [{
                    type: "fields",
                    fieldInfos: [{
                        fieldName: "grid_value",
                        label: "Grid Value"
                      },
                      {
                        fieldName: "id",
                        label: "id"
                      },
                      {
                        fieldName: "ObjectID",
                        label: "ObjectID"
                      },
                      {
                        fieldName: "url",
                        label: "Url"
                      }
                    ]
                  }]
                }
                fl = new FeatureLayer({
                  source: graphicsLayer.graphics,
                  objectIdField: "ObjectID",
                  geometryType: "polygon",
                  fields: [{
                    name: "ObjectID",
                    alias: "ObjectID",
                    type: "oid"
                  },{
                    name: "id",
                    alias: "id",
                    type: "string"
                  }, {
                    name: "url",
                    alias: "url",
                    type: "string"
                  }, {
                    name: "grid_value",
                    alias: "grid_value",
                    type: "double"
                  }],
                  renderer: renderer,
                  popupEnabled: true,
                  popupTemplate: popuptemp
                });
                map.add(fl);
                console.log(fl);
              });
            });
                
          }
      });
    
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  
  <div class="contn">  
    <div>  
      <div>
        <div id="Shakemaps">Shakemaps</div>
      </div>
    </div>  
  </div>
  
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Cam,

   This service you are using is horribly buggy and terrible.  Are you sure you want to continue to invest time working with it?

0 Kudos
CamCode
New Contributor III

I just noticed it was down again since about 30 minutes ago - I started on  ..../mapserver/12/ service for the shake intensities but noticed that was updated as depreciated as of May 2020, the link in that message refereed me to .../featureserver/1/ as the latest recommendation. i.e. https://www.arcgis.com/home/item.html?id=af7568d8579048f7b42e534891824029 -> points to this as new version: https://www.arcgis.com/home/item.html?id=9e2f2b544c954fda9cd13b7f3e6eebce  - what other options may I have? The service layer was out completely yesterday for maybe 2 hours, now it looks like the queries or object is stripped (hopefully will resume soon as well, I experienced similar outages from ../mapserver/12/ as well before realizing it was marked depreciated and moving to featureserver/1/)

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

You should call tech support and report the issue with the service.

CamCode
New Contributor III

It looks like it is back up now, the live codepen (with the above code) is here. I prefer the client side filter but have never gotten it to work with my graphic polygons I customized with the 'SeismicData' layer data - I have gotten the filters to work initially with the 'server-side'  definitionExpression which is why I was pursuing that one, I just wasnt able to update the id definitionExpression after one was initially called.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Updated code to ensure only unique vals added as checkboxes.

Cam,

  Here is my changes to your code.

  • If you just need to query a service for the data then do not use a FeatureLayer just for that.
  • no need for a GraphicsLayer at all if you are just adding the graphics to a client side FeatureLayer
  • The filter need to applied to your client side FeatureLayer.
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Add layers to a map</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .contn {
      position: absolute;
      bottom: 0px;
      left: 0px;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.15/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/geometry/geometryEngine",
      "esri/geometry/Circle",
      "esri/Graphic",
      "esri/symbols/SimpleFillSymbol",
      "esri/renderers/ClassBreaksRenderer",
      "esri/widgets/Legend",
      "esri/tasks/QueryTask",
      "esri/tasks/support/Query"
    ], function (
      Map,
      MapView,
      FeatureLayer,
      geometryEngine,
      Circle,
      Graphic,
      SimpleFillSymbol,
      ClassBreaksRenderer,
      Legend,
      QueryTask,
      Query) {

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

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-122, 37],
        zoom: 2
      });

      let eqLayerView;
      let fl;
      let gras = [];
      let dVals = [];

      let QT = new QueryTask({
        url: "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1"
      });
      let query = new Query();
      query.where = "eventTime >= CURRENT_TIMESTAMP - 30 AND grid_value > 2";
      query.outFields = ["id"];
      query.returnDistinctValues = true;
      query.returnGeometry = false;
      query.orderByFields =["id"];
      QT.execute(query).then(function (results) {
        results.features.map(function (feat) {
          let id = feat.attributes["id"];
          if(dVals[id] === undefined){
            dVals[id] = true;
            let opt = document.createElement("input");
            opt.type = "checkbox";
            let label = document.createElement('label')
            label.innerHTML = id;
            opt.className = "id-item visible-id shakeids";
            opt.setAttribute("data-id", id);
            opt.name = "shaks";

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

            getCur(event);
          }
        });
      }).catch(function(err){
        console.error(err);
      });

      function getCur(event) {
        let chkst = document.querySelector('.shaked');
        if (chkst) {
          chkst.addEventListener("click", filterByID);
        } else {
          getCur();
        }
      }

      query.outFields = ["*"];
      query.returnDistinctValues = false;
      query.returnGeometry = true;
      QT.execute(query).then(function (evt) {
        evt.features.forEach(function (feature) {
          var att = feature.attributes
          var test = geometryEngine.convexHull(feature.geometry)
          var genpoly = null
          if (att.grid_value <= 4.0) {
            var rad = att.Shape__Length / 75
            genpoly = new Circle({
              center: test.centroid,
              radius: rad,
              radiusUnit: "meters"
            })
          } else {
            genpoly = test
          }
          var polygonGraphic = new Graphic({
            geometry: genpoly,
            attributes: att,
            type: "polygon"
          });
          gras.push(polygonGraphic);
        });
        var renderer = {
          type: "class-breaks",
          field: "grid_value",
          classificationMethod: "esriClassifyManual",
          classBreakInfos: [{
              minValue: 0,
              maxValue: 1.9999,
              symbol: {
                color: [0, 0, 0, 0],
                outline: {
                  color: [0, 0, 0, 0],
                  width: 0.4,
                  type: "simple-line",
                  style: "solid"
                },
                type: "simple-fill",
                style: "solid"
              },
              label: "I (Not Felt)"
            },
            {
              minValue: 2.0,
              maxValue: 3.0,
              symbol: {
                color: [191, 204, 255, .3],
                outline: {
                  color: [0, 0, 0, 0],
                  width: 0.4,
                  type: "simple-line",
                  style: "solid"
                },
                type: "simple-fill",
                style: "solid"
              },
              label: "II (Weak)"
            },
            {
              minValue: 3.1,
              maxValue: 3.9,
              symbol: {
                color: [153, 153, 255, .4],
                outline: {
                  color: [0, 0, 0, 0],
                  width: 0.4,
                  type: "simple-line",
                  style: "solid"
                },
                type: "simple-fill",
                style: "solid"
              },
              label: "III (Weak)"
            },
            {
              minValue: 4.0,
              maxValue: 4.5,
              symbol: {
                color: [136, 255, 255, 1],
                outline: {
                  color: [0, 0, 0, 0],
                  width: 0.4,
                  type: "simple-line",
                  style: "solid"
                },
                type: "simple-fill",
                style: "solid"
              },
              label: "IV (Light)"
            },
            {
              minValue: 4.5,
              maxValue: 4.9999,
              symbol: {
                color: [125, 248, 148, 1],
                outline: {
                  color: [0, 0, 0, 0],
                  width: 0.4,
                  type: "simple-line",
                  style: "solid"
                },
                type: "simple-fill",
                style: "solid"
              },
              label: "V (Light)"
            },
            {
              minValue: 6.0,
              maxValue: 6.9999,
              symbol: {
                color: [255, 255, 0, 1],
                outline: {
                  color: [0, 0, 0, 0],
                  width: 0.4,
                  type: "simple-line",
                  style: "solid"
                },
                type: "simple-fill",
                style: "solid"
              },
              label: "VI (Strong)"
            },
            {
              minValue: 7.0,
              maxValue: 7.9999,
              symbol: {
                color: [255, 221, 0, 1],
                outline: {
                  color: [0, 0, 0, 0],
                  width: 0.4,
                  type: "simple-line",
                  style: "solid"
                },
                type: "simple-fill",
                style: "solid"
              },
              label: "VII (Very Strong)"
            },
            {
              minValue: 8.0,
              maxValue: 8.9999,
              symbol: {
                color: [255, 145, 0, 1],
                outline: {
                  color: [0, 0, 0, 0],
                  width: 0.4,
                  type: "simple-line",
                  style: "solid"
                },
                type: "simple-fill",
                style: "solid"
              },
              label: "VIII (Severe) "
            },
            {
              minValue: 9.0,
              maxValue: 9.9999,
              symbol: {
                color: [255, 0, 0, 1],
                outline: {
                  color: [0, 0, 0, 0],
                  width: 0.4,
                  type: "simple-line",
                  style: "solid"
                },
                type: "simple-fill",
                style: "solid"
              },
              label: "IX (Violent)"
            },
            {
              minValue: 10.0,
              maxValue: 10.9999,
              symbol: {
                color: [221, 0, 0, 1],
                outline: {
                  color: [0, 0, 0, 0],
                  width: 0.4,
                  type: "simple-line",
                  style: "solid"
                },
                type: "simple-fill",
                style: "solid"
              },
              label: "X"
            },
            {
              minValue: 11.0,
              maxValue: 11.9999,
              symbol: {
                color: [136, 0, 0, 1],
                outline: {
                  color: [0, 0, 0, 0],
                  width: 0.4,
                  type: "simple-line",
                  style: "solid"
                },
                type: "simple-fill",
                style: "solid"
              },
              label: "XI"
            },
            {
              minValue: 12.0,
              maxValue: 12.0,
              symbol: {
                color: [68, 0, 0, 1],
                outline: {
                  color: [0, 0, 0, 0],
                  width: 0.4,
                  type: "simple-line",
                  style: "solid"
                },
                type: "simple-fill",
                style: "solid"
              },
              label: "XII"
            }
          ]
        }
        var popuptemp = {
          title: "Shake Intensity",
          content: [{
            type: "fields",
            fieldInfos: [{
                fieldName: "grid_value",
                label: "Grid Value"
              },
              {
                fieldName: "id",
                label: "id"
              },
              {
                fieldName: "ObjectID",
                label: "ObjectID"
              },
              {
                fieldName: "url",
                label: "Url"
              }
            ]
          }]
        }
        fl = new FeatureLayer({
          source: gras,
          objectIdField: "ObjectID",
          geometryType: "polygon",
          fields: [{
            name: "ObjectID",
            alias: "ObjectID",
            type: "oid"
          }, {
            name: "id",
            alias: "id",
            type: "string"
          }, {
            name: "url",
            alias: "url",
            type: "string"
          }, {
            name: "grid_value",
            alias: "grid_value",
            type: "double"
          }],
          renderer: renderer,
          popupEnabled: true,
          popupTemplate: popuptemp
        });
        map.add(fl);

        view.whenLayerView(fl).then(function (layerView) {
          eqLayerView = layerView;
          eqLayerView.filter = {
            where: "id = ''"
          };
        });
      });

      let quakeFoldr = document.getElementById("Shakemaps").parentElement;
      let onup = quakeFoldr.parentElement;
      let twup = onup.parentElement;

      let idElement = document.createElement("div");
      let isElement = document.createElement("ul");

      idElement.className += "shaked";
      isElement.className += "k-group";
      twup.appendChild(idElement);
      idElement.appendChild(isElement);

      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 + ")"
        };
      }
    });
  </script>
</head>

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

  <div class="contn">
    <div>
      <div>
        <div id="Shakemaps">Shakemaps</div>
      </div>
    </div>
  </div>

</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
CamCode
New Contributor III

Thanks a lot, Robert, very helpful; I did notice the dups and got a fix for that. Will take a look at the update, nailed the issues- however I am a little curious about the query task and new query calls you are doing. How does new query(); uniquely relate to it's call initially? In other words how could I handle two calls, or more? (i.e. the below doing two calls)

 let QT;
  let QTt;

  sAta();

  function sAta() { 
      QT = new QueryTask({
        url: "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1"
      });
      QTt = new QueryTask({
        url: "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/0"
      });
      //console.log("data");
  } 
  
  
  let query = new Query();
  console.log(query); <-------- works but only shows first URL response
  
  let query2 = QTt.createQuery();
  console.log(query2);
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Cam,

   There is no such function as createQuery on the QueryTask class. You would use 

let query2 = new Query();

or just change the query vars properties and re-use it for the second query.