Adding multiple DOM Nodes to popup content

699
3
01-06-2021 05:41 AM
JustinBridwell2
Occasional Contributor II

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>" 
3 Replies
JohnGrayson
Esri Regular Contributor

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.

JustinBridwell2
Occasional Contributor II

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

 

0 Kudos
GavinRehkemper
Esri Contributor

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

0 Kudos