racesDynamicLayer from ...MapServer to ...FeatureServer in the url.
Here is your code with some things fixed (i.e. expand), but you still have a way to go on this:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Runners Search App</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-editor .esri-item-list__scroller {
max-height: 350px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/WMSLayer",
"esri/widgets/Locate",
'esri/widgets/Search',
"esri/widgets/BasemapToggle",
"esri/widgets/Editor",
"esri/layers/FeatureLayer",
"esri/widgets/LayerList",
"esri/widgets/Expand"
], function (Map, MapView, WMSLayer, Locate, Search, BasemapToggle, Editor, FeatureLayer, LayerList, Expand) {
let RunnersRaceFinderAppView;
var map = new Map({
basemap: "streets"
});
var radar = new WMSLayer({
url: "https://nowcoast.noaa.gov/arcgis/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer/WMSServer?request=GetCapabilities&service=WMS",
});
map.add(radar)
var racesDynamicLayer = new FeatureLayer({
url: "https://gis-server-02.usc.edu:6443/arcgis/rest/services/smseymou/RunnersRaceFinderApp/FeatureServer"
});
map.add(racesDynamicLayer)
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 6,
center: [-98.803057, 37.467330]
});
var locateBtn = new Locate({
view: view
});
view.ui.add(locateBtn, {
position: "top-left"
});
var layerList = new LayerList({
view: view
});
var searchWidget = new Search({
view: view
});
view.ui.add(searchWidget, {
position: "top-right"
});
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "satellite"
});
view.ui.add(basemapToggle, "bottom-right");
view.ui.add(layerList, {
position: "top-right"
});
view.when(function () {
view.popup.autoOpenEnabled = false;
let editor = new Editor({
view: view
});
view.ui.add(editor, "top-right");
});
const Race_TypeNodes = document.querySelectorAll(`.Race_Type-item`);
const Race_TypeElement = document.getElementById("seasons-filter");
Race_TypeElement.addEventListener("click", filterByRace_Type);
function filterByRace_Type(event) {
const selectedRace_Type = event.target.getAttribute("data-Race_Type");
RunnersRaceFinderAppView.filter = {
where: "Race_Type = '" + selectedRace_Type + "'"
};
}
view.whenLayerView(racesDynamicLayer).then(function (layerView) {
Race_TypeView = layerView;
Race_TypeElement.style.visibility = "visible";
const Race_TypeExpand = new Expand({
view: view,
content: Race_TypeElement,
expandIconClass: "esri-icon-filter",
group: "top-left"
});
Race_TypeExpand.watch("expanded", function () {
if (!Race_TypeExpand.expanded) {
Race_TypeView.filter = null;
}
});
view.ui.add(Race_TypeExpand, "top-left");
});
});
</script>
</head>
<body>
<div id="viewDiv">
</div>
<div id="editorDiv"></div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="http://www.google.com">
<img src="Screenshots/Survey123.png" alt="Survey123" width="200" height="200">
</a>
<div class="desc">Click here to add a race</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;"></div>
<div id="seasons-filter" class="esri-widget">
<div class="season-item visible-season" data-season="5K">5K</div>
<div class="season-item visible-season" data-season="10K">10K</div>
<div class="season-item visible-season" data-season="Half Marathon">Half Marathon</div>
<div class="season-item visible-season" data-season="Marathon">Marthon</div>
<div class="season-item visible-season" data-season="Ultra Marathon">Ultra Marthon</div>
<div class="season-item visible-season" data-season="Triathlon">Triathlon</div>
<div class="season-item visible-season" data-season="Cross Country">Cross Country</div>
<div class="season-item visible-season" data-season="Stage">Stage</div>
</div>
</body>
</html>