Change geometry in view.popup.watch()

Question

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: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Intro to Popupstitle> <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 } } })); } });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · Accepted Answer

Jared, Here it is working: <!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%; } </style> <link rel="stylesheet" href="http://js.arcgis.com/4.8/esri/css/main.css"> <script src="http://js.arcgis.com/4.8/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", //Require the FeatureLayer module "esri/Graphic", "dojo/dom", "dojo/on", "dojo/domReady!" ], function( Map, MapView, FeatureLayer, Graphic, dom, on ) { var warming = new FeatureLayer({ url: "http://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: "http://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); view.popup.watch("selectedFeature", function(e) { view.graphics.removeAll(); if (e && e.geometry) { view.graphics.add(new Graphic({ geometry: e.geometry, symbol: { type: "simple-marker", style: "square", size: 12, outline: { color: "#6600FF", width: 2 } } })); } }); }); </script> </head> <body> <div id="viewDiv"></div> </span> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍