AnsweredAssumed Answered

Query a FeatureLayer

Question asked by jpilbeam on Oct 11, 2018
Latest reply on Oct 11, 2018 by jgrayson-esristaff

How do I query a feature layer? My feature layer is about 150 points with attributes. I'd like to be able to have the user query these points by "Type".  

 

I've had a look at this example: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-query/index.html As far as I can see I should be able to use it.

 

Based on the example, here's what I came up with using my own data. But it's not functioning.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Query features from a FeatureLayer - 4.9</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
    <script src="https://js.arcgis.com/4.9/"></script>

    <style>
        html,
        body,
        #viewDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #infoDiv {
            background-color: white;
            color: black;
            padding: 6px;
            width: 400px;
        }

        #results {
            font-weight: bolder;
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/geometry/geometryEngine",
            "esri/Graphic"
        ],
            function (
                Map, MapView,
                FeatureLayer,
                GraphicsLayer,
                geometryEngine,
                Graphic
            ) {

                var attTypeSelect = document.getElementById("attractions");

                //attractions
                var attractions = new FeatureLayer({
                    url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=kIhkvEGZO_-PPXgeZu2nYpHz_eXYZ1NZ9DGgX7CbRZsG9vic6BHNeOiiLw37TCoGgn22dNexnPmhppQk8YeXV3f0OxYcTC1YcMINIwcbcw_e8tEpKfdkjCLL3byL640Dil7J-izJUpOFIl7Wa1L6UpZ-xZbP1oA41jmhaOC_dha3PPvm-lwnFY6ZsAk5IIdub0_nimOM2IlTUTaER45elvCg3lfmy5BVodDkggLnWQY-60sg50jYQys-QSpzDFSShttps://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=brm_9OG_7AUlcufevjfLoiSCxxlcVN1g5n68z0G-L5L1gE22RKd_us2vNRlwNY1EwS0ci88AMo4Xu7Y90ScmkgC4KubpvN94IAAPMn1JdSEaDsNACutdsM0RCDxAUt6OJa5JDd3K53AI816rgB6QgMGaqNnR4A7-XNgfqKwfN9ygBw_P0uN_Mec_NPoKg19J_S91p9LwPuxjSGgYjPC6N6rJTsp206_z4Om7XtP_3uUaVHf6NRMDy4TdLMotUnxs",
                    outFields: ["*"],
                    id: "attractions",
                    visible: false
                });
                //GraphicsLayer for desplaying results
                var resultsLayer = new GraphicsLayer();

                var map = new Map({
                    basemap: "dark-gray",
                    layer: "attractions"
                });

                var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    center: [-87.75188, 41.23308],
                    zoom: 10
                });
                view.ui.add("infoDiv", "top-right");

                //query all features from the attractions layer
                view.when(function () {
                    return attractions.when(function () {
                        var query = attractions.createQuery();
                        return attractions.queryFeatures(query);
                    });
                })
                    .then(getValues)
                    .then(getUniqueValues)
                    .then(addToSelect);

                // return an array of all the values in the
                // Type field of the attractions layer
                function getValues(response) {
                    var features = response.features;
                    var values = features.map(function (feature) {
                        return feature.attributes.Type;
                    });
                    return values;
                }

                // return an array of unique values in
                // the Type field of the attractions layer
                function getUniqueValues(values) {
                    var uniqueValues = [];

                    values.forEach(function (item, i) {
                        if ((uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
                            (item !== "")) {
                            uniqueValues.push(item);
                        }
                    });
                    return uniqueValues;
                }

                // Add the unique values to the attractions type
                // select element. This will allow the user
                // to filter attractions by type.
                function addToSelect(values) {
                    values.sort();
                    values.forEach(function (value) {
                        var option = document.createElement("option");
                        option.text = value;
                        attTypeSelect.add(option);
                    });

                    return setattractionsDefinitionExpression(attTypeSelect.value);
                }

                // set the definition expression on the attractions
                // layer to reflect the selection of the user
                function setattractionsDefinitionExpression(newValue) {
                    attractions.definitionExpression = "Type" + newValue + "'";

                    if (!attractions.visible) {
                        attractions.visible = true;
                    }

                    return queryForAtractionGeometries();
                }

                // Get all the geometries of the attractions layer
                // the createQuery() method creates a query
                // object that respects the definitionExpression
                // of the layer
                function queryForAttractionGeometries() {
                    var attractionsQuery = attractions.createQuery();

                    return attractions.queryFeatures(attractionsQuery)
                        .then(function (response) {
                            attractionsGeometries = response.features.map(function (feature) {
                                return feature.geometry;
                            });

                            return attractionsGeometries;
                        });
                }
            });

    </script>

</head>

<body>
    <div id="viewDiv"></div>
    <div id="infoDiv">
        Select attractions type:
        <select id="attractions"></select>
    </div>
</body>

</html>

Outcomes