Popup to DIV

2921
18
Jump to solution
07-24-2018 09:56 AM
jaykapalczynski
Frequent Contributor

I have the below code that is returning a popup window via a map click.  The data I have is getting to large for a popup and want to move this to an HTML DIV in a side window. 

Anyone have any examples of how to push this to an html div tag instead of a popup?

var infoTemplateHazmat = new InfoTemplate();
infoTemplateHazmat.setTitle("Hazmat Incidents");        
infoTemplateHazmat.setContent("<table>" +
     "<tr><td>Status</td><td>${status}</td></tr>" +
     "<tr><td>Datetime</td><td><i>${UTC_DATETIME}</i></td></tr>" +
     "</table><hr>");     
var hazmat = new FeatureLayer("https://arcgis.vdem.virginia.gov/ArcGIS/rest/services/Traffic/VATraffic_IncidentPoints/MapServer/4", {
    mode: FeatureLayer.MODE_ONDEMAND,
    visible: false,
    outFields:["*"],
    infoTemplate: infoTemplateHazmat
});
legendLayers.push({ layer: hazmat, title: 'Hazmat Incidents' });‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

This code works, although it does through an error (Cannot read property 'call' of undefined) I haven't been able to diagnose.

<!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>Popup - Sidebar</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      margin: 0;
      font-family: "Open Sans";
    }

    #leftPane {
      width: 20%;
      margin: 0;
      border: none;
    }

    #map {
      padding: 0;
    }

    .nav {
      padding: 5px 10px;
      border: solid 1px grey;
    }

    #header {
      text-align: center;
      height: 60px;
      border-bottom: solid 1px #ccc;
    }
  </style>

  <script src="https://js.arcgis.com/3.25/"></script>
  <script>
    require([
      "dojo/ready", "dojo/on", "dojo/dom", "dijit/registry", "dojo/dom-construct", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "esri/map", "esri/arcgis/utils", "esri/domUtils", "esri/dijit/Popup", "esri/layers/FeatureLayer", "esri/InfoTemplate"
    ], function (
      ready, on, dom, registry, domConstruct, parser, BorderContainer, ContentPane, Map, arcgisUtils, domUtils, Popup, FeatureLayer, InfoTemplate
    ) {
        ready(function () {

          parser.parse();

          //setup event handlers for the next/previous buttons
          on(dom.byId("previous"), "click", selectPrevious);
          on(dom.byId("next"), "click", selectNext);

          /*
          //Create a map based on an ArcGIS Online web map id 
                  arcgisUtils.createMap("f7df9e05c12e4c6588a9c09831e1c898", "map")
                    .then(function(response) {
                      window.map = response.map;
                      //set the popup's popupWindow property to false. This prevents the popup from displaying
                      map.infoWindow.set("popupWindow", false);
                      initializeSidebar(window.map);
                    }, function(error) {
                      console.log("Map creation failed: ", dojo.toJson(error));
                    });
          */

          var map;

          map = new Map("map", {
            basemap: "gray",
            center: [-79.665, 37.629],
            zoom: 8
          });

          //window.map = response.map;
          //set the popup's popupWindow property to false. This prevents the popup from displaying
          map.infoWindow.set("popupWindow", false);

          var infoTemplateWMA = new InfoTemplate();
          infoTemplateWMA.setTitle("WMA - ");
          infoTemplateWMA.setContent("<table>" +
            "<tr><td>Acres</td><td>${Acres}</td></tr>" +
            "<tr><td>County_Nam</td><td>${County_Nam}</td></tr>" +
            "<tr><td>City_Numbe</td><td>${City_Numbe}</td></tr>" +
            "</table><hr>");

          var WMA = new FeatureLayer("https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Public/VirginiaBoundary_UTMZone17N/MapServe...", {
            mode: FeatureLayer.MODE_SNAPSHOT,
            id: "DGIFWMAs",
            opacity: .5,
            visible: true,
            outFields: ["*"],
            infoTemplate: infoTemplateWMA
          });
          map.addLayer(WMA);

          map.on('load', initializeSidebar());

          function initializeSidebar() {
            //alert("in side bar");
            var popup = map.infoWindow;

            //when the selection changes update the side panel to display the popup info for the 
            //currently selected feature. 
            popup.on("selection-change", function () {
              displayPopupContent(popup.getSelectedFeature());
            });

            //when the selection is cleared remove the popup content from the side panel. 
            popup.on("clear-features", function () {
              //dom.byId replaces dojo.byId
              dom.byId("featureCount").innerHTML = "Click to select feature";
              //registry.byId replaces dijit.byId
              registry.byId("leftPane").set("content", "");
              domUtils.hide(dom.byId("pager"));
            });

            //When features are associated with the map's info window update the sidebar with the new content. 
            popup.on("set-features", function () {
              displayPopupContent(popup.getSelectedFeature());
              if (popup.features.length > 1) {
                dom.byId("featureCount").innerHTML = popup.features.length + " features selected";
                //enable navigation if more than one feature is selected 
                domUtils.show(dom.byId("pager"))
              } else {
                dom.byId("featureCount").innerHTML = popup.features.length + " feature selected";
                domUtils.hide(dom.byId("pager"));
              }
            });
          }

          function displayPopupContent(feature) {
            if (feature) {
              var content = feature.getContent();
              registry.byId("leftPane").set("content", content);
            }
          }

          function selectPrevious() {
            map.infoWindow.selectPrevious();
          }

          function selectNext() {
            map.infoWindow.selectNext();
          }
        });
      });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" region="left" style="width: 20%;height:100%;">
      <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="featureCount" style="margin-bottom:5px;">Click to select feature</div>
        <div id="pager" style="display:none;">
          <a href='javascript:void(0);' id="previous" class='nav' style="text-decoration: none;">
            &lt; Prev
          </a> &nbsp;
          <a href='javascript:void(0);' id="next" class='nav' style="text-decoration: none;">
            Next &gt;
          </a>
        </div>
      </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
</body>

</html>

View solution in original post

0 Kudos
18 Replies
jaykapalczynski
Frequent Contributor

I am trying the code below...but the example uses a webmap...I have a feature service...trying to modify it to use the Feature Layer...

ArcGIS API for JavaScript Sandbox 

I am missing something as I cannot get it to show up in the side bar...ANY thoughts????

<!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>Popup - Sidebar</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      margin: 0;
      font-family: "Open Sans";
    }
    #leftPane {
      width: 20%;
      margin: 0;
      border: none;
    }
    #map {
      padding: 0;
    }
    .nav {
      padding: 5px 10px;
      border: solid 1px grey;
    }
    #header {
      text-align: center;
      height: 60px;
      border-bottom: solid 1px #ccc;
    }
  </style>
    
  <script src="https://js.arcgis.com/3.25/"></script>
  <script>
    require([
      "dojo/ready","dojo/on","dojo/_base/connect","dojo/dom","dijit/registry","dojo/dom-construct","dojo/parser","dijit/layout/BorderContainer","dijit/layout/ContentPane","esri/map","esri/arcgis/utils","esri/domUtils","esri/dijit/Popup","esri/layers/FeatureLayer","esri/InfoTemplate"
    ], function(
ready,on,connect,dom,registry,domConstruct,parser,BorderContainer,ContentPane,Map,arcgisUtils,domUtils,Popup,FeatureLayer,InfoTemplate
    ) {
      ready(function() {

        parser.parse();

        //setup event handlers for the next/previous buttons
        on(dom.byId("previous"), "click", selectPrevious);
        on(dom.byId("next"), "click", selectNext);

/*
//Create a map based on an ArcGIS Online web map id 
        arcgisUtils.createMap("f7df9e05c12e4c6588a9c09831e1c898", "map")
          .then(function(response) {
            window.map = response.map;
            //set the popup's popupWindow property to false. This prevents the popup from displaying
            map.infoWindow.set("popupWindow", false);
            initializeSidebar(window.map);
          }, function(error) {
            console.log("Map creation failed: ", dojo.toJson(error));
          });
*/

  var map;

  map = new Map("map", {
      basemap: "gray",
      center: [-79.665, 37.629],
      zoom: 8
    });

  //window.map = response.map;
  //set the popup's popupWindow property to false. This prevents the popup from displaying
  map.infoWindow.set("popupWindow", false);
            
  var infoTemplateWMA = new InfoTemplate();
          infoTemplateWMA.setTitle("WMA - ");
          infoTemplateWMA.setContent("<table>" +
          "<tr><td>Acres</td><td>${Acres}</td></tr>" +
          "<tr><td>County_Nam</td><td>${County_Nam}</td></tr>" +
          "<tr><td>City_Numbe</td><td>${City_Numbe}</td></tr>" +     
          "</table><hr>");
          
     var WMA = new FeatureLayer("https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Public/VirginiaBoundary_UTMZone17N/MapServe...", {
        mode: FeatureLayer.MODE_SNAPSHOT,
              id: "DGIFWMAs",
              opacity: .5,
              visible: true,
              outFields:["*"],
              infoTemplate: infoTemplateWMA
    });
 map.addLayer(WMA);
 
 map.on(initializeSidebar(window.map));
 
        function initializeSidebar(map) {
          alert("in side bar");
          var popup = map.infoWindow;

          //when the selection changes update the side panel to display the popup info for the 
          //currently selected feature. 
          connect.connect(popup, "onSelectionChange", function() {
            displayPopupContent(popup.getSelectedFeature());
          });

          //when the selection is cleared remove the popup content from the side panel. 
          connect.connect(popup, "onClearFeatures", function() {
            //dom.byId replaces dojo.byId
            dom.byId("featureCount").innerHTML = "Click to select feature";
            //registry.byId replaces dijit.byId
            registry.byId("leftPane").set("content", "");
            domUtils.hide(dom.byId("pager"));
          });

          //When features are associated with the map's info window update the sidebar with the new content. 
          connect.connect(popup, "onSetFeatures", function() {
            displayPopupContent(popup.getSelectedFeature());
            if (popup.features.length > 1) {
              dom.byId("featureCount").innerHTML = popup.features.length + " features selected";
              //enable navigation if more than one feature is selected 
              domUtils.show(dom.byId("pager"))
            } else {
              dom.byId("featureCount").innerHTML = popup.features.length + " feature selected";
              domUtils.hide(dom.byId("pager"));
            }
          });
        }

        function displayPopupContent(feature) {
          if (feature) {
            var content = feature.getContent();
            registry.byId("leftPane").set("content", content);
          }
        }

        function selectPrevious() {
          window.map.infoWindow.selectPrevious();
        }

        function selectNext() {
          window.map.infoWindow.selectNext();
        }
      });
    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" 
    data-dojo-props="design:'headline',gutters:false" 
    style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" 
      region="left" style="width: 20%;height:100%;">
      <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" 
        data-dojo-props="region:'center'"></div>
      <div id="header" data-dojo-type="dijit/layout/ContentPane" 
        data-dojo-props="region:'top'">
        <div id="featureCount" style="margin-bottom:5px;">Click to select feature</div>
        <div id="pager" style="display:none;"> 
          <a href='javascript:void(0);' id ="previous" class='nav' style="text-decoration: none;">
              &lt; Prev
          </a> &nbsp; 
          <a href='javascript:void(0);' id="next" class='nav'  style="text-decoration: none;">
              Next &gt;
          </a>
        </div>
      </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
KenBuja
MVP Esteemed Contributor

This code works, although it does through an error (Cannot read property 'call' of undefined) I haven't been able to diagnose.

<!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>Popup - Sidebar</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      margin: 0;
      font-family: "Open Sans";
    }

    #leftPane {
      width: 20%;
      margin: 0;
      border: none;
    }

    #map {
      padding: 0;
    }

    .nav {
      padding: 5px 10px;
      border: solid 1px grey;
    }

    #header {
      text-align: center;
      height: 60px;
      border-bottom: solid 1px #ccc;
    }
  </style>

  <script src="https://js.arcgis.com/3.25/"></script>
  <script>
    require([
      "dojo/ready", "dojo/on", "dojo/dom", "dijit/registry", "dojo/dom-construct", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "esri/map", "esri/arcgis/utils", "esri/domUtils", "esri/dijit/Popup", "esri/layers/FeatureLayer", "esri/InfoTemplate"
    ], function (
      ready, on, dom, registry, domConstruct, parser, BorderContainer, ContentPane, Map, arcgisUtils, domUtils, Popup, FeatureLayer, InfoTemplate
    ) {
        ready(function () {

          parser.parse();

          //setup event handlers for the next/previous buttons
          on(dom.byId("previous"), "click", selectPrevious);
          on(dom.byId("next"), "click", selectNext);

          /*
          //Create a map based on an ArcGIS Online web map id 
                  arcgisUtils.createMap("f7df9e05c12e4c6588a9c09831e1c898", "map")
                    .then(function(response) {
                      window.map = response.map;
                      //set the popup's popupWindow property to false. This prevents the popup from displaying
                      map.infoWindow.set("popupWindow", false);
                      initializeSidebar(window.map);
                    }, function(error) {
                      console.log("Map creation failed: ", dojo.toJson(error));
                    });
          */

          var map;

          map = new Map("map", {
            basemap: "gray",
            center: [-79.665, 37.629],
            zoom: 8
          });

          //window.map = response.map;
          //set the popup's popupWindow property to false. This prevents the popup from displaying
          map.infoWindow.set("popupWindow", false);

          var infoTemplateWMA = new InfoTemplate();
          infoTemplateWMA.setTitle("WMA - ");
          infoTemplateWMA.setContent("<table>" +
            "<tr><td>Acres</td><td>${Acres}</td></tr>" +
            "<tr><td>County_Nam</td><td>${County_Nam}</td></tr>" +
            "<tr><td>City_Numbe</td><td>${City_Numbe}</td></tr>" +
            "</table><hr>");

          var WMA = new FeatureLayer("https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Public/VirginiaBoundary_UTMZone17N/MapServe...", {
            mode: FeatureLayer.MODE_SNAPSHOT,
            id: "DGIFWMAs",
            opacity: .5,
            visible: true,
            outFields: ["*"],
            infoTemplate: infoTemplateWMA
          });
          map.addLayer(WMA);

          map.on('load', initializeSidebar());

          function initializeSidebar() {
            //alert("in side bar");
            var popup = map.infoWindow;

            //when the selection changes update the side panel to display the popup info for the 
            //currently selected feature. 
            popup.on("selection-change", function () {
              displayPopupContent(popup.getSelectedFeature());
            });

            //when the selection is cleared remove the popup content from the side panel. 
            popup.on("clear-features", function () {
              //dom.byId replaces dojo.byId
              dom.byId("featureCount").innerHTML = "Click to select feature";
              //registry.byId replaces dijit.byId
              registry.byId("leftPane").set("content", "");
              domUtils.hide(dom.byId("pager"));
            });

            //When features are associated with the map's info window update the sidebar with the new content. 
            popup.on("set-features", function () {
              displayPopupContent(popup.getSelectedFeature());
              if (popup.features.length > 1) {
                dom.byId("featureCount").innerHTML = popup.features.length + " features selected";
                //enable navigation if more than one feature is selected 
                domUtils.show(dom.byId("pager"))
              } else {
                dom.byId("featureCount").innerHTML = popup.features.length + " feature selected";
                domUtils.hide(dom.byId("pager"));
              }
            });
          }

          function displayPopupContent(feature) {
            if (feature) {
              var content = feature.getContent();
              registry.byId("leftPane").set("content", content);
            }
          }

          function selectPrevious() {
            map.infoWindow.selectPrevious();
          }

          function selectNext() {
            map.infoWindow.selectNext();
          }
        });
      });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" region="left" style="width: 20%;height:100%;">
      <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="featureCount" style="margin-bottom:5px;">Click to select feature</div>
        <div id="pager" style="display:none;">
          <a href='javascript:void(0);' id="previous" class='nav' style="text-decoration: none;">
            &lt; Prev
          </a> &nbsp;
          <a href='javascript:void(0);' id="next" class='nav' style="text-decoration: none;">
            Next &gt;
          </a>
        </div>
      </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
</body>

</html>
0 Kudos
jaykapalczynski
Frequent Contributor

Did you simply modify this line:  I cant see any other changes on quick glance

map.on('load', initializeSidebar());
0 Kudos
KenBuja
MVP Esteemed Contributor

I also removed the variable from the initializeSidebar function, since you have already defined the map variable. I changed "windows.map" to "map" in a couple of places. I also removed the dojo/_base_/connect and changed connect/connect to on, just to make the code up-to-date.

jaykapalczynski
Frequent Contributor

Last question....How do I deactivate the click to bring up the popup in the side bar...I start to use my other tools and its still selecting in the map and returning information to the side bar.

0 Kudos
KenBuja
MVP Esteemed Contributor

The dojo/on module has the pausable method, where an event listener can be stopped until you need to use it again.

0 Kudos
jaykapalczynski
Frequent Contributor

Right now I am firing the Function with a button...confused on how to pause the specific button function

on(dom.byId("ClickButton"), "click", initializeSidebar);
on(dom.byId("PauseButton"), "click", TestingPause);
     

          function TestingPause() {
            //HOW DO I PAUSE IT?

          }
            
          function initializeSidebar() {

            // SNIPPED OUT CODE

          }
0 Kudos
KenBuja
MVP Esteemed Contributor
var clickEvent = on.pausable(dom.byId("ClickButton"), "click", initializeSidebar);
on(dom.byId("PauseButton"), "click", TestingPause);
on(dom.byId("ResumeButton"), "click", TestingResume);
     

          function TestingPause() {
            clickEvent.pause();

          }
          function TestingResume() {
            clickEvent.resume();

          }
            
          function initializeSidebar() {

            // SNIPPED OUT CODE

          }
jaykapalczynski
Frequent Contributor

Thanks....I have the below.  When I click the ClickButton I can start selecting features and it returns values to the side bar

When I click the PauseButton I am still able to select and return values.  

Am I missing something

    var clickEvent = on.pausable(dom.byId("ClickButton"), "click", initializeSidebar);
     on(dom.byId("ResumeButton"), "click", initializeSidebarResume);
     on(dom.byId("PauseButton"), "click", initializeSidebarPause);

          function initializeSidebarPause() {
            clickEvent.pause();
          }
          function initializeSidebarResume() {
            clickEvent.resume();
          }
            
          function initializeSidebar() {
            var popup = map.infoWindow;

            //when the selection changes update the side panel to display the popup info for the 
            //currently selected feature. 
            popup.on("selection-change", function () {
              displayPopupContent(popup.getSelectedFeature());
            });

            //when the selection is cleared remove the popup content from the side panel. 
            popup.on("clear-features", function () {
              //dom.byId replaces dojo.byId
              dom.byId("featureCount").innerHTML = "Click to select feature";
              //registry.byId replaces dijit.byId
              registry.byId("leftPaneInfo").set("content", "");
              domUtils.hide(dom.byId("pager"));
            });

            //When features are associated with the map's info window update the sidebar with the new content. 
            popup.on("set-features", function () {
              displayPopupContent(popup.getSelectedFeature());
              if (popup.features.length > 1) {
                dom.byId("featureCount").innerHTML = popup.features.length + " features selected";
                //enable navigation if more than one feature is selected 
                domUtils.show(dom.byId("pager"))
              } else {
                dom.byId("featureCount").innerHTML = popup.features.length + " feature selected";
                domUtils.hide(dom.byId("pager"));
              }
            });

          }
          function displayPopupContent(feature) {
            if (feature) {
              var content = feature.getContent();
              registry.byId("leftPaneInfo").set("content", content);
            }
          }
          function selectPrevious() {
            map.infoWindow.selectPrevious();
          }
          function selectNext() {
            map.infoWindow.selectNext();
          }
0 Kudos