AnsweredAssumed Answered

Query, highlight, zoom and center on feature

Question asked by kafros on Jul 30, 2017
Latest reply on Aug 7, 2017 by kafros

Need a little guidance for an ArcGIS for JavaScript newbie.

 

I have a custom set of layers from a MapImageLayer displaying over an ESRI basemap.  I'm trying to take a parameter from the URL (in this case a unique parcel number) and find it in a layer (in this case Parcels layer), highlight that feature, zoom to it and center the map on it.  A colleague did that in JavaScript 3.16, however I'm using JS 4.4 and the methods and objects have changed a bit.  Below is a subset of my code that was pulled from the JS 3.16 example and I've been trying to massage it into something useful in JS 4.4.  The object graphicsUtils doesn't appear to exist in 4.4, the query results in a blank map screen, the method setSelectionSymbol breaks my code...  Can anyone give me some sample code I can use to fix this to result in my goals to find the parcel, zoom to, center and highlight it?  Thank you. 

 

             //Parcel Selection Layer

            parcels = new FeatureLayer("http://[myServer]/arcgis/rest/services/[mapservicename]/MapServer/0", {
                 outFields: ["*"],
                 //Needs to be Selection Mode, on demand results in odd parcel shapes
                 mode: FeatureLayer.MODE_SELECTION
             });

             parcels.setSelectionSymbol(sfs); //sfs = simplefillsymbol
             map.addLayers([parcels]);

 

             var parcelid = document.getElementById("<%= hfParcel.ClientID%>").value;// prompt("Give me input");
             selectParcel(parcelid);

 

             //select parcel from the feature layer by creating a query to look for the input parcel id
             function selectParcel(parcelid) {
                 if (parcelid) {
                     var query = new Query();
                     query.where = "PID_NUM = '" + parcelid + "'";
                     var deferred = parcels.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (selection) {
                         var center = graphicsUtils.graphicsExtent(selection).getCenter();
                         var extent = esri.graphicsExtent(selection);
                         var extHandler = map.on("extent-change", function () {
                             extHandler.remove();
                             //zoom to the center then display the popup
                             map.infoWindow.setFeatures(selection);
                         });
                         map.setExtent(extent.getExtent().expand(2));
                         map.centerAt(center);
                     });
                 }
             }

Outcomes