Hi! I am trying to create a website with a layer list and a custom popup with video using an ArcGIS online webmap. Here's my code. The only thing that doesn't work is the popup. Does anyone have any ideas?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>I14 Constraints</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.19/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#map {
padding:0;
}
#layerListPane{
width:25%;
}
.esriLayer{
background-color: #fff;
}
.esriLayerList .esriList{
border-top:none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom:none;
}
.esriLayerList .esriList ul{
background-color: #fff;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.19/"></script>
<script>
require([
"esri/map",
"esri/dijit/Popup", "esri/dijit/PopupTemplate",
"dojo/dom-construct",
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map,
Popup,
PopupTemplate,
domConstruct,
arcgisUtils,
LayerList
) {
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("5f62309e34a94a0681ca3127870e353b", "map", {
mapOptions: {
center: [-98.157, 31.029],
zoom: 8,
ignorePopups: true
}
}).then(function (response) {
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
}, "layerList");
myWidget.startup();
dojo.addClass (map.infowindow.domNode, "myTheme");
var layers = response.itemInfo.itemData.operationalLayers;
dojo.forEach(layers, function(layer){
if (layer.name === "Milemarker") {
var template = new PopupTemplate();
template.setTitle("I14")
template.setContent(getContent);
layer.layerObject.setInfoTemplate(template); }
});
});
function getContent(graphic) {
var Content = "I14 Mile Marker " + graphic.attributes.MileMarker + " " + graphic.attributes.Direction + "bound";
var Hyperlink = '<video width="250" height="250" controls><source src=' + graphic.attributes.URL + ' type=video/mp4></video> ';
return Content + Hyperlink;
};
});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
