ArcGIS Javascript update from 3.31 to 4.14

Claire_Peterson · ‎01-15-2020

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

RobertScheitlin__GISP · ‎01-15-2020

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

View solution in original post

RobertScheitlin__GISP · ‎01-15-2020

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_Peterson · ‎01-15-2020

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.

RobertScheitlin__GISP · ‎01-15-2020

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

Claire_Peterson · ‎01-15-2020

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!

RobertScheitlin__GISP · ‎01-15-2020

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.

Claire_Peterson · ‎01-15-2020

Robert,

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