Map popups from ArcGIS.com (Fish Passage)

Creates a map using an ArcGIS Online webmap ID. Popups defined in that web map are displayed when the user clicks on the map.

by Alex Azuero

HTML

<link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
<!-- See "External Resources" for required CSS link. -->
<div id="map">
    <div id="tools">
        <p><!-- Add a link to the source map. --> <a href="#" id="mapLink" target="_blank">View map on ArcGIS.com</a></p>
        <progress id="mapProgress">Loading...</progress>
    </div>
</div>
<script data-dojo-config="async: true" src="//js.arcgis.com/3.11compact/init.js"></script>

CSS

/* Note the "Normalized CSS" setting in "Fiddle Options".
This removes browser's default CSS settings.
*/
html, body, #map, .map.container {
    padding:0;
    margin:0;
    height:100%;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif
}
input + label {
    margin-left: 0.5em;
}
#tools > p:first-child {
    text-align: right;
}
#tools {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background-color: RGBA(255, 255, 255, 0.8);
    border-radius: 10px 0 0 10px;
    padding: 0.5em;
    margin-top: 2em;
}

/* Highlight every other row in popup table */
.mainSection table tr:nth-child(even) {
    background-color: #aaccff;
}
.mainSection table th, .mainSection table td {
    padding: 0.3em;
}

JavaScript

require([
    "esri/arcgis/utils",
    "esri/domUtils"
], function (arcgisUtils, domUtils) {
    "use strict";
    var mapId = "719b5f02dd334bc09ba0600d27363c1d", map, progress;
    
    // Get the map progress bar element for later use.
    progress = document.getElementById("mapProgress");
    
    /**
     * Toggles the visibility of the layer associated with a checkbox.
     * @param {Event} evt
     */
    function toggleLayerVisibility(evt) {
        var checkbox, layerId, layer;
        checkbox = evt.target;
        // layerId = checkbox.dataset.layerId; // IE 10 doesn't support "dataset".
        layerId = checkbox.getAttribute("data-layer-id");
        layer = map.getLayer(layerId);
        if (checkbox.checked) {
            layer.show();
        } else {
            layer.hide();
        }
    }
    
    /**
     * Creates a list of checkboxes that can toggle layer visibility.
     * @param {Object} createMapResponse - Response from arcgisUtils.createMap function.
     * @returns {HTMLUListElement}
     */
    function createTOC(createMapResponse) {
        var opLayers, list;
        opLayers = createMapResponse.itemInfo.itemData.operationalLayers;
        list = document.createElement("ul");
        opLayers.forEach(function(layerInfo) {
            var li, checkbox, label;
            li = document.createElement("li");
            checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.id = "cb_" + layerInfo.id;
            checkbox.checked = layerInfo.visibility;
            // checkbox.dataset.layerId = layerInfo.id; // IE 10 doesn't support "dataset".
            checkbox.setAttribute("data-layer-id", layerInfo.id);
            checkbox.onclick = toggleLayerVisibility;
            li.appendChild(checkbox);
            label = document.createElement("label");
            label.htmlFor = checkbox.id;
            label.textContent = layerInfo.title;
            li.appendChild(label);
           ...