topic Re: Website using an Arcgis Online webmap that contains a layer list and a custom popup with Video. in ArcGIS JavaScript Maps SDK Questions

Website using an Arcgis Online webmap that contains a layer list and a custom popup with Video.

RuthCostley4 — Sun, 12 Dec 2021 02:22:01 GMT

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>

Re: Website using an Arcgis Online webmap that contains a layer list and a custom popup with Video.

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:22:03 GMT

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);
                    }
                });
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Website using an Arcgis Online webmap that contains a layer list and a custom popup with Video.

RuthCostley4 — Fri, 10 Feb 2017 13:45:11 GMT

Thanks Robert! I changed the code, but I still can't get it to work. I changed the map to public. Thanks!

Re: Website using an Arcgis Online webmap that contains a layer list and a custom popup with Video.

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:22:06 GMT

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.

Re: Website using an Arcgis Online webmap that contains a layer list and a custom popup with Video.

RuthCostley4 — Fri, 10 Feb 2017 14:21:41 GMT

It Worked!!!Thanks so much for your help! I really appreciate it!

Re: Website using an Arcgis Online webmap that contains a layer list and a custom popup with Video.

RobertScheitlin__GISP — Fri, 10 Feb 2017 14:28:44 GMT

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.