Features not changing on executing query

wizgis — Wed, 18 Oct 2023 12:03:11 GMT

Hi Community,

I am working on a query app that executes a query based on a condition. I am using the following sample code example for reference purpose : https://developers.arcgis.com/javascript/latest/sample-code/query/

The query app that I am working on seems to work fine as am getting correct number of records for a particular query that gets executed however, the issue is the features are not being returned correctly.

Initially, when I set the same query in map viewer (red dots) and in the application (green dots) features are returned correctly as shown in the first two figures 1 & 2 however, if I change the query in the application and and in map viewer discrepancy is observed as shown in the last two figures 3 & 4.

I am not sure what am I missing here and why features are not being correctly. Any inputs on this would be helpful.

Re: Features not changing on executing query

TimDietz — Wed, 18 Oct 2023 13:48:42 GMT

Can you post your before and after queries? Some code snippets of how it was before vs. now would be helpful.

Re: Features not changing on executing query

wizgis — Thu, 19 Oct 2023 05:15:51 GMT

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <style> html, body, #viewDiv{ padding: 0; margin: 0; height: 100%; width: 100% } #optionsDiv { background-color: dimgray; color: white; padding: 10px; width: 350px; } .esri-popup .esri-popup-header .esri-title { font-size: 18px; font-weight: bolder; } .esri-popup .esri-popup-body .esri-popup-content { font-size: 14px; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" /> <script src="script.js"></script> <script src="https://js.arcgis.com/4.27/"></script> <script> require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/rest/query", "esri/rest/support/Query"], function(esriConfig, Map, MapView, FeatureLayer, GraphicsLayer, query, Query){ esriConfig.apiKey = "" const floraURL = "" const popupTemplate = { title: "{Classification}, {Name}", fieldInfos: [ { fieldName: "Classification", label: "Classification" }, { fieldName: "ParasiteInfection", label: "Parasite Infection Identified" }, { fieldName: "Threats", label: "Threats Identified" } ], content: "Classification of Flora : {Classification} <br> " + "Any Parasite Infection : {ParasiteInfection} <br>" + "Are there any threats that have been identified : {Threats} <br>" }; const resultsLayer = new GraphicsLayer(); const params = new Query({ returnGeometry: true, outFields: ["*"] }); var map = new Map({ basemap: "arcgis-topographic", layers: [resultsLayer] }); var view = new MapView({ map: map, center: [0,0], zoom: 15, container: "viewDiv", popup: { dockEnabled : true, dockOptions: { position: "top-right", breakpoint: false } } }); view.when(function(){ view.ui.add("optionsDiv", "bottom-right"); document.getElementById("doBtn").addEventListener("click", doQuery); }); const attributeName = document.getElementById("attSelect"); const expressionsign = document.getElementById("signSelect"); const value = document.getElementById("valSelect"); function doQuery(){ params.where = attributeName.value + expressionsign.value + "'" + value.value + "'"; query .executeQueryJSON(floraURL, params) .then(getResults) .catch(promiseRejected); } function getResults(response){ const results = response.features.map(function (feature){ feature.symbol = { type: "simple-marker", // Use simple-marker for 2D symbology color: "green", // Set the color of the marker size: 10, // Set the size of the marker outline: { color: [0, 0, 0, 0.5], // Set the outline color and transparency width: 1 // Set the outline width } }; feature.popupTemplate = popupTemplate; return feature; }); resultsLayer.addMany(results) view.goTo(results).then(function(){ view.openPopup({ features: results, featureMenuOpen: true, updateLocationEnabled: true }); }) .catch(function (error){ if (error.name !== "AbourtError"){ console.error(error); } }); document.getElementById("printResults").innerHTML = results.length + "Results Found"; } function promiseRejected(error){ console.error("Promise Rejected: ", error.message); } }); </script> </head> <body> <div id="viewDiv"></div> <div class="esri-widget" id = "optionsDiv"> <h2>Flora Diversity of Sanjay Van.</h2> <select class="esri-widget" id="attSelect"> <option value="Classification">Classification</option> </select> <select class="esri-widget" id="signSelect"> <option value="=">is equal to</option> </select> <select class="esri-widget" id="valSelect"> <option value="Herb">Herb</option> <option value="Climber">Climber</option> <option value="Shrub">Shrub</option> <option value="Tree">Tree</option> <option value="Grass">Grass</option> <option value="Others">Others</option> </select> <br /> <br /> <button class="esri-widget" id="doBtn">Do Query</button> <br /> <p><span id="printResults"></span></p> </div> </body> </html>

@TimDietz I am attaching the code snippet that is being used. Based on my understanding and research that I have done so far it feels like I need to have a function/code that removes the features of current query first and then draw new features based on the new query that the user has put.

I am just not sure where and how to add this piece of code. Any insights would be helpful.

Re: Features not changing on executing query

wizgis — Thu, 19 Oct 2023 07:46:21 GMT

Update :

I was able to get it to work by adding the following line of code :

resultsLayer.removeAll(results)

topic Features not changing on executing query in ArcGIS JavaScript Maps SDK Questions

Features not changing on executing query

Re: Features not changing on executing query

Re: Features not changing on executing query

Re: Features not changing on executing query