topic Re: View.Popop.Open() Bugged for SceneView in 4.x? in ArcGIS JavaScript Maps SDK Questions

View.Popop.Open() Bugged for SceneView in 4.x?

AndrewLindley — Thu, 26 Apr 2018 21:40:59 GMT

I have a bit of code that programmatically opens a popup for a certain feature in a feature layer, but the resulting popup does not behave like I would expect. When viewed from NADIR, the location of the popup is correct, but if the sceneview is tilted, the popup does not stay at the specified location.

This is not the case if you click on the feature itself to open the popup. In that case, the popup works perfectly.

I put together a small codepen to illustrate the problem here: Popup Example

- Once in the codepen, click the button in the upper left and the popup will open view the view.popup.open() method, and you should see the weird behavior when you tilt the view.

- Then click the blue feature layer itself and you should see the popup reopen and exhibit the correct behavior.

Any insight into a fix would be much appreciated!

Thanks

Re: View.Popop.Open() Bugged for SceneView in 4.x?

AndrewTerwiel — Fri, 15 Jun 2018 04:33:44 GMT

Andrew,

Maybe try adding the z-coordinate (elevation) to the location of the popup.

Re: View.Popop.Open() Bugged for SceneView in 4.x?

AndrewLindley — Tue, 19 Jun 2018 00:46:26 GMT

Thanks for replying, Andrew.

That's not a bad idea, but the polygons that the popups are tied to don't have z values, and neither does the centroid of the polygons.

The click-triggered popup does include z-values, so I bet that would fix my issue if I had access to those z values, but unfortunately I don't.

Any idea how to calculate the z values for polygons that don't come with that data? There must be a way if the popup can do it on it's own..

Re: View.Popop.Open() Bugged for SceneView in 4.x?

AndrewTerwiel — Sun, 12 Dec 2021 00:52:47 GMT

How about creating another layer from the same data and set it's elevationinfo like this:

elevationInfo: {            
    mode: "onTheGround"        
},‍‍‍‍‍‍‍

Then apply your popuptemplate to this layer instead of the other one

Re: View.Popop.Open() Bugged for SceneView in 4.x?

AndrewLindley — Mon, 25 Jun 2018 20:00:46 GMT

Good idea, but the 'on-the-ground' elevation is set by default, and doesn't make a difference if set explicitly.

It seems like the API must be capable of calculating the centroid of a polygon given only its rings' x and y values, as when I click on a feature to open the popup, the resulting popup has the z information. I just can't figure out how it's doing the calculation.

Re: View.Popop.Open() Bugged for SceneView in 4.x?

ChristianBischof — Sun, 12 Dec 2021 00:52:50 GMT

How about if you try to calculate a median or average z value of all the features you have (if there are multiple ones) and then add this z value to the popup properties.

Or if you have just this one single feature simply use the z value of the popup. (not very clean but it should prevent doing weird stuff).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

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

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        padding: 0px;
        margin: 0px;
      }
      #button {
        position: absolute;
        top: 20px;
        left: 75px;
      }
    </style>
    <script>
      var view;
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/FeatureLayer",
        "esri/Viewpoint",
        "esri/widgets/Popup",
        "esri/PopupTemplate",
        "dojo/domReady!",
      ], function (
        Map,
        SceneView,
        FeatureLayer,
        Viewpoint,
        Popup,
        PopupTemplate
      ) {
        var map = new Map({
          basemap: "satellite",
          ground: "world-elevation",
        });

        view = new SceneView({
          container: "viewDiv",
          map: map,
          scale: 50000,
          center: [-81.8114, 36.111],
          popup: {
            dockEnabled: false,
          },
        });

        var popupTemplate = new PopupTemplate({
          title: "Grandfather Mountain",
          content: "Deed Acres: {DEED_ACRES}",
          fieldInfos: [
            {
              fieldName: "*",
            },
          ],
        });

        var featureLayer = new FeatureLayer({
          url:
            "http://services6.arcgis.com/oJtkpoIEQgwrMNBU/ArcGIS/rest/services/TCF_Grandfather_Mountain/FeatureServer/0",
          popupTemplate: popupTemplate,
        });

        map.add(featureLayer);

        let button = document.getElementById("button");
        button.addEventListener("click", myFunction);

        let zoomLocation = new Viewpoint({
          camera: {
            position: [-81.8114, 36.111, 10000],
            heading: 0,
            tilt: 0,
          },
        });

        //calc medianZ function
        function medianZ(){
            //calculate median z value of all features
            //to compensate the weird behaviour as good as possible
            calculatedZValue = 1524.6
            return calculatedZValue
        }

        function myFunction() {
          view.goTo(zoomLocation).then(function () {
            view
              .whenLayerView(featureLayer)
              .then(function (lyrView) {
                return lyrView.queryFeatures();
              })
              .then(function (graphics) {
                view.popup.open({
                  location: {
                    latitude: graphics[0].geometry.centroid.latitude,
                    longitude: graphics[0].geometry.centroid.longitude,
                    z: medianZ()
                    //z: 1524.6 or use the single value if there is only one feature
                  },
                  features: graphics,
                  elevationInfo: "on-the-ground"
                });
              });
          });
        }
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <button id="button">Click Me!</button>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍