For reverence here is my Javascript code:
<html>
<head>
<meta name="description" content="ArcGIS JavaScript Tutorials: Query a feature layer">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Account ArcGis View</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script src="./Utils/ArcGisWebUtils.js"></script>
</head>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/tasks/IdentifyTask",
"esri/tasks/support/IdentifyParameters"
],
function (Map, MapView, FeatureLayer, Graphic, GraphicsLayer, IdentifyTask, IdentifyParameters) {
var map = new Map({
basemap: "streets"
});
var layerUrl = getParcelLayerUrl();
//needed for the identify task
var mapServerUrl = getMapServerUrl();
var parcelName = getParcelName();
var parcelNumber = getParcelNum();
var sql = parcelName + " = '" + parcelNumber + "'";
var arrayOfColors = getOutlineColor().split(",");
//identifyTask variables
var identifyTask, params;
var view = new MapView({
container: "viewDiv",
map: map,
center: [-112.500, 37.0000],
zoom: 7
});
var featureLayer = new FeatureLayer({
url: layerUrl,
//this is needed to return all fields when querying this feature view
//this is the key to get zooming to the highlighted parcel to work!
outFields: ["*"]
});
map.add(featureLayer, 0);
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
function addGraphics(result) {
graphicsLayer.removeAll();
result.features.forEach(function (feature) {
var g = new Graphic({
geometry: feature.geometry,
attributes: feature.attributes,
symbol: {
type: "simple-fill",
color: "white",
style: "diagonal-cross",
outline: {
width: 2,
color: [arrayOfColors[0], arrayOfColors[1], arrayOfColors[2], 1.0],
}
},
});
graphicsLayer.add(g);
view.goTo({target: g, zoom: 17});
});
}
function queryFeatureLayer(sqlExpression) {
var query = featureLayer.createQuery();
//these two are required for zooming to work!
query.where = sqlExpression;
query.outSpatialReference = view.spatialReference;
featureLayer.queryFeatures(query).then(function (result) {
addGraphics(result, true);
});
}
view.when(function () {
queryFeatureLayer(sql);
view.on("click", executeIdentifyTask);
// Create identify task for the specified map service
identifyTask = new IdentifyTask(mapServerUrl);
// Set the parameters for the Identify
params = new IdentifyParameters();
params.tolerance = 3;
params.layerIds = [47];
params.layerOption = "top";
params.width = view.width;
params.height = view.height;
});
//identify task
function executeIdentifyTask(event) {
// Set the geometry to the location of the view click
console.log("Layer Clicked");
params.geometry = event.mapPoint;
params.mapExtent = view.extent;
document.getElementById("viewDiv").style.cursor = "wait";
// This function returns a promise that resolves to an array of features
// A custom popupTemplate is set for each feature based on the layer it
// originates from
identifyTask
.execute(params)
.then(function(response) {
var results = response.results;
console.log("Results: " + results);
return results.map(function(result) {
var feature = result.feature;
var layerName = result.layerName;
console.log("features: " + feature.attributes);
feature.attributes.layerName = layerName;
if (layerName === "Parcel Line") {
feature.popupTemplate = {
// autocasts as new PopupTemplate()
title: "Parcel Information",
content:
//hard coded values for now
"<b>Account Number:</b> {ACCOUNTNO}" +
"<br><b>Parcel Number:</b> {" + parcelName + "}" +
"<br><b>Owner:</b> {NAME}" +
"<br><b>Address:</b> {FULL_ADD}" +
"<br><b>City:</b> {CITY}" +
"<br><b>Zip Code:</b> {ZIPCODE}" +
"<br><b>Legal Description:</b> {LEGAL}"
};
}
return feature;
});
})
.then(showPopup); // Send the array of features to showPopup()
// Shows the results of the Identify in a popup once the promise is resolved
function showPopup(response) {
if (response.length > 0) {
view.popup.open({
features: response,
location: event.mapPoint
});
}
document.getElementById("viewDiv").style.cursor = "auto";
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
