nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Features not changing on executing query

wizgis

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.

Find more posts tagged with

Accepted answers

wizgis

Update :

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

resultsLayer.removeAll(results)

All comments

wizgis

Update :

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

resultsLayer.removeAll(results)

wizgis

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

TimDietz

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.