<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
html, body,
#viewDiv{
padding: 0;
margin: 0;
height: 100%;
width: 100%
}
#optionsDiv {
background-color: dimgray;
color: white;
padding: 10px;
width: 350px;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
/>
<script src="script.js"></script>
<script src="https://js.arcgis.com/4.27/"></script>
<script>
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/rest/query", "esri/rest/support/Query"], function(esriConfig, Map, MapView, FeatureLayer, GraphicsLayer, query, Query){
esriConfig.apiKey = ""
const floraURL = ""
const popupTemplate = {
title: "{Classification}, {Name}",
fieldInfos: [
{
fieldName: "Classification",
label: "Classification"
},
{
fieldName: "ParasiteInfection",
label: "Parasite Infection Identified"
},
{
fieldName: "Threats",
label: "Threats Identified"
}
],
content: "Classification of Flora : {Classification} <br> " +
"Any Parasite Infection : {ParasiteInfection} <br>" +
"Are there any threats that have been identified : {Threats} <br>"
};
const resultsLayer = new GraphicsLayer();
const params = new Query({
returnGeometry: true,
outFields: ["*"]
});
var map = new Map({
basemap: "arcgis-topographic",
layers: [resultsLayer]
});
var view = new MapView({
map: map,
center: [0,0],
zoom: 15,
container: "viewDiv",
popup: {
dockEnabled : true,
dockOptions: {
position: "top-right",
breakpoint: false
}
}
});
view.when(function(){
view.ui.add("optionsDiv", "bottom-right");
document.getElementById("doBtn").addEventListener("click", doQuery);
});
const attributeName = document.getElementById("attSelect");
const expressionsign = document.getElementById("signSelect");
const value = document.getElementById("valSelect");
function doQuery(){
params.where = attributeName.value + expressionsign.value + "'" + value.value + "'";
query
.executeQueryJSON(floraURL, params)
.then(getResults)
.catch(promiseRejected);
}
function getResults(response){
const results = response.features.map(function (feature){
feature.symbol = {
type: "simple-marker", // Use simple-marker for 2D symbology
color: "green", // Set the color of the marker
size: 10, // Set the size of the marker
outline: {
color: [0, 0, 0, 0.5], // Set the outline color and transparency
width: 1 // Set the outline width
}
};
feature.popupTemplate = popupTemplate;
return feature;
});
resultsLayer.addMany(results)
view.goTo(results).then(function(){
view.openPopup({
features: results,
featureMenuOpen: true,
updateLocationEnabled: true
});
})
.catch(function (error){
if (error.name !== "AbourtError"){
console.error(error);
}
});
document.getElementById("printResults").innerHTML = results.length + "Results Found";
}
function promiseRejected(error){
console.error("Promise Rejected: ", error.message);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id = "optionsDiv">
<h2>Flora Diversity of Sanjay Van.</h2>
<select class="esri-widget" id="attSelect">
<option value="Classification">Classification</option>
</select>
<select class="esri-widget" id="signSelect">
<option value="=">is equal to</option>
</select>
<select class="esri-widget" id="valSelect">
<option value="Herb">Herb</option>
<option value="Climber">Climber</option>
<option value="Shrub">Shrub</option>
<option value="Tree">Tree</option>
<option value="Grass">Grass</option>
<option value="Others">Others</option>
</select>
<br />
<br />
<button class="esri-widget" id="doBtn">Do Query</button> <br />
<p><span id="printResults"></span></p>
</div>
</body>
</html>
@TimDietz I am attaching the code snippet that is being used. Based on my understanding and research that I have done so far it feels like I need to have a function/code that removes the features of current query first and then draw new features based on the new query that the user has put.
I am just not sure where and how to add this piece of code. Any insights would be helpful.
