|
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
|
4861
|
|
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
|
4861
|
|
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
|
5148
|
|
POST
|
Thanks to you both. I just realized at the same time it was the the header in the CSS that was causing the problem. I'll have to adjust this.
... View more
09-19-2018
12:44 PM
|
0
|
0
|
2795
|
|
POST
|
Robert, I can't see anything in the CSS that would be related to the popup. Here's a link to the webpage in case you'd like to check it out. It's all one big HTML file. I've tried undocking it, but the title is still centered. I've tried it without the graphic used to outline the feature layer, but no difference. I haven't taken out all elements related to the popup and started over. I might have to, however.
... View more
09-19-2018
12:15 PM
|
0
|
3
|
2795
|
|
POST
|
The title in the popup is currently centered. Is there a way I can get this to be left aligned? The popup is docked. And there's nowhere in the CSS section to style it? var view = new MapView({
container: "viewDiv",
map: map,
scale: 700000,
center: [-87.85, 41.5],
popup: {
dockEnabled: true,
dockOptions: {
// Disables the dock button from the popup
buttonEnabled: false,
// Ignore the default sizes that trigger responsive docking
breakpoint: false,
top,
}
}
});
... View more
09-18-2018
01:20 PM
|
0
|
5
|
2962
|
|
POST
|
Robert, Sorry, I should have mentioned I'm building a custom app. Ok, so the code in WAB page won't work. I'm looking for a way to display a small paragraph about the app when the user first opens the page. I thought a splash screen could work nicely. I also tried a window alert, but I don't like the look: Tryit Editor v3.5 In this question on Geonet someone asks a similar question, but the answers refer to outside sources: https://community.esri.com/thread/202969-splash-screen-with-the-arcgis-js-api-4x Is there not a way using ArcGIS for JS?
... View more
08-24-2018
11:53 AM
|
0
|
4
|
3263
|
|
POST
|
There's this, but they don't tell you where it goes: Splash—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers And there's nothing on ArcGIS API for JavaScript 4.8 sample code page: Samples Overview | ArcGIS API for JavaScript 4.8
... View more
08-24-2018
11:18 AM
|
0
|
6
|
4129
|
|
POST
|
Robert, You're able to see the entire popup? Maybe it's a phone version issue then? On my Android 3G smart phone I'm only getting the upper left corner of the popup. It's on the bottom right side, but most of it is off the screen. This is the problem I'm having. And so, I was asking if there were other ways to dock it? EDIT: I just did a Google Chrome (browser I use on my phone) update and now the popup seems to dock pretty decently on the bottom, as you said yours did. I also changed the breakpoint to true. However, it didn't actually do what it was supposed to on the phone, which to my understanding is to undock it. popup: {
dockEnabled: true,
dockOptions: {
// Disables the dock button from the popup
buttonEnabled: false,
// Ignore the default sizes that trigger responsive docking
breakpoint: true,
}}
... View more
08-21-2018
09:18 AM
|
0
|
1
|
2279
|
|
POST
|
Hello, I'm building my first app using snippets. I need help adjusting a popup so that it appears correctly on a mobile device. As of now the app looks good on a PC, but on my smart phone the popup is almost completely off the screen. EDIT: My intention is to have a docked popup in the top right corner. When viewing the app on a PC that's where it is, so that's good. So far, I had a look at this sample code. But, I didn't get anything out of it. Popup dock positions | ArcGIS API for JavaScript 4.8 Here's my code: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to Popups</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="http://js.arcgis.com/4.8/esri/css/main.css">
<script src="http://js.arcgis.com/4.8/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer", //Require the FeatureLayer module
"esri/Graphic",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
],
function(
Map, MapView, FeatureLayer, Graphic, dom, on
) {
var warming = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_around_Will_County_IL/FeatureServer/0?token=D_nuNBIqs-eSw-9SGAdtGHxOVGD9pC8U4gGOmwpkyvPxwvwCO3eiuSxaK4gbuO6x5aDZil_xW_iObpWePfHpIO_Vf-Rj2J7B_XnG95zynEqa0iuT0KE_OwujjdUMszM3raRq0zW9WskdokSXWHn8tJGb55fPni3coDnntG0lTOi9u5mfWf4mLRIfLBshuC2vXCiNLVzicWbH39jCFokDiqDjt8YfOdfyasL4ljvNftkl9Jpkr-7OJNElSp2yY9SG",
id: "warming",
minScale: 5000000
});
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,
});
var map = new Map({
basemap: "streets-night-vector",
layers: [warming, boundary]
});
var view = new MapView({
container: "viewDiv",
map: map,
scale: 1000000,
center: [-88, 41.5],
popup: {
dockEnabled: true,
dockOptions: {
// Disables the dock button from the popup
buttonEnabled: false,
// Ignore the default sizes that trigger responsive docking
breakpoint: false,
}}
});
var template = { // autocasts as new PopupTemplate()
title: "{FACILITY_NAME}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "FACILITY_TYPE",
label: "Facility Type",
visible: true,
}, {
fieldName: "ADDRESS",
label: "Address",
visible: true,
}, {
fieldName: "WEBSITE",
label: "Website",
visible: true,
}, {
fieldName: "PHONE_NUMBER",
label: "Phone",
visible: true,
}, {
fieldName: "HOURS",
label: "Hours",
visible: true,
}]
}]
};
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_around_Will_County_IL/FeatureServer/0?token=D_nuNBIqs-eSw-9SGAdtGHxOVGD9pC8U4gGOmwpkyvPxwvwCO3eiuSxaK4gbuO6x5aDZil_xW_iObpWePfHpIO_Vf-Rj2J7B_XnG95zynEqa0iuT0KE_OwujjdUMszM3raRq0zW9WskdokSXWHn8tJGb55fPni3coDnntG0lTOi9u5mfWf4mLRIfLBshuC2vXCiNLVzicWbH39jCFokDiqDjt8YfOdfyasL4ljvNftkl9Jpkr-7OJNElSp2yY9SG",
outFields: ["*"],
popupTemplate: template
});
map.add(featureLayer);
view.popup.watch("selectedFeature", function(e) {
view.graphics.removeAll();
if (e && e.geometry) {
view.graphics.add(new Graphic({
geometry: e.geometry,
symbol: {
type: "simple-marker",
style: "circle",
size: 12,
outline: {
color: "#a900e6",
width: 2
}
}
}));
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</span>
</body>
</html>
... View more
08-20-2018
01:10 PM
|
0
|
3
|
2789
|
|
POST
|
I'm attempting to create a simple app that has a point featurelayer with some attributes. When selecting a point to view its popup info, how can I also make it become highlighted? This link to sample code does something similar in that it draws a border on a polygon: PopupTemplate with promise | ArcGIS API for JavaScript 4.8 This sample code does basically what I want in that when you select a point it becomes highlighted and has a popup: CSVLayer - Project points on the fly | ArcGIS API for JavaScript 4.8 Here's what I have so far: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to Popups</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#layerToggle {
top: 20px;
right: 20px;
position: absolute;
z-index: 99;
background-color: white;
border-radius: 8px;
padding: 10px;
opacity: 0.75;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer", //Require the FeatureLayer module
"dojo/dom",
"dojo/on",
"dojo/domReady!"
],
function(
Map, MapView, FeatureLayer, dom, on
) {
var warming = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_aroud_Will_County/FeatureServer/0?token=TYud8dGZfk-2we1iW0XCIvmarr1E52rLmntGUN5A4k6BFN1awEyGdeMj_GzNnUyJuFOqApzxytM5h2UjsZOxIaoyJ5EMVM_j9I3c9E6vL0PhP00Jx6huW-O6Qg3PAHrNU_XXSZOpFTySW08pmtxEd3_p8nF5c2q6cbUeu3bxQD1OGOVYp7ZEOepNPi4HU9sIHOxfnauKfZc98pw0ZdYkSLb6zlViZjKL6perWl6Bwg1DVKvSlet2BcwgEwq2ad8R",
id: "warming",
minScale: 5000000
});
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",
minScale: 5000000
});
var map = new Map({
basemap: "streets-night-vector",
layers: [warming, boundary]
});
var view = new MapView({
container: "viewDiv",
map: map,
scale: 500000,
center: [-88, 41.5]
});
var template = { // autocasts as new PopupTemplate()
title: "{FACILITY_NAME}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "FACILITY_TYPE",
label: "Facility Type",
visible: true,
}, {
fieldName: "ADDRESS",
label: "Address",
visible: true,
}, {
fieldName: "PHONE_NUMBER",
label: "Phone",
visible: true,
}, {
fieldName: "HOURS",
label: "Hours",
visible: true,
}]
}]
};
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_aroud_Will_County/FeatureServer/0?token=TYud8dGZfk-2we1iW0XCIvmarr1E52rLmntGUN5A4k6BFN1awEyGdeMj_GzNnUyJuFOqApzxytM5h2UjsZOxIaoyJ5EMVM_j9I3c9E6vL0PhP00Jx6huW-O6Qg3PAHrNU_XXSZOpFTySW08pmtxEd3_p8nF5c2q6cbUeu3bxQD1OGOVYp7ZEOepNPi4HU9sIHOxfnauKfZc98pw0ZdYkSLb6zlViZjKL6perWl6Bwg1DVKvSlet2BcwgEwq2ad8R",
outFields: ["*"],
popupTemplate: template,
dockEnabled: true,
});
map.add(featureLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</span>
</body>
</html> And here is a seemingly relevant snippet from line 137 of the first sample code that I can't properly modify: view.popup.watch("selectedFeature", function(e) {
view.graphics.removeAll();
if (e && e.geometry) {
view.graphics.add(new Graphic({
geometry: e.geometry,
symbol: {
type: "simple-fill",
style: "none",
outline: {
color: "#6600FF",
width: 2
}
}
}));
}
});
... View more
08-17-2018
01:40 PM
|
0
|
2
|
2880
|
|
POST
|
Robert, Turns out I wasn't using Web AppBuilder Developer version. The entire time I thought I was since I had it downloaded and installed and the interfaces is exactly the same as non-developer version. The only difference is the url. In the case of the developer version it points to your machine, while the regular version points to your app on AGOL. So, i what I was doing was trying to deploy a downloaded version of the app from the Web AppBuilder through AGOL and that lead to all sorts of problems. It took a couple days of looking into server configerations and digging around, etc... You can see where this could be very confusing.
... View more
08-06-2018
01:18 PM
|
0
|
0
|
5439
|
|
POST
|
Robert, Thanks, I've only just begone to fill the developer role in my department so I wasn't aware of linters. I ran the json in a linter and fixed the two errors it found. After that it had no errors in that linter or any others. But, the app is still hung up with the same error message. The app runs on my local server. And that was without running the json through a linter.
... View more
08-06-2018
10:58 AM
|
0
|
2
|
5439
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 4 weeks ago | |
| 1 | 05-04-2026 08:45 AM | |
| 1 | 04-20-2026 01:20 PM | |
| 1 | 07-24-2025 01:27 PM | |
| 1 | 11-13-2025 08:22 AM |
| Online Status |
Online
|
| Date Last Visited |
11 hours ago
|