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>
Solved! Go to Solution.
Ruth,
So here is the fix:
dojo.forEach(layers, function(layer) {
if (layer.title === "Mile Marker") {
var template = new PopupTemplate();
template.setTitle("I14")
template.setContent(getContent);
layer.featureCollection.layers[0].layerObject.setInfoTemplate(template);
}
});
Line 2, The layer did not have a name property it has a title and the title string had to be adjusted.
Line 6, The layer object did not have direct access to the layerObject it was buried deeper in the object.
Ruth,
There was two mistakes in your code I could find. I could not test your code though as access to your webmap is not public:
I had to add line 2 (since you reference a map var on line 9, yet did not have one) and on line 9 you had map.infowindow when the map only has a infoWindow property (notice the capital W).
}).then(function(response) {
var map = response.map;
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);
}
});
});
Thanks Robert! I changed the code, but I still can't get it to work. I changed the map to public. Thanks!
Ruth,
So here is the fix:
dojo.forEach(layers, function(layer) {
if (layer.title === "Mile Marker") {
var template = new PopupTemplate();
template.setTitle("I14")
template.setContent(getContent);
layer.featureCollection.layers[0].layerObject.setInfoTemplate(template);
}
});
Line 2, The layer did not have a name property it has a title and the title string had to be adjusted.
Line 6, The layer object did not have direct access to the layerObject it was buried deeper in the object.
It Worked!!!Thanks so much for your help! I really appreciate it!
Your welcome.
Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.