ArcGIS API for JS 4.15: highlight polygons in query results, websocket connection error

566
2
Jump to solution
10-22-2020 09:38 AM
KayceeFaunce
New Contributor III

Me again,

I'm building a web app based on the example code here: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=tasks-query. I've made some modifications, such as dynamically-populating the drop down list and using a 2D map with polygons, but nothing else major.

I have two questions:

(1) In the example code, the query results are highlighted when clicked. This doesn't happen in my version. Is it due to a difference in polygon features vs. the 3D symbols? How can I modify this to implement highlighted features? My final application will have multiple results returned from queries, so I think it will be confusing if I can't get this to work.

I can see from this example that highlighting polygons is possible: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=featurelayervi.... However, I can't quite figure out what I need to pull from this code.

(2) In the browser console, I also notice I am receiving the following errors:

It seems to be related to the feature service I'm using, but I'm not sure why this is occurring as the features are appearing and functioning within the app.

Any assistance you can give to this JavaScript kindergartener would be much appreciated. Thank you!

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"/>

    <title>Project viewer</title>

    <style>
      
      html,
      body,
      #mainViewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        overflow: hidden;
      }
      
      h2 {
        color: black;
        font-family: "Noto Sans", sans-serif;
        padding-bottom: 3px;
      } 
      
      p {
        color: black;
        font-family: "Noto Sans", sans-serif;
        line-height: 2;
        margin: 0;
        padding: 0;
      }
      
      #results {
        padding-top: 5px;
      }
      
      #optionsDiv {
        background-color: white;
        color: white;
        padding: 10px;
        width: 100%;
        -webkit-box-shadow: 3px 2px 15px -2px rgba(0,0,0,0.67);
        -moz-box-shadow: 3px 2px 15px -2px rgba(0,0,0,0.67);
        box-shadow: 3px 2px 15px -2px rgba(0,0,0,0.67);
        opacity: 0.90;
      }
      
      #drop-downs {
        padding-bottom: 15px;
      }
      
      widget {
        /* Fill in later to style drop down widget */
      }
      
      #logo-img {
         width: 100%;
         height: auto;
        }
      
      #loading-img {
        width: 20%;
        height: auto;
      }
      
      #printResults {
        font-family: "Noto Sans", sans-serif;
        font-style: italic;
        font-size: 12px;
        color: black;
      }
      
      #doBtn {
        box-shadow: inset 0px 0px 0px 0px #9fb4f2;
        background-color: #1a1b1f;
        border: 0px solid #4e6096;
        display: inline-block;
        cursor: pointer;
        color: #ffffff;
        padding: 6px 12px;
        text-decoration: none;
        border: 0px;
        outline: none;
        transition: all 0.3s ease 0s;
      }
      #doBtn:hover {
        background-color: #494b51;
        outline: none;
      }
      #doBtn:active {
        position: relative;
        top: 1px;
        border: 0px;
        outline: none;
      }
      
      .visible {
      display: block !important;
      }
      
    .loading{
      position: absolute;
      top: 50%;
      left: 40%;
      margin-right: -40%;
      display: none;
    }
      
     .widget {
       border-radius:4px;
       border:1px solid #AAAAAA;
     }

    </style>

    <link
      rel="stylesheet"
     href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.15/"></script>

    <script>
       require([
        "esri/Map",
        "esri/views/MapView",
        "dojo/dom-class",
        "esri/core/watchUtils",
        "esri/Basemap",
        "esri/widgets/LayerList",
        "esri/layers/FeatureLayer",
        "esri/PopupTemplate",
        "esri/layers/GraphicsLayer",
        "esri/tasks/QueryTask",
        "esri/tasks/support/Query",
        "esri/widgets/Home",
        "esri/widgets/LayerList",
        "esri/widgets/Expand",
        "dojo/domReady!"
        ], function(
          Map,
          MapView,
          domClass,
          watchUtils,
          Basemap,
          LayerList,
          FeatureLayer,
          PopupTemplate,
          GraphicsLayer,
          QueryTask,
          Query,
          Home,
          LayerList,
          Expand
        ){
         
        var basinUrl =   "https://services.arcgis.com/v01gqwM5QqNysAAi/arcgis/rest/services/Chesapeake_Bay_major_watersheds_feature/FeatureServer/0";  
         
        //* Define the popup content for each result
        var popupTemplate = {
          title: "{MajBas}",
          content:
            "Test text"
        };
    
        // Layer - project footprints
       const basinLayer = new FeatureLayer({
        url: basinUrl,
        outFields: ["*"],
        visible: true,
        popupTemplate: popupTemplate,
        title: "Basins"
        });
         
        // Layer - dark nav basemap 
       const basemap = Basemap.fromId("streets-night-vector");
         
       //** Point querytask to project boundary URL
        var qTask = new QueryTask({
          url: basinUrl
        });
         
       //** Set the query parameters to always return geometry and all fields.
       //** Returning geometry allows us to display results on the map/view
        var params = new Query({
          returnGeometry: true,
          outFields: ["*"]
        });
         
       //* GraphicsLayer for displaying results
       var resultsLayer = new GraphicsLayer({
        listMode: "hide" 
       });
       
       var map = new Map({
           basemap : basemap,
          layers: [basinLayer, resultsLayer]
       });

        var mainView = new MapView({
          container: "mainViewDiv",
          map: map,
          popup: {
            highlightEnabled: false,
            dockEnabled: true,
            dockOptions: {
              breakpoint: false,
              position: "top-right"
            }
          },
          center: [-75.325395, 40.306275],
          zoom: 5
        });
        
        // turn loading icon on/off when view is busy
        mainView.watch('updating', function(evt){
          if(evt === true){
            domClass.add('loadingDiv', 'visible');
          }else{
            domClass.remove('loadingDiv', 'visible');
          }
        })
        
        // create layerlist widget 
        var layerList = new LayerList({
          view: mainView
        });
        
        // create expand widget
        layerListExpand = new Expand({
          expandIconClass: "esri-icon-layer-list",
          expandTooltip: layerList.label,
          view: mainView,
          content: layerList,
          expanded: false,
          group: "top-left"
        });
         
        // create home widget 
        var homeWidget = new Home({
          view: mainView
        });
        
         // add widget with drop-down options
        mainView.ui.add("optionsDiv", {
          position: "bottom-left",
          index: 0
        });
        
        // add home widget
        mainView.ui.add(homeWidget, {
          position: "top-left",
          index: 0
        });

        // add expand widget containing layerlist
        mainView.ui.add([layerListExpand], "top-left");

        //* for drop down
        var basinTypeSelect = document.getElementById("valSelect");
         
         //* query all features from the basin layer
        mainView
          .when(function () {
            return basinLayer.when(function () {
              var query = basinLayer.createQuery();
              return basinLayer.queryFeatures(query);
              document.getElementById("doBtn").addEventListener("click", doQuery);
            });
          })
          .then(getValues)
          .then(getUniqueValues)
          .then(addToSelect)
         
         //* return an array of all the values in the
        //* basin name field
        function getValues(response) {
          var features = response.features;
          var values = features.map(function (feature) {
            return feature.attributes.MajBas;
          });
          return values;
        }
         
        //* return an array of unique values in
        //* the MajBas field of the basin layer
        function getUniqueValues(values) {
          var uniqueValues = [];

          values.forEach(function (item, i) {
            if (
              (uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
              item !== ""
            ) {
              uniqueValues.push(item);
            }
          });
          return uniqueValues;
        }
       
         //* Add the unique values to the basin type
        //* select element. This will allow the user
        //* to filter basin by name.
        function addToSelect(values) {
          values.sort();
          values.forEach(function (value) {
            var option = document.createElement("option");
            option.text = value;
            basinTypeSelect.add(option);
          });
        }
         
        //** Call doQuery() each time the button is clicked
        mainView.when(function () {
          mainView.ui.add("optionsDiv", "bottom-left");
          document.getElementById("doBtn").addEventListener("click", doQuery);
        });

        // relate to drop-down menu select field ID
        var attributeName = document.getElementById("MajBas");
         
        // Executes each time the button is clicked
        function doQuery() {
          // Clear the results from a previous query
          resultsLayer.removeAll();
          // Build new query
          params.where =
            "MajBas LIKE" + "'" + basinTypeSelect.value + "'";
          
          // turn off the featurelayer so only queried results visible
          basinLayer.visible  = false;

          // executes query and calls getResults() once promise is resolved
          // promiseRejected() is called if the promise is rejected
          qTask.execute(params).then(getResults).catch(promiseRejected);
        }

        // Called each time the promise is resolved
        function getResults(response) {
          // Loop through each results and assign a symbol and PopupTemplate
          var basinResults = response.features.map(function (feature) {
            // Sets the symbol of each resulting feature
            feature.symbol = {
              type: "simple-fill", 
              color: [212, 161, 87, 0.25],
              outline: {  // autocasts as new SimpleLineSymbol()
                color: [128, 128, 128, 0.5],
                width: "0.5px"
               }
            };    
            
            feature.popupTemplate = popupTemplate;
            return feature;
          });

          resultsLayer.addMany(basinResults);
          
          // animate to the results after they are added to the map
          mainView
            .goTo(basinResults)
            .then(function () {
              mainView.popup.open({
                features: basinResults,
                featureMenuOpen: true,
                updateLocationEnabled: true
              });
            })
            .catch(function (error) {
              if (error.name != "AbortError") {
                console.error(error);
              }
            });

          // print the number of results returned to the user
          document.getElementById("printResults").innerHTML =
            basinResults.length + " result(s) found";
        }

        // Called each time the promise is rejected
        function promiseRejected(error) {
          console.error("Promise rejected: ", error.message);
          }
         
       });
       
    </script>
  </head>

  <body>
    <div id="mainViewDiv"></div>
    <div id="loadingDiv" align="center" class="loading">
       <img src="https://i.stack.imgur.com/qq8AE.gif" id="loading-img"/>
    </div>
    <div id="optionsDiv">
      <h2>Example Viewer</h2>
        <div id="drop-downs">
          <p><b>Basin</b></p>
        <select id="valSelect" class="widget"></select>
      </div>
      <div align="center"><button id="doBtn">Search</button></div>
      <div align="center">
        <p id="results"><span id="printResults"></span></p>
        </div>
    </div>
 
    
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Kaycee,

   Highlighting is not working in your app because you have it disabled in your code (highlightEnabled false):

        var mainView = new MapView({
          container: "mainViewDiv",
          map: map,
          popup: {
            highlightEnabled: false,
            dockEnabled: true,
            dockOptions: {
              breakpoint: false,
              position: "top-right"
            }
          },
          center: [-75.325395, 40.306275],
          zoom: 5
        });

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Kaycee,

   Highlighting is not working in your app because you have it disabled in your code (highlightEnabled false):

        var mainView = new MapView({
          container: "mainViewDiv",
          map: map,
          popup: {
            highlightEnabled: false,
            dockEnabled: true,
            dockOptions: {
              breakpoint: false,
              position: "top-right"
            }
          },
          center: [-75.325395, 40.306275],
          zoom: 5
        });
KayceeFaunce
New Contributor III

Thank you, Robert - I'm ashamed that I missed that. I appreciate your help.

0 Kudos