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

RuthCostley4 · ‎02-08-2017

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>

RobertScheitlin__GISP · ‎02-10-2017

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.

View solution in original post

RobertScheitlin__GISP · ‎02-09-2017

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

RuthCostley4 · ‎02-10-2017

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

RobertScheitlin__GISP · ‎02-10-2017

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.

RuthCostley4 · ‎02-10-2017

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

RobertScheitlin__GISP · ‎02-10-2017

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.