saraneh/query_problem.html

## query_problem.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 {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #viewDiv {
        float: left;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 80%;
      }

      #feature-node {
        float: left;
        width: 20%;
        height: 100%;
      }

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

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

      #results {
        text-align: center;
        font-weight: bold;
        padding-top: 10px;
      }

      #center {
        text-align: center;
      }

      #akViewDiv {
        padding: 0;
        margin: 0;
        height: 550px;
        width: 400px;
        background-color: rgba(255, 255, 255, 0.9);
      }

      p {
        text-align: center;
        padding: 5px;
      }

    </style>

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

        var resultsLayer = new GraphicsLayer();

        var countyTypeSelect = document.getElementById("county-type");

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

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

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

        var contentsPop;

        var contentsBuild;

        var contentsCEF;

        var queryCounties = document.getElementById("query-Counties");

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

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

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

        var countysLayer = 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 basemap = new Basemap({
          portalItem: {
            id: "d985d72baf914747914260b4b469a72e"  // WGS84 Streets Vector webmap
          },
          visible: true
        });

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

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

        var akView = new MapView({
          container: "akViewDiv",
          map: map,
          extent: {
            xmin: -82.92,
            ymin: 24.45,
            xmax: -66.95,
            ymax: 45.64,
            spatialReference: {
              wkid: 4326
            }
          },
          spatialReference: {
            // WGS_1984_EPSG_Alaska_Polar_Stereographic
            wkid: 4326
          },
          ui: {
            components: []
          }
        });
        view.ui.add("akViewDiv", "bottom-right");

        // query all features from the countys layer
        view
          .when(function() {
            return countysLayer.when(function() {
              var query = countysLayer.createQuery();
              query.returnGeometry = false;
              query.returnDistinctValues = true;
              return countysLayer.queryFeatures(query);
            });
          })
          .then(getValues)
          .then(getUniqueValues)
          .then(addToSelect);

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

          return setcountysDefinitionExpression(countyTypeSelect.value);
        }

        function setcountysDefinitionExpression(newValue) {
          countysLayer.definitionExpression = "NAMELSAD = '" + newValue + "'";

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

          return queryForcountyGeometries();
        }

        function queryForcountyGeometries() {
          countysQuery = countysLayer.createQuery();
          //countysQuery.returnGeometry = false;
          countysLayer.queryFeatures(countysQuery).then(function(response) {
            popVar = response.features[0].attributes.Rank_Pop;
            propVar = response.features[0].attributes.Rank_Expos;
            cefVar = response.features[0].attributes.Rank_CEF;
            namelsad = response.features[0].attributes.NAMELSAD;
            view.when(function(){
              view.goTo({
                target: response.features[0], // Graphic object
                zoom: 10
              });
            });
          });
        }

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

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

        function displayResults(results) {
          resultsLayer.removeAll();
          var pop = ((selectPop.value)/100) * popVar;
          var build = ((selectBuild.value)/100) * propVar;
          var CEFs = ((selectCEF.value)/100) * cefVar;
          var finalWeighted = pop + build + CEFs;
          var weightedRank;
          if (finalWeighted <= 1) {
            weightedRank = "Very Low Risk";
          } else if (finalWeighted <= 2) {
            weightedRank = "Low Risk";
          } else if (finalWeighted <= 3) {
            weightedRank = "Moderate Risk";
          } else if (finalWeighted <= 4) {
            weightedRank = "High Risk";
          } else {
            weightedRank = "Very High Risk";
          }
          document.getElementById("results").innerHTML = namelsad + ": " + weightedRank +" " + finalWeighted + "/5";
        }
      });
    </script>
  </head>

  <body>
    <div id="feature-node" class="esri-widget"><a href="http://nesec.org/"><img src="https://drive.google.com/uc?export=view&id=17NW9Aj2ApbbehZCfe4AROXUAhB4Y9CXh" width = "100%" ></a><br><br>
      <p><img src="https://drive.google.com/uc?export=view&id=1iehw0pIAZ8_QpG6F2IC3NcejkvY0yXUP" width = "35%"><br><br>Our risk metric is based on three criteria: 1) population, 2) property value, and 3) critical & essential facilities. Data was provided by the HAZUS-MH inventory. By default, the risk calculation is unweighted, meaning all model inputs have an equal influence on determining the final risk ranking. Download county risk layer <a href="https://northeastsec.maps.arcgis.com/home/item.html?id=1c47510e0acb47d8b5a35fac079712f8">here</a></p><br><br><br>
      <p><img src="https://drive.google.com/uc?export=view&id=1U-3chPg13BzDrzlFWwDFfhu9hVgVKXu-" width = "50%"><br><br>Tsunami layer provided by University of Rhode Island and University of Delaware, and modeled with FUNWAVE-TVD. A combined-tsunami scenario was used, where the worst-case scenario was always taken. The tsunami flood model was ran using 450 m Cartesian grids. As higher resolution data becomes available the tsunami flood line is expected to be less dramatic. Download tsunami layer <a href="https://northeastsec.maps.arcgis.com/home/item.html?id=fd54dfd73cfd42e29d66f38af7bad430&jobid=0994aec6-8aee-4394-8536-db48366626a2">here</a></p>

    </div>
    <div id="viewDiv"></div>
    <div id="akViewDiv" class="esri-widget"></div>
    <div id="infoDiv" class="esri-widget"><p><b>Create your own weighted risk metric</b></p><br>
      <div id="drop-downs">Select county:
        <select id="county-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>
      <p><button id="query-Counties" class="esri-widget">Calculate Risk</button></p>
      <div id="results" class="esri-widget"></div>
      </div>
    <div id="akViewDiv" class="esri-widget"></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 {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	}

	#viewDiv {
	float: left;
	padding: 0;
	margin: 0;
	height: 100%;
	width: 80%;
	}

	#feature-node {
	float: left;
	width: 20%;
	height: 100%;
	}

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

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

	#results {
	text-align: center;
	font-weight: bold;
	padding-top: 10px;
	}

	#center {
	text-align: center;
	}

	#akViewDiv {
	padding: 0;
	margin: 0;
	height: 550px;
	width: 400px;
	background-color: rgba(255, 255, 255, 0.9);
	}

	p {
	text-align: center;
	padding: 5px;
	}

	</style>

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

	var resultsLayer = new GraphicsLayer();

	var countyTypeSelect = document.getElementById("county-type");

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

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

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

	var contentsPop;

	var contentsBuild;

	var contentsCEF;

	var queryCounties = document.getElementById("query-Counties");

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

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

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

	var countysLayer = 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 basemap = new Basemap({
	portalItem: {
	id: "d985d72baf914747914260b4b469a72e" // WGS84 Streets Vector webmap
	},
	visible: true
	});

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

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

	var akView = new MapView({
	container: "akViewDiv",
	map: map,
	extent: {
	xmin: -82.92,
	ymin: 24.45,
	xmax: -66.95,
	ymax: 45.64,
	spatialReference: {
	wkid: 4326
	}
	},
	spatialReference: {
	// WGS_1984_EPSG_Alaska_Polar_Stereographic
	wkid: 4326
	},
	ui: {
	components: []
	}
	});
	view.ui.add("akViewDiv", "bottom-right");

	// query all features from the countys layer
	view
	.when(function() {
	return countysLayer.when(function() {
	var query = countysLayer.createQuery();
	query.returnGeometry = false;
	query.returnDistinctValues = true;
	return countysLayer.queryFeatures(query);
	});
	})
	.then(getValues)
	.then(getUniqueValues)
	.then(addToSelect);

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

	return setcountysDefinitionExpression(countyTypeSelect.value);
	}

	function setcountysDefinitionExpression(newValue) {
	countysLayer.definitionExpression = "NAMELSAD = '" + newValue + "'";

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

	return queryForcountyGeometries();
	}

	function queryForcountyGeometries() {
	countysQuery = countysLayer.createQuery();
	//countysQuery.returnGeometry = false;
	countysLayer.queryFeatures(countysQuery).then(function(response) {
	popVar = response.features[0].attributes.Rank_Pop;
	propVar = response.features[0].attributes.Rank_Expos;
	cefVar = response.features[0].attributes.Rank_CEF;
	namelsad = response.features[0].attributes.NAMELSAD;
	view.when(function(){
	view.goTo({
	target: response.features[0], // Graphic object
	zoom: 10
	});
	});
	});
	}

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

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

	function displayResults(results) {
	resultsLayer.removeAll();
	var pop = ((selectPop.value)/100) * popVar;
	var build = ((selectBuild.value)/100) * propVar;
	var CEFs = ((selectCEF.value)/100) * cefVar;
	var finalWeighted = pop + build + CEFs;
	var weightedRank;
	if (finalWeighted <= 1) {
	weightedRank = "Very Low Risk";
	} else if (finalWeighted <= 2) {
	weightedRank = "Low Risk";
	} else if (finalWeighted <= 3) {
	weightedRank = "Moderate Risk";
	} else if (finalWeighted <= 4) {
	weightedRank = "High Risk";
	} else {
	weightedRank = "Very High Risk";
	}
	document.getElementById("results").innerHTML = namelsad + ": " + weightedRank +" " + finalWeighted + "/5";
	}
	});
	</script>
	</head>

	<body>
	<div id="feature-node" class="esri-widget"><a href="http://nesec.org/"><img src="https://drive.google.com/uc?export=view&id=17NW9Aj2ApbbehZCfe4AROXUAhB4Y9CXh" width = "100%" ></a><br><br>
	<p><img src="https://drive.google.com/uc?export=view&id=1iehw0pIAZ8_QpG6F2IC3NcejkvY0yXUP" width = "35%"><br><br>Our risk metric is based on three criteria: 1) population, 2) property value, and 3) critical & essential facilities. Data was provided by the HAZUS-MH inventory. By default, the risk calculation is unweighted, meaning all model inputs have an equal influence on determining the final risk ranking. Download county risk layer <a href="https://northeastsec.maps.arcgis.com/home/item.html?id=1c47510e0acb47d8b5a35fac079712f8">here</a></p><br><br><br>
	<p><img src="https://drive.google.com/uc?export=view&id=1U-3chPg13BzDrzlFWwDFfhu9hVgVKXu-" width = "50%"><br><br>Tsunami layer provided by University of Rhode Island and University of Delaware, and modeled with FUNWAVE-TVD. A combined-tsunami scenario was used, where the worst-case scenario was always taken. The tsunami flood model was ran using 450 m Cartesian grids. As higher resolution data becomes available the tsunami flood line is expected to be less dramatic. Download tsunami layer <a href="https://northeastsec.maps.arcgis.com/home/item.html?id=fd54dfd73cfd42e29d66f38af7bad430&jobid=0994aec6-8aee-4394-8536-db48366626a2">here</a></p>

	</div>
	<div id="viewDiv"></div>
	<div id="akViewDiv" class="esri-widget"></div>
	<div id="infoDiv" class="esri-widget"><p><b>Create your own weighted risk metric</b></p><br>
	<div id="drop-downs">Select county:
	<select id="county-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>
	<p><button id="query-Counties" class="esri-widget">Calculate Risk</button></p>
	<div id="results" class="esri-widget"></div>
	</div>
	<div id="akViewDiv" class="esri-widget"></div>
	</body>
	</html>