TransWikia.com

Two PopupTemplates

Geographic Information Systems Asked by Pfalbaum on November 12, 2020

I’m using this sample code from ESRI ArcGIS API for Javascript 4.16:
https://developers.arcgis.com/javascript/latest/sample-code/widgets-feature-sidepanel/index.html

I would like to display these fields from my Feature Layer attributes, which I have here in a var, as the popup content:

 //popuptemplate for table
  var template = {
    //autocasts the new template
    title: "<font size='2.75px'><b>{USER_Name}</b>",
    content: [
      {
        //set content elements in the order to display
        type: "fields",
        fieldInfos: [
          {
            fieldName: "USER_Addre",
            label: "Address",
            visible: true
          },
          {
            fieldName: "USER_City",
            label: "City",
            visible: true
          },
          {
            fieldName: "USER_Zip",
            label: "Zip Code",
            visible: true
          },
          {
            fieldName: "USER_Phone",
            label: " Phone",
            visible: true
          },
          {
            fieldName: "USER_Link",
            label: "Website",
            visible: true
          },
          {
            fieldName: "USER_Notes",
            label: "Extra Notes",
            visible: true
          }
        ]
      }
    ]
  };

I also have a var for descriptive text based on the Description field of the same Feature Class.

        //popuptemplate2 for description
var template2 = {
    //autocasts the new template
    title: "<font size='2.75px'><b>{USER_Name}</b>",
    content: [
      {
        //set a descriptive text element
        type: "text", // TextContentElement
        text: "<font color='#1c9c52'><b>{Description}</b>"
      },
      ]
  };

How can I get both popuptemplates to display on the map? I’d like the table to be in the popup and the description to be the graphic of the feature widget in the "sidebar" div. For example, I want it to look like this:

enter image description here

Right now, it looks like this:

enter image description here

Here’s the whole code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>
      Feature widget in a side panel | Sample | ArcGIS API for JavaScript 4.16
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>

    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #viewDiv {
        float: left;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

#sidebar {
    z-index: 99;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    width: 380px;
}

.esri-widget {
    color: white;
    font-size: 14px;
    font-family: "Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.3em;
}
    </style>

    <script>
      require([
        "esri/WebMap",
        "esri/layers/FeatureLayer",
        "esri/views/MapView",
        "esri/widgets/Feature"
      ], function (WebMap, FeatureLayer, MapView, Feature) {
        
        //popup template for table
  var template = {
    //autocasts the new template
    title: "<font size='2.75px'><b>{USER_Name}</b>",
    content: [
      {
        //set content elements in the order to display
        type: "fields",
        fieldInfos: [
          {
            fieldName: "USER_Addre",
            label: "Address",
            visible: true
          },
          {
            fieldName: "USER_City",
            label: "City",
            visible: true
          },
          {
            fieldName: "USER_Zip",
            label: "Zip Code",
            visible: true
          },
          {
            fieldName: "USER_Phone",
            label: " Phone",
            visible: true
          },
          {
            fieldName: "USER_Link",
            label: "Website",
            visible: true
          },
          {
            fieldName: "USER_Notes",
            label: "Extra Notes",
            visible: true
          }
        ]
      }
    ]
  };
  
          //popup template for description
var template2 = {
    //autocasts the new template
    title: "<font size='2.75px'><b>{USER_Name}</b>",
    content: [
      {
        //set a descriptive text element
        type: "text", // TextContentElement
        text: "<font color='#1c9c52'><b>{Description}</b>"
      },
      ]
  };
        
        const fLayer = new FeatureLayer({
          portalItem: {
            id: "b5665da3feab4b6091914cbfe4ab028f"
          },
          popupTemplate: template2,
          layerId: 0,
          outFields: ["*"]
        });

        const map = new WebMap({
          basemap: "dark-gray",
          layers: [fLayer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-88.7, 41.8],
          zoom: 8.7,
          popup: {
            autoOpenEnabled: true
          }
        });

        view.when().then(function () {
          // Create a default graphic for when the application starts
          const graphic = {
            popupTemplate: {
              content: "To change search from Item to Category, make sure Search by Item dropdown is set to 'Select One'. Businesses should note that they will find more appropriate listings if they check Business under the search box."
            }
          };

          // Provide a graphic to a new instance of a Feature widget
          const feature = new Feature({
            container: "sidebar",
            graphic: graphic,
            map: view.map,
            spatialReference: view.spatialReference
          });

          view.whenLayerView(fLayer).then(function (layerView) {
            let highlight;
            // listen for the pointer-move event on the View
            view.on("click", function (event) {
              // Perform a hitTest on the View
              view.hitTest(event).then(function (event) {
                // Make sure graphic has a popupTemplate
                let results = event.results.filter(function (result) {
                  return result.graphic.layer.popupTemplate;
                });
                let result = results[0];
                highlight && highlight.remove();
                // Update the graphic of the Feature widget
                // on pointer-move with the result
                if (result) {
                  feature.graphic = result.graphic;
                  highlight = layerView.highlight(result.graphic);
                } else {
                  feature.graphic = graphic;
                }
              });
            });
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="sidebar" class="esri-widget"></div>
    <div id="viewDiv"></div>
  </body>
</html>
arcgis javascript apifeature classjavascriptpopup

One Answer

You actually almost got it. The problem in your code is that you are using template2 in the feature layer flayer.

In order to get the result you want,

  1. use template for flayer,
const fLayer = new FeatureLayer({
  portalItem: {
    id: "b5665da3feab4b6091914cbfe4ab028f"
  },
  popupTemplate: template, // <- template for popup
  layerId: 0,
  outFields: ["*"]
});
  1. Once the feature is selected and you obtain it, set it template2,
if (result) {
  feature.graphic = result.graphic.clone(); // <- clone it to avoid mutation
  feature.graphic.popupTemplate = template2; // <- template2 for feature widget
  highlight = layerView.highlight(result.graphic);
} else {
  feature.graphic = graphic;
}

Correct answer by cabesuon on November 12, 2020

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP