Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About JaredPilbeam2
JaredPilbeam2
MVP Alum
since
10-17-2017
Online
713
Posts created
469
Kudos given
30
Solutions
122
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(2 Idea Submissions)Latest Contributions by JaredPilbeam2
|
POST
|
Robert, Using the snippet you gave me as such is throwing two syntax errors: It says there should be a colon between b and widgets and there should be a comma at the end instead of a semi-colon. Even then the app wasn't displaying anything. //search widget
var searchWidget = new Search({
view: view,
container: "searchDiv",
index: 2,
b:widgets.Search.main.allPlaceholder = "search",
});
... View more
10-30-2018
06:47 AM
|
0
|
0
|
3837
|
|
POST
|
I guess I should post the CSS too. The other CSS file (splash.css) you see referenced in the script doesn't haven't any search elements. html,
body,
#viewDiv {
overflow: hidden;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
height: calc(100% - 75px);
}
/*search*/
#searchParentDiv {
height: 100%;
}
/*search*/
.esri-search {
border: none;
margin-top: 7px;
margin-right: 5px;
}
div.a {
/* center the header*/
text-align: center;
}
/* Style the header */
header.app_header {
background-color: beige;
padding: 2px;
font-size: 12px;
font-family: 'Sans Serif';
color: black;
max-height: 50px;
}
/*legend*/
.esri-legend.esri-widget--panel.esri-widget {
max-height: 600px;
max-width: 600px;
}
/*.esri-expand__mask.esri-expand__mask--expanded {
max-height: 0px;
}*/
.esri-legend__layer-caption {
display: none;
}
/*query dropdown*/
#infoDiv {
background-color: black;
color: white;
font-family: 'Sans Serif';
padding: 2px;
width: 100%;
}
/*query*/
#results {
font-weight: bolder;
}
/*this section is for mobile devices*/
@media (max-width: 480px) {
h1 {
font-size: 14px;
visibility: visible;
z-index: 2
}
header {
width: 420px;
height: 100px;
}
#infoDiv {
font-size: 14px;
font-family: 'sitka';
padding: 2px;
}
/*popuptemplate*/
.esri-popup__main-container.esri-widget {
width: 300px !important;
max-height: 350px !important;
}
.esri-popup__header {
height: 100px;
max-width: 300px;
background-color: beige;
}
/*search*/
#searchParentDiv {
height: 100%;
}
/*search*/
.esri-search {
border: none;
margin-top: 7px !important;
margin-right: 53px !important;
}
}
... View more
10-29-2018
08:02 AM
|
0
|
2
|
3837
|
|
POST
|
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>
<!--links to external css and Esri api-->
<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>
<!--JavaScript beginns-->
<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
) {
//set basemap
var map = new Map({
basemap: "topo-vector",
});
//set map view
var view = new MapView({
container: "viewDiv",
map: map,
scale: 1300000,
center: [-87.95, 41.47],
//popup settings for attractions layer
popup: {
dockEnabled: true,
dockOptions: {
//set dock/undock button from on pop-up
buttonEnabled: false,
//ignore the default sizes that trigger responsive docking
breakpoint: false,
}
}
});
//***widgets***
//home widget
var homeBtn = new Home({
view: view,
});
view.ui.add(homeBtn, "top-left");
//search widget
var searchWidget = new Search({
view: view,
container: "searchDiv",
index: 2
b.widgets.Search.main.allPlaceholder = "search";
});
//legend widget
var legend = new Expand({
content: new Legend({
view: view,
//style: "card"
}),
view: view,
expanded: false
});
view.ui.add(legend, "top-left");
//***popups***
//popup template
var template = { //autocasts the new template
title: "<img src={logo} height='50' width='50'><font color= '#008000' font size= '3px'>{Name}",
content: [{ //set content elements in the order to display
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,
}]
}, {
// You can set a media element within the popup as well. This
// can be either an image or a chart. You specify this within
// the mediaInfos. Similar to text elements, media can only be set within the content.
type: "media",
mediaInfos: [{
type: "image",
value: {
sourceURL: "{Photo}"
}
}]
}]
};
//set Rt 66 photo in popup
var template2 = { //autocasts the new template
title: "<font size= '3px' font color= '#008000'>Route 66",
content: [{ //set content elements in the order to display
type: "fields",
fieldInfos: [{
fieldName: "Photo",
label: "Photo",
visible: false,
}]
}, {
type: "media",
mediaInfos: [{
type: "image",
value: {
sourceURL: "{Photo}"
}
}]
}]
};
//set I&M canal photo in popup
var template3 = { //autocasts the new template
title: "<font size= '3px' font color= '#008000'>Illinois & Michigan Canal",
content: [{ //set content elements in the order to display
type: "fields",
fieldInfos: [{
fieldName: "Photo",
label: "Photo",
visible: false,
}]
}, {
type: "media",
mediaInfos: [{
type: "image",
value: {
sourceURL: "{Photo}"
}
}]
}]
};
//***feature layers***
//add will county boundary
var boundary = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/County_Limits/FeatureServer/0?token=yM_YxXpVn38Dir9j6MRvcz3cvEAXYr9xLwp79OTcBP9VHu_Xy6tftzewVd-a5J7ufeUZXyzLuv9QggdIFDgPGiI0yYbHiYc_0y9Yzuc-kxglDfuDzhbl5wF-ZYQPiGRl3wssCXMT1rXUMjxyJXsDMKUoOy1PrgJmzk-XgrkNu-H8Hv3WGhahXiehU0n2Dk4l3RpPc0fs4bbSG8hGP5dcl30whsg3cpG3CtFseegv4kge4WhxkjuYs8umMxleGzYr",
//id: "boundary",
});
map.add(boundary);
//add Rt 66
var rt66 = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Rte_66/FeatureServer/0?token=xWHh8zKgamTMcroCxiE7AQbskmQ3_xo9xvkuxqS4opeVjboyOLCBVF_X-07v1MUHXfzB8eipB72cdUeFgicDZZR2tkk27yuo15QdnknRJaqh1rGU0XUjzwm7r3-ICbGfdyuQhitU8zI_je0RfnKDlMkgHeyKCFbcCCqGw4bb3x0TjB0P0yEth4yVNbRIAla8Pp8nnW-YBKcUWNl-dMZXG0N1OpbsD_BmtwZ_EZ_piSSyBTgFCA4DywH9r0SIKEzS",
// id: "rt66",
popupTemplate: template2,
outFields: ["*"]
});
map.add(rt66);
//add canal
var canal = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Illinois_and_Michigan_Canal/FeatureServer/0?token=saZNZop-3O7ZpTob147oHVUv7fVo9SntOUafwdgNf0gutXW2RYRP8q9TawAILOtVGPZDOwEK-wajGVtUOugqGMw4nfGoRfwHW1KoIPkthtC6CBAG7RPuCMqAFYmS1SCm8F1_4mv9Z_EM8y74Qaf1g62ujJrSslPuUTxkEdEYDhY9EB4wJkEARGlarw2k9iWFpMS5PPKBMNVaYDYMN7ak9d-1Qu9C_pckMtNc_Hbdjkkbt2xijQWJMKmqgK6nJrrQ",
popupTemplate: template3,
//id: "canal",
});
map.add(canal);
//add preserves
var preserves = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Forest_Preserves/FeatureServer/0?token=PlThkEXvgHjgFl78dz4yPzYZtkRZA2WzsigDa1Ndd1-H7eSrko_OXuP90_rLhOtdTZGDPfs1pauVuhbmPiJTT9SBA1FViJc-UgfTOzocH5qJW6cxSfyS7vwXjw0NPCJJ2TP47F4VEIJktUZv7HmILjxUVGVbAA6M4WoUxUBZynGiAA25AgGwjAQhigP1sypK3yzzITSRA8TpDf0DrvXE2fGv3aVTWMeAa3hblHqU1R71lfKgtwXna200qkJnWGoN",
//id: "preserves",
//zoom: 1,
});
map.add(preserves);
//add attraction feature layer
//reference the popup template instance in the popuptmeplate property of featurelayer
var attractions = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=kIhkvEGZO_-PPXgeZu2nYpHz_eXYZ1NZ9DGgX7CbRZsG9vic6BHNeOiiLw37TCoGgn22dNexnPmhppQk8YeXV3f0OxYcTC1YcMINIwcbcw_e8tEpKfdkjCLL3byL640Dil7J-izJUpOFIl7Wa1L6UpZ-xZbP1oA41jmhaOC_dha3PPvm-lwnFY6ZsAk5IIdub0_nimOM2IlTUTaER45elvCg3lfmy5BVodDkggLnWQY-60sg50jYQys-QSpzDFSShttps://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=brm_9OG_7AUlcufevjfLoiSCxxlcVN1g5n68z0G-L5L1gE22RKd_us2vNRlwNY1EwS0ci88AMo4Xu7Y90ScmkgC4KubpvN94IAAPMn1JdSEaDsNACutdsM0RCDxAUt6OJa5JDd3K53AI816rgB6QgMGaqNnR4A7-XNgfqKwfN9ygBw_P0uN_Mec_NPoKg19J_S91p9LwPuxjSGgYjPC6N6rJTsp206_z4Om7XtP_3uUaVHf6NRMDy4TdLMotUnxs",
id: "attractions",
visible: true,
popupTemplate: template,
outFields: ["*"]
});
map.add(attractions);
//***From here down deals with the query by type dropdown menu***
var attTypeSelect = document.getElementById("attractions");
view.ui.add("infoDiv", "left");
//query all features from the attractions layer
view.when(function () {
return attractions.when(function () {
var query = attractions.createQuery();
return attractions.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect);
// return an array of all the values in the
// Type field of the attractions layer
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.Type;
});
return values;
}
// return an array of unique values in
// the Type field of the attractions layer
function getUniqueValues(values) {
var uniqueValues = [];
values.forEach(function (item, i) {
if ((uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
(item !== "")) {
uniqueValues.push(item);
}
});
return uniqueValues;
}
// Add the unique values to the attractions type
// select element. This will allow the user
// to filter attractions by type.
function addToSelect(values) {
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
attTypeSelect.add(option);
});
return setattractionsDefinitionExpression(attTypeSelect.value);
}
// set the definition expression on the attractions
// layer to reflect the selection of the user
function setattractionsDefinitionExpression(newValue) {
attractions.definitionExpression = "Type = '" + newValue + "'";
if (!attractions.visible) {
attractions.visible = true;
}
return queryForAttractionGeometries();
}
// set a new definitionExpression on the attractions layer
attTypeSelect.addEventListener("change", function () {
var type = event.target.value;
setattractionsDefinitionExpression(type);
});
// Get all the geometries of the attractions layer
// the createQuery() method creates a query
// object that respects the definitionExpression
// of the layer
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>
<!--Splashscreen***-->
<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>
... View more
10-29-2018
07:56 AM
|
0
|
3
|
3837
|
|
POST
|
Robert, I haven't got it to work yet. I incorporated what you had, but there's something wrong with the script somewhere. The app isn't showing the search box among other things. 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
)
//search widget
var searchWidget = new Search({
view: view,
container: "searchDiv",
index: 2
b.widgets.Search.main.allPlaceholder = "search";
}); EDIT: Here's the search elements in the body. <div id="searchParentDiv" style="float:right;">
<div id="searchDiv" style="float:right;"></div>
</div>
... View more
10-29-2018
07:44 AM
|
0
|
4
|
3837
|
|
POST
|
How can I change "Find address or place" to "search" in the CSS? Can I override Esri's main.css file? I put in "content: 'search;'" here. There was no change. Here's where it seems to be in one of my CSS files. @media (max-width: 480px)
.esri-input.esri-search__input {
visibility: visible;
font-size: 12px;
margin-right: 0px;
} I tried this but there was no change: content: "search" !important;
... View more
10-26-2018
09:43 AM
|
0
|
14
|
6641
|
|
POST
|
This seems to have been updated in API 4.9: .esri-popup__main-container.esri-widget {
width: 310px !important;
max-height: 300px !important;
}
... View more
10-19-2018
12:54 PM
|
2
|
0
|
2325
|
|
POST
|
I didn't research enough before posting. Here are some helpful discussions/answers: How do I edit pop-up size and location? Esri JS API Draggable Popups - JSFiddle
... View more
10-19-2018
09:15 AM
|
0
|
0
|
1914
|
|
POST
|
I was wondering if there was a way to make the attribute popup template draggable. The closest example I've seen is the ability to dock it in different positions: Popup dock positions | ArcGIS API for JavaScript 4.9 I was thinking something like this: How To Create a Draggable HTML Element
... View more
10-19-2018
08:37 AM
|
0
|
1
|
2508
|
|
POST
|
Thanks. Yes, I actually created new feature services for the three in the above image that had hyphenated names. Before they were part of the feature dataset and "Will County Tourist Attractions" was the name of the file geodatabase. Now my legend looks like this:
... View more
10-19-2018
07:02 AM
|
1
|
0
|
5986
|
|
POST
|
It gets worse. They don't even have an option for my Android! This app is meant for the public so who knows what old phones are still out there. You pretty much got it, thanks. But, here's an example of the interface I'm after. Nice and big. I'll have to dig into the styling of this app. Thanks again.
... View more
10-17-2018
02:08 PM
|
0
|
0
|
750
|
|
POST
|
Robert, Ok. Before I was only copying your CSS. This time I copied the entire code and got what you got. On a smaller device it's better but you still can't read the attributes in the popup. iPhone 4
... View more
10-17-2018
01:54 PM
|
0
|
2
|
4938
|
|
POST
|
Robert, Right, sorry. I've since changed it to get the title back and posted the results. So, with your exact code here's the result on an iPhone 6/7/8.
... View more
10-17-2018
01:22 PM
|
0
|
4
|
4938
|
|
POST
|
Robert, Yes, I used your exact code (cut/pasted even) and the popup is still where it was before. It looks decent on an iPhone 6/7/8 using both Firefox and Chrome, but it would be best if I could adjust it up to where you could at least see the whole pic in the popup. Firefox: Chrome: On anything with a smaller screen the popup is not even enough on the screen to scroll. iPhone 4 on Chrome: I've added height to this section but it only helps a little: @media (max-width: 480px) {
h1 {
visibility:visible;
max-height: 100px;
} EDIT: I've have the devices set to portrait. If you set the phone to Auto-Rotate it doesn't make much difference.
... View more
10-17-2018
12:56 PM
|
0
|
6
|
4938
|
|
POST
|
Robert, Thanks. That would've taken my a while to figure out. The header disappearing problem is fixed. I set this to -100px because after closing out of the popup the header would still slide up at -75px. }
#viewDiv {
/*set height of the view minus the header*/
height: calc(100% - 100px);
} I set this to visible to get the title to show up. @media (max-width: 480px) {
h1 {
visibility: visible;
} But, the popup is still off the bottom of the screen. Do you know where to adjust it? Does it have something to do with this possibly? /*query*/
#results {
font-weight: bolder;
}
... View more
10-17-2018
11:50 AM
|
0
|
8
|
4938
|
|
POST
|
I think the header is causing this. Viewing an app without a header the popups display fine on all mobile devices I've tested on. But, when I have a header the popups are way off the screen on phones and fine on a PC or I-Pad. I'm thinking there's a mobile friendly solution here, which is what my question is about. I've tested on both actual phones and through Chrome and Firefox's mobile device developer tools. Here's how the popup displays on an I-Phone 4, or any other mobile device, with a header: Here's the whole pop-up viewed from my PC: I need a header, so getting rid of it is out of the question. I've put this question to Esri last week, but haven't heard back yet. Our server doesn't yet have a security certificate for https, only http. This may be part of the problem. We're getting one soon. One other weird thing is that when I close the pop-up the entire header disappears. It comes back when I refresh. Here is my entire app: <!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="https://js.arcgis.com/4.9/esri/css/main.css">
<style>
html,
body,
#viewDiv {
overflow: hidden;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
/*search*/
#searchParentDiv {
height: 100%;
}
/*search*/
.esri-search {
border: solid 3px red;
}
div.a {
/* center the header*/
text-align: center;
}
/* Style the header */
header {
background-color: whitesmoke;
padding: 1px;
font-size: 12px;
font-family: 'Sans Serif';
color: black;
}
.esri-legend__layer-caption {
display: none;
}
/*query dropdown*/
#infoDiv {
background-color: black;
color: white;
font-family: 'Sans Serif';
padding: 2px;
width: 2000px;
}
/*query*/
#results {
font-weight: bolder;
}
</style>
<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/domReady!"
],
function (
Map, MapView, FeatureLayer, GraphicsLayer, Search, Home, Legend, Expand
) {
//set basemap
var map = new Map({
basemap: "topo",
});
//set map view
var view = new MapView({
container: "viewDiv",
map: map,
scale: 500000,
center: [-87.95, 41.4],
//popup settings for attractions layer
popup: {
dockEnabled: true,
dockOptions: {
//set dock/undock button from on pop-up
buttonEnabled: false,
//ignore the default sizes that trigger responsive docking
breakpoint: false,
}
}
});
//***widgets***
//home widget
var homeBtn = new Home({
view: view,
});
view.ui.add(homeBtn, "top-left");
//search widget
var searchWidget = new Search({
view: view,
container: "searchDiv"
});
//legend widget
var legend = new Expand({
content: new Legend({
view: view,
//style: "card"
}),
view: view,
expanded: false
});
view.ui.add(legend, "top-left");
//***popups***
//popup template
var template = { //autocasts the new template
title: "<img src= {logo}><font color= '#008000'>{Name}",
content: [{ //set content elements in the order to display
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,
}
]
}, {
// You can set a media element within the popup as well. This
// can be either an image or a chart. You specify this within
// the mediaInfos. Similar to text elements, media can only be set within the content.
type: "media",
mediaInfos: [{
type: "image",
value: { sourceURL: "{Photo}" }
}]
}]
};
var template2 = { //autocasts the new template
title: "<font color= '#008000'>Route 66",
content: [{ //set content elements in the order to display
type: "fields",
fieldInfos: [{
fieldName: "Photo",
label: "Photo",
visible: false,
}
]
}, {
type: "media",
mediaInfos: [{
type: "image",
value: { sourceURL: "{Photo}" }
}]
}]
};
var template3 = { //autocasts the new template
title: "<font color= '#008000'>Illinois & Michigan Canal",
content: [{ //set content elements in the order to display
type: "fields",
fieldInfos: [{
fieldName: "Photo",
label: "Photo",
visible: true,
}
]
}, {
type: "media",
mediaInfos: [{
type: "image",
value: { sourceURL: "{Photo}" }
}]
}]
};
//***feature layers***
//add will county boundary
var boundary = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/County_Limits/FeatureServer/0?token=yM_YxXpVn38Dir9j6MRvcz3cvEAXYr9xLwp79OTcBP9VHu_Xy6tftzewVd-a5J7ufeUZXyzLuv9QggdIFDgPGiI0yYbHiYc_0y9Yzuc-kxglDfuDzhbl5wF-ZYQPiGRl3wssCXMT1rXUMjxyJXsDMKUoOy1PrgJmzk-XgrkNu-H8Hv3WGhahXiehU0n2Dk4l3RpPc0fs4bbSG8hGP5dcl30whsg3cpG3CtFseegv4kge4WhxkjuYs8umMxleGzYr",
//id: "boundary",
});
map.add(boundary);
//add Rt 66
var rt66 = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Rte_66/FeatureServer/0?token=xWHh8zKgamTMcroCxiE7AQbskmQ3_xo9xvkuxqS4opeVjboyOLCBVF_X-07v1MUHXfzB8eipB72cdUeFgicDZZR2tkk27yuo15QdnknRJaqh1rGU0XUjzwm7r3-ICbGfdyuQhitU8zI_je0RfnKDlMkgHeyKCFbcCCqGw4bb3x0TjB0P0yEth4yVNbRIAla8Pp8nnW-YBKcUWNl-dMZXG0N1OpbsD_BmtwZ_EZ_piSSyBTgFCA4DywH9r0SIKEzS",
// id: "rt66",
popupTemplate: template2,
outFields: ["*"]
});
map.add(rt66);
//add canal
var canal = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Illinois_and_Michigan_Canal/FeatureServer/0?token=saZNZop-3O7ZpTob147oHVUv7fVo9SntOUafwdgNf0gutXW2RYRP8q9TawAILOtVGPZDOwEK-wajGVtUOugqGMw4nfGoRfwHW1KoIPkthtC6CBAG7RPuCMqAFYmS1SCm8F1_4mv9Z_EM8y74Qaf1g62ujJrSslPuUTxkEdEYDhY9EB4wJkEARGlarw2k9iWFpMS5PPKBMNVaYDYMN7ak9d-1Qu9C_pckMtNc_Hbdjkkbt2xijQWJMKmqgK6nJrrQ",
popupTemplate: template3,
//id: "canal",
});
map.add(canal);
//add preserves
var preserves = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Forest_Preserves/FeatureServer/0?token=PlThkEXvgHjgFl78dz4yPzYZtkRZA2WzsigDa1Ndd1-H7eSrko_OXuP90_rLhOtdTZGDPfs1pauVuhbmPiJTT9SBA1FViJc-UgfTOzocH5qJW6cxSfyS7vwXjw0NPCJJ2TP47F4VEIJktUZv7HmILjxUVGVbAA6M4WoUxUBZynGiAA25AgGwjAQhigP1sypK3yzzITSRA8TpDf0DrvXE2fGv3aVTWMeAa3hblHqU1R71lfKgtwXna200qkJnWGoN",
//id: "preserves",
//zoom: 1,
});
map.add(preserves);
//add attraction feature layer
//reference the popup template instance in the popuptmeplate property of featurelayer
var attractions = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=kIhkvEGZO_-PPXgeZu2nYpHz_eXYZ1NZ9DGgX7CbRZsG9vic6BHNeOiiLw37TCoGgn22dNexnPmhppQk8YeXV3f0OxYcTC1YcMINIwcbcw_e8tEpKfdkjCLL3byL640Dil7J-izJUpOFIl7Wa1L6UpZ-xZbP1oA41jmhaOC_dha3PPvm-lwnFY6ZsAk5IIdub0_nimOM2IlTUTaER45elvCg3lfmy5BVodDkggLnWQY-60sg50jYQys-QSpzDFSShttps://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=brm_9OG_7AUlcufevjfLoiSCxxlcVN1g5n68z0G-L5L1gE22RKd_us2vNRlwNY1EwS0ci88AMo4Xu7Y90ScmkgC4KubpvN94IAAPMn1JdSEaDsNACutdsM0RCDxAUt6OJa5JDd3K53AI816rgB6QgMGaqNnR4A7-XNgfqKwfN9ygBw_P0uN_Mec_NPoKg19J_S91p9LwPuxjSGgYjPC6N6rJTsp206_z4Om7XtP_3uUaVHf6NRMDy4TdLMotUnxs",
id: "attractions",
visible: true,
popupTemplate: template,
outFields: ["*"]
});
map.add(attractions);
//***From here down deals with the query by type dropdown menu***
var attTypeSelect = document.getElementById("attractions");
view.ui.add("infoDiv", "left");
//query all features from the attractions layer
view.when(function () {
return attractions.when(function () {
var query = attractions.createQuery();
return attractions.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect);
// return an array of all the values in the
// Type field of the attractions layer
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.Type;
});
return values;
}
// return an array of unique values in
// the Type field of the attractions layer
function getUniqueValues(values) {
var uniqueValues = [];
values.forEach(function (item, i) {
if ((uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
(item !== "")) {
uniqueValues.push(item);
}
});
return uniqueValues;
}
// Add the unique values to the attractions type
// select element. This will allow the user
// to filter attractions by type.
function addToSelect(values) {
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
attTypeSelect.add(option);
});
return setattractionsDefinitionExpression(attTypeSelect.value);
}
// set the definition expression on the attractions
// layer to reflect the selection of the user
function setattractionsDefinitionExpression(newValue) {
attractions.definitionExpression = "Type = '" + newValue + "'";
if (!attractions.visible) {
attractions.visible = true;
}
return queryForAttractionGeometries();
}
// set a new definitionExpression on the attractions layer
attTypeSelect.addEventListener("change", function () {
var type = event.target.value;
setattractionsDefinitionExpression(type);
});
// Get all the geometries of the attractions layer
// the createQuery() method creates a query
// object that respects the definitionExpression
// of the layer
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>
<p><img src="http://www.willcogis.org/website2014/gis/images/gisseal_thumbnail.png" alt="GIS Seal" style="float:left;width:48px;height:46px;">
<div id="searchParentDiv" style="float:right;width:250px;height:46px;">
<div id="searchDiv"></div>
</div>
<div class="a">
<h1 class="local">Will County Attractions</h1>
</div>
</header>
<div id="infoDiv">
Select attractions type:
<select id="attractions"></select>
</div>
<div id="viewDiv"></div>
</body>
</html>
... View more
10-17-2018
07:52 AM
|
0
|
10
|
6503
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 2 weeks ago | |
| 1 | 4 weeks ago | |
| 1 | 07-24-2025 01:27 PM | |
| 1 | 11-13-2025 08:22 AM | |
| 1 | 11-12-2025 08:37 AM |
Activity Feed
- Kudoed Exporting from the widget table directly to PDF for doronwen. Thursday
- Posted Add CSV Widget on Experience Builder Custom Widgets. Wednesday
- Kudoed Re: Geocode File Location Only Shape X, Shape Y for JonathanLebowitz. a week ago
- Kudoed Re: Geocode File Location Only Shape X, Shape Y for BobBooth1. a week ago
- Kudoed Re: Geocode File Location Only Shape X, Shape Y for Laura. a week ago
- Posted Geocode File Location Only Shape X, Shape Y on ArcGIS Pro Questions. a week ago
- Kudoed Re: Geolocate addresses tool in arcpy for ShanaBritt. a week ago
- Kudoed Re: how do you get a Client ID for ArcGIS Enterprise account for abureaux. 2 weeks ago
- Posted Python Toolbox: carry out multiple tasks in the source code def execute() function on ArcGIS Pro Questions. 2 weeks ago
- Kudoed Re: BUG-000103046: Unable to add a locator to a project from Portal for ArcGIS using the Locate pane in ArcGIS Pro. for Robert_LeClair. 2 weeks ago
- Posted Re: BUG-000103046: Unable to add a locator to a project from Portal for ArcGIS using the Locate pane in ArcGIS Pro. on ArcGIS Pro Questions. 2 weeks ago
- Kudoed Re: Python Toolbox: parameter data type to access a field(s) in a table for DanPatterson. 2 weeks ago
- Posted Re: Python Toolbox: parameter data type to access a field(s) in a table on ArcGIS Pro Questions. 2 weeks ago
- Got a Kudo for Re: BUG-000103046: Unable to add a locator to a project from Portal for ArcGIS using the Locate pane in ArcGIS Pro.. 2 weeks ago
- Posted Re: BUG-000103046: Unable to add a locator to a project from Portal for ArcGIS using the Locate pane in ArcGIS Pro. on ArcGIS Pro Questions. 2 weeks ago
- Posted Re: Python Toolbox: parameter data type to access a field(s) in a table on ArcGIS Pro Questions. 2 weeks ago
- Posted BUG-000103046: Unable to add a locator to a project from Portal for ArcGIS using the Locate pane in ArcGIS Pro. on ArcGIS Pro Questions. 2 weeks ago
- Kudoed Re: Python Toolbox: parameter data type to access a field(s) in a table for AlfredBaldenweck. 2 weeks ago
- Posted Re: Python Toolbox: parameter data type to access a field(s) in a table on ArcGIS Pro Questions. 2 weeks ago
- Posted Python Toolbox: parameter data type to access a field(s) in a table on ArcGIS Pro Questions. 3 weeks ago
Contact Me
| Online Status |
Online
|
| Date Last Visited |
Friday
|