RAJ,
It's a bit of work to put together a sample each time.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>QueryTask - 4.9</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;
}
.info {
line-height: 20px;
padding-left: 5px ! important;
}
.action-button {
font-size: 16px;
background-color: transparent;
border: 1px solid #D3D3D3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}
.active {
background: #0079c1;
color: #e4e4e4;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<script>
let vlayerView;
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Home",
"esri/widgets/Legend",
"esri/widgets/Search",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/widgets/Sketch/SketchViewModel",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"dojo/_base/array",
"dojo/dom",
"dojo/on",
"dojo/dom-class",
"dojo/domReady!"
],
function(
Map, MapView, Home, Legend, Search, GraphicsLayer, FeatureLayer, Graphic, SketchViewModel, QueryTask, Query, arrayUtils, dom, on,
domClass
) {
let map, view, grid, editGraphic;
const tempGraphicsLayer = new GraphicsLayer();
let pUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/2012_CA_NHTSA/FeatureServer/0";
let pFL = new FeatureLayer({
url: pUrl,
outFields:['*']
});
let qUVp= new Query({
returnGeometry: false,
where: '1=1',
returnDistinctValues: true,
outFields: ['sex'],
orderByFields: ['sex ASC']
});
pFL.queryFeatures(qUVp).then(function(results){
arrayUtils.map(results.features, function(feat){
let opt2 = document.createElement('option');
opt2.value = feat.attributes.sex;
opt2.innerHTML = pFL.getFeatureType(feat).name;
sexdd.appendChild(opt2);
});
});
const popupTemplate = {
title: "Accident Info",
fieldInfos: [{
fieldName: "atmcond",
label: "Atmospheric Condition"
}, {
fieldName: "numfatal",
label: "Fatalities in Crash",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "conszone",
label: "Work Zone"
}, {
fieldName: "age",
label: "Age",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "alcres",
label: "Alcohol Test Results"
}, {
fieldName: "sex",
label: "Sex"
}],
content: "<b>Atmospheric Condition:</b> {atmcond}" +
"<br><b>Prominence Rank:</b> {RANK}" +
"<br><b>Fatalities in Crash:</b> {numfatal}" +
"<br><b>Work Zone:</b> {conszone}" +
"<br></b>Age:</b> {age}" +
"<br></b>Alcohol Test Results:</b> {alcres}" +
"<br></bSex:</b> {sex}"
};
let resultsLayer = new GraphicsLayer();
let qTask = new QueryTask({
url: pUrl
});
let params = new Query({
returnGeometry: true
});
map = new Map({
basemap: "streets",
layers: [resultsLayer, tempGraphicsLayer]
});
view = new MapView({
map: map,
container: "viewDiv",
zoom: 3,
popup: {
dockEnabled: true,
dockOptions: {
position: "top-right",
breakpoint: false
}
}
});
view.when(function() {
view.ui.add("optionsDiv", "bottom-right");
on(dom.byId("doBtn"), "click", doQuery);
on(dom.byId("clrBtn"), "click", doClear);
let opt = document.createElement('option');
opt.value = "";
opt.innerHTML = "select Sex";
sexdd.appendChild(opt);
});
const sexdd = dom.byId("sexSelect");
function doClear() {
resultsLayer.removeAll();
}
function doQuery() {
doClear();
resultsLayer.removeAll();
params.where = "sex = '" + sexdd.value + "'";
if (tempGraphicsLayer.graphics.length > 0) {
params.geometry = tempGraphicsLayer.graphics.getItemAt(0).geometry;
}
params.outFields = ["*"];
qTask.execute(params)
.then(getResults)
.catch(promiseRejected);
}
function getResults(response) {
let graphics = response.features;
var RResults = arrayUtils.map(response.features, function(
feature) {
feature.symbol = {
type: "simple-marker",
color: "red",
size: 5,
outline: {
color: "black"
}
};
feature.popupTemplate = popupTemplate;
return feature;
});
resultsLayer.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: pUrl
}]
});
legend.startup();
view.ui.add(legend, "bottom-left");
var searchWidget = new Search({
view: view
});
view.ui.add(searchWidget, {
position: "top-right"
});
view.when(function() {
const sketchViewModel = new SketchViewModel({
view: view,
layer: tempGraphicsLayer,
pointSymbol: {
type: "simple-marker",
style: "square",
color: "#8A2BE2",
size: "16px",
outline: {
color: [255, 255, 255],
width: 3
}
},
polylineSymbol: {
type: "simple-line",
color: "#8A2BE2",
width: "4",
style: "dash"
},
polygonSymbol: {
type: "simple-fill",
color: "rgba(138,43,226, 0.8)",
style: "solid",
outline: {
color: "white",
width: 1
}
}
});
setUpClickHandler();
sketchViewModel.on("create-complete", addGraphic);
sketchViewModel.on("update-complete", updateGraphic);
sketchViewModel.on("update-cancel", updateGraphic);
function addGraphic(event) {
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol
});
tempGraphicsLayer.add(graphic);
}
function updateGraphic(event) {
event.graphic.geometry = event.geometry;
tempGraphicsLayer.add(event.graphic);
editGraphic = null;
}
function setUpClickHandler() {
view.on("click", function(event) {
view.hitTest(event).then(function(response) {
var results = response.results;
if (results.length && results[results.length - 1]
.graphic) {
if (!editGraphic) {
editGraphic = results[results.length - 1].graphic;
tempGraphicsLayer.remove(editGraphic);
sketchViewModel.update(editGraphic);
}
}
});
});
}
var drawPointButton = document.getElementById("pointButton");
drawPointButton.onclick = function() {
sketchViewModel.create("point");
setActiveButton(this);
};
var drawLineButton = document.getElementById("polylineButton");
drawLineButton.onclick = function() {
sketchViewModel.create("polyline");
setActiveButton(this);
};
var drawPolygonButton = document.getElementById("polygonButton");
drawPolygonButton.onclick = function() {
sketchViewModel.create("polygon");
setActiveButton(this);
};
var drawRectangleButton = document.getElementById(
"rectangleButton");
drawRectangleButton.onclick = function() {
sketchViewModel.create("rectangle");
setActiveButton(this);
};
var drawCircleButton = document.getElementById("circleButton");
drawCircleButton.onclick = function() {
sketchViewModel.create("circle");
setActiveButton(this);
};
document.getElementById("resetBtn").onclick = function() {
sketchViewModel.reset();
tempGraphicsLayer.removeAll();
setActiveButton();
};
function setActiveButton(selectedButton) {
view.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
});
});
</script>
</head>
<body>
<div id="viewDiv">
<div class="esri-widget" id="optionsDiv">
<h2>Fatal Accidents in California by Sex</h2>
<select class="esri-widget" id="sexSelect"></select>
<br>
<br>
<div id="topbar">
<button class="action-button esri-icon-blank-map-pin" id="pointButton" type="button" title="Draw point"></button>
<button class="action-button esri-icon-polyline" id="polylineButton" type="button" title="Draw polyline"></button>
<button class="action-button esri-icon-polygon" id="polygonButton" type="button" title="Draw polygon"></button>
<button class="action-button esri-icon-checkbox-unchecked" id="rectangleButton" type="button" title="Draw rectangle"></button>
<button class="action-button esri-icon-radio-unchecked" id="circleButton" type="button" title="Draw circle"></button>
<button class="action-button esri-icon-trash" id="resetBtn" type="button" title="Clear graphics"></button>
</div>
<br>
<button class="esri-widget" id="doBtn">Do Query</button>
<button class="esri-widget" id="clrBtn">Clear</button>
<br>
<br>
</div>
</div>
</body>
</html>