topic Popup to DIV in ArcGIS JavaScript Maps SDK Questions

Popup to DIV

jaykapalczynski — Fri, 10 Dec 2021 22:30:39 GMT

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

Re: Popup to DIV

jaykapalczynski — Fri, 10 Dec 2021 22:30:42 GMT

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/MapServer/0", {
        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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Popup to DIV

KenBuja — Fri, 10 Dec 2021 22:30:46 GMT

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/MapServer/0", {
            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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Popup to DIV

jaykapalczynski — Tue, 24 Jul 2018 20:37:48 GMT

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

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

Re: Popup to DIV

KenBuja — Tue, 24 Jul 2018 20:44:44 GMT

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.

Re: Popup to DIV

jaykapalczynski — Fri, 10 Dec 2021 22:30:47 GMT

OK I see two locations

I will look at the other locations that you mentioned in you last post....I was somewhat close hahaha

THANKS

This:

 map.on(initializeSidebar(window.map));
 
        function initializeSidebar(map) {

Changed to this:

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

         function initializeSidebar() {

Re: Popup to DIV

jaykapalczynski — Wed, 25 Jul 2018 13:59:03 GMT

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.

Re: Popup to DIV

KenBuja — Wed, 25 Jul 2018 14:14:29 GMT

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

Re: Popup to DIV

jaykapalczynski — Fri, 10 Dec 2021 22:30:50 GMT

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

          }‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Popup to DIV

KenBuja — Fri, 10 Dec 2021 22:30:53 GMT

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

          }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Popup to DIV

jaykapalczynski — Fri, 10 Dec 2021 22:30:56 GMT

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

Re: Popup to DIV

KenBuja — Fri, 10 Dec 2021 22:30:59 GMT

I'm sorry, I gave you an incorrect answer. You only want to fire off the initializeSidebar function when the map loads. You should use the setInfoWindowOnClick method on the map instead

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

on(dom.byId("PauseButton"), "click", TestingPause);
on(dom.byId("ResumeButton"), "click", TestingResume);

function TestingPause() {
  map.setInfoWindowOnClick(false);
}
function TestingResume() {
  map.setInfoWindowOnClick(true);
}‍‍‍‍‍‍‍‍‍‍‍

Re: Popup to DIV

jaykapalczynski — Fri, 10 Dec 2021 22:31:01 GMT

I am pretty confused. If I modify the code to eliminate the ClickEvent variable and add the Map.on load to call the function my app freezes with no apparent error in the console

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

   //resize the info window
    map.infoWindow.resize(350, 400);     
   // Disable popup window from appearing in the map     
    map.infoWindow.set("popupWindow", false);


    map.on('load', initializeSidebar());
     
    //setup event handlers for the next/previous buttons
    on(dom.byId("previous"), "click", selectPrevious);
    on(dom.byId("next"), "click", selectNext);     
    
     //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();
         map.setInfoWindowOnClick(false);
          }
          function initializeSidebarResume() {
            //clickEvent.resume();
         map.setInfoWindowOnClick(true);
          }
            
          function initializeSidebar() {
          var popup = map.infoWindow;
             // SNIP
          }
          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();
          }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Popup to DIV

jaykapalczynski — Fri, 10 Dec 2021 22:31:04 GMT

Even if I do this the application freezes. Something is not letting me to the map.on

I get the alert but then the app freezes.

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

function Test() {
alert("test");
}

I have a ton of requires as the app is rather large at this point...maybe the error is there?

 require([
"esri/map", "esri/geometry/webMercatorUtils", "dojo/dom", "esri/layers/FeatureLayer", "esri/dijit/Legend","esri/symbols/SimpleFillSymbol",
"esri/layers/ArcGISImageServiceLayer", "esri/layers/ImageServiceParameters",
"esri/geometry/Extent", "esri/layers/ArcGISDynamicMapServiceLayer", 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', "esri/layers/ImageParameters",
"dojo/_base/array", "dojo/on", "esri/graphic","esri/graphicsUtils","esri/tasks/Geoprocessor","esri/tasks/FeatureSet","esri/tasks/LinearUnit","esri/symbols/SimpleLineSymbol",
"esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol","esri/layers/LabelClass", "esri/dijit/BasemapToggle","esri/dijit/HomeButton", "esri/dijit/Search", "esri/dijit/LocateButton",
"esri/urlUtils", "esri/dijit/Directions",
"esri/toolbars/draw","esri/symbols/CartographicLineSymbol",
"dijit/registry", "esri/arcgis/utils", "esri/domUtils", "esri/dijit/Popup", "dojo/_base/connect",
"esri/Color", "dojo/_base/array", "dojo/parser", "esri/InfoTemplate", "esri/renderers/ClassBreaksRenderer","dijit/form/CheckBox", "dojo/dom-construct",  
"dojo/keys","esri/SnappingManager","esri/dijit/Measurement","esri/tasks/GeometryService","esri/config",     "esri/sniff","esri/dijit/BasemapGallery",     
"esri/layers/LabelLayer", "esri/symbols/TextSymbol", "esri/symbols/Font", "esri/symbols/SimpleLineSymbol", 
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer","esri/dijit/Scalebar","dijit/TitlePane", "dojo/domReady!"
      ], function(
        Map, webMercatorUtils, dom, FeatureLayer, Legend, 
     SimpleFillSymbol, 
     ArcGISImageServiceLayer, ImageServiceParameters,
     Extent, ArcGISDynamicMapServiceLayer, WMSLayer, WMSLayerInfo, 
     ImageParameters,
     array, on, Graphic, graphicsUtils, Geoprocessor, FeatureSet, 
     LinearUnit, SimpleLineSymbol,
     SimpleRenderer, SimpleMarkerSymbol, LabelClass, BasemapToggle, 
     HomeButton, Search, LocateButton, 
        urlUtils, Directions,
     Draw, CartographicLineSymbol,
     registry, arcgisUtils, domUtils, Popup, connect,
     Color, arrayUtils, parser, InfoTemplate, ClassBreaksRenderer, 
     CheckBox, domConstruct,           
     keys,SnappingManager, Measurement, GeometryService,esriConfig, has,
     BasemapGallery,
     LabelLayer, TextSymbol, Font, SimpleLineSymbol
      ) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Popup to DIV

KenBuja — Wed, 25 Jul 2018 17:02:43 GMT

Are there any messages in the console?

Re: Popup to DIV

jaykapalczynski — Fri, 10 Dec 2021 22:31:07 GMT

I don get anything in the console when I comment it out or uncomment it...

Right now I commented all the code we have been working on and simply trying to do the below. I get the Alert to show up but the app freezes and I don get anything in the console...

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

function Test() {
      alert("test");
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Popup to DIV

jaykapalczynski — Fri, 10 Dec 2021 22:31:10 GMT

Think I got it...I changed the Map.onload from this to this...still testing...Dont know why this would matter but it seems like it is working.

FROM THIS:

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

function Test() {
    alert("test");
}‍‍‍‍‍

TO THIS:

map.on('load', function () {
          
    // SNIP     

});     ‍‍‍‍‍

Re: Popup to DIV

jaykapalczynski — Wed, 25 Jul 2018 17:41:12 GMT

That seems to have done the trick....combining the on.load and function....although I dont understand why????

Thoughts? Thank you for your help....very much appreciated.

Re: Popup to DIV

KenBuja — Wed, 25 Jul 2018 18:04:26 GMT

There must have been some other syntax problem in your code. The load function works as expected using the basic Create a Map sample, although you should probably use

map.on('load', Test);‍