AnsweredAssumed Answered

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

Question asked by rcostley_CPYInc on Feb 8, 2017
Latest reply on Feb 10, 2017 by rscheitlin

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>

Outcomes