I have some code that queries a feature layer by passing an ID in the URL, zooms to that feature and only displays that feature on a map. ( Modified from Select Parcel by URL Parameters ). I would like to update this from the current working copy I have in the 3.31 version of the API to the latest 4.14 API. I have been able to get most of the functionality working in 4.14 except being able to only display the feature from the query result on the map. Below is what I have currently working where it zooms to the feature based on the ID in the URL and then the bottom section is the code block from 3.31 that I am having trouble revising.
4.14/
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Treatment Tracker</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
<style>
html, body,
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.14/"></script>
<script>
var OID;
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/SpatialReference",
"esri/layers/MapImageLayer",
"esri/layers/FeatureLayer",
"esri/views/layers/FeatureLayerView",
"esri/layers/support/ImageParameters",
"esri/layers/support/LabelClass",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/geometry/geometryEngine",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/renderers/SimpleRenderer",
"esri/tasks/support/Query",
"esri/tasks/QueryTask",
"esri/tasks/support/FeatureSet",
"esri/core/urlUtils",
"esri/widgets/Expand",
"esri/PopupTemplate",
"dojo/domReady!"
], function(
Map,
MapView,
SpatialReference,
MapImageLayer,
FeatureLayer,
FeatureLayerView,
ImageParameters,
LabelClass,
GraphicsLayer,
Graphic,
geometryEngine,
SimpleFillSymbol,
SimpleLineSymbol,
SimpleMarkerSymbol,
SimpleRenderer,
Query,
QueryTask,
FeatureSet,
urlUtils,
Expand,
PopupTemplate
){
const wetlandlabelclass = new LabelClass({
labelExpressionInfo: { expression: "$feature.WETLAND_TYPE" },
symbol: {
type: "text",
color: "black",
haloSize: 1,
haloColor: "white"
}
});
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 14
});
var wetlands = new FeatureLayer({
url: "[...]/hydro/MapServer/18",
labelingInfo: [wetlandlabelclass]
});
map.add(wetlands);
var aqtreatments = new FeatureLayer({
url: "[...]/MapServer/2"
});
map.add(aqtreatments);
var resultsLayer = new GraphicsLayer();
map.add(resultsLayer);
var queryTask = new QueryTask({
url: "[...]/MapServer/2"
});
var query = new Query();
query.returnGeometry = true;
query.outSpatialReference = view.spatialReference;
query.outFields = ["*"];
var urlObject = urlUtils.urlToObject(window.location.href);
if (urlObject.query)
{
if (urlObject.query.id)
{ OID = urlObject.query.id; }
var treatmentid = "OBJECTID = '" + OID + "'";
query.where = treatmentid;
}
queryTask.execute(query).then(zoomparcel);
function zoomparcel(result){
var AOI = result.features;
view.goTo(AOI);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
3.31/
queryTask.execute(query, showResults);
}
function showResults(featureSet)
{
map.graphics.clear();
map.infoWindow.hide();
var resultFeatures = featureSet.features;
for (var i=0, il=resultFeatures.length; i<il; i++)
{
var graphic = resultFeatures[i];
map.graphics.add(graphic);
}
var myFeatureExtent = esri.graphicsExtent(resultFeatures);
map.setExtent(myFeatureExtent.getExtent().expand(3));