Display Attachments in Pop-up - 4.12?

ZacStanley3 — Thu, 10 Oct 2019 15:59:44 GMT

Hi All-

I'm trying to embed a couple of attachments in my pop-up. I'm having trouble finding code samples to do this in 4.12. Anyone have any resources that can help me accomplish this?

My code thus far:

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

var map = new Map({
basemap: "topo-vector"
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-122.6226858, 37.9449276],
zoom: 12,
popup: {
dockEnabled: true,
dockOptions: {
// Disables the dock button from the popup
buttonEnabled: false,
// Ignore the default sizes that trigger responsive docking
breakpoint: false,
position: "bottom-right"
}
},
container: "viewDiv"
});

// Define a simple renderer and an image symbol
var trailheadsRenderer = {
type: "simple",
symbol: {
type: "picture-marker",
url: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
width: "18px",
height: "18px"
}
}

// Add labels
var trailheadsLabels = {
symbol: {
type: "text",
color: "#000000",
haloColor: "#FFFFFF",
haloSize: "2px",
font: {
size: "10px",
family: "Arial",
style: "normal",
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.NAME"
}
};

// Add minor trailheads with renderer

// Define a simple renderer and an image symbol
var minortrailheadsRenderer = {
type: "simple",
symbol: {
type: "picture-marker",
url: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
width: "9px",
height: "9px"
}
};

var minortrailheads = new FeatureLayer({
url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/OneTam_MinorTrailheads_pt/FeatureServer/1",
renderer: minortrailheadsRenderer
});
// Add the layer
map.add(minortrailheads);

// Add all trails no use type symbology
var TrailsRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "solid",
color: "#2F5279",
width: "0.7px"
}
};

const labelClass = {
symbol: {
type: "text",
color: "black",
haloColor: "#dce3d0",
haloSize: 3,
font: {
family: "Verlag",
size: 7,
style: "italic",
weight: "normal"
}
},
labelPlacement: "center-along",
labelExpressionInfo: {
expression: "$feature.TRLNAME"
}
};

var Trails = new FeatureLayer({
url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
renderer: TrailsRenderer
});

Trails.minScale = 150000;
Trails.maxScale = 37000;
map.add(Trails, 0);

// Add featured hikes with special symbology
var FeaturedHikesRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "solid",
color: "#f6c65b",
width: "6px"
}
};

var FeaturedHikes = new FeatureLayer({
url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/MtTamFeaturedTrails/FeatureServer/6",
renderer: FeaturedHikesRenderer,
});

FeaturedHikes.minScale = 37000;
map.add(FeaturedHikes, 0);

// Add hiking only trails
var hikeTrailsRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "short-dot",
color: "#2F5279",
width: "1px"
}
};

var hikeTrails = new FeatureLayer({
url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
renderer: hikeTrailsRenderer,
labelingInfo: [labelClass],
definitionExpression: "TRLUSE = 'Hiker/Pedestrian'"
});

hikeTrails.minScale = 37000;
map.add(hikeTrails, 0);

// Add hiking/biking trails
var bikehikeTrailsRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "long-dash",
color: "#2F5279",
width: "1px"
}
};

var bikehikeTrails = new FeatureLayer({
url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
renderer: bikehikeTrailsRenderer,
labelingInfo: [labelClass],
definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Bicycle'"
});
bikehikeTrails.minScale = 37000;
map.add(bikehikeTrails, 0);

var horsehikeTrailsRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "dash-dot",
color: "#2F5279",
width: ".1px"
}
};

var horsehikeTrails = new FeatureLayer({
url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
renderer: horsehikeTrailsRenderer,
labelingInfo: [labelClass],
definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Pack and Saddle'"
});
horsehikeTrails.minScale = 37000;
map.add(horsehikeTrails, 0);

var muTrailsRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "short-dash",
color: "#2F5279",
width: "1px"
}
};

var muTrails = new FeatureLayer({
url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/ONETAM_TRANS_Trails_ln/FeatureServer/2",
renderer: muTrailsRenderer,
labelingInfo: [labelClass],
definitionExpression: "TRLUSE = 'Hiker/Pedestrian | Pack and Saddle | Bicycle'"
});
muTrails.minScale = 37000;
map.add(muTrails, 0);

// Define a simple value renderer and symbols
var onetamareaRenderer = {
type: "simple",
symbol: {
type: "simple-fill",
color: "#D5E5C8",
outline: {
width: 2,
color: "#4E663A"
}
}
};

var onetamLayer = new FeatureLayer({
url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/One_Tam_Area_of_Interest/FeatureServer/0",
renderer: onetamareaRenderer,
opacity: 0.5
});

map.add(onetamLayer, 0)

// Define a popup for Trailheads
var popupTrailheads = {
"title": "Featured Hike",
"content": "<b>West Peak Loop</b><br>{HikeDesc}{HikeDesc2}{HikeDesc3}<br><br><b>Difficulty:</b> {Difficulty}<br><b>Length: </b>{Length}<br><br><b>Amenities: </b>{Amenities}<br><br><b>Get the Latest:</b> {TheLatest2}"
}

// Create the layer and set the popup
var trailheads = new FeatureLayer({
url: "https://services9.arcgis.com/D49vnq4lqWmKCLj0/arcgis/rest/services/One_Tam_Featured_Hikes_Trailheads/FeatureServer/0",
outFields: ["HikeDesc", "HikeDesc2", "HikeDesc3", "Difficulty", "Length", "Amenities", "TheLatest2"],
renderer: trailheadsRenderer,
labelingInfo: [trailheadsLabels],
popupTemplate: popupTrailheads
});

// Add the layer
map.add(trailheads);

//Click on feature zooms to it
view.popup.watch("selectedFeature", function (graphic) {
if (graphic && graphic.layer === trailheads) {
view.popup.triggerAction(0);
}
});

// Create a BasemapGallery widget instance and set
// its container to a div element

var basemapGallery = new BasemapGallery({
view: view,
container: document.createElement("div")
});

// Create an Expand instance and set the content
// property to the DOM node of the basemap gallery widget
// Use an Esri icon font to represent the content inside
// of the Expand widget

var bgExpand = new Expand({
view: view,
content: basemapGallery
});
// close the expand whenever a basemap is selected
basemapGallery.watch("activeBasemap", function () {
var mobileSize =
view.heightBreakpoint === "xsmall" ||
view.widthBreakpoint === "xsmall";

if (mobileSize) {
bgExpand.collapse();
}
});
// Add the expand instance to the ui

view.ui.add(bgExpand, "top-right");
var homeBtn = new Home({
view: view
});

// Add the home button to the top left corner of the view
view.ui.add(homeBtn, "top-left");

});
</script>
</head>

</html>

Re: Display Attachments in Pop-up - 4.12?

Noah-Sager — Thu, 10 Oct 2019 17:12:05 GMT

Is something like this what you're looking for?

Multiple popup elements | ArcGIS API for JavaScript 4.12

Re: Display Attachments in Pop-up - 4.12?

ZacStanley3 — Thu, 10 Oct 2019 19:29:23 GMT

Thanks Noah Sager - this is uses a URL of a single image for every feature. I had been exploring that approach. Ideally I need a feature attachment that I can embed where the image is different for each feature.

Re: Display Attachments in Pop-up - 4.12?

Noah-Sager — Thu, 10 Oct 2019 20:07:39 GMT

Perhaps pass a function to the popup content? Then the function could call the appropriate image based on the feature attributes.

PopupTemplate | ArcGIS API for JavaScript 4.13

When the feature is clicked, the feature is passed as an argument to the function and provides access to the feature’s graphic and attributes. Set the outFields property to specify any fields needed for rendering the popup. The function then executes and returns a value to display in the popup template.