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, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<!-- START ESRI MAP SCRIPT -->
<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
){
// START OF ESRI WEBMAP CREATION
//create labels for wetlands layer
const wetlandlabelclass = new LabelClass({
labelExpressionInfo: { expression: "$feature.WETLAND_TYPE" },
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "black",
haloSize: 1,
haloColor: "white"
}
});
// create the map
var map = new Map({
basemap: "topo-vector"
});
// create the mapview
var view = new MapView({
container: "viewDiv",
map: map,
//center: [-86.424759,43.932883],
zoom: 14
});
//add National Wetlands Inventory Feature Layer
var wetlands = new FeatureLayer({
url: "[...]/hydro/MapServer/18",
labelingInfo: [wetlandlabelclass]
});
map.add(wetlands);
//add Treatments Feature Layer (for some reason it cannot be added as a MapImageLayer which is the 4.x version of ArcGISDynamicMapServiceLayer)
var aqtreatments = new FeatureLayer({
url: "[...]/MapServer/2"
});
map.add(aqtreatments);
// Create graphics layer and symbol to use for displaying the results of query
var resultsLayer = new GraphicsLayer();
map.add(resultsLayer);
//build query task
var queryTask = new QueryTask({
url: "[...]/MapServer/2"
});
//build query filter
var query = new Query();
query.returnGeometry = true;
query.outSpatialReference = view.spatialReference; //added for testing
query.outFields = ["*"];
//pass the url parameters.
var urlObject = urlUtils.urlToObject(window.location.href);
if (urlObject.query)
{
if (urlObject.query.id)
{ OID = urlObject.query.id; }
//set query based on the parameters
var treatmentid = "OBJECTID = '" + OID + "'";
query.where = treatmentid;
}
// execute query
queryTask.execute(query).then(zoomparcel);
//Zoom to the extent of the graphics
function zoomparcel(result){
var AOI = result.features;
view.goTo(AOI);
}
//END
});
</script>
</head>
<!-- START OF PAGE LAYOUT -->
<body>
<div id="viewDiv"></div>
</body>
<!-- END OF PAGE LAYOUT -->
</html>
3.31/
//Execute task and call showResults on completion
queryTask.execute(query, showResults);
}
function showResults(featureSet)
{
//remove all graphics on the maps graphics layer
map.graphics.clear();
map.infoWindow.hide();
//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
var resultFeatures = featureSet.features;
for (var i=0, il=resultFeatures.length; i<il; i++)
{
//Get the current feature from the featureSet. Feature is a graphic
var graphic = resultFeatures[i];
//need to create var symbol
//graphic.setSymbol(symbol);
//Set the infoTemplate. - Don't need?
//graphic.setInfoTemplate(infoTemplate);
//Add graphic to the map graphics layer.
map.graphics.add(graphic);
}
//Zoom to the extent of the graphics - replaced by view.goTo()
var myFeatureExtent = esri.graphicsExtent(resultFeatures);
map.setExtent(myFeatureExtent.getExtent().expand(3));
Solved! Go to Solution.
Claire,
I don't see anywhere in your code where you are attempting to add a graphic yet. In 4.x it would look like this:
// execute query
queryTask.execute(query).then(function(result){
view.graphics.removeAll();
view.popup.close();
var resultFeatures = result.features;
resultFeatures.map(function(gra){
view.graphics.add(gra);
});
var AOI = result.features;
view.goTo(AOI);
});
Claire,
I don't see anywhere in your code where you are attempting to add a graphic yet. In 4.x it would look like this:
// execute query
queryTask.execute(query).then(function(result){
view.graphics.removeAll();
view.popup.close();
var resultFeatures = result.features;
resultFeatures.map(function(gra){
view.graphics.add(gra);
});
var AOI = result.features;
view.goTo(AOI);
});
Hi Robert Scheitlin, GISP - Thank you so much for the help! I can't believe I couldn't figure this out.
Out of curiosity, is there a way to hide the feature layer so that the graphic is the only feature you see on the map? Some of the features are layered on top of one another so I don't want it to look like a mess.
Sure just comment out line 108 where the featurelayer is added to the map.
Perfect! I was under the impression that it need to be added to the map in order to perform the query, etc. Thank you again!
Claire,
Actually if you do not want the layer added to the map there is no need for the FeatureLayer class at all You can just use a QueryTask instead.
Robert,
Interesting, that is good to know - thank you for the information!