saraneh/access_attributes_of_featureset.html

## access_attributes_of_featureset.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.13</title>

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

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

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

      #drop-downs {
        padding-bottom: 15px;
      }

      #results {
        font-weight: bolder;
        padding-top: 10px;
      }
    </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 resultsLayer = new GraphicsLayer();

        var wellTypeSelect = document.getElementById("well-type");

        var selectPop = document.getElementById("population");

        var selectBuild = document.getElementById("property");

        var selectCEF = document.getElementById("critical");

        var contentsPop;

        var contentsBuild;

        var contentsCEF;

        var queryQuakes = document.getElementById("query-quakes");

        for (let i = 1; i <= 100; i++) {
          contentsPop += "<option>" + i + "</option>";
        }

        for (let i = 1; i <= 100; i++) {
          contentsBuild += "<option>" + i + "</option>";
        }

        for (let i = 1; i <= 100; i++) {
          contentsCEF += "<option>" + i + "</option>";
        }
          population.innerHTML = contentsPop;
          property.innerHTML = contentsBuild;
          critical.innerHTML = contentsCEF;

        var wellsLayer = new FeatureLayer({
          portalItem: {
            // autocasts as new PortalItem()
            id: "1c47510e0acb47d8b5a35fac079712f8"
          },
          outFields: ["NAMELSAD", "Rank_Pop", "Rank_Expos", "Rank_CEF"],
          visible: true
        });

        var floodLayer = new FeatureLayer({
          portalItem: {
            // autocasts as new PortalItem()
            id: "c90fbea1abc648d99f26372ab506e071"
          },
          visible: true
        });

        var map = new Map({
          basemap: "topo",
          layers: [wellsLayer, floodLayer, resultsLayer]
        });

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

        // 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.NAMELSAD;
          });
          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);
        }

        function setWellsDefinitionExpression(newValue) {
          wellsLayer.definitionExpression = "NAMELSAD = '" + newValue + "'";

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

          return queryForWellGeometries();
        }

        function queryForWellGeometries() {
          var wellsQuery = wellsLayer.createQuery();

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

            return wellsGeometries;
          });
        }


        wellTypeSelect.addEventListener("change", function() {
          var type = event.target.value;
          setWellsDefinitionExpression(type);
        });

        queryQuakes.addEventListener("click", function() {
          displayResults();
        });

        function displayResults(results) {
          resultsLayer.removeAll();
          var pop = (selectPop.value)/100;
          var build = (selectBuild.value)/100;
          var CEFs = (selectCEF.value)/100;
          document.getElementById("results").innerHTML = pop + build + CEFs + " earthquakes found";
        }
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="infoDiv" class="esri-widget">
      <div id="drop-downs">
        Select county:
        <select id="well-type" class="esri-widget"></select>
      </div>
      <div id="drop-downs">Weight importance of "population" : <select id="population"></select> % </div>
      <div id="drop-downs">Weight importance of "property" : <select id="property"></select> % </div>
      <div id="drop-downs">Weight importance of "critical facilities" : <select id="critical"></select> % </div>
      <button id="query-quakes" class="esri-widget">Calculate Risk</button>
      <div id="results" class="esri-widget"></div>
      </div>
  </body>
</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.13</title>

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

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

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

	#drop-downs {
	padding-bottom: 15px;
	}

	#results {
	font-weight: bolder;
	padding-top: 10px;
	}
	</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 resultsLayer = new GraphicsLayer();

	var wellTypeSelect = document.getElementById("well-type");

	var selectPop = document.getElementById("population");

	var selectBuild = document.getElementById("property");

	var selectCEF = document.getElementById("critical");

	var contentsPop;

	var contentsBuild;

	var contentsCEF;

	var queryQuakes = document.getElementById("query-quakes");

	for (let i = 1; i <= 100; i++) {
	contentsPop += "<option>" + i + "</option>";
	}

	for (let i = 1; i <= 100; i++) {
	contentsBuild += "<option>" + i + "</option>";
	}

	for (let i = 1; i <= 100; i++) {
	contentsCEF += "<option>" + i + "</option>";
	}
	population.innerHTML = contentsPop;
	property.innerHTML = contentsBuild;
	critical.innerHTML = contentsCEF;

	var wellsLayer = new FeatureLayer({
	portalItem: {
	// autocasts as new PortalItem()
	id: "1c47510e0acb47d8b5a35fac079712f8"
	},
	outFields: ["NAMELSAD", "Rank_Pop", "Rank_Expos", "Rank_CEF"],
	visible: true
	});

	var floodLayer = new FeatureLayer({
	portalItem: {
	// autocasts as new PortalItem()
	id: "c90fbea1abc648d99f26372ab506e071"
	},
	visible: true
	});

	var map = new Map({
	basemap: "topo",
	layers: [wellsLayer, floodLayer, resultsLayer]
	});

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

	// 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.NAMELSAD;
	});
	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);
	}

	function setWellsDefinitionExpression(newValue) {
	wellsLayer.definitionExpression = "NAMELSAD = '" + newValue + "'";

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

	return queryForWellGeometries();
	}

	function queryForWellGeometries() {
	var wellsQuery = wellsLayer.createQuery();

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

	return wellsGeometries;
	});
	}


	wellTypeSelect.addEventListener("change", function() {
	var type = event.target.value;
	setWellsDefinitionExpression(type);
	});

	queryQuakes.addEventListener("click", function() {
	displayResults();
	});

	function displayResults(results) {
	resultsLayer.removeAll();
	var pop = (selectPop.value)/100;
	var build = (selectBuild.value)/100;
	var CEFs = (selectCEF.value)/100;
	document.getElementById("results").innerHTML = pop + build + CEFs + " earthquakes found";
	}
	});
	</script>
	</head>

	<body>
	<div id="viewDiv"></div>
	<div id="infoDiv" class="esri-widget">
	<div id="drop-downs">
	Select county:
	<select id="well-type" class="esri-widget"></select>
	</div>
	<div id="drop-downs">Weight importance of "population" : <select id="population"></select> % </div>
	<div id="drop-downs">Weight importance of "property" : <select id="property"></select> % </div>
	<div id="drop-downs">Weight importance of "critical facilities" : <select id="critical"></select> % </div>
	<button id="query-quakes" class="esri-widget">Calculate Risk</button>
	<div id="results" class="esri-widget"></div>
	</div>
	</body>
	</html>