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",
"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_...",
id: "warming",
minScale: 5000000
});
var boundary = new FeatureLayer({
url:
"http://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Boundary/FeatureServer/...",
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 = {
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_...",
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
}
}
}));
}
});