Hi everyone, having trouble using the side panel function within my map. Its purpose is to allow users to click on the side panel for a specific location (service names), and then it'll zoom to that location. The problem is that it is not happening.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Services Locations</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.19/"></script>
<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer","esri/widgets/Search","esri/tasks/Locator","esri/widgets/Home"],
function(Map, MapView, FeatureLayer, Search, Locator, Home) {
const map = new Map({
basemap: "dark-gray-vector"
});
const view = new MapView({
container: "sceneDiv",
map: map,
center: [-111.772, 39.774],
zoom: 6,
padding: {
right: 300
}
});
const listNode = document.getElementById("service_graphics");
/********************
* Add feature layer
********************/
// Create the PopupTemplate
const popupTemplate = {
// autocasts as new PopupTemplate()
title: "Organization Name: {Name_of_organization}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "Address",
label: "Address",
format: {
places: 0,
digitSeparator: true
}
},
{
fieldName: "Website",
label: "Website",
format: {
places: 0,
digitSeparator: true
}
},
{
fieldName: "Contact_Information_Business_Ho",
label: "Phone",
format: {
places: 0,
digitSeparator: true
}
}
]
}
]
};
// Create the FeatureLayer using the popupTemplate
const featureLayer = new FeatureLayer({
url: "*****************************************",
outFields: ["Name_of_organization", "City"], // used by queryFeatures
popupTemplate: popupTemplate
});
map.add(featureLayer);
let graphics;
view.whenLayerView(featureLayer).then(function(layerView) {
layerView.watch("updating", function(value) {
if (!value) {
// wait for the layer view to finish updating
// query all the features available for drawing.
layerView
.queryFeatures({
geometry: view.extent,
returnGeometry: true,
orderByFields: ["Name_of_organization"]
})
.then(function(results) {
graphics = results.features;
const fragment = document.createDocumentFragment();
graphics.forEach(function(result, index) {
const attributes = result.attributes;
const name = attributes.Name_of_organization;
// Create a list organizational names
const li = document.createElement("li");
li.classList.add("panel-result");
li.tabIndex = 0;
li.setAttribute("data-result-id", index);
li.textContent = name;
fragment.appendChild(li);
});
// Empty the current list
listNode.innerHTML = "";
listNode.appendChild(fragment);
})
.catch(function(error) {
console.error("query failed: ", error);
});
}
});
});
// listen to click event on the name of organization name
listNode.addEventListener("click", onListClickHandler);
function onListClickHandler(event) {
const target = event.target;
const resultId = target.getAttribute("data-result-id");
// get the graphic corresponding to the clicked zip code
const result = resultId && graphics && graphics[parseInt(resultId, 10)];
if (result) {
// open the popup at the centroid of zip code polygon
// and set the popup's features which will populate popup content and title.
view.goTo(result.geometry.extent.expand(2)).then(function() {
view.popup.open({
features: [result],
location: result.geometry.center
});
})
.catch(function(error){
if (error.name != "AbortError"){
console.error(error);
}
});
}
}
const searchWidget = new Search({
view: view,
allPlaceholder: "Search Terms or address",
searchAllEnabled: true,
includeDefaultSources: false,
sources: [
{
layer: featureLayer,
searchFields: ["GBV", "Sexuality_served", "Age_Groups_Services_support_", "Additional_GBV", "Name_of_organization", "Gender_Served_"],
displayField: "Name_of_organization",
exactMatch: false,
outFields: ["Name_of_organization"],
name: "GBV Search Terms or Organization Name",
zoomScale: 50000,
placeholder: "example: Minor",
maxResults: 6,
maxSuggestions: 6,
suggestionsEnabled: true,
},
{
locator: new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
singleLineFieldName: "SingleLine",
name: "Custom Geocoding Service",
placeholder: "Search Geocoder",
maxResults: 3,
maxSuggestions: 6,
suggestionsEnabled: false,
minSuggestCharacters: 0
}]
});
var homeWidget = new Home({
view: view
});
// Add the search widget to the top right corner of the view
view.ui.add(searchWidget, {
position: "top-right"
}),
view.ui.add(homeWidget, "top-right");
});
</script>
<style>
html,
body,
#sceneDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.panel-container {
position: relative;
width: 100%;
height: 100%;
}
.panel-side {
padding: 2px;
box-sizing: border-box;
width: 300px;
height: 100%;
position: absolute;
top: 0;
right: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
overflow: auto;
z-index: 60;
}
.panel-side h3 {
padding: 0 20px;
margin: 20px 0;
}
.panel-side ul {
list-style: none;
margin: 0;
padding: 0;
}
.panel-side li {
list-style: none;
padding: 10px 20px;
}
.panel-result {
cursor: pointer;
margin: 2px 0;
background-color: rgba(0, 0, 0, 0.3);
}
.panel-result:hover,
.panel-result:focus {
color: orange;
background-color: rgba(0, 0, 0, 0.75);
}
</style>
</head>
<body>
<div class="panel-container">
<div class="panel-side esri-widget">
<h3>Sevices Available</h3>
<ul id="service_graphics">
<li>Loading…</li>
</ul>
</div>
<div id="sceneDiv"></div>
</div>
</body>
</html>
The error happens at around line 135
