Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This program is a map which shows two layers: a flood layer and a county layer. You can select which county you are interestd with the drop down, and when you select it only that county displays. There are also 3 other dropdowns (numeric). What I can't figure out is how to also access the attributes for the county selected. I want to be able to …
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment