AnsweredAssumed Answered

Query Features by Category and Keyword

Question asked by jpilbeam Champion on Jun 24, 2020
Latest reply on Jun 25, 2020 by rscheitlin

I want to create a webmap that is based off of this data-set, for example: Will County EEC Mobile Site 

 

I'm not familiar enough with querying to be able to recreate the querying. My data-set has multiple categories and multiple keywords. I geocoded the spreadsheet, so now I have a point for each field. Like the example, I would like to have a orderly drop down for the category field and the keyword field.

 

Currently, I can query features by the category field, but as you can see it is very impractical being that there are too many choices. How can I create my dropdown to look like the above?

 

My current code (taken from sample code):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Recycling Map</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 {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

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

        #results {
            font-weight: bolder;
            padding-top: 10px;
        }

        .slider {
            width: 100%;
            height: 60px;
        }

        #drop-downs {
            padding-bottom: 15px;
        }
    </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 wellTypeSelect = document.getElementById("category");

        // oil and gas wells
        var wellsLayer = new FeatureLayer({
          portalItem: {
            // autocasts as new PortalItem()
            id: "f76b85e6c5314a0c96539d704fe92452"
          },
          outFields: ["*"],
          visible: false
        });

  

        // GraphicsLayer for displaying results
        var resultsLayer = new GraphicsLayer();

        var map = new Map({
          basemap: "dark-gray",
          layers: [wellsLayer, resultsLayer]
        });

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

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

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

        // return an array of unique values in
        // the STATUS2 field of the wells 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 wells type
        // select element. This will allow the user
        // to filter wells by type.
        function addToSelect(values) {
          values.sort();
          values.forEach(function(value) {
            var option = document.createElement("option");
            option.text = value;
            wellTypeSelect.add(option);
          });

          return setWellsDefinitionExpression(wellTypeSelect.value);
        }

        // set the definition expression on the wells
        // layer to reflect the selection of the user
        function setWellsDefinitionExpression(newValue) {
          wellsLayer.definitionExpression = "USER_Categ = '" + newValue + "'";

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

          return queryForWellGeometries();
        }

        // Get all the geometries of the wells layer
        // the createQuery() method creates a query
        // object that respects the definitionExpression
        // of the layer
        function queryForWellGeometries() {
          var wellsQuery = wellsLayer.createQuery();

          return wellsLayer.queryFeatures(wellsQuery).then(function(response) {
            wellsGeometries = response.features.map(function(feature) {
              return feature.geometry;
            });

            return wellsGeometries;
          });
        }

        // set a new definitionExpression on the wells layer
        wellTypeSelect.addEventListener("change", function() {
          var type = event.target.value;
          setWellsDefinitionExpression(type);
        });
      });</script>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="infoDiv" class="esri-widget">
        <div id="drop-downs">
            Select Category:
            <select id="category" class="esri-widget"></select>
        </div>
        <div id="results" class="esri-widget"></div>
    </div>
</body>
</html>

Outcomes