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.
Solved! Go to Solution.
Jared,
Here is a example of what you need:
var featureLayer = new FeatureLayer({
url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/...",
popupTemplate: { // autocasts as new PopupTemplate()
title: "<font color='#008000'>Louisville, Kentucky Traffic Cameras",
// Set content elements in the order to display.
// The first element displayed here is the fieldInfos.
content: [{
// It is also possible to set the fieldInfos outside of the content
// directly in the popupTemplate. If no fieldInfos is specifically set
// in the content, it defaults to whatever may be set within the popupTemplate.
type: "fields",
fieldInfos: [{
fieldName: "URL",
visible: false,
label: "Image Url"
}, {
fieldName: "ONLINE",
visible: false,
label: "Camera Status"
}, {
fieldName: "DESCRIPTION",
visible: false,
label: "Description"
}, {
fieldName: "LAST_UPDATED",
visible: false,
label: "Last Updated"
}]
},{
type: "media",
mediaInfos: [{
title: "Camera is online: {ONLINE}",
type: "image",
value: {sourceURL: '{URL}'}
}]
}]
},
outFields: ["*"]
});
Jared,
How similar is your code to this segment:
// 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. The following creates a pie chart in addition
// to two separate images. The chart is also set up to work with
// related tables. Similar to text elements, media can only be set within the content.
type: "media",
mediaInfos: [{
title: "<b>Count by type</b>",
type: "pie-chart",
caption: "",
value: {
theme: "Grasshopper",
fields: ["relationships/0/Point_Count_COMMON"],
normalizeField: null,
tooltipField: "relationships/0/COMMON"
}
}, {
title: "<b>Welcome to Beverly Hills</b>",
type: "image",
value: {
sourceURL: "https://www.beverlyhills.org/cbhfiles/storage/files/13203374121770673849/122707_039r_final.jpg"
}
}, {
title: "<b>Palm tree lined street</b>",
type: "image",
value: {
sourceURL: "https://cdn.loc.gov/service/pnp/highsm/21600/21679r.jpg"
}
}]
},
It seems that this is where the pie chart and images are established and displayed.
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,
}
}]
}
]
};
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.
Jared,
Here is a example of what you need:
var featureLayer = new FeatureLayer({
url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/...",
popupTemplate: { // autocasts as new PopupTemplate()
title: "<font color='#008000'>Louisville, Kentucky Traffic Cameras",
// Set content elements in the order to display.
// The first element displayed here is the fieldInfos.
content: [{
// It is also possible to set the fieldInfos outside of the content
// directly in the popupTemplate. If no fieldInfos is specifically set
// in the content, it defaults to whatever may be set within the popupTemplate.
type: "fields",
fieldInfos: [{
fieldName: "URL",
visible: false,
label: "Image Url"
}, {
fieldName: "ONLINE",
visible: false,
label: "Camera Status"
}, {
fieldName: "DESCRIPTION",
visible: false,
label: "Description"
}, {
fieldName: "LAST_UPDATED",
visible: false,
label: "Last Updated"
}]
},{
type: "media",
mediaInfos: [{
title: "Camera is online: {ONLINE}",
type: "image",
value: {sourceURL: '{URL}'}
}]
}]
},
outFields: ["*"]
});
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,
}