Here's the whole script as it stands now.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="http://www.willcogis.org/website2014/gis/images/gisseal_thumbnail.png">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Will County Attractions</title>
<link rel="stylesheet" href="splash.css">
<link rel="stylesheet" href="attractions.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Search",
"esri/widgets/Home",
"esri/widgets/Legend",
"esri/widgets/Expand",
"dojo/i18n!esri/nls/jsapi",
"dojo/domReady!"
],
function (
Map, MapView, FeatureLayer, GraphicsLayer, Search, Home, Legend, Expand, b
) {
var map = new Map({
basemap: "topo-vector",
});
var view = new MapView({
container: "viewDiv",
map: map,
scale: 1300000,
center: [-87.95, 41.47],
popup: {
dockEnabled: true,
dockOptions: {
buttonEnabled: false,
breakpoint: false,
}
}
});
var homeBtn = new Home({
view: view,
});
view.ui.add(homeBtn, "top-left");
var searchWidget = new Search({
view: view,
container: "searchDiv",
index: 2
b.widgets.Search.main.allPlaceholder = "search";
});
var legend = new Expand({
content: new Legend({
view: view,
}),
view: view,
expanded: false
});
view.ui.add(legend, "top-left");
var template = {
title: "<img src={logo} height='50' width='50'><font color= '#008000' font size= '3px'>{Name}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "Type",
label: "Type",
visible: true,
}, {
fieldName: "Address",
label: "Address",
visible: true,
}, {
fieldName: "Website",
label: "Website",
visible: true,
}, {
fieldName: "Photo",
label: "Photo",
visible: false,
}]
}, {
type: "media",
mediaInfos: [{
type: "image",
value: {
sourceURL: "{Photo}"
}
}]
}]
};
var template2 = {
title: "<font size= '3px' font color= '#008000'>Route 66",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "Photo",
label: "Photo",
visible: false,
}]
}, {
type: "media",
mediaInfos: [{
type: "image",
value: {
sourceURL: "{Photo}"
}
}]
}]
};
var template3 = {
title: "<font size= '3px' font color= '#008000'>Illinois & Michigan Canal",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "Photo",
label: "Photo",
visible: false,
}]
}, {
type: "media",
mediaInfos: [{
type: "image",
value: {
sourceURL: "{Photo}"
}
}]
}]
};
var boundary = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/County_Limits/FeatureServer/0?toke...",
});
map.add(boundary);
var rt66 = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Rte_66/FeatureServer/0?token=xWHh8...",
popupTemplate: template2,
outFields: ["*"]
});
map.add(rt66);
var canal = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Illinois_and_Michigan_Canal/Featur...",
popupTemplate: template3,
});
map.add(canal);
var preserves = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Forest_Preserves/Featu...",
});
map.add(preserves);
var attractions = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=...",
id: "attractions",
visible: true,
popupTemplate: template,
outFields: ["*"]
});
map.add(attractions);
var attTypeSelect = document.getElementById("attractions");
view.ui.add("infoDiv", "left");
view.when(function () {
return attractions.when(function () {
var query = attractions.createQuery();
return attractions.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect);
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.Type;
});
return values;
}
function getUniqueValues(values) {
var uniqueValues = [];
values.forEach(function (item, i) {
if ((uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
(item !== "")) {
uniqueValues.push(item);
}
});
return uniqueValues;
}
function addToSelect(values) {
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
attTypeSelect.add(option);
});
return setattractionsDefinitionExpression(attTypeSelect.value);
}
function setattractionsDefinitionExpression(newValue) {
attractions.definitionExpression = "Type = '" + newValue + "'";
if (!attractions.visible) {
attractions.visible = true;
}
return queryForAttractionGeometries();
}
attTypeSelect.addEventListener("change", function () {
var type = event.target.value;
setattractionsDefinitionExpression(type);
});
function queryForAttractionGeometries() {
var attractionsQuery = attractions.createQuery();
return attractions.queryFeatures(attractionsQuery)
.then(function (response) {
attractionsGeometries = response.features.map(function (feature) {
return feature.geometry;
});
return attractionsGeometries;
});
}
}
)
</script>
</head>
<body>
<header class="app_header">
<img src="http://www.willcogis.org/website2014/gis/images/gisseal_thumbnail.png" alt="GIS Seal" style="float:left;width:48px;height:46px;"
color='#f5f5dc'>
<div id="searchParentDiv" style="float:right;">
<div id="searchDiv" style="float:right;"></div>
</div>
<div class="a">
<h1 class="local">Will County Attractions</h1>
</div>
</header>
<div id="infoDiv">
Select type:
<select id="attractions"></select>
</div>
<div id="viewDiv"></div>
<div class="overlay-wrap">
<input type="checkbox" name="hide" id="hide">
<label class="hide" for="hide">Explore Map</label>
<div class="overlay2">
<div class="overlay">
<div class="overlay-inner">
<div class="message">
<h1>Will County Attractions</h1>
<p>
<h3>This map highlights the many things to do in Will County, IL.
What you will find is parks, places of historical significance, sporting events, nature preservs and
museums. Please note that this may not be a complete listing
and some locations may have restricted use and/or limited hours. All information is subject
to change.</h2>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>