Filter Features By Attribute Combined With Query Features from a FeatureLayerView

AshRymer1 · ‎05-01-2020

Hi,

Iv been having trouble trying to combine the functionality between Filter by attribute and Query Features from a FeatureLayerView. Both samples are below;

Filter features by attribute | ArcGIS API for JavaScript 4.15

Query features from a FeatureLayerView | ArcGIS API for JavaScript 4.15

The aim is to apply the chosen filter (Filter feature by attribute), and this filter be applied to the Query FeatureLayerView showing in the side panel.

We have currently got both functionality working correctly in one sample, however they are still working in isolation from each other. I have added the code we have below.

Any help would be much appreciated.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Filter features by attribute - Comb - Query features from a FeatureLayerView - 4.15</title>

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

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

        #seasons-filter {
            height: 160px;
            width: 160px;
            width: 100%;
            visibility: hidden;
        }

        .season-item {
            width: 100%;
            padding: 12px;
            text-align: center;
            vertical-align: baseline;
            cursor: pointer;
            height: 40px;
            height: 50px;
        }

        .season-item:focus {
            background-color: dimgrey;
        }

        .season-item:hover {
            background-color: dimgrey;
        }

        .panel-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .panel-side {
            padding: 2px;
            box-sizing: border-box;
            width: 300px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.6);
            overflow: auto;
            z-index: 60;
        }

        .panel-side h3 {
            padding: 0 20px;
            margin: 20px 0;
        }

        .panel-side ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .panel-side li {
            list-style: none;
            padding: 10px 20px;
        }

        .panel-result {
            cursor: pointer;
            margin: 2px 0;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .panel-result:hover,
        .panel-result:focus {
            color: orange;
            background-color: rgba(0, 0, 0, 0.75);
        }
    </style>
    <script>
        require([
            "esri/views/MapView",
            "esri/Map",
            "esri/layers/FeatureLayer",
            "esri/widgets/Expand"
        ], function(MapView, Map, FeatureLayer, Expand) {

            let floodLayerView;
            let graphics;
            const listNode = document.getElementById("nyc_graphics");

            const popupTemplate = {
                // autocasts as new PopupTemplate()
                title: "{NAME} in {COUNTY}",
                content: [
                    {
                        type: "fields",
                        fieldInfos: [
                            {
                                fieldName: "B12001_calc_pctMarriedE",
                                label: "% Married",
                                format: {
                                    places: 0,
                                    digitSeparator: true
                                }
                            }
                        ]
                    }
                ]
            };

            // flash flood warnings layer

            const layer = new FeatureLayer({
                url:
                    "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2",
                outFields: ["NAME", "GEOID"], // used by queryFeatures
                popupTemplate: popupTemplate
            });

            const map = new Map({
                basemap: "gray-vector",
                layers: [layer]
            });

            const view = new MapView({
                map: map,
                container: "viewDiv",
                center: [-73.95, 40.702],
                zoom: 11
            });

            const seasonsNodes = document.querySelectorAll(`.season-item`);
            const seasonsElement = document.getElementById("seasons-filter");

            // click event handler for seasons choices
            seasonsElement.addEventListener("click", filterBySeason);

            // User clicked on Winter, Spring, Summer or Fall
            // set an attribute filter on flood warnings layer view
            // to display the warnings issued in that season
            function filterBySeason(event) {
                const selectedSeason = event.target.getAttribute("data-season");
                floodLayerView.filter = {
                    where: "State = '" + selectedSeason + "'"
                };
            }

            view.whenLayerView(layer).then(function(layerView) {
                // flash flood warnings layer loaded
                // get a reference to the flood warnings layerview
                floodLayerView = layerView;

                // set up UI items
                seasonsElement.style.visibility = "visible";
                const seasonsExpand = new Expand({
                    view: view,
                    content: seasonsElement,
                    expandIconClass: "esri-icon-filter",
                    group: "top-left"
                });
                //clear the filters when user closes the expand widget
                seasonsExpand.watch("expanded", function() {
                    if (!seasonsExpand.expanded) {
                        floodLayerView.filter = null;
                    }
                });
                view.ui.add(seasonsExpand, "top-left");
            });

            // Start Of Side Bar Element

           view.whenLayerView(layer).then(function(layerView) {
                layerView.watch("updating", function(value) {
                    if (!value) {
                        // wait for the layer view to finish updating
                        // query all the features available for drawing.
                        layerView
                            .queryFeatures({
                                geometry: view.extent,
                                returnGeometry: true,
                                orderByFields: ["NAME"]
                            })
                            .then(function(results) {
                                graphics = results.features;

                                const fragment = document.createDocumentFragment();

                                graphics.forEach(function(result, index) {
                                    const attributes = result.attributes;
                                    const name = attributes.NAME;

                                    // Create a list zip codes in NY
                                    const li = document.createElement("li");
                                    li.classList.add("panel-result");
                                    li.tabIndex = 0;
                                    li.setAttribute("data-result-id", index);
                                    li.textContent = name;

                                    fragment.appendChild(li);
                                });
                                // Empty the current list
                                listNode.innerHTML = "";
                                listNode.appendChild(fragment);
                            })
                            .catch(function(error) {
                                console.error("query failed: ", error);
                            });
                    }
                });
            });

            // listen to click event on the zip code list
            listNode.addEventListener("click", onListClickHandler);

            function onListClickHandler(event) {
                const target = event.target;
                const resultId = target.getAttribute("data-result-id");

                // get the graphic corresponding to the clicked zip code
                const result =
                    resultId && graphics && graphics[parseInt(resultId, 10)];

                if (result) {
                    // open the popup at the centroid of zip code polygon
                    // and set the popup's features which will populate popup content and title.

                    view
                        .goTo(result.geometry.extent.expand(2))
                        .then(function() {
                            view.popup.open({
                                features: [result],
                                location: result.geometry.centroid
                            });
                        })
                        .catch(function(error) {
                            if (error.name != "AbortError") {
                                console.error(error);
                            }
                        });
                }
            }

        });
    </script>
</head>

<body>
<div class="panel-container">
<div class="panel-side esri-widget">
    <h3>Marriage by Census Tract</h3>
    <ul id="nyc_graphics">
        <li>Loading&hellip;</li>
    </ul>
</div>
<div id="seasons-filter" class="esri-widget">
    <div class="season-item visible-season" data-season="New York">New York</div>
    <div class="season-item visible-season" data-season="New Jersey">New Jersey</div>

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