I am trying to zoom the specific record selected from the query task grid.
I tried to use the "esri/tasks/locator" but not sure about it.. can anyone please help me with this.
Thanks..
Solved! Go to Solution.
RAJ,
Like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>QueryTask - 4.8</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#viewDiv.withGrid {
height: 65%;
}
.esri-widget {
padding-left: 8px;
padding-right: 4px;
}
#paneDiv {
position: absolute;
top: 10px;
left: 62px;
padding: 0 12px 0 12px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
#gridDisplay {
position: absolute;
bottom: 0;
left: 0;
height: 35%;
background-color: white;
border-color: grey;
width: 100%;
font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
display: none;
}
#gridDisplay {
z-index: 80;
}
.dgrid {
height: 22em !important;
}
.info {
line-height: 20px;
padding-left: 5px ! important;
}
.dgrid-header,
.dgrid-header-row {
background-color: #eee;
color: #57585A;
}
.dgrid-row-even {
background-color: #F7F8F8;
}
.dgrid-row-odd {
background-color: #EFEFEF;
}
.dgrid-selected {
background: #B4DAF5;
}
.dgrid-row {
border: none
}
</style>
<script>
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
};
</script>
<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",
"dgrid/OnDemandGrid",
"dgrid/extensions/ColumnHider",
"dojo/store/Memory",
"dstore/legacy/StoreAdapter",
"dgrid/Selection",
"dojo/_base/declare",
"dojo/dom-class",
"dojo/domReady!"
],
function(
Map, MapView, Home, Legend, Search, GraphicsLayer, QueryTask, Query, arrayUtils, dom, on,
OnDemandGrid, ColumnHider, Memory, StoreAdapter, Selection, declare, domClass
) {
let map, view, grid;
let RUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";
let FUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/2015_06_26_active_fires_USA_contig...";
let gridFields = ["OBJECTID", "RANK", "MTN_PEAK", "STATE",
"ELEV_ft", "ELEV_m", "PROMINENCE_ft", "PROMINENCE_m"
];
// create a new datastore for the on demandgrid
// will be used to display attributes of selected features
let dataStore = new StoreAdapter({
objectStore: new Memory({
idProperty: "OBJECTID"
})
});
const gridDis = document.getElementById("gridDisplay");
// Define the popup content for each result
const popupTemplate = { // autocasts as new 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)"
};
// Define the popup content for each result
const popupTemplate2 = { // autocasts as new PopupTemplate()
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}"
};
let resultsLayer = new GraphicsLayer();
let resultsLayer2 = new GraphicsLayer();
let qTask = new QueryTask({
url: RUrl
});
let qTask2 = new QueryTask({
url: FUrl
});
let params = new Query({
returnGeometry: true
});
map = new Map({
basemap: "streets",
layers: [resultsLayer, resultsLayer2]
});
view = new MapView({
map: map,
container: "viewDiv",
zoom: 11,
popup: {
highlightEnabled: true
},
highlightOptions: {
color: [255, 255, 0, 1],
haloOpacity: 0.9,
fillOpacity: 0.2
}
});
function createGrid(fields) {
var columns = fields.filter(function(field, i) {
if (gridFields.indexOf(field.name) !== -1) {
return field;
}
}).map(function(field) {
if (field.name === "OBJECTID") {
return {
field: field.name,
label: 'ID',
sortable: true,
hidden: true
};
} else {
return {
field: field.name,
label: field.alias,
sortable: true
};
}
});
// create a new onDemandGrid with its selection and columnhider
// extensions. Set the columns of the grid to display attributes
grid = new(declare([OnDemandGrid, Selection, ColumnHider]))({
bufferRows: Infinity,
columns: columns
}, "grid");
// add a row-click listener on the grid. This will be used
// to highlight the corresponding feature on the view
grid.on("dgrid-select", selectFeatureFromGrid);
}
function selectFeatureFromGrid(event) {
resultsLayer.graphics.some(function(gra){
if(gra.attributes.OBJECTID === event.rows[0].id){
view.goTo(gra);
view.popup.open({
features:[gra],
location: gra.geometry
})
}
})
}
view.when(function() {
view.ui.add("optionsDiv", "bottom-right");
on(dom.byId("doBtn"), "click", doQuery);
on(dom.byId("clrBtn"), "click", doClear);
//Query to get unique vals
let opt_ = document.createElement('option');
opt_.value = "";
opt_.innerHTML = "select State";
let opt__ = document.createElement('option');
opt__.value = "";
opt__.innerHTML = "select Peak";
statedd.appendChild(opt_);
peakdd.appendChild(opt__);
let qUVState = new Query({
returnGeometry: false,
where: '1=1',
returnDistinctValues: true,
outFields: ['STATE'],
orderByFields: ['STATE ASC']
});
qTask.execute(qUVState).then(function(results) {
results.features.map(function(feat) {
let opt = document.createElement('option');
opt.value = feat.attributes.STATE;
opt.innerHTML = feat.attributes.STATE;
statedd.appendChild(opt);
});
});
let qUVPeak = new Query({
returnGeometry: false,
where: '1=1',
returnDistinctValues: true,
outFields: ['MTN_PEAK'],
orderByFields: ['MTN_PEAK ASC']
});
qTask.execute(qUVPeak).then(function(results) {
results.features.map(function(feat) {
let opt2 = document.createElement('option');
opt2.value = feat.attributes.MTN_PEAK;
opt2.innerHTML = feat.attributes.MTN_PEAK;
peakdd.appendChild(opt2);
});
});
});
const attributeName = dom.byId("attSelect");
const expressionSign = dom.byId("signSelect");
const value = dom.byId("valSelect");
const wlayer = dom.byId("lyrSelect");
const statedd = dom.byId("stateSelect");
const peakdd = dom.byId("peakSelect");
function doClear() {
if (grid) {
dataStore.objectStore.data = {};
grid.set("collection", dataStore);
}
resultsLayer2.removeAll();
gridDis.style.display = 'none';
domClass.remove("viewDiv", 'withGrid');
}
function doQuery() {
doClear();
// Clear the results from a previous query
resultsLayer.removeAll();
resultsLayer2.removeAll();
let whereC = [];
if(statedd.value !== ''){
whereC.push("STATE = '" + statedd.value + "'");
}
if (peakdd.value !== ''){
whereC.push("MTN_PEAK = '" + peakdd.value + "'");
}
whereC.push(attributeName.value + expressionSign.value + value.value);
params.where = whereC.join(' AND ');
if (wlayer.value === 'peaks') {
params.outFields = gridFields = ["OBJECTID", "RANK", "MTN_PEAK", "STATE",
"ELEV_ft", "ELEV_m", "PROMINENCE_ft", "PROMINENCE_m"
];
qTask.execute(params)
.then(getResults)
.catch(promiseRejected);
} else if (wlayer.value === 'fires') {
params.outFields = gridFields = ["OBJECTID", "BRIGHTNESS", "SCAN", "TRACK",
"ACQ_DATE", "ACQ_TIME", "SATELLITE", "CONFIDENCE", "VERSION"
];
params.where = 'BRIGHTNESS > 320';
qTask2.execute(params)
.then(getResults)
.catch(promiseRejected);
}
}
function getResults(response) {
let graphics = response.features;
if (graphics.length > 0) {
gridDis.style.display = 'block';
domClass.add("viewDiv", 'withGrid');
document.getElementById("featureCount").innerHTML =
"<b>Showing attributes for " +
graphics.length.toString() + " features </b>"
} else {
gridDis.style.display = 'none';
}
createGrid(response.fields);
// get the attributes to display in the grid
var data = graphics.map(function(feature, i) {
return Object.keys(feature.attributes)
.filter(function(key) {
// get fields that exist in the grid
return (gridFields.indexOf(key) !== -1);
})
// need to create key value pairs from the feature
// attributes so that info can be displayed in the grid
.reduce((obj, key) => {
obj[key] = feature.attributes[key];
return obj;
}, {});
});
// set the datastore for the grid using the
// attributes we got for the query results
dataStore.objectStore.data = data;
grid.set("collection", dataStore);
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);
}
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 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>
<select class="esri-widget" id="stateSelect"></select>
<select class="esri-widget" id="peakSelect"></select>
<br>
<br>
<button class="esri-widget" id="doBtn">Do Query</button>
<button class="esri-widget" id="clrBtn">Clear</button>
<br>
<br>
</div>
<div id="gridDisplay">
<span class="info" id="featureCount"></span>
<div id="grid"></div>
</div>
</div>
</body>
</html>
RAJ,
Like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>QueryTask - 4.8</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#viewDiv.withGrid {
height: 65%;
}
.esri-widget {
padding-left: 8px;
padding-right: 4px;
}
#paneDiv {
position: absolute;
top: 10px;
left: 62px;
padding: 0 12px 0 12px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
#gridDisplay {
position: absolute;
bottom: 0;
left: 0;
height: 35%;
background-color: white;
border-color: grey;
width: 100%;
font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
display: none;
}
#gridDisplay {
z-index: 80;
}
.dgrid {
height: 22em !important;
}
.info {
line-height: 20px;
padding-left: 5px ! important;
}
.dgrid-header,
.dgrid-header-row {
background-color: #eee;
color: #57585A;
}
.dgrid-row-even {
background-color: #F7F8F8;
}
.dgrid-row-odd {
background-color: #EFEFEF;
}
.dgrid-selected {
background: #B4DAF5;
}
.dgrid-row {
border: none
}
</style>
<script>
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
};
</script>
<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",
"dgrid/OnDemandGrid",
"dgrid/extensions/ColumnHider",
"dojo/store/Memory",
"dstore/legacy/StoreAdapter",
"dgrid/Selection",
"dojo/_base/declare",
"dojo/dom-class",
"dojo/domReady!"
],
function(
Map, MapView, Home, Legend, Search, GraphicsLayer, QueryTask, Query, arrayUtils, dom, on,
OnDemandGrid, ColumnHider, Memory, StoreAdapter, Selection, declare, domClass
) {
let map, view, grid;
let RUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";
let FUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/2015_06_26_active_fires_USA_contig...";
let gridFields = ["OBJECTID", "RANK", "MTN_PEAK", "STATE",
"ELEV_ft", "ELEV_m", "PROMINENCE_ft", "PROMINENCE_m"
];
// create a new datastore for the on demandgrid
// will be used to display attributes of selected features
let dataStore = new StoreAdapter({
objectStore: new Memory({
idProperty: "OBJECTID"
})
});
const gridDis = document.getElementById("gridDisplay");
// Define the popup content for each result
const popupTemplate = { // autocasts as new 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)"
};
// Define the popup content for each result
const popupTemplate2 = { // autocasts as new PopupTemplate()
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}"
};
let resultsLayer = new GraphicsLayer();
let resultsLayer2 = new GraphicsLayer();
let qTask = new QueryTask({
url: RUrl
});
let qTask2 = new QueryTask({
url: FUrl
});
let params = new Query({
returnGeometry: true
});
map = new Map({
basemap: "streets",
layers: [resultsLayer, resultsLayer2]
});
view = new MapView({
map: map,
container: "viewDiv",
zoom: 11,
popup: {
highlightEnabled: true
},
highlightOptions: {
color: [255, 255, 0, 1],
haloOpacity: 0.9,
fillOpacity: 0.2
}
});
function createGrid(fields) {
var columns = fields.filter(function(field, i) {
if (gridFields.indexOf(field.name) !== -1) {
return field;
}
}).map(function(field) {
if (field.name === "OBJECTID") {
return {
field: field.name,
label: 'ID',
sortable: true,
hidden: true
};
} else {
return {
field: field.name,
label: field.alias,
sortable: true
};
}
});
// create a new onDemandGrid with its selection and columnhider
// extensions. Set the columns of the grid to display attributes
grid = new(declare([OnDemandGrid, Selection, ColumnHider]))({
bufferRows: Infinity,
columns: columns
}, "grid");
// add a row-click listener on the grid. This will be used
// to highlight the corresponding feature on the view
grid.on("dgrid-select", selectFeatureFromGrid);
}
function selectFeatureFromGrid(event) {
resultsLayer.graphics.some(function(gra){
if(gra.attributes.OBJECTID === event.rows[0].id){
view.goTo(gra);
view.popup.open({
features:[gra],
location: gra.geometry
})
}
})
}
view.when(function() {
view.ui.add("optionsDiv", "bottom-right");
on(dom.byId("doBtn"), "click", doQuery);
on(dom.byId("clrBtn"), "click", doClear);
//Query to get unique vals
let opt_ = document.createElement('option');
opt_.value = "";
opt_.innerHTML = "select State";
let opt__ = document.createElement('option');
opt__.value = "";
opt__.innerHTML = "select Peak";
statedd.appendChild(opt_);
peakdd.appendChild(opt__);
let qUVState = new Query({
returnGeometry: false,
where: '1=1',
returnDistinctValues: true,
outFields: ['STATE'],
orderByFields: ['STATE ASC']
});
qTask.execute(qUVState).then(function(results) {
results.features.map(function(feat) {
let opt = document.createElement('option');
opt.value = feat.attributes.STATE;
opt.innerHTML = feat.attributes.STATE;
statedd.appendChild(opt);
});
});
let qUVPeak = new Query({
returnGeometry: false,
where: '1=1',
returnDistinctValues: true,
outFields: ['MTN_PEAK'],
orderByFields: ['MTN_PEAK ASC']
});
qTask.execute(qUVPeak).then(function(results) {
results.features.map(function(feat) {
let opt2 = document.createElement('option');
opt2.value = feat.attributes.MTN_PEAK;
opt2.innerHTML = feat.attributes.MTN_PEAK;
peakdd.appendChild(opt2);
});
});
});
const attributeName = dom.byId("attSelect");
const expressionSign = dom.byId("signSelect");
const value = dom.byId("valSelect");
const wlayer = dom.byId("lyrSelect");
const statedd = dom.byId("stateSelect");
const peakdd = dom.byId("peakSelect");
function doClear() {
if (grid) {
dataStore.objectStore.data = {};
grid.set("collection", dataStore);
}
resultsLayer2.removeAll();
gridDis.style.display = 'none';
domClass.remove("viewDiv", 'withGrid');
}
function doQuery() {
doClear();
// Clear the results from a previous query
resultsLayer.removeAll();
resultsLayer2.removeAll();
let whereC = [];
if(statedd.value !== ''){
whereC.push("STATE = '" + statedd.value + "'");
}
if (peakdd.value !== ''){
whereC.push("MTN_PEAK = '" + peakdd.value + "'");
}
whereC.push(attributeName.value + expressionSign.value + value.value);
params.where = whereC.join(' AND ');
if (wlayer.value === 'peaks') {
params.outFields = gridFields = ["OBJECTID", "RANK", "MTN_PEAK", "STATE",
"ELEV_ft", "ELEV_m", "PROMINENCE_ft", "PROMINENCE_m"
];
qTask.execute(params)
.then(getResults)
.catch(promiseRejected);
} else if (wlayer.value === 'fires') {
params.outFields = gridFields = ["OBJECTID", "BRIGHTNESS", "SCAN", "TRACK",
"ACQ_DATE", "ACQ_TIME", "SATELLITE", "CONFIDENCE", "VERSION"
];
params.where = 'BRIGHTNESS > 320';
qTask2.execute(params)
.then(getResults)
.catch(promiseRejected);
}
}
function getResults(response) {
let graphics = response.features;
if (graphics.length > 0) {
gridDis.style.display = 'block';
domClass.add("viewDiv", 'withGrid');
document.getElementById("featureCount").innerHTML =
"<b>Showing attributes for " +
graphics.length.toString() + " features </b>"
} else {
gridDis.style.display = 'none';
}
createGrid(response.fields);
// get the attributes to display in the grid
var data = graphics.map(function(feature, i) {
return Object.keys(feature.attributes)
.filter(function(key) {
// get fields that exist in the grid
return (gridFields.indexOf(key) !== -1);
})
// need to create key value pairs from the feature
// attributes so that info can be displayed in the grid
.reduce((obj, key) => {
obj[key] = feature.attributes[key];
return obj;
}, {});
});
// set the datastore for the grid using the
// attributes we got for the query results
dataStore.objectStore.data = data;
grid.set("collection", dataStore);
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);
}
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 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>
<select class="esri-widget" id="stateSelect"></select>
<select class="esri-widget" id="peakSelect"></select>
<br>
<br>
<button class="esri-widget" id="doBtn">Do Query</button>
<button class="esri-widget" id="clrBtn">Clear</button>
<br>
<br>
</div>
<div id="gridDisplay">
<span class="info" id="featureCount"></span>
<div id="grid"></div>
</div>
</div>
</body>
</html>
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
Thanks for the solution Robert... Can you please tell me, can we use "esri/tasks/locator" to do the same zooming process.. or any other way to zoom specific query result..? or the above one is the only way to do it..
Sure here is a sample I did for someone else:
https://community.esri.com/thread/219585-find-sample-reverse-geocode-arcgis-api-for-javascriptfor-48
Thanks Robert..Have a Good Day ahead..