AnsweredAssumed Answered

Change geometry in view.popup.watch()

Question asked by jpilbeam on Aug 17, 2018
Latest reply on Aug 17, 2018 by jpilbeam

I'm attempting to create a simple app that has a point featurelayer with some attributes. When selecting a point to view its popup info, how can I also make it become highlighted?

 

This link to sample code does something similar in that it draws a border on a polygon:

PopupTemplate with promise | ArcGIS API for JavaScript 4.8 

 

This sample code does basically what I want in that when you select a point it becomes highlighted and has a popup:

CSVLayer - Project points on the fly | ArcGIS API for JavaScript 4.8 

 

Here's what I have so far:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to Popups</title>
<style>
  html, body, #viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  }
  #layerToggle {
  top: 20px;
  right: 20px;
  position: absolute;
  z-index: 99;
  background-color: white;
  border-radius: 8px;
  padding: 10px;
  opacity: 0.75;
  }
</style>


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

<script>
require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer", //Require the FeatureLayer module
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ],
  function(
    Map, MapView, FeatureLayer, dom, on
  ) {

    var warming = new FeatureLayer({
      url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_aroud_Will_County/FeatureServer/0?token=TYud8dGZfk-2we1iW0XCIvmarr1E52rLmntGUN5A4k6BFN1awEyGdeMj_GzNnUyJuFOqApzxytM5h2UjsZOxIaoyJ5EMVM_j9I3c9E6vL0PhP00Jx6huW-O6Qg3PAHrNU_XXSZOpFTySW08pmtxEd3_p8nF5c2q6cbUeu3bxQD1OGOVYp7ZEOepNPi4HU9sIHOxfnauKfZc98pw0ZdYkSLb6zlViZjKL6perWl6Bwg1DVKvSlet2BcwgEwq2ad8R",
      id: "warming",
      minScale: 5000000
    });
  
   var boundary = new FeatureLayer({
     url:
"http://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Boundary/FeatureServer/0?token=6vBDftNXDqbaZH6fbfhuDCeGkJFaWMSEPaeYDt6PbDBfVacnSMMD7PZS3QeCW6mDqgSFMK0tRjMyJyrxDPQ3rcjTNUCFpi0pfpU_mFLoKXGlT5FTGTPH3GjMqL9iQCqh9_ihX8D1-DQ5N_ptC-ic9bKeDLjqU2xQOv8wIRPjX5VwrtsQz_ltdanO49SVPaJ8F7EN6qWZMgvFw9V0iBbV4Iu0khjfjhuswBNzhjJa3I6q0epaze9AsPRVvVXJ5wik",
     id: "boundary",
     minScale: 5000000
   });
      var map = new Map({
      basemap: "streets-night-vector",
      layers: [warming, boundary]
    });
    var view = new MapView({
      container: "viewDiv",
      map: map,
      scale: 500000,
      center: [-88, 41.5]
    });
      var template = { // autocasts as new PopupTemplate()
        title: "{FACILITY_NAME}",
        content: [{
          type: "fields",
          fieldInfos: [{
            fieldName: "FACILITY_TYPE",
            label: "Facility Type",
            visible: true,
          }, {
            fieldName: "ADDRESS",
            label: "Address",
            visible: true,
          }, {
            fieldName: "PHONE_NUMBER",
            label: "Phone",
            visible: true,
          }, {
            fieldName: "HOURS",
            label: "Hours",
            visible: true,
          }]
        }]
      };
        var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_aroud_Will_County/FeatureServer/0?token=TYud8dGZfk-2we1iW0XCIvmarr1E52rLmntGUN5A4k6BFN1awEyGdeMj_GzNnUyJuFOqApzxytM5h2UjsZOxIaoyJ5EMVM_j9I3c9E6vL0PhP00Jx6huW-O6Qg3PAHrNU_XXSZOpFTySW08pmtxEd3_p8nF5c2q6cbUeu3bxQD1OGOVYp7ZEOepNPi4HU9sIHOxfnauKfZc98pw0ZdYkSLb6zlViZjKL6perWl6Bwg1DVKvSlet2BcwgEwq2ad8R",
        outFields: ["*"],
        popupTemplate: template,
        dockEnabled: true,
      });
      map.add(featureLayer);
    });

</script>

</head>
<body>
  <div id="viewDiv"></div>
  </span>
</body>
</html>

 

 

And here is a seemingly relevant snippet from line 137 of the first sample code that I can't properly modify:

        view.popup.watch("selectedFeature", function(e) {
          view.graphics.removeAll();
          if (e && e.geometry) {
            view.graphics.add(new Graphic({
              geometry: e.geometry,
              symbol: {
                type: "simple-fill",
                style: "none",
                outline: {
                  color: "#6600FF",
                  width: 2
                }
              }
            }));
          }
        });

Outcomes