Raj,
Then something like this.
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>RouteTask - 4.8</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#paneDiv {
position: absolute;
top: 10px;
left: 62px;
padding: 0 12px 0 12px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Home",
"esri/widgets/Legend",
"esri/widgets/Search",
"esri/layers/GraphicsLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"dojo/_base/array",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
],
function(
Map, MapView, Home, Legend, Search, GraphicsLayer, QueryTask, Query, arrayUtils, dom, on
) {
var RUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";
var FUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/2015_06_26_active_fires_USA_contig...";
var popupTemplate = {
title: "{MTN_PEAK}, {STATE}",
fieldInfos: [{
fieldName: "ELEV_ft",
label: "Elevation (feet)",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "ELEV_m",
label: "Elevation (meters)",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "PROMINENCE_ft",
label: "Prominence (feet)",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "PROMINENCE_m",
label: "Prominence (meters)",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "ISOLATION_mi",
label: "Isolation (miles)",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "ISOLATION_km",
label: "Isolation (km)",
format: {
places: 0,
digitSeperator: true
}
}],
content: "<b><a href='https://en.wikipedia.org/wiki/Topographic_prominence'>Prominence:</a>" +
"</b> {PROMINENCE_ft} ft ({PROMINENCE_m} m)" +
"<br><b>Prominence Rank:</b> {RANK}" +
"<br><b>Elevation:</b> {ELEV_ft} ft ({ELEV_m} m)" +
"<br><b><a href='https://en.wikipedia.org/wiki/Topographic_isolation'>Isolation:</a>" +
"</b> {ISOLATION_mi} mi ({ISOLATION_km} km)"
};
var popupTemplate2 = {
title: "{TRACK}",
fieldInfos: [{
fieldName: "TRACK",
label: "Track"
}, {
fieldName: "BRIGHT_T31",
label: "Brightness",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "CONFIDENCE",
label: "Confidence"
}, {
fieldName: "SCAN",
label: "Scan",
format: {
places: 0,
digitSeperator: true
}
}],
content: "Brightness: {BRIGHT_T31}" +
"<br><b>Prominence Rank:</b> {RANK}" +
"<br><b>Confidence:</b> {CONFIDENCE}" +
"<br><b>Scan: {SCAN}"
};
var resultsLayer = new GraphicsLayer();
var resultsLayer2 = new GraphicsLayer();
var qTask = new QueryTask({
url: RUrl
});
var qTask2 = new QueryTask({
url: FUrl
});
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
var map = new Map({
basemap: "streets",
layers: [resultsLayer, resultsLayer2]
});
var view = new MapView({
map: map,
container: "viewDiv",
zoom: 11,
popup: {
dockEnabled: true,
dockOptions: {
position: "top-right",
breakpoint: false
}
}
});
view.when(function() {
view.ui.add("optionsDiv", "bottom-right");
on(dom.byId("doBtn"), "click", doQuery);
});
var attributeName = dom.byId("attSelect");
var expressionSign = dom.byId("signSelect");
var value = dom.byId("valSelect");
var wlayer = dom.byId("lyrSelect");
function doQuery() {
resultsLayer.removeAll();
params.where = attributeName.value + expressionSign.value + value.value;
if(wlayer.value === 'peaks'){
qTask.execute(params)
.then(getResults)
.catch(promiseRejected);
}else if(wlayer.value === 'fires'){
params.where = 'BRIGHTNESS > 320';
qTask2.execute(params)
.then(getResults)
.catch(promiseRejected);
}
}
function getResults(response) {
var RResults = arrayUtils.map(response.features, function(
feature) {
feature.symbol = {
type: "simple-marker",
color: "red",
size: 5,
outline: {
color: "black"
}
};
if(wlayer.value === 'peaks'){
feature.popupTemplate = popupTemplate;
}else if(wlayer.value === 'fires'){
feature.popupTemplate = popupTemplate2;
}
return feature;
});
if(wlayer.value === 'peaks'){
resultsLayer.addMany(RResults);
}else if(wlayer.value === 'fires'){
resultsLayer2.addMany(RResults);
}
view.goTo(RResults).then(function() {
view.popup.open({
features: RResults,
featureMenuOpen: true,
updateLocationEnabled: true
});
});
dom.byId("printResults").innerHTML = RResults.length +
" results found!";
}
function promiseRejected(error) {
console.error("Promise rejected: ", error.message);
}
var homeBtn = new Home({
view: view
}, "homeDiv");
var legend = new Legend({
view: view,
layerInfos: [{
url: RUrl
}]
});
legend.startup();
view.ui.add(legend, "bottom-left");
var searchWidget = new Search({
view: view
});
view.ui.add(searchWidget, {
position: "top-right"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="optionsDiv">
<h2>Prominent Peaks in the U.S.</h2>
<select class="esri-widget" id="lyrSelect">
<option value="fires">US Fires</option>
<option value="peaks" selected>US Peaks</option>
</select>
<select class="esri-widget" id="attSelect">
<option value="ELEV_ft">Elevation</option>
<option value="PROMINENCE_ft" selected>Prominence</option>
</select>
<select class="esri-widget" id="signSelect">
<option value=">">is greater than</option>
<option value="<">is less than</option>
<option value="=">is equal to</option>
</select>
<select class="esri-widget" id="valSelect">
<option value="1000">1,000 ft</option>
<option value="5000">5,000 ft</option>
<option value="10000">10,000 ft</option>
<option value="15000">15,000 ft</option>
<option value="20000">20,000 ft</option>
</select>
<br>
<br>
<button class="esri-widget" id="doBtn">Do Query</button>
<br>
<p><span id="printResults"></span></p>
</div>
</body>
</html>
Error:
