Prevent Popup template to shows multiple feature in ArcGIS 4.16 Angular 10

Question

Prevent Popup template to shows multiple feature in ArcGIS 4.16 Angular 10

953 views Asked by Adam-KER At 11 September 2024 at 04:39

I have integrated a popup on the map for a specific layer. Some time the poup shows pagination (featureNavigation) multiple data. Sometimes it fails to show the data, or mismatch in the data that actually the service returns.

    var popupTrailheads = {
            title: "ID: {ID}",
            content: this.getcustomcontent.bind(this),
          };
          // Add layer special layer
          this.layer_fifteen = new FeatureLayer({
            url: `${this.esriURL}/15`,
            visible: true,
            outFields: ['*'],
            popupTemplate: popupTrailheads,
          });
    
     getcustomcontent(feature) {
    // The popup content will become here from angular service
return `<div>content</div>`;
    }

I have a few options to fix the issue. 1)Popup for this layer enables only at a specific Zoom level. Else the popup won't appear. 2)The click on the map should trigger only for a point. (I believe when click on the layer it triggers multiple points that is the reason it shows multiple feature details.)

Can you please suggest an idea, how to enable a popup in specific zoom level, or select only one feature in one click on the map.

Thanks in advance.

Original Q&A

There are 1 answers

**cabesuon** · Accepted Answer · 2020-10-15 16:55:01

So, there are a number of possible ways to enable the popup under certain conditions, like the zoom level of the view.

In the example that I made for you popup only opens if zoom is greatest than 10.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>PopupTemplate - Auto Open False</title>

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

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

  <script>
    var populationChange;
    require(["esri/Map", "esri/views/MapView", "esri/layers/Layer"], function (
      Map,
      MapView,
      Layer
    ) {
      var map = new Map({
        basemap: "dark-gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 7,
        center: [-87, 34]
      });

      var highlightSelect = null;

      Layer.fromPortalItem({
        portalItem: {
          id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
        }
      }).then(function (layer) {
        map.add(layer);

        var popupTemplate = {
          title: "Population in {NAME}",
          outFields: ["*"],
          content: [{
            type: 'fields',
            fieldInfos: [
              {
                fieldName: "POP2010",
                format: {
                  digitSeparator: true,
                  places: 0
                },
                visible: false
              },
              {
                fieldName: "POP10_SQMI",
                format: {
                  digitSeparator: true,
                  places: 2
                }
              },
              {
                fieldName: "POP2013",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              },
              {
                fieldName: "POP13_SQMI",
                format: {
                  digitSeparator: true,
                  places: 2
                }
              }
            ]
          }],
        };
        layer.popupTemplate = popupTemplate;
        function populationChange(feature) {
          var div = document.createElement("div");
          var upArrow =
            '<svg width="16" height="16" ><polygon points="14.14 7.07 7.07 0 0 7.07 4.07 7.07 4.07 16 10.07 16 10.07 7.07 14.14 7.07" style="fill:green"/></svg>';
          var downArrow =
            '<svg width="16" height="16"><polygon points="0 8.93 7.07 16 14.14 8.93 10.07 8.93 10.07 0 4.07 0 4.07 8.93 0 8.93" style="fill:red"/></svg>';

          var diff =
            feature.graphic.attributes.POP2013 -
            feature.graphic.attributes.POP2010;
          var pctChange = (diff * 100) / feature.graphic.attributes.POP2010;
          var arrow = diff > 0 ? upArrow : downArrow;

          div.innerHTML =
            "As of 2010, the total population in this area was <b>" +
            feature.graphic.attributes.POP2010 +
            "</b> and the density was <b>" +
            feature.graphic.attributes.POP10_SQMI +
            "</b> sq mi. As of 2013, the total population was <b>" +
            feature.graphic.attributes.POP2013 +
            "</b> and the density was <b>" +
            feature.graphic.attributes.POP13_SQMI +
            "</b> sq mi. <br/> <br/>" +
            "Percent change is " +
            arrow +
            "<span style='color: " +
            (pctChange < 0 ? "red" : "green") +
            ";'>" +
            pctChange.toFixed(3) +
            "%</span>";
          return div;
        }

        view.popup.autoOpenEnabled = false; // <- disable view popup auto open
        view.on("click", function (event) { // <- listen to view click event
          if (event.button === 0) { // <- check that was left button or touch

            console.log(view.zoom);
            if (view.zoom > 10) { // <- zoom related condition to open popup

              view.popup.open({ // <- open popup
                location: event.mapPoint, // <- use map point of the click event
                fetchFeatures: true // <- fetch the selected features (if any)
              });

            } else {
              
              window.alert(`Popup display zoom lower than 10 .. Zoom in buddy! .. (Current zoom ${view.zoom})`);

            }

          }
        });
      });
    });
  </script>
</head>

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

</html>

Related to only display one result in the popup, you could hide the navigation like this,

view.popup.visibleElements.featureNavigation = false;

Now if what you actually want is to get only one result, then I suggest to use view method hitTest, that only gets the topmost result of the layers. You could do this after inside the click handler and only open if any result of desire layer. For this you need to set featFeatures: false, and set the features with the hit one.

Just as a comment it could result weird or confusing to the user retrieve just one of all possible features. I think probable you may have a problem with the content.

TechQA.

Prevent Popup template to shows multiple feature in ArcGIS 4.16 Angular 10

There are 1 answers

Related Questions in ARCGIS

Related Questions in ARCGIS-JS-API

Related Questions in ANGULAR10

Related Questions in ESRI-LOADER

Popular Questions

Popular Tags

Trending Questions