ArcGIS Javascript update from 3.31 to 4.14

Claire_Peterson — Fri, 10 Dec 2021 23:28:20 GMT

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));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: ArcGIS Javascript update from 3.31 to 4.12

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:28:23 GMT

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);
      });‍‍‍‍‍‍‍‍‍‍‍

Re: ArcGIS Javascript update from 3.31 to 4.12

Claire_Peterson — Wed, 15 Jan 2020 17:06:10 GMT

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.

Re: ArcGIS Javascript update from 3.31 to 4.12

RobertScheitlin__GISP — Wed, 15 Jan 2020 17:09:09 GMT

Sure just comment out line 108 where the featurelayer is added to the map.

Re: ArcGIS Javascript update from 3.31 to 4.12

Claire_Peterson — Wed, 15 Jan 2020 17:11:22 GMT

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!

Re: ArcGIS Javascript update from 3.31 to 4.12

RobertScheitlin__GISP — Wed, 15 Jan 2020 17:22:53 GMT

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.

Re: ArcGIS Javascript update from 3.31 to 4.12

Claire_Peterson — Wed, 15 Jan 2020 17:47:53 GMT

Robert,

Interesting, that is good to know - thank you for the information!

topic Re: ArcGIS Javascript update from 3.31 to 4.12 in ArcGIS JavaScript Maps SDK Questions

ArcGIS Javascript update from 3.31 to 4.14

Re: ArcGIS Javascript update from 3.31 to 4.12

Re: ArcGIS Javascript update from 3.31 to 4.12

Re: ArcGIS Javascript update from 3.31 to 4.12

Re: ArcGIS Javascript update from 3.31 to 4.12

Re: ArcGIS Javascript update from 3.31 to 4.12

Re: ArcGIS Javascript update from 3.31 to 4.12