Identify an area in a popup using javascript API-CodePudding

I am working to display the results of clicked area in a Popup, which allows users to easily navigate through the selected set of features. This helps streamline the process of displaying identify results. Rather than displaying the results from multiple features in separate tabs or as a complex tree-view structure, users can simply navigate forward and backward through the identify results.

But, when clicked my code is not showing the popup, I define the function in my code for the popup but still no achievement. Any suggestions?

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
  
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      .esri-popup .esri-popup-header .esri-title {
        font-size: 18px;
        font-weight: bolder;
      }

      .esri-popup .esri-popup-body .esri-popup-content {
        font-size: 14px;
      }
    </style>

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

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/rest/identify",
        "esri/rest/support/IdentifyParameters"
      ], function (Map, MapView, MapImageLayer, identify, IdentifyParameters) {
        var params;

        var identifyURL =
          "https://sampleserver6.arcgisonline.com/arcgis/rest/services/MtBaldy_BaseMap/MapServer";
        var identifyLayer = new MapImageLayer({
          url: identifyURL,
          opacity: 0.5
        });

        var map = new Map({
          basemap: "osm"
        });
        map.add(identifyLayer);

        var view = new MapView({
          map: map,
          container: "viewDiv",
          center: [-117.23502, 34.23911],
          zoom: 13
        });

        view.when(function () {
          view.on(executeIdentify);

          params = new IdentifyParameters();
          params.tolerance = 3;
          params.layerIds = [0, 1, 2, 3, 4];
          params.layerOption = "top";
          params.width = view.width;
          params.height = view.height;
        });

        function executeIdentify(event) {
          params.geometry = event.mapPoint;
          params.mapExtent = view.extent;
          document.getElementById("viewDiv").style.cursor = "wait";

          identify
            .identify(identifyURL, params)
            .then(function (response) {
              var results = response.results;

              return results.map(function (result) {
                var feature = result.feature;
                var layerName = result.layerName;

                feature.attributes.layerName = layerName;
                if (layerName === "Roads") {
                  feature.popupTemplate = {
                    title: layerName,
                    content:
                      "<b>Block ID:</b> {BLOCK_ID} "  
                      "<br><b>Geometry Type:</b> {Shape}"  
                      "<br><b>Road Length:</b> {Shape_Length}"
                  };
                } else if (layerName === "water") {
                  feature.popupTemplate = {
                    title: "{LABEL_LOCAL}",
                    content:
                      "<b>Block ID:</b> {BLOCK_ID} "  
                      "<br><b>Geometry Type:</b> {Shape}"  
                      "<br><b>Water Area:</b> {Shape_Area}"
                  };
                } else if (layerName === "Urban") {
                  feature.popupTemplate = {
                    title: layerName,
                    content:
                      "<b>Block ID:</b> {BLOCK_ID} "  
                      "<br><b>Geometry Type:</b> {Shape}"  
                      "<br><b>Urban Area:</b> {Shape_Area}"
                  };
                } else if (layerName === "Landuse") {
                  feature.popupTemplate = {
                    // autocasts as new PopupTemplate()
                    title: layerName,
                    content:
                      "<b>Block ID:</b> {BLOCK_ID} "  
                      "<br><b>Geometry Type:</b> {Shape}"  
                      "<br><b>Landuse Area:</b> {Shape_Area}"
                  };
                } else if (layerName === "Counties") {
                  feature.popupTemplate = {
                    title: layerName,
                    content:
                      "<b>ObjectID:</b> {OBJECTID} "  
                      "<br><b>Geometry Type:</b> {Shape}"  
                      "<br><b>Landuse Area:</b> {Shape_Area}"
                  };
                }
                return feature;
              });
            })
            .then(showPopup); // Send the array of features to showPopup()
          function showPopup(response) {
            if (response.length > 0) {
              view.popup.open({
                features: response,
                location: event.mapPoint
              });
            }
            document.getElementById("viewDiv").style.cursor = "auto";
          }
        }
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

CodePudding user response：

You didn’t declare the click function, definitely you define the function what will happen once you click, but where exactly in your code you mention that when you click this function will execute.

Replace your code as below:

 view.when(function () {
      // executeIdentify() is called each time the view is clicked
      view.on("click", executeIdentify);

      // Set the parameters for the identify
      params = new IdentifyParameters();
      params.tolerance = 3;
      params.layerIds = [0, 1, 2, 3, 4];
      params.layerOption = "top";
      params.width = view.width;
      params.height = view.height;
    });