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>
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Expand",
"esri/widgets/BasemapGallery",
"esri/widgets/Home",
"esri/PopupTemplate"
], function (Map, MapView, FeatureLayer, Expand, BasemapGallery, Home) {
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>
<body>
<div id="viewDiv"></div>
</body>
</html>