Adding multiple DOM Nodes to popup content

JustinBridwell2 — Wed, 06 Jan 2021 13:41:01 GMT

I am using a popup on my mapView from arcGIS API for Javascript 4.17. When the user opens the popup, I have set the following attributes:

    view.popup.open({
        // Set the popup's title to the coordinates of the clicked location
        title: "Location Coordinates: [" + lon + ", " + lat + "]",
        location: event.mapPoint, // Set the location of the popup to the clicked location
        content: setContentInfo(view.center, view.scale),
        actions: [risk_snapshot, ble_report, print_report, lidar_report]
    });

In the popup, I am adding some smaller maps using a function called setContentInfo that returns a "masterDiv" DOM node with the maps. However, I want to add an additional DOM Node outside of that div to the content. The function is essentially setup as below. How can you add multiple items -DOM Nodes to content?

function setContentInfo(center, scale) {
    var popupDiv1 = document.createElement("div");
    popupDiv1.classList.add("mapViewLeft");

    var popupView1 = new MapView({
        container: popupDiv1,
        map: map,
        actions: [],
        center: view.center,
        zoom: view.zoom,
        scale:
            view.scale *
            2 *
            Math.max(view.width / 250, view.height / 250),
        constraints: {
            rotationEnabled: false
        },
        ui: {
            components: []
        }
    });

    var popupDiv2 = document.createElement("div");
    ...

    var popupMasterDiv = document.createElement("div");
    popupMasterDiv.id = "masterDiv";
    popupMasterDiv.style.width = "650px";
    popupMasterDiv.style.height = "450px";
    var theDiv = document.getElementById("masterDiv");
    popupMasterDiv.appendChild(popupDiv1);
    popupMasterDiv.appendChild(popupDiv2);
    popupMasterDiv.appendChild(ble_report);
    
    // Return a dom node
    //return popupView.container;
    return popupMasterDiv;
}

To test, I have tried adding var test = document.createElement("div"); test.textContent = "Hey"; and then adding

   popupMasterDiv.appendChild(popupDiv1);
   popupMasterDiv.appendChild(popupDiv2);
   popupMasterDiv.appendChild(test);

but it puts the "Hey" in the middle of the 2 maps. I also tried adding the above straight to the content like this:

  content: setContentInfo(view.center, view.scale) + test,

But that removes the map content and only displays "Hey"

What I want is to add a nice little table in its own div under the maps with something like this. What am I doing wrong here; how can I achieve this:

var table1 = "<table id="info">
                <tr>
                  <th>Location</th>
                  <th>        </th>
                </tr>
                <tr>
                  <td>Coordinates</td>
                  <td>Parcel ID</td>
               </tr>
               <tr>
                 <td>123.345, -43.432</td>
                 <td>12345</td>
               </tr>
             </table>"

Re: Adding multiple DOM Nodes to popup content

JohnGrayson — Wed, 06 Jan 2021 16:30:40 GMT

Do you have a codepen/jsbin showing the issue? Having a simplified working example of just the issue at hand to inspect (and modify) with will allow members of the community to experience the issue and maybe even provide suggestions or workarounds.

Re: Adding multiple DOM Nodes to popup content

JustinBridwell2 — Wed, 06 Jan 2021 19:21:33 GMT

Essentially, the DOM Node example from ESRI is in CodePen. I am just trying to add my table to the popup.contents. Here's the link: https://codepen.io/pen?&editors=100

Re: Adding multiple DOM Nodes to popup content

GavinRehkemper — Thu, 07 Jan 2021 15:55:29 GMT

Can you please double-check the codepen URL you posted? It currently goes to a blank page.

topic Adding multiple DOM Nodes to popup content in ArcGIS JavaScript Maps SDK Questions

Adding multiple DOM Nodes to popup content

Re: Adding multiple DOM Nodes to popup content

Re: Adding multiple DOM Nodes to popup content

Re: Adding multiple DOM Nodes to popup content