nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Popup does not work after elevation widget

Vakhtang_Zubiashvili

Hello again,

I have issue: I have mapView and I use elevation profile widget on it, it works perfect, shows elevation data as shoudl, but after it I can't use Popup, I click on map, but nothing happens. What might be cause?

thanks,

Finde mehr Beiträge mit dem Tag

Accepted answers

kenbuja

I'm wondering if this is a bug. I get the same results when adding the widget to the PopupTemplate sample.

<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Intro to PopupTemplate | Sample | ArcGIS API for JavaScript 4.19</title>

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

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

  <script>
    require([
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/views/MapView",
      "esri/widgets/Legend",
      "esri/widgets/ElevationProfile"
    ], (Map, FeatureLayer, MapView, Legend, ElevationProfile) => {
      // Create the map
      const map = new Map({
        basemap: "gray-vector",
        ground: 'world-elevation'
      });

      // Create the MapView
      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-73.95, 40.702],
        zoom: 10
      });

      view.ui.add(new Legend({ view: view }), "bottom-left");

      /*************************************************************
       * The PopupTemplate content is the text that appears inside the
       * popup. {fieldName} can be used to reference the value of an
       * attribute of the selected feature. HTML elements can be used
       * to provide structure and styles within the content. The
       * fieldInfos property is an array of objects (each object representing
       * a field) that is use to format number fields and customize field
       * aliases in the popup and legend.
       **************************************************************/

      const template = {
        // autocasts as new PopupTemplate()
        title: "{NAME} in {COUNTY}",
        content: [
          {
            // It is also possible to set the fieldInfos outside of the content
            // directly in the popupTemplate. If no fieldInfos is specifically set
            // in the content, it defaults to whatever may be set within the popupTemplate.
            type: "fields",
            fieldInfos: [
              {
                fieldName: "B12001_calc_pctMarriedE",
                label: "Married %"
              },
              {
                fieldName: "B12001_calc_numMarriedE",
                label: "People Married",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              },
              {
                fieldName: "B12001_calc_numNeverE",
                label: "People that Never Married",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              },
              {
                fieldName: "B12001_calc_numDivorcedE",
                label: "People Divorced",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              }
            ]
          }
        ]
      };

      // Reference the popupTemplate instance in the
      // popupTemplate property of FeatureLayer
      const featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2",
        popupTemplate: template
      });
      map.add(featureLayer);

      const elevationProfile = new ElevationProfile({
        view: view,
        profiles: [
          {
            type: "ground" // first profile line samples the ground elevation
          },
          {
            type: "view" // second profile samples the view and shows building profiles
          }
        ],
        // hide the select button
        // this button can be displayed when there are polylines in the
        // scene to select and display the elevation profile for
        visibleElements: {
          //selectButton: false
        }
      });

      // add the widget to the view
      view.ui.add(elevationProfile, "top-right");
    });
  </script>
</head>

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

All comments

kenbuja

Yes, open a case with Esri to verify that it is a bug.

Vakhtang_Zubiashvili

Yes, i think same ,

So what we do know? Let ESRI knw that it is a bug?

kenbuja

I'm wondering if this is a bug. I get the same results when adding the widget to the PopupTemplate sample.

<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Intro to PopupTemplate | Sample | ArcGIS API for JavaScript 4.19</title>

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

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

  <script>
    require([
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/views/MapView",
      "esri/widgets/Legend",
      "esri/widgets/ElevationProfile"
    ], (Map, FeatureLayer, MapView, Legend, ElevationProfile) => {
      // Create the map
      const map = new Map({
        basemap: "gray-vector",
        ground: 'world-elevation'
      });

      // Create the MapView
      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-73.95, 40.702],
        zoom: 10
      });

      view.ui.add(new Legend({ view: view }), "bottom-left");

      /*************************************************************
       * The PopupTemplate content is the text that appears inside the
       * popup. {fieldName} can be used to reference the value of an
       * attribute of the selected feature. HTML elements can be used
       * to provide structure and styles within the content. The
       * fieldInfos property is an array of objects (each object representing
       * a field) that is use to format number fields and customize field
       * aliases in the popup and legend.
       **************************************************************/

      const template = {
        // autocasts as new PopupTemplate()
        title: "{NAME} in {COUNTY}",
        content: [
          {
            // It is also possible to set the fieldInfos outside of the content
            // directly in the popupTemplate. If no fieldInfos is specifically set
            // in the content, it defaults to whatever may be set within the popupTemplate.
            type: "fields",
            fieldInfos: [
              {
                fieldName: "B12001_calc_pctMarriedE",
                label: "Married %"
              },
              {
                fieldName: "B12001_calc_numMarriedE",
                label: "People Married",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              },
              {
                fieldName: "B12001_calc_numNeverE",
                label: "People that Never Married",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              },
              {
                fieldName: "B12001_calc_numDivorcedE",
                label: "People Divorced",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              }
            ]
          }
        ]
      };

      // Reference the popupTemplate instance in the
      // popupTemplate property of FeatureLayer
      const featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2",
        popupTemplate: template
      });
      map.add(featureLayer);

      const elevationProfile = new ElevationProfile({
        view: view,
        profiles: [
          {
            type: "ground" // first profile line samples the ground elevation
          },
          {
            type: "view" // second profile samples the view and shows building profiles
          }
        ],
        // hide the select button
        // this button can be displayed when there are polylines in the
        // scene to select and display the elevation profile for
        visibleElements: {
          //selectButton: false
        }
      });

      // add the widget to the view
      view.ui.add(elevationProfile, "top-right");
    });
  </script>
</head>

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

Vakhtang_Zubiashvili

Hi Ken,

Sorry for this , i did not notice...

Here is code only with basic widgets and Elevation Profile Widget, also one FL with popupTemplate and Custom Symbol...

I noticed that, before making Elevation profile, popup works, but after i make Profile by clicking on map and it creates graphic line on map (like elevation path), after this i can not call popup 😕

Here is a working file,

Thanks

index_for_ken.zip

kenbuja

Wow....4300 lines of code is way too much for me to wade through. Can you distill this down to a short example that replicates your problem?

Vakhtang_Zubiashvili

Hi Ken,

I update working file here, you can simply check, I see errors only from imported libraries (it no problem, u can ignore and type error, this u can ignore too, it is old errors 😄 ). I really do not understand what is problem, i out widget at top and at the end too of the code, but get same result 😞

index.zip

kenbuja

Are you seeing any error messages in your console? Can you either post your code or put together a code sample that reproduces the error?

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.