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
Friday
684
Posts created
434
Kudos given
28
Solutions
118
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, 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
|
3981
|
|
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
|
5395
|
|
POST
|
How do I query a feature layer? My feature layer is about 150 points with attributes. I'd like to be able to have the user query these points by "Type". I've had a look at this example: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-query/index.html As far as I can see I should be able to use it. Based on the example, here's what I came up with using my own data. But it's not functioning. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Query features from a FeatureLayer - 4.9</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#infoDiv {
background-color: white;
color: black;
padding: 6px;
width: 400px;
}
#results {
font-weight: bolder;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/geometryEngine",
"esri/Graphic"
],
function (
Map, MapView,
FeatureLayer,
GraphicsLayer,
geometryEngine,
Graphic
) {
var attTypeSelect = document.getElementById("attractions");
//attractions
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",
outFields: ["*"],
id: "attractions",
visible: false
});
//GraphicsLayer for desplaying results
var resultsLayer = new GraphicsLayer();
var map = new Map({
basemap: "dark-gray",
layer: "attractions"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-87.75188, 41.23308],
zoom: 10
});
view.ui.add("infoDiv", "top-right");
//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 queryForAtractionGeometries();
}
// 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>
<div id="viewDiv"></div>
<div id="infoDiv">
Select attractions type:
<select id="attractions"></select>
</div>
</body>
</html>
... View more
10-11-2018
11:47 AM
|
0
|
2
|
4850
|
|
POST
|
//add legend
var legend = new Expand({
content: new Legend({
view: view,
//style: "card"
}),
view: view,
expanded: false
});
view.ui.add(legend, "top-left");
}); Update: Something in my code is only allowing the legend to appear card style once (line 5 here) is commented out. I was talking to an Esri tech about this and he was able to use my layers in a app with a card-style legend and it was fine. So, I'm marking your answer here as correct since, on the surface, it answers the question.
... View more
10-05-2018
09:27 AM
|
1
|
0
|
1049
|
|
POST
|
@Molly F Could you tell me how you got the service title to display? Here's how my legend looks: The names of the Feature Services and the Layers are being displayed. I'm trying to get my legend to look like yours.
... View more
10-03-2018
12:05 PM
|
0
|
2
|
5184
|
|
POST
|
Robert, here's how it is in the script for the Route 66 layer: var rt66 = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Tourist_Attractions/FeatureServer/1?token=lCbBAZf7OeU-woSquLtIM3JmePz2QkOjfB0_BEd4zP5paSlezeyNSlcuO2yqUvsV0ZGyjL30dGXV-TWOcw6H1tq-Lx1Y7J0u4WbRF8uJXQzPYdK-gjHzSfFPGS3HpY46cOK2KQi4a2089fHESZ3UvjhoNr2YYENlmzjuTKVlfd9EiLhyLMs2ZUTMecCyKDP_W2KuZlLeh82Lee4FJ0SPHgB0fA52qRntM89Pj9HKTXydVAfJiRFEnyN9I9ft8yfX",
}) EDIT: the service url came from the Overview tab of the feature layer's AGOL page:
... View more
10-03-2018
10:27 AM
|
0
|
1
|
1036
|
|
POST
|
These feature layers I'm working with were created from a File Geodatabase: https://willcountygis.maps.arcgis.com/home/item.html?id=14a8dfb2cb6048f29691c5dc1405c4b5 Here's how it looks in the legend: If I rename a feature layer in the web map it doesn't save. So I save it and create another web map. I use that layers' service URL in my script and the title in the legend still is there twice, as it looks in the image above. It seems like it should be simple, but how do I change the title to just "Route 66", for example?
... View more
10-03-2018
09:39 AM
|
0
|
3
|
1149
|
|
POST
|
Robert, What's confusing me is how their script uses 'const' instead of 'var': // add a legend widget instance to the view
// and set the style to 'card'. This is a
// responsive style, which is good for mobile devices
const legend = new Expand({
content: new Legend({
view: view,
style: "card" // other styles include 'classic'
}),
view: view,
expanded: true
});
view.ui.add(legend, "bottom-left");
});
... View more
10-01-2018
02:26 PM
|
0
|
1
|
1049
|
|
POST
|
I need help implementing this.This app I'm creating is supposed to be mobile-friendly which is why I'm seeking the card style. Legend widget card style | ArcGIS API for JavaScript 4.9 I've been referencing this sample code, but I'm not too sure how to tweak it so that it works in my script. Here's how that portion of my script looks now: var legend = new Legend({
view: view
});
view.ui.add(legend, "top-left"),
//functions
map.addMany([canal, preserves, rt66, boundary, attractions, featureLayer]);
}); Here's a link to my whole script.
... View more
10-01-2018
02:08 PM
|
1
|
4
|
1331
|
|
POST
|
Thanks Robert. The order of your variables seems the wrong way round, but it did the trick! I tried this order and it didn't change anything: map.addMany([attractions, boundary, rt66, canal, preserves]);
... View more
09-28-2018
10:54 AM
|
0
|
1
|
1324
|
|
POST
|
I'm working on an app with a few feature layers. There are points (attractions) and polygons (preserves). Why do the polygons overlap the points? Image: It doesn't seem to deal with the order of the feature layers in the <script>: //add attraction feature layer
var attractions = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=FRQ3ta_CoBnz3s5xOY8Q649k62CGCo1FxjRhLn9ptI2ANN03ld5Yma2vHGf8MbovDnGjE6VxpTJ7kAShDHjSAeJiuFhGiZVTT1yC6oogNPkfeKqroE1drY-84jmqnKHcEtgY_WjYeIa-RAftHdlO-OgqDvMQSwElQzVkI_GjsXViudg4DHApFmxlp3RoYngYH5kYH3qXcVSAU6Qhp-DgciW_ZvfWalpE1IJsB2b6eKO1bdGdPibKtQUJoGuqFbs_",
id: "attractions",
zoom: 2,
});
//add will county boundary
var boundary = new FeatureLayer({
url: "http://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Boundary/FeatureServer/0?token=6vBDftNXDqbaZH6fbfhuDCeGkJFaWMSEPaeYDt6PbDBfVacnSMMD7PZS3QeCW6mDqgSFMK0tRjMyJyrxDPQ3rcjTNUCFpi0pfpU_mFLoKXGlT5FTGTPH3GjMqL9iQCqh9_ihX8D1-DQ5N_ptC-ic9bKeDLjqU2xQOv8wIRPjX5VwrtsQz_ltdanO49SVPaJ8F7EN6qWZMgvFw9V0iBbV4Iu0khjfjhuswBNzhjJa3I6q0epaze9AsPRVvVXJ5wik",
id: "boundary",
zoom: 1,
});
//add Rt 66
var rt66 = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Tourist_Attractions/FeatureServer/1?token=Bj40q7dvc09lhoMxvDc_YHICLyf8Sz-HYSQ-n4lP4f4CGm3JaITUY0Tm7FnhhXcDel7W4rzUoKt1jDqw5CZGaEAQgq3IfUGez171nOzq5UlHAX5xQqWiV5BC3eUbd02xjimDX7VzJh8Z6muNPIep3iy1uZKfURjQ-Pdi5bbuF1p2DtffTsnOYCpNsyRX8SraieLTqxpm-2L6TdzRrUt2B6V48kzXcrQQz6uGDiUrBycc0GL0K94QiUmKwJNUxDXB",
id: "rt66",
zoom: 1,
});
//add Canal
var canal = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Tourist_Attractions/FeatureServer/7?token=hhHLfbTFMO4xFbknwKCPflTqPD9RL5itP3d986PoOep4vUpYx5a27DnJ2PlFrPNXbkh_ytENT0SON4tQmlnxh7kiIqS10xkmfylm7IjTE9g5zah3TAe3XNEV6PxrN2jyU42SX0CF-7EABZGhODoFvu9K8wMQnAH5-2iJ26SmD68z2De_aXWT8EOjwAt6jBPV_BF9P031hxa8ei_rYDM126rHh_B7lPwoD8WjuVTp67qZyo3EdCKcuv1fsKG7g70M",
id: "canal",
});
//add FPDWC preservs
var preserves = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Tourist_Attractions/FeatureServer/2?token=iVy9SWuGGAelNxz-bZrVvaE5FG3S_FfugVidwyINuh_XgsPUhM_W_XO3f75zJDIN2J2f6D0b7fMbjd2zl08NAghPxjZiD4RZGapZajL_nNMp2xoCxB77LDk201BkOMwnEmOIv10EexpqjR_rV713GK7Jw19qB4SkKkWj6sKBOM0bKxo78fc6znY--QIvtegGrigwViKjxyIB17sGxXswV62xOKkYpX96s37oGaKqRNX7EzG4IUmTXA8mQfb9W4S4",
id: "preserves",
});
//functions
map.add(featureLayer);
map.add(attractions);
map.add(boundary);
map.add(rt66);
map.add(canal);
map.add(preserves);
});
</script> I suspect it has to do with the hosted feature layers back in AOL. The attractions feature layer was created from a CSV file, while the other feature layers were uploaded to AOL in a FGDB.
... View more
09-28-2018
09:58 AM
|
1
|
3
|
1532
|
|
POST
|
Brilliant. Thanks Robert. BTW, I also had to change this section to false or else I was getting the attributes to show up in the popup too. {
fieldName: "Photo",
label: "Photo",
visible: false,
}
... View more
09-21-2018
01:14 PM
|
0
|
0
|
4040
|
|
POST
|
In my attributes the Photo field is a URL: http://www.willcogis.org/website2014/gis/images/mar.png So, I thought I'd change the type to "url" instead of "image" under mediaInfos. Nothing.
... View more
09-21-2018
11:34 AM
|
0
|
2
|
4040
|
|
POST
|
Adrian, That segment is actually where I got the idea. My code has the chart section partially incorporated (using an image). But, I can't get the image to show up in the popup. For one, I'm not sure what the tooltipField variable is or why they include it? Here's how I incorporated it: var view = new MapView({
container: "viewDiv",
map: map,
scale: 500000,
center: [-87.95, 41.4],
popup: {
dockEnabled: true,
dockOptions: {
//disables the dock button from the pop-up
buttonEnabled: false,
//ignore the default sizes that trigger responsive docking
breakpoint: false,
}
}
});
//popup template
var template = { //autocasts the new template
title: "<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: true,
},
]
}, {
// 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: {
fields: ["Photo"],
normalizeField: null,
}
}]
}
]
};
... View more
09-21-2018
10:54 AM
|
1
|
3
|
4040
|
|
POST
|
This webpage I'm working on is in a test phase. I have one point on the map. There's a table behind it with the name, type, address, website and photo. I would like to have the photo show up in the popup. Right now, when you click the point the photo field shows up in the popup as a link. That's not what I'm going for. I want this and each additional point I add to show the photo of its related field directly in the popup. Here's a sample that does something similar: ArcGIS API for JavaScript Sandbox. Each popup has it's related chart coming from their table. This is what I want to do. The pics here don't change.
... View more
09-21-2018
09:34 AM
|
1
|
5
|
4327
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 11-13-2025 08:22 AM | |
| 1 | 11-12-2025 08:37 AM | |
| 1 | 10-22-2025 02:14 PM | |
| 1 | 01-17-2019 08:21 AM | |
| 1 | 07-06-2023 07:08 AM |
Activity Feed
- Kudoed BasemapGallery - how to limit list? for Shane_. Thursday
- Kudoed Re: project_service_aprx_object.save() Error from Pro 2.8.x to 2.9 upgrade for codergrl. 2 weeks ago
- Kudoed Re: project_service_aprx_object.save() Error from Pro 2.8.x to 2.9 upgrade for JoeLemeris. 2 weeks ago
- Posted Re: My Neighborhood School Solution acts half-baked on ArcGIS Solutions Questions. 12-10-2025 12:37 PM
- Kudoed Re: ESRI Advanced Guide To Python in GIS ch. 15: Warning in terminal for CodyPatterson. 11-25-2025 06:52 AM
- Posted Re: ESRI Advanced Guide To Python in GIS ch. 15: Warning in terminal on Esri Press Books Questions. 11-24-2025 02:13 PM
- Posted Re: ESRI Advanced Guide To Python in GIS ch. 15: Warning in terminal on Esri Press Books Questions. 11-24-2025 06:59 AM
- Posted Re: ESRI Advanced Guide To Python in GIS ch. 15: Warning in terminal on Esri Press Books Questions. 11-20-2025 02:18 PM
- Posted ESRI Advanced Guide To Python in GIS ch. 15: Warning in terminal on Esri Press Books Questions. 11-20-2025 01:41 PM
- Kudoed Download instant app and deploy to web server for vijaybadugu. 11-20-2025 06:46 AM
- Kudoed Re: In Firefox, no left-hand toolbar available in Map Viewer for MelissaSullivan. 11-17-2025 09:09 AM
- Kudoed In Firefox, no left-hand toolbar available in Map Viewer for MelissaSullivan. 11-17-2025 09:06 AM
- Posted Script tool: embed the source code vs. using a file on Python Questions. 11-14-2025 09:26 AM
- Posted Re: ArcPro Script Tool parameter for a variety of file types on Python Questions. 11-13-2025 08:46 AM
- Got a Kudo for Re: ArcPro Script Tool parameter for a variety of file types. 11-13-2025 08:29 AM
- Kudoed Re: ArcPro Script Tool parameter for a variety of file types for DuncanHornby. 11-13-2025 08:23 AM
- Kudoed Re: ArcPro Script Tool parameter for a variety of file types for TonyAlmeida. 11-13-2025 08:23 AM
- Posted Re: ArcPro Script Tool parameter for a variety of file types on Python Questions. 11-13-2025 08:22 AM
- Posted Re: ArcPro Script Tool parameter for a variety of file types on Python Questions. 11-13-2025 07:11 AM
- Posted Re: ArcPro Script Tool parameter for a variety of file types on Python Questions. 11-12-2025 10:49 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
Friday
|