Add Server Query Result to Map using ArcGIS API for JavaScript 4.11

PaulMcCord — Sat, 11 Dec 2021 08:22:36 GMT

I'd like to query a hosted layer and add the output to my map using ArcGIS API for JS 4.11. I'm creating a Park Finder application, and the goal is for different parks to appear on the map according to amenities that are checked. I've been following the documentation for the Query and QueryTask modules and looking at the sample code in the QueryTask example: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=tasks-query.

However, I can't seem to get the results to add to my map. At the moment, my test application is supposed to return one park named Rouge Park when I check the "Basketball" checkbox, but nothing appears on the map when I check the checkbox. Printing to the console, I can tell that the queried object is successfully making it to the final function where I ultimately add the result (lines 346-365). Am I adding the result incorrectly? Apologies for copying my entire code... lines 61-210 essentially create dummy content.

Any help would be very appreciated.

<html>
<head>
  <meta charset="utf-8">
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="viewport" content="initial-scale=1.0">
  <link href="https://www.waynecounty.com/ui/css/jquery.mmenu.all.css" rel="stylesheet" type="text/css">
  <link href='https://www.waynecounty.com/ui/css/semantic.min.css' rel='stylesheet' type='text/css'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src='https://www.waynecounty.com/ui/lib/semantic.min.js'></script>
  <!--JS Scripts to print map-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <!--<link rel="manifest" href="/manifest.json"/>-->
  <!--ArcGIS API for JavaScript-->
  <script src="https://js.arcgis.com/4.11/"></script>
  <title>The Wayne County ParkFinder</title>
  <style>
    html, body {
      margin: 0px;
      height: 100%;
      width: 100%;
    }

    #map_canvas {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      background-color: #F5FFFA;
    }

    #overviewDiv {
      position: absolute;
      bottom: 55px;
      left: 30px;
      width: 300px;
      height: 200px;
      border: 2px solid black;
      z-index: 997;
      overflow: hidden;
    }

    #extentDiv {
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      z-index: 998;
    }
  </style>
</head>
<body>
  <div class="ui small top fixed teal inverted menu">
    <a class="browse item" style="color: white; font-size: 14px; font-weight: bold;">
      Park Features
      <i class="large dropdown icon"></i>
    </a>
    <div class="ui fluid popup" style="top: 553px; left: 1px; bottom: auto; right: auto; width: 960px;">
      <div class="ui six column relaxed equal height divided grid">
        <div class=column>
          <h4 class="ui header">Trails & Fitness</h4>
          <div class="ui checkbox">
            <input type="checkbox" name="ccSki">
            <label>Cross Country Skiing</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="filler">
            <label>Filler Amenity 1</label>
          </div>
        </div>
        <div class=column>
          <h4 class="ui header">Sports & Games</h4>
          <div class="ui checkbox featureCheck" data-rel="bball">
            <input type="checkbox" name="bball">
            <label>Basketball</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="vball">
            <label>Volleyball</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="rackball">
            <label>Racketball</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="vball">
            <label>Volleyball</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="vball">
            <label>Volleyball</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="vball">
            <label>Volleyball</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="vball">
            <label>Volleyball</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="vball">
            <label>Volleyball</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="vball">
            <label>Volleyball</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="vball">
            <label>Volleyball</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="vball">
            <label>Volleyball</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="vball">
            <label>Volleyball</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="vball">
            <label>Volleyball</label>
          </div>
        </div>
        <div class=column>
          <h4 class="ui header">Water Recreation</h4>
          <div class="ui checkbox">
            <input type="checkbox" name="filler">
            <label>Filler Amenity 2</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="filler">
            <label>Filler Amenity 3</label>
          </div>
        </div>
        <div class=column>
          <h4 class="ui header">Outdoor Recreation</h4>
          <div class="ui checkbox">
            <input type="checkbox" name="filler">
            <label>Filler Amenity 4</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="filler">
            <label>Filler Amenity 5</label>
          </div>
        </div>
        <div class=column>
          <h4 class="ui header">Winter Recreation</h4>
          <div class="ui checkbox">
            <input type="checkbox" name="filler">
            <label>Filler Amenity 6</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="filler">
            <label>Filler Amenity 7</label>
          </div>
        </div>
        <div class=column>
          <h4 class="ui header">Amenities & Fitness</h4>
          <div class="ui checkbox">
            <input type="checkbox" name="filler">
            <label>Filler Amenity 8</label>
          </div>
          <br>
          <br>
          <div class="ui checkbox">
            <input type="checkbox" name="filler">
            <label>Filler Amenity 9</label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Map div-->
  <div id="map_canvas"></div>

  <script>
    var map;
    var myView;

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Basemap",
      "esri/layers/VectorTileLayer",
      "esri/widgets/ScaleBar",
      "esri/layers/MapImageLayer",
      "esri/layers/GraphicsLayer",
      "esri/tasks/QueryTask",
      "esri/tasks/support/Query",
      "esri/symbols/SimpleFillSymbol"

      ], function(Map, MapView, Basemap, VectorTileLayer, ScaleBar, MapImageLayer, GraphicsLayer, QueryTask, Query, SimpleFillSymbol) {

      //The URL of the Parks Map Service that will queried
      var parksMapServiceURL = "https://devarcgisent.waynecounty.lan/serverdev/rest/services/ParkFinder/Wayne_County_Parks/MapServer/0";

      //The popup template and symbology for the search results
      var resultsPopupTemplate = {
        title: "{Parks_NAME}",
        content: "<b>Owner:</b> {Parks_OWNE}<br><b>Park Location:</b> {Park_Attri}<br><b>Basketball:</b> {Park_Att_4}"
      };

      var parkSymbol = {
        type: "simple-fill",
        color: [51,51, 204, 0.9],
        style: "solid",
        outline: {
          color: "white",
          width: 1
        }
      };

      //Graphics layer for displaying the query results
      var resultsLayer = new GraphicsLayer();

      //Point the QueryTask to the Map Service URL
      var qTask = new QueryTask({
        url: parksMapServiceURL
      });

      //Set the query parameters to always return geometry and all fields
      var params = new Query({
        returnGeometry: true,
        outFields: ["*"],
        where: "Parks_NAME = 'Rouge Park'" //This will be changed to be more dynamic. For now keep this here.
      });

      //Create the main map, starting with a custom basemap loaded from ArcGIS Online
      var basemap = new Basemap({
        baseLayers: [
        new VectorTileLayer({
          portalItem: {
            id: "ddef64bb74174dd6adf7cff46dd24da7"
          }
        })
        ]
      });

      map = new Map({
        basemap: basemap,
        layers: [resultsLayer],  //Add graphics layer to the map
        sliderPosition: "bottom-right"
      });

      //Add Wayne County boundary - number in the map.add function indicates the z-index.
      wayneCoBoundary = new MapImageLayer({
        url: "https://devarcgisent.waynecounty.lan/serverdev/rest/services/WayneCoBaseMapApp/WayneCoBoundary/MapServer"
      });
      map.add(wayneCoBoundary, 20);

      //Add Parks layer - number in the map.add function indicates the z-index
      wayneCoParks = new MapImageLayer({
        url: "https://devarcgisent.waynecounty.lan/serverdev/rest/services/ParkFinder/Wayne_County_Parks/MapServer",
        sublayers: [{
          id: 0,
          popupTemplate: {
            title: "{Parks_NAME}",
            content: "<b>Owner:</b> {Parks_OWNE}<br><b>Park Location:</b> {Park_Attri}<br><b>Basketball:</b> {Park_Att_4}"
          }
        }]
      });
      map.add(wayneCoParks, 19);

      //Create the MapView for the main map
      myView = new MapView({
        container: "map_canvas",
        map: map,
        center: [-83.22511,42.24697],
        zoom: 10,
        //Exclude the zoom widget from the UI
        ui: {
          components: ["attribution"]
        }
      });

      //Add scale bar to the bottom right corner of the view
      var scaleBar = new ScaleBar({
        view: myView
      });
      myView.ui.add(scaleBar, {
        position: "bottom-trailing"
      });

      //Constrain the max and min zoom levels
      myView.constraints = {
        minZoom: 10,
        maxZoom: 19
      };

      //Add and remove parks according to features
      $(".featureCheck").checkbox();

      $(document).on("click", ".featureCheck", function(){
        var trgt = $(this).attr("data-rel");

        //This 'if' statement will execute the query and get the query results
        if(trgt == "bball"){
          if ($(this).is(".checked")){
            console.log("checked");
            map.remove(wayneCoParks);
            qTask.execute(params).then(getResults); 
          } else{
            console.log("unchecked");
          }
        }
      });

      //Called once promise is resolved
      function getResults(response){
        console.log("in getResults");
        console.log(response);
        var parkResults = response.features.map(function(feature){
          //feature.symbol = parkSymbol
          feature.symbol = {
            type: "simple-fill",
            color: [51,51, 204, 0.9],
            style: "solid",
            outline: {
              color: "white",
              width: 1
            }
          };
          feature.popupTemplate = resultsPopupTemplate;
          return feature;
        });

        //Add results to the map
        resultsLayer.add(parkResults);
      };
    });
  </script>
  
  <script>
    //Configure popup for Park Features
    $(document).ready(function(){
      $(".menu .browse").popup({
        inline: true,
        hoverable: true,
        position: "bottom left",
        delay: {
          show: 300,
          hide: 500
        }
      });
    });
    
  </script>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Add Server Query Result to Map using ArcGIS API for JavaScript 4.11

BenElan — Thu, 11 Jul 2019 19:48:09 GMT

Try changing line 365 from

resultsLayer.add(parkResults);‍

resultsLayer.addMany(parkResults);‍

Re: Add Server Query Result to Map using ArcGIS API for JavaScript 4.11

PaulMcCord — Thu, 11 Jul 2019 19:51:56 GMT

That was it! Thank you Ben!

topic Re: Add Server Query Result to Map using ArcGIS API for JavaScript 4.11 in ArcGIS JavaScript Maps SDK Questions

Add Server Query Result to Map using ArcGIS API for JavaScript 4.11

Re: Add Server Query Result to Map using ArcGIS API for JavaScript 4.11

Re: Add Server Query Result to Map using ArcGIS API for JavaScript 4.11