Created
December 18, 2019 14:48
-
-
Save saraneh/4723359db98c3c288b8fb423518479bb to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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/Basemap", | |
"esri/views/MapView", | |
"esri/layers/FeatureLayer", | |
"esri/layers/GraphicsLayer", | |
"esri/geometry/geometryEngine", | |
"esri/Graphic", | |
], function( | |
Map, | |
//Basemap, | |
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" + "NAMELSAD"; | |
} | |
}); | |
</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