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");
var wellsLayer = new FeatureLayer({
portalItem: {
id: "f76b85e6c5314a0c96539d704fe92452"
},
outFields: ["*"],
visible: false
});
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");
view
.when(function() {
return wellsLayer.when(function() {
var query = wellsLayer.createQuery();
return wellsLayer.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect)
function getValues(response) {
var features = response.features;
var values = features.map(function(feature) {
return feature.attributes.USER_Categ;
});
return values;
}
function getUniqueValues(values) {
var uniqueValues = [];
values.forEach(function(item, i) {
if (
(uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
item !== ""
) {
uniqueValues.push(item);
}
});
return uniqueValues;
}
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 = "USER_Categ = '" + 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);
});
});</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>