Popup to DIV

jaykapalczynski · ‎07-24-2018

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

KenBuja · ‎07-25-2018

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

jaykapalczynski · ‎07-25-2018

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

jaykapalczynski · ‎07-25-2018

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
      ) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

KenBuja · ‎07-25-2018

Are there any messages in the console?

jaykapalczynski · ‎07-25-2018

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

jaykapalczynski · ‎07-25-2018

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     

});     ‍‍‍‍‍

jaykapalczynski · ‎07-25-2018

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.

KenBuja · ‎07-25-2018

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

jaykapalczynski · ‎07-24-2018

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() {